Web design

Research & Insiration

Food related websites

My brand is related to food and drink, most, if not all brands have a website to accompany them, the sites give recipes, information, shops and faq’s, i believe that the MIX brand needs a supporting website, so decided to look at inspirational food websites to start my designs, i chose to direct what i looked at, towards unique and independent designs, a few that caught my eye, were those that are slightly animated and interactive, i then noticed that many used full screen layouts, rather than standard menu and grid content that we are used to seeing.

These design highly influenced and motived my designs, but to continue further i decided to look at other styles of web design, such and commerce websites and sites that promote a product for better sales and recognition…

e-commerce website inspiration

Above are the other web design example that i looked at, these sites didn’t particularly give me inspiration for the design but guided me in terms of layout and positioning for the pages and also how to accurately display the product to motivate the viewer or user to buy it, from looking at the sites i had so far i deducted that less colour is better, as most of these sites only use a limited palette and are very subtle, other than that they hold the same values of any website on the internet, with pages consisting of ‘HOME’, ‘ABOUT’, ‘CONTACT’ and so on…

Drinks companies websites (the competition)

Finally to conclude the web research and inspiration segment of this part of the project i looked at the websites of the drinks companies on the self in my local supermarket to see if they did anything unique or interesting for there deigns, i found that many are quite standard and plain design (other than the flashy graphics), however none seem very interactive or stimulating. They all have there perks and unique selling points, for example the pepsi website uses horizontal scrolling and a static navigation bar, i wanted to design a completely different and distinctive design for my brand, which brings me to the brainstorming segment.

Brainstorming

Initial idea/thumbnails:

The above images are the thumbnails that i started my design with, the challenge, or hurdle i had to overcome was the visual style of the website, form looking at research i found that a lot of the sites use a large amount of imagery, both vector and  photography, as i haven’t aquired many images of my product, because it is in the prototype stage, i decided to use a heavily vector based theme throughout the site, this also meant that the vector infographic would compliment the style and would collaborate well with the recognisably of the brand.

After sketching out some of the original designs, where i used the standard grid method for the layout (top banner navigation and vertical scrolling 2-3 column grid content), i thought that this didn’t convey the image of the brand and felt quite bland and too plain, i put myself the shoes of the user and deducted that i would not be entertained or intrigued by this site, so i decided to look back at the food wed inspiration to see if there could be anything to influence a stronger design, this brought me to design a site that was based around the prospect of it being created in a programme such as Adobe flash, which gave the design a lot more space to expand and adapt.

Like with all of the elements i have designed for the mix brand i used the set colour scheme ,that i set myself, throughout the designs of the site, with the exception of imagery such as photos of the product and vector imagery that requires a slight deviation of the strict palette.

The final design that i chose to develop could have gone down two routes;

one: a interactive parallax animation on scroll style website (where elements of the site move, scale and change due to the user scrolling through the page), this design meant that the site uses only one page and the top bar navigations link to the segment on that page.

two: Each section has its own page, the site opens up on the ‘home’ page and when a link is clicked a page top page animation is initiated, links are animated and wobble and most images, infographics and icons are vectors based and use the set colour scheme

Generating and selecting ideas

*wireframes

developments

The above images are my final mock-ups, with exception of the spaces reserved for photos or links, i chose to use option one as the final navigation method, however it is hard to show this from the visual stills, all of the pages are vertically below each other.

The navigation bar will appear when the user scrolls past the home segment and will be permanently there at the top of the page throughout the users time on the site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s