Design is as much an act of spacing as an act of marking. - Ellen Lupton
This week I have used my graphic design ability to look at how colour, typography and visual design has an impact on usability. This is something I do day to day but I have to adhere to brand guidelines that I don’t particularly like and that feel quite dated. Having been leading a website development project and implementing new branding and design this has been good for me to put my UX skills to use. As I have previously built websites I have a good understanding of this sort of thing and it really helps to be also doing app development at university while doing the similar things at work. I must spend around 16 hours a day doing UX at the moment.
I am however really tired at the moment and work and university are leaving little time for anything else, so I really need to have some down time in the next few weeks after this project is completed.
Visual design is about implementing text, colours and images in a way that enhances a design or interaction. As a field, it has grown out of both user interface (UI) design and graphic design.
The first and foremost goal of product design is to make interfaces usable – the user’s eye should be drawn to the correct information and functionality. To make it happen, visual designers prioritise content on a page through size, colour, the use of negative space and many more techniques. As soon as this goal is achieved, they can also introduce elements of delight into their app designs, such as animated effects of crisp illustrations that make the UI more attractive.
Visual design helps shape and improve user experience through imagery, colour, typography composition, all implemented with a strong understanding of visual perception and cultural context.
UX designers are not visual designers but every bit of visual design knowledge that you have, you can apply to your designs, and that will resultin a better user experience.
Design is not just making things pretty, it has to be effective and beautiful to solve the right problem and communicate the right message. Using visual design to create emotional resonance.
Visual design and usability
How an interface is structured, what it looks like and how it moves and flows all contribute to its usability.
As designers, we can harnessthe power of visual perception to make more effective compositions, more effective compositions equals better usability,which equals a better product which equals happier uses visual designtools for making a usable product.
Visual design tools for making a useable product
- Position – position uses the foundation of any good design a grid to create an engaging and interesting design. Gestalt Principles. Western English audiences read pages from top to bottom, left to right. So items that are placed in the upper left corner of the page are more likely to be read first. This is a UX pattern, quite often for a reason. So a logo in the upper left corner tells us immediately who owns this site. People tend to scan information in what are known as F or Z patterns. F is very much like reading a book, for Z patterns know that people will finish reading on the right and then scan down the page diagonally to the left to find the next piece of information until I hit something. And you can make either of these patterns happen based on how you position elements.
- Size – Size is a great way to draw users attention. Some of the reasons that you might want to direct users attention somewhere is for headlines, is for call to actionsand a thing that is important.
- Colour – colouring something differently can make it stand out. This can be helpful when you want to draw attention to something that’s interactive,like a button. Colour can also be a great way to focus attention on specific areas. you need to consider accessibility
- Typography – typography delivers information to your user, Make sure that your users can see it,they can decipher it, make sure that it’s not taxing and it’s easy to read.
- Imagery – you can use this to easily show who your target audience is or what you are trying to portray as a brand/product
The best designs evoke emotion, emotion is how people make decisions. This helps us create products that are at the top of the UX hierarchy that is products that are pleasurable to use.
- Unity & Harmony – harmony, unity and harmony has to do with all the elements on a page visually or conceptually appearing to belong together.
- Balance – Balance creates the perception that there is equal distribution. This does not always implythat there is symmetry.
- Hierarchy – hierarchy shows the differencein significance between items. Designers will often create hierarchiesthrough different font sizes, colours,different placements on the page and usually items at the top are perceivedas the most important.
- Scale and proportion – scale is the size of one object n relation to the other objects,and a design or an artwork and proportion is a relationship of twoor more elements in a composition and how they compare to one anotherwith respect to size, colour, quantity, degree setting, etc.. The golden ratio is alsoanother good example of this. When the ratio is used,you’re building a golden ratio design, meaning that your work respects the one to 1.618 proportion. Designers of all types agreethat following this principle typically leads to the most aesthetically pleasingresult, regardless of the subject.
- Dominance and emphasis – dominance focuses on having one element as the focal point and others being subordinate. This is often done through scaling and contrasting based on size,colour, position, shape, etc.
- Similarity and contrast – similarity refers to creating continuity throughout the design without direct duplication Similarity is used to make pieces work together over an interface and helps users learn the interface quicker. Contrast focuses on making items stand out by emphasising differences in again size, colour, direction and other characteristics.
Figure and ground organisation as a type of perceptual grouping that is a vital necessityfor recognising objects through vision use positive and negative space to create different, unrelated shapes.
Proximity –
Continuity –
Closure – t
An example of closure with text
I cnduo’t bvleiee taht I culod aulacIty uesdtannrd waht I was rdnaieg. Unisg the indeblire pweor of the hmuan mid, aocdcrnig to rseecrah at Cmabrigde Uinervtisy, it deno’t mttaer in waht oderr the Iterets in a wrod are, the olny irpoamtnt ting is taht the frsit and Isat Itteer be in the rhgit pelae.
The rset can be a taotl mses and you can sitll raed it whoutit a pboerlm. Tihs is bucseae the huamn mnid deos not raed ervey Itteer by istlef, but the wrod as a wlohe. Aaznmig, huh? Yaeh and I awlyas tghhuot slelinpg was ipmorantt! See if yuor fdreins can raed tihs too.
Colour is one of the most important parts of your website. Colour helps define how users perceive information. To add to the complexity of this issue, most of the judgements people make about your site’s colour schemes are subconscious. They may not provide any feedback about your site’s colour, but they are always thinking about it
If you are interested in adding and enhancing your use of colour in your layouts, a concrete knowledge of the theory behind colours and colour schemes is essential. It’s just one part, though. As experienced designers, we are responsible for many different elements. It is important to note we are not trying to become masters of visual design, but we must have a good working knowledge of it to be an effective members of a design team.
Colour can do a lot of things in your design.
Design is 90% persuasion t
Red is extreme it’s stimulating, it’s attention grabbing.
Blue – Cool colours lower the blood pressure.
Be a little bit careful
Green has strong connotations of nature.
Yellow is warm and energising.
Black is bold and heavy and
White is clean and neutral. perceived as being pure.
Meaning is not finite. It’s all about context. Colour contributes to meaning green meaning go for example.
Colour theory and vocabulary
Hue – is the colour
Tone –
Colour modes
Different media
RGB – Additive colour mixing
CMYK – Subtractive colour mixing
Contrast
Colour combinations
Complimentary is high contrast. This is quite bad for text.
Analogous is harmonious and pleasing. It’s quite low on contrast.
Triadic is one primary colour with two accents. It can be high contrast
Split complementary. There’s less tension than complementary, and it has high contrast.
Tetradic or rectangular. This has many different possibilities. They are all high contrast.
Selecting colours
There are a few rules that you can use. Know your audience, analyse the competition, think psychologically and always be intentional. Good colour choices are easy to spot. But they can be surprisingly difficult to create from scratch. You don’t have to start from scratch. Pick a base colour and work from there. This is a very similar approach that we use in typography, when we need visual variety. And we don’t necessarily need a whole new typeface. We can use weights within a family to create a nice contrast as a similar idea with colour. It’s possible to start with a simple colour scheme and use tints. That’s adding whites to the colour and shades, adding black to the colour to add variety or depth to a design.
Primary plus base plus white approach, There’s one primary colour and onesecondary colour and a background colour.
Applying colour to UI
The 60, 30, 10 approach. when you’re picking colours
Optimising your typography also optimises your user interface. In this lesson, we look at some rules and best practices to help you improve the readability and legibility of your text content. Typography is the convergence of art and language. This makes it hugely powerful as a tool and a means of expression. – Ellen Lupton
History of typeface
Most people agree that the creator of typography was a German man named Johannes Gutenberg, before Gutenberg came alongand revolutionised the world of communication booksneeded to be described by hand, usually by monks, which was very timeconsuming and expensive So Gutenberg created Black Letter,the first ever typeface modelled after the writing of the scraps Black Letter has thick vertical lines and thin horizontal connectors,which made it great for scribing but it looked very denseand squished together. When printed, something needed to change Enter Roman type, the first ever roman typeface was created in the 15th century by the Frenchman Nicolas Jensen who worked mainly in Venice,Italy, and was inspired by the lettering found on ancient Roman buildings. His letter forms were based on straightlines and regular curves. This made them very clear and legible compared to the densedarkness of black letter. This legible new typefacewas an instant success and quickly spread across Europe, ridingon the coattails of the Renaissance. The next major innovation in typographyafter Roman letters was italics,which are like slantedand stylised versions of Roman type. They were created in the late 15th century by Aldus Manutius from Italy as a way of fitting more letters onto the page and saving money. Now we use italicsinterspersed in Roman type for emphasis. He also created the modern comma and semicolon. In the 18th century in England William Carson created a typeface that set a new standard for legibility. Well, it wasn’t anything radical. It was just what the world was looking for. The style of Carson’s typeface is now referred to as old style. A few decades later, another Brit named John Baskerville created a new variety of typeface, which we call transitional. Later, still, a Frenchman named Didoand an Italian named Baldoni created typefaces that we have classifiedas modern. Most serif typefacesfit into one of these three categories, An old styletypeface has letters that have thick serifs and low contrast between thickand thin strokes. A transitional typefacehas letters with thinner serifs and a higher contrast between thick and thin strokes, and a modern typeface has letters with very thin serifs and extreme contrasts between thick and thin strokes.
William Carson’s great grandsonnamed William Castle got sick of all of these serifs,so he decided to remove them entirely and made a new kind of typeface called the sans serif. It didn’t catch on immediately,but would eventually get really big.
During the second Industrial Revolution, advertisingcreated a need for new typefaces. Letters were made taller and wider, mainly used in large sizeson posters and billboards. One happy result of all of this experimentation is Egyptian or slab serif. It has really thick serifs and is usually used for titles as a backlash to the complexity ound in typefaces of the 19th century. The early 20th century brought something simple Paul Rainer from Germany createda typeface called Futura, and it was based on simple geometric shapes. This is called the geometric sans. Around the same time a British man named EricGill created a typeface called Gill Sans that was similar to a geometric sansbut with gentler, more natural curves. And this is called the humanist sans. the next major step in the world of sansserif, as happened in Switzerland in 1957with the introduction of Helvetica. It has simple curves and is available in many different weights, and some would call it the world’s favourite typeface.
The world of typography changed foreverwith the introduction of the computer. There were a few difficult years of crude pixel type due to the primitive screen technology, but then technology evolved and computers began to allow for the creation of thousands of beautiful typefaces and the odd dud. (comic sans) But now anyone has the freedom to create their own unique typeface.
Language
Typeface – A collection of fonts in the same font family
Font – specific size and weight of the typeface
Serif – has embellishments
Sans serif – no embellishments
Display – anything expressive or with a lot of character
Weight – bold, thin, slim, regular etc can use for visual hierarchy. In CSS the weights are determined by weight value. 200, 300, 400 etc
People tend to use the terms Font and Typeface interchangeably. people in the industry sometimes do the same. A good habit to get into differentiating between a font and a typeface type used to be physical. Used to be made of metal. Capital letters were kept in a case above normal letters, which also led to the terms uppercase and lowercase. The typeface is a collection of fonts in the same font family, and a font is a specific size and weight of that typeface.
Typographic choicecan make a huge difference in expression and adds an extra layerof meaning on top of the words themselves. Companies use the expressive power of typography to express the personality of that brand and how they wantto be perceived as a company.
There are specific terms
Tracking is letter spacing.
Kerning
The beauty of type lies in its utility.
W
Size –
Display typefaces should be reserved for Headlines and titles as the readability can be poor in blocks on a screen.
F
Without reflection, we go blindly on our way, creating more unintended consequences, and failing to achieve anything useful.
-Margaret J. Wheatley
As a graphic designer I have gained valuable insights into the importance of visual design over the years, color theory, and typography too. Colour theory as an artist is one of the first things you learn when you study it. With graphic design you learn the color scheme and typography can influence the user’s perception and how they engage with whatever product you are designing for. In this case it is vital to choose a colour scheme that aligns with the app’s purpose and conveys the appropriate emotional tone. Additionally, typography can contribute to the overall look and feel of the app and impact the user’s experience so it needs to be clear, easy to read but also have a look and feel that aligns to the brand. Developing a name, logo and brand identity for the app has been this weeks task.
One of the main things I spent time doing was choosing a name for the app, I began by brainstorming several ideas. I also considered the significance of the name and its potential to align with the app’s mission and values. Through research and exploration of relevant keywords and themes, I ultimately settled on a name that reflected the app’s purpose while also being memorable and catchy. Eleos from the greek goddess for charity, as the app is aimed at female identifying people I thought it fit quite well. Along with a colour pallet which I will show below
Regarding charity research, I utilised a variety of resources, including online databases, news articles, and reports, to gather information on potential partners. I evaluated each charity based on its mission, impact, and transparency, ensuring that the selected organisations aligned with the app’s goals and values.
In terms of visual design, I learned more about the importance of colour theory and typography in creating a strong and effective brand identity for the app. I researched colour palettes and typography styles that reflected the app’s values and mission, aiming to create a design that was both visually appealing and easily recognisable. The use of visual design elements like colour and typography can either enhance or detract from the app’s user experience. After conducting research on colour theory and typography using my experience as a graphic designer , I carefully selected a colour scheme that represents the app’s charitable nature thinking about the female target audience while ensuring readability and accessibility. Additionally, I chose typography that is legible and conveys a sense of warmth and approachability.
In conclusion, the visual design of the app is essential in communicating the app’s purpose and values to the users. The use of colour theory and typography can significantly impact the app’s user experience and perception. Through careful consideration and research, I have successfully incorporated visual design elements that align with the app’s purpose and enhance the user experience.
In terms of self-criticism, I recognize the need to improve my research and decision-making skills, particularly in selecting appropriate design patterns and charities. I plan to address these challenges by seeking feedback from peers and experts in the field and continuing to educate myself on best practices and trends. I also recognize the need to be flexible and adaptable in response to changes in the market and user needs.
Overall, the development of the charitable app has been a valuable learning experience, providing me with a deeper understanding of the importance of research, design, and branding in creating a successful and impactful product.
In the future, I plan to continue exploring different visual design elements and techniques to improve overall user experience. Additionally, I will continue to conduct research on colour theory, typography, and other design patterns to ensure that designs remain relevant and effective in conveying the purpose and values to the users.
[~30 minutes]
- Take a look at your wireframes, and assess how you are using the six principles of design:
- Unity and Harmony
- Balance
- Hierarchy
- Scale and Proportion
- Dominance and Emphasis
- Similarity and Contrast
- Annotate your wireframes with your thoughts.
[~60 minutes]
- Duplicate your wireframe file or page – you don’t want to work over it!
- Pick three colours and apply them to your interface (use a tool like CoolorsLinks to an external site. to help you).
- Make a fresh artboard and note down your colours and how you are purposefully using them (see the ‘Applying to a UI’ slide in the lecture slides for Intro to Colour).
[~60 minutes]
- On that same duplicate file, pick two fonts (three if you must) and apply them to your interface (use a tool like Font PairLinks to an external site. to help you).
- On your fresh artboard you made for the colours, add your typography – note down your fonts and how you are purposefully using them (see ‘Rules of Thumb’ slide in the lecture slides for Intro to Typography).
- Kingston, C. (2020) ‘Key Principles of Visual Hierarchy in UX Design’ [online], Medium, 28 March. Available at: https://medium.com/thinking-design/key-principles-of-visual-hierarchy-in-ux-design-c17395949edLinks to an external site. [Accessed 2 April 2023]
- WebdesignerDepot (2015) ‘How eye scanning impacts visual hierarchy in UX design’ [online], Medium, 26 March. Available at: https://medium.com/@WebdesignerDepot/how-eye-scanning-impacts-visual-hierarchy-in-ux-design-5263fb88f2a3Links to an external site. [Accessed 2 April 2023]
- Lee, C. (2020) ‘6 visual design principles that UX designers should be aware of’ [online], UX Collective, 23 August. Available at: https://uxdesign.cc/6-visual-design-principles-that-ux-designers-should-be-aware-of-f609f9293703Links to an external site. [Accessed 2 April 2023]
- Gordon, K. (2020) ‘5 Principles of Visual Design in UX’ [online], Nielsen Norman Group, 1 March. Available at: https://www.nngroup.com/articles/principles-visual-design/Links to an external site. [Accessed 2 April 2023]
- Mesibov, M. (2015) How Visual Design Makes for Great UX [online], UX Booth, 17 November. Available at: https://www.uxbooth.com/articles/how-visual-design-makes-for-great-ux/Links to an external site. [Accessed 2 April 2023]
- Mall, K. (2020) colour psychology in UX, Medium [online], 6 December. Available at: https://medium.com/design-bootcamp/colour-psychology-in-ux-b371fde795d3Links to an external site. [Accessed 2 April 2023]
- Cugleman, B (2020) The Psychology of colour and Emotional Design [online]. Available at: https://www.uxbooth.com/articles/the-psychology-of-color-and-emotional-design/Links to an external site. [Accessed 2 April 2023]
- We Are Colourblind (2020). Available at: https://wearecolorblind.com/Links to an external site. [Accessed 2 April 2023]
- Zieliński, W. (2017) ‘How to use colors in UI Design’ [online blog], 23 January. Available at: https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753#.tjeyfoynrLinks to an external site. [Accessed 2 April 2023]
- Material Design (2020) Colour Theme Creation [online]. Available at: https://material.io/design/color/the-color-system.html#color-theme-creationLinks to an external site. [Accessed 2 April 2023]
- Tubik Studio (2017) ‘Typography in UI: Guide for Beginners’ [online], UX Planet, 4 August. Available at: https://uxplanet.org/typography-in-ui-guide-for-beginners-7ee9bdbc4833Links to an external site. [Accessed 2 April 2023]
- Zieliński, W. (2017) ‘How to use typography in UI Design’ [online blog], 5 January. Available at: https://blog.prototypr.io/how-to-use-typography-in-ui-design-ce045fa4ff2eLinks to an external site. [Accessed 2 April 2023]
- Sapio, D. (2015) 10 Principles for Typography in UI Design [online], UX Collective, 15 December. Available at: https://uxdesign.cc/10-principles-for-typography-usage-in-ui-design-a8f038f43ffdLinks to an external site. [Accessed 2 April 2023]
The Design thinking playbook
Lewrick, M., Link, P. and Leifer, L., 2018. The design thinking playbook. Hoboken, New Jersey: John Wiley & Sons, Inc.