weCook – Graduate Project – Website Design

April 13th, 2017

Figure 1.6:  Navbar initial colour scheme and updated colour and logo design

 

 I decided to change the colour of the brand midway through designing the website. The initial ‘Cornflower blue’ didn’t stand out as much as i’d hoped and didn’t grab my attention. The colour change also made the elements of the header stand out.

 

Feedback

When I presented this colour change and showed them the website, they immediately stated that it looked like ‘Facebook’. The colours are reasonably different, however I can see where the layout is similar to my site.
For this I may look into removing the search bar from the navbar and move it to the header or slightly lower down. I am happy at the moment with the blue colour scheme however I may change the colour palette if I feel the link to Facebook is possibly seen as a bad thing or just as a straight copy.

Figure 1.7:  Navbar of Facebook

 

For the website I looked into flat design, particularly inspired by Google’s Flat design principles.

https://material.io/icons/

https://design.google.com/

The bold colour scheme and the large flat icons particularly interested me. I wanted to incorporate some of the ideas to my design to make the website easy to use and have a clean design. I however wanted to stay clear of the drop shadows which I believe keeps Google’s ideas away from flat design with the elements of skeuomorphism.

I also wanted to look at flat design for the main elements of the website, the clean and simple shaping would create an easier environment to interact with for the user. I looked also at Microsoft’s Metro design language. The inspiration from the tiles and flat colours from this led me to think about grid systems and Josef Müllers ,“Grid Systems in Graphic Design” (Müller-Brockmann, 1988) a book I had looked at previously for layout inspiration.

The design of the main splash page followed this grid idea, with the most recent ‘popular’ recipes in a grid layout. This allows images of the recipes to be shown, and quicker navigation for the user.

Figure 1.8:  Grid layout of the popular recipe section of the main splash page.

 

The one problem I can initially see is the ability to rename the recipe for the user, and having the name not be clearly read by the other users. This could be fixed by possibly either having a changing sized label, leaving it stand out from the other recipes, or to give a limit to the name of the recipe on the user create page.

Figure 1.9:  Splash page design

 

Figure 2.0:  Header section of the recipe page

 

 My initial designs for the header section are a little dissimilar from the newer designs I was making. I also am now looking at the current method containers and may change them possibly to a new sharper edged container.

Figure 2.1:  Recipe page design, using a new grey colour and smaller text elements

 

 The newer styling of the recipe page in Figure 2.1 shows a new grey colour and a style more matching of the subnav in the first page design.

The use of a smaller font and the use of sharper edged elements seem to make the website seem more formal. The previous use of soft edged elements on the method section shown below may be changed after some feedback and design experimenting.

Figure 2.2:  Soft edge design for the method and ingredients

 

 Both elements have a larger font and in some ways make it easier for the user to interact with the page. Both designs have their own distinct benefits. With the newer design being more formal in some ways and the older ‘rounded edge’ design above in Figure 2.2 being easier to read but being to childlike and overly simplistic. With the minimal design theories i’m following I don’t want to go as far as to make the design look childish. The target audience for the website are young adults who are interested in cooking and being socially active and I wouldn’t want them to believe they are using a kids website.

Figure 2.3:  4 Variants of the method style elements l-r (original, new-grey, new-black, new-blue)

 

 I liked the colour of the blue for the elements of the method, the separation could be nice showing the difference between a ‘live’ page and an editing page. I may look into using a colour of grey to symbolise the editing and creating mode and blue for the final and finished elements.

I think I may move away from the larger elements on top of Figure 2.3, even though I do like them, just because a consistent style throughout the whole website is as important as usability. I may look into changing the padding and font size to make the website as clear as it seems in this style element.

Figure 2.4:  3 Versions of the Ingredients section, top to bottom ( curved, sharp edged, edit)

 

 The change to the method section led me to think about changing the ingredients section as well. The round edges looked out of place with the new ‘sharp edge’ look and so I went about changing them. Whilst doing this and looking at the font-size of the text I also thought about adding a smaller edit button inline with the ingredients. This would only be viewable during ‘edit mode’ as it would be obtrusive to the passive user.

This will have to be looked at later, but using a smaller font will lead to looking into smaller icons to match and be still easily viewed.

Figure 2.5:  3 Updated recipe page using the newer ‘sharp edge’ elements

 

 Looking at this design made a lot more sense with the continuation of the style of the website. I may look into increasing the font-size of the paragraphs from 13px to a larger size later, after the site is made and user testing can occur.

At this point in time I am happy with the main elements of the page, I may arrange the editing buttons and a few elements to make it clearer, however the general style is what I will continue with.

Figure 2.6:  New user create page

 

 I finished this page recently after deciding to follow with the new sharp edge design. The page also shows the colour feature to allow the users to separate themselves. This will be a select colour palette borrowed from Apple’s iOS colour scheme. Certain colours couldn’t be allowed as they wouldn’t show up on the white background. Another reason for giving a select colour scheme is to allow users to get the same colour, encouraging bonding possibly for users with similar colours. I may also in the future think of a special colour for admins, mods and special users (possibly celebrities) I realise this is a long shot but it would be nice to reserve some colours to distinct those users from the others.

 

Feedback

“The button style is bold, but not in a bad way. The size is a good thing, as it makes the element visible but doesn’t seem ‘childish’ at all really. “

I also talked about different elements of the form and possibly adding a name and quantity to the ingredients section. This would make adding the ingredients more convenient and make more sense. We also talked about possibly adding the ability to buy the ingredients from this page, or be directed to a shop if there was an api available. This could be interesting to add, however I believe the website’s main feature is to allow social cooking, and not particularly a whole cooking experience. But this could be something to look into in the future.

Figure 2.8:  Versions of the main navbar

 

 Thinking back to the Facebook links some people made I decided to look into changing  the navbar. In the Figure above I’ve changed the search bar and logo in an attempt to move away from the similar layout Facebook has.

I was first initially struggling to have a coloured user icon shown with the header. Because of the different colours the user could pick, the background container would have to match the style of the design and not clash too much. This initially led me to think about changing the background of the nav to a white, killing two birds with one stone in a sense, by removing the association with Facebook and allowing a multiple coloured choice for the user. This however didn’t look great in the whole page, the nav didn’t stand out from the sub-nav below and the page didn’t pop like it used to.

I then thought again about other possible things the navbar should have on it, and how the arrangement would make the most sense. I decided to put the search on the side, removing the Facebook look, as well as changing the position of the user and submit buttons.

I finally incorporated the search and user into the same element, as by itself I felt it didn’t fit with the clean and minimal vision I was looking for. The white background allows all the colours to work, and not clash with the design. I also added some other menu elements, which may be used in the future, for more information and updates on new features etc for the website.

I may also look into adding more aspects of sociality to this nav, such as messages etc possibly in the future, if the website becomes more popular.

Figure 2.9:  Updated ‘popular’ navbar

 

 The hashtags on the navbar were not very easy to read and were almost lost in the whole design. They didn’t seem to be noticed and needed to be clearer. Adding a background to them gave them a similar look to the new design for the header section on the recipe page I was working on.