Researching web design
Through my research, I have chosen to create my website and campaign based on the problems and solutions to reduce plastic waste. Through deep research into single use plastics I have found that I feel really strongly towards this project, and therefore would like to try and make a change with my campaign as it is quite a pressing topic.
The two main things I would like to do:
- inform people on the problems the world is facing due to single use plastics ultimately ending up in the oceans including the dangers animals face on a daily basis
- advise people on changes they can make in their lives to cut down (or remove) plastic waste that they create
My website will be easy to use and navigate and it will have strong branding throughout. I would like to relate this to the Instgram page I shall create- the goal is to raise awareness and get people talking about it.
Other websites with similar campaigns
Friends of the Earth has a similar message to my chosen topic. It uses the basic eco sea colour scheme of blues and greens, but the small hint of red draws attention to the call-to-action button. Its simple and minimal options bar aids users to find the information they would have come to the site for. It uses navigation and ease of use to create a good UX.
Less Plastic, again uses blues and greens paired with a slideshow of natural images which creates a natural and calm feeling. The modern typeface creates a more relaxed vibe and indicates a target market of younger people. The top bar feels as if it could be a menu bar but isn’t. That would have made navigation easier, because information would be my reason for visiting the site. This site was the most difficult that I looked at navigation wise, I just couldn’t find what I was looking for.
My Plastic Free Life uses muted colours to create a calm feel which has vibes of the ocean, but overall it only uses blues. The background is quite dated and makes it feel less trustworthy.
Greenpeace — obviously clue is in the name. It uses a lot of green which is quite harsh on the eye. The use of complimentary colours with an orange accent creates a good contrast so the user can clearly understand where the call to action buttons are located on the page. It has a very natural and typically eco feel.
Colour Scheme
After looking into colour chords, I looked at some beautiful images of plastics in the ocean to get a feel for my colour scheme and I created colour schemes from them.
From these images and colour schemes, I created my own colour scheme:
I chose to use an analogous colour scheme with accent colours as I liked the blues as it is associated to the sea, but after looking at other websites with the same campaign/ message, I decided to stay away from the classic blue/green eco feel. I chose the bright yellow and pink from plastics in the images above, I will use these subtly throughout my website to create points of interest and to aid navigation, and to stay away from the overused ocean eco feel.
Typefaces
Web safe typefaces are a collection of fonts stored on many operating systems, making pages faster to load. Examples of web safe typefaces are: Arial, Helvetica, Georgia and Baskervillen (Cssfontstack.com, 2018).
Heydon Pickering conducted a study which proved that more than half of the websites studied used a sans serif font for their headlines because it stands out better and is readable at any distance. Body text majority is sans serif too. Average used headline fonts between 24–26 pixels. Body text being 12–14 pixels. “As a rule of thumb, heading font size to body copy font size ratio is 2:1” (Software Development Company in NYC, 2018).
Serif fonts give a more traditional and serious feel, while sans serif fonts gives a modern, clear and sensible feel. I don’t feel that serif fonts are consistent with my brand and audience, so for my website I will choose to use sans serif typefaces as they are more commonly used in web design.
Modern sans serif fonts I have looked at are Helvetica, Arial, Gill Sands and Verdana.
Target Market
- students
- people looking to improve their lives
- people who care about the environment
- people on a budget
- people interested in the effects of plastics
- people interested in the solutions to end plastic waste
My website must fulfill a need — I must make it easy to find the information required: problems and solutions. I really liked the minimal french website (analysed in previous blog post)
Long scroll sites
Long scroll sites create a seamless progression between different topics, whereas if you used a short scroll site you would have to create a lot of links which would create click depth and users may find this tedious and harder to find information.
Some long scroll site transitions I liked are:
The first image I really like as it separates but also leads the user along the thin line and down the page. The second image I like because it is not just simply dividing the sections by colour, it uses a shape almost like a file divider which adds interest and helps with navigation. I like the repetition of the third image and how it uses an outline which creates definition between the two elements. The fourth image uses different shades of blue to give a feeling of getting deeper into the sea as you scroll deeper into the page. The sections are divided by a wave cut out to further emphasize feelings of the sea.
Current Trends
- Animation
Animation is very popular at the moment as it adds interest and movement and also tells people a little more about the brand. Animation creates a unique experience which sets brands apart. They can be used in an informational way or just for interest. Animations do save time for users in a hurry when viewing the page as it can describe things easier than text could.
- Mobile websites
Mobile design is becoming more and more important as recent studies show that websites are visited more on mobile devices than desktop (Enge, 2018). So more emphasis must be put on mobile sites and therefore I have decided to make a responsive site. With this I will consider the sizing of buttons as users must be able to click actions with their fingers. Sites like uber focus on UX by using simple navigation, it is clutter free, allowing users to find information easily. It has a clean feel with minimal information and the clickable areas are of a comfortable size.
- Flat design
Minimalism and simplicity help the design feel clean and uncluttered. This works well for desktop/mobile conversions as more detailed designs might be harder to view on mobiles. Flat design is popular as most apps on mobile phones use this. Instagram is a prime example of changing to the new flat design, stripping it of all complicated detail and creating a clean and minimalist feel.
- Video backgrounds
A lot of the sites I visited use a video background as their homepage welcome screen such as Friends of the Earth and the French website (analysed in previous blog post). This adds interest and movement but also makes the page harder to load (as I have found out). Sagmeister&Walsh use a video background inventively as it is a live feed to the office. The vinyl on the windows is also clickable material on the website, thus creating a unique user experience.
- Broken grids
Broken grid layouts consist of breaking the constraint of the grid itself. Instead they make use of gutters and allow images and text to flow over the grid layout.
Navigation
I really liked the french website’s use of simplicity as when I was analysing the websites, I found it very hard to get the information I needed from the sites, there were too many options — I just wanted a simple problems section and solution section but there appeared to be many. This is why I want to make my website very simple in terms of navigation. I would like a simple homepage with the options, and then I shall go into more detail on the pages and turn them into long scroll sites.
Decision
I have decided based on my research that I will make a long scroll site using flat design graphics to create an informational website. The website will use an analogous colour scheme with accent tones to add interest and to aid navigation. I will use sans serif fonts for both my headers and body text. My typeface size for my headers will be between 24–26 pixels, and my body text will be between 12–14 pixels. I will ensure that my header text is two times the size of my body text to create contrast and clarity between the two. I will keep my navigation simple and easy to follow, and it will be an uncluttered design. I will create a responsive website and focus on making the mobile website easy to navigate and I will consider ergonomics regarding size and location of call to action buttons and the menu bar.
References
Cssfontstack.com. (2018). CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.. [online] Available at: https://www.cssfontstack.com/ [Accessed 18 Oct. 2018].
Enge, E. (2018). Mobile vs Desktop Usage in 2018: Mobile widens the gap. [online] Stone Temple. Available at: https://www.stonetemple.com/mobile-vs-desktop-usage-study/ [Accessed 18 Oct. 2018].
Software Development Company in NYC. (2018). Serif vs Sans-Serif: How to increase your website’s readability by more than 50%. [online] Available at: https://www.dvginteractive.com/serif-vs-sans-serif-how-to-increase-your-websites-readability-by-more-than-50-2/ [Accessed 18 Oct. 2018].
Images:
- http://seavoicenews.com/2018/05/14/new-report-finds-that-89-of-plastic-in-the-ocean-is-single-use-plastic/
- http://uk.businessinsider.com/plastic-in-ocean-outweighs-fish-evidence-report-2017-1?r=US&IR=T
- https://www.deeperblue.com/five-amazing-products-made-plastic-recycled-ocean/
- http://www.sciencemag.org/news/2018/03/flooding-has-flushed-43-billion-plastic-pieces-out-sea
- https://www.mnn.com/earth-matters/wilderness-resources/blogs/ocean-plastic-rivers
