Before I began working on my draft layout, I had created a survey via SurveyMonkey in order to gain a better understanding of how the target audience views websites. I posted the survey link on social media sites in order to potentially draw in people who were outside the audience demographic; this would allow for a wider range of results.

After gaining some survey responses, I had found that only people within the target audience (both genders 18 and over) had answered, however the data is still valid. Website 1 was Love Food Hate Waste, Website 2 was Foodcycle and Website 3 was FoodLoop. The results of the survey are listed here.

There is a slight risk that the results may be biased. Due to some questions being skipped it does not necessarily reflect every individual’s point of view, however because this anomaly is so small it is not likely to have a significant effect on my data.

After analysing the results, it seems clear that most people prefer the structure, aesthetics and layout of Website 1 (Love Food Hate Waste). Looking at some of the responses I have concluded that Website 3 would be more suitable for a tablet/mobile app, but certainly not for a desktop website. When it comes to designing my own website I should take elements from Website 1 and apply this, as this would be the most appropriate and effective way of engaging the user and making the product easy to use.

After researching into the structure and functionality for my website, the next part of the process was to look into the aesthetics and design. I had looked at the websites I had already used for inspiration and found that they had a recurring theme throughout, all of which they are similar. One key thing I noticed was that they all used the colour green; quite clearly to represent food, environment and healthy living. Although this is a theme I want to implement into my design, I also need to include the aspect of social media, therefore the colours and overall layout need to be altered in order to fulfil both purposes. Below is a list of screenshots of the websites I had mentioned in my proposal evidencing the layout and colour schemes they use:

Food waste websites

These websites all utilise a similar layout- they all have a banner with ‘tabs’ or buttons at the top of the page so that the user is clearly informed on how to navigate the site. They all include a main image which draws the user’s attention and helps to establish the sites purpose and aims. They also use basic shapes such as circles and rectangles- this helps to create some sort of form and structure in which the user can scan the page and easily spot the assets on which they need to click on. I will be using a similar layout in my own project to ensure that the site is legible and easy to use for the target audience.

Social media website logos

Social media sites tend to use the colour blue in both their logos and their themes. This is possibly because blue represents technology but also calm, peace and generally symbolises ‘trust’ which is something that users need to feel when socialising online. However, as my project is not just focused on social media it is not wise to use the same colour scheme which could potentially be misleading for the users.

As stated in my previous post, I had looked at the book ‘Digital Design Essentials: 100 Ways to Design Better Desktop, Web, and Mobile Interfaces’ by Raj Lal in order to find out what would be the most appropriate and relevant design to my own project. Although these apply to mobile applications only,  I will be using this when it comes to making a mobile design version of my website.

Adaptive User Interface

‘An interface that adapts itself to a particular context or for a user with special needs’

• Website changes its layout to suit the device
• Allow content navigation
• Accessible navigation sidebar
• Option to skip to menu
• Make menu accessible from keyboard
• Proper nesting of headings
• Image size changes with the layout

Branded App

• Branded splash screen
• Ability to share makes it social
• Support page
• Keep the theme and style consistent with the product/service

Consumer Service App

• Keep the app straightforward for the specific service and functionality
• Keep the app quick and to the point
• Focus on the relevant service for mobile users

I could also take this information and apply it to my website design, although I would have to think carefully about what would be relevant in relation to each device. For example, as users can only access one screen at a time on mobile I will have to design each page carefully so that it does not mimic the multi-page element of a computer website.

As established in my proposal, I have done some research into the what kind of functions my website will need. I have also looked at the kind of layout/design that it will need in order to be suitable for the target audience and its purpose. Using the list of texts that I had proposed to use, I had found some valuable resources into the different types of websites that exist and the ways that they are structured. There was more than one example which would suit the purpose and intended design for my own project, so I took multiple elements from each and have decided to apply these to my draft designs.

According to the book ‘Don’t make me think’ by Steve Kruger, the main elements that a website will need to implement are:

• A clear visual hierarchy
• Make it obvious what’s clickable
• Break up pages into clearly defined areas
• Keep the ‘noise’ down
• Omit needless words
• Have a good tagline where appropriate
• I.D. site logo is important for the user to know they have not navigated to another webpage
• Use clearly labelled sections (menus must have a ‘parent’ and ‘child’ section)
• A search tool
• Use tabs where they are suitable
• Get the message across clearly

I have also listed some key elements that my own project will need to include:

• Menu display
• Booking function
• Social media asset (to invite people to have meal- where and when)
• Generic design- colours and typography must appeal to virtually everyone (although adults will use the site, not children)
• Two ‘outputs’- one for cafes/restaurants and one for users
• Cafes should be able to see who has booked, when and where
• A place to edit and show their menu
• Users should be able to invite people, see available menus and book a place

Finally, for the App version this will need to have:

• Touch screen only functions
• Easily to read
• ‘One screen at a time’ method
• Larger font and images
• Touch screen function only- no mouse hover for example
• Have an essence of ‘quickness’ as apps should be faster to use, i.e. on-the-go

This is an image I created using pre-created vector images and brushes in Photoshop. It signifies the idea of an epic journey as I included the theme of a knight on horseback, travelling through a forest to rescue the princess in a far-away castle. I had to carefully think about the composition using the thirds grid, so I used two diagonal points in which to place the main focal points. These two points (knight and castle) had to portray the narrative accurately, so in order to achieve this I altered the size accordingly. The trees were not only used to build up the forest design, they were also used in order to draw the viewer’s eye towards the main focal point. By creating a ‘dip’ in the valleys/mountains, this also helped to make the castle more prominent in the whole image.

Some things I could improve on with this image is the outline of the knight and horse– when zoomed in the edges are somewhat pixellated which need to be fixed in order to give a crisp, clean vector. I could also perhaps change the colour scheme to either green or purple (having elements of nature and fantasy respectively). Perhaps utilising the other main focal points as part of the thirds grid would have helped, however this would have needed experimentation as there is a risk of overcrowding the image.