Lesson 2.1
Have a look at this website: https://www.theworldsworstwebsiteever.com/
Analyze the product and think about it critically. What is problematic about it? How would you change it from a visual perspective (look and feel) to a human perspective (needs and wants)?
Your changes might be as small as a colour change or more extensive, like decreasing the number of animations present.
What is problematic?
Too many contrasting colors, and different fonts being used. The sizes of different elements are blown out of proportion. There is many different animation elements on the website making it hard for the eyes. Instead of the background being one big picture, its a picture copied several times to fill out the space. This makes the design even more chaotic. The website is one big website making things out of place and size from other elements.
Solutions:
I would decide on one or two fonts and stick with those, and also find a fitting color palette. Then remove the animations and useless information here and there. The background would also be one image instead of several glued together. To further change to human perspective I would add a navigation menu to the different categories. I would sort the contest, and make headlines and subheadings. To get better navigation I would make clickable buttons to take you to the different links. Instead of having one big site, I would rather split it into different pages you get get to via the home page.
Lesson 2.2
Have a look at the design below:
Consider the following:
- Do you think it is accessible to users with eyesight trouble? Would they be able to read the text comfortably?
- What do you think of the labels of the main navigation? Do you think they are understandable and communicate clearly as to where they would lead a user?
- Do you think the contrast between the background and text colour is significant enough to be accessible?
Step 1
Do a straw test on the design by limiting your vision. Make your hand into a fist and look at your screen through the small space between your palms and fingers. Did you find it easy to read the information on the page?
Step 3
In your preferred design tool, recreate the website design. Pay close attention to the following:
- The text size of written content
- The colour usage and contrast. Text and elements should be easy to see and read.
- The labels should be understandable. The user should immediately know where they’ll lead them.
(You are welcome to change the look completely or stick to the current look and feel.
Step 3
When you are done with your design, make your hand into a fist again and look through the small space between your palms and fingers to see if you can clearly read what’s on the page.
Re-creation of website design:
Lesson 2.3
For this lesson task, take a look at this website. https://www.pennyjuice.com
Step 1
Go through the content on the website and conduct a content audit. List all the information and elements included in the website on a spreadsheet (like Google Sheets).
Results after doing a content audit:
Step 2
Now, plan the information architecture using the card sorting technique. You can conduct a simple card sorting session using pieces of paper (with the help of friends or family), or you can use an online tool like Miro. When you’re done with the card sort, analyse your results.
ANSWER: After doing the content audit I had a card sorting session with myself and some family members.
Step 3
Finally, take what you have learned and redesign the homepage along with the website’s primary navigation. Use the design software of your choice to create a flat design; it doesn’t have to be interactive. If you would like, you can also draw a simple diagram of the main steps you think the user will take (the user flow).
Results after redesigning the homepage:
Lesson 2.4
For this lesson task, you will learn about and analyse a few more designs systems.
Step 1
WATCH: Video section: 6. Components of a Design System (10m 8s) by Chris Nodder on LinkedIn Learning
Step 2
Have a look at the following design systems.
Pay specific attention to the differences in:
- logo usage
- colour
- typography
- buttons
- grid systems
If you want, you can draw up a table and note down your findings to compare them.
Step 3
Choose one of your favourite websites and compile a small design system only showing the elements listed above.
For this task I chose the Sparebank 1 website, and this was my result making a small design system:
