The Final Countdown
This week we started off with a lecture where Paul spoke about:
- Interactive prototyping
- User flows
- Wireframe materials
- Aesthetic usability
- Automatic Cognitive Processing
- UX Laws (including Gestaldt Principles of Visual Perception)
We were then challenged with some practical tasks – using the material.io type scale. I have used a type scale for most of my projects to date, and think it can create such nice visual hierarchy.
Rather than the type scale systems I usually use, the Material.io one is based on the typeface you choose – rather than the body text size that you input. I found this to be quite interesting, and I was looking forward to trying it out.
The first thing we made was a screen of an eBook about Hick’s Law. Paul gave us the content to use, and we were to apply the Material.io type scale to this.
Here is a mock-up of my version:
I also used colour to try and separate the content a little better, as well as making headings semi-bold, and making the text under the H1 title be in italics. When we put all of them onto a Miro board, Paul said that when you put bullet points into a design, not to indent the second line of text. This made sense to me, as it doesn’t usually happen elsewhere – however I had used coloured circles for the bullet points rather than using the actual bullet point feature on Figma because I couldn’t find an option to change just the bullet colours. Regardless of that, I also didn’t know that it was necessary to only give the first line of text an indent, so I was glad that Paul gave me this advice!
The next thing we made was a card based on the most recent book that we read. Doing this task brought me back to first year where we made cards based on music.
Here are the guidelines Paul supplied us with from the material.io website:
I based my card on the second example, as I personally like how it looks, and I thought it felt more reminiscent of an actual book cover.
Here is an image of my card:
I added a version with a dark border, since the white part of the card can be difficult to see with the Campus Press background.
I decided to use red for my H1 heading, as well as the buttons, as it went nicely with the colours in the image, and also has the same connotations as a horror book.
I also used all caps for the title of the book as I wanted it to fit the daunting style of the book cover, as well as make it stand out even more from the author name (H2) and book blurb.
Thoughts:
I really enjoyed this weeks lecture, and I always love putting my design skills to the test, as well as getting the chance to further develop them. I also really appreciated Paul showing us how to make a component library, as I have a clump of components on my Figma file, and wasn’t too sure how to display them.