The primary areas focused on in this talk were:

1. Visual Grammar
2. Language and Typography
3. Narrative Design

Visual Grammar

Visual grammar is all the parts that make up a website or a product e.g. buttons, typography, windows, illustrations, icons etc.

In a Nielson Norman Group article on the topic, 5 Principles of Visual Design in UX 5 primary principles of visual design/ visual grammar are explained. These include scale, visual hierarchy, balance, contrast and the Gestalt principles.

Scale

The principle of scale:

“The principle of scale refers to using relative size to signal importance and rank in a composition.”

When using this principle properly I can draw attention to the most important elements in my design by making them the biggest. A great example of this can be seen on Netflix’s home screen

Here Netflix uses scale to highlight an image and title of a popular series that has not been viewed by the user directing the user to this series. Making something bigger helps people to notice it i.e. in the above example, Netflix is encouraging me to watch American Horror Story by making the related picture and title bigger than the rest.

It’s important to remember that good visual design generally does not use more than three different sizes. This principle also helps to achieve a visual hierarchy, helping the user to skim read a page as the most important elements will jump out at them.

Visual Hierarchy

The principle of Visual Hierarchy:

“The principle of visual hierarchy refers to guiding the eye on the page so that it attends to different design elements in the order of their importance.”

Some signals that aid in the establishment of a strong visual hierarchy are:

• scale
• value
• colour
• spacing
• placement

Visual hierarchy controls the delivery experience. Using 2-3 typefaces, bright and muted colours or placements can both act as indicators of what content is most important. It is also advised that a design include small, medium and large components to help guide the user through the content.

The above Spotify UI is a great example of how to establish a visual hierarchy. The top image and title are what the viewer first sees as they are placed at the top of the screen and are the largest. This lets the user know what album/playlist they have selected. The viewer will then be drawn to the bright green play button which is significantly larger than any other buttons/ selection options on the screen. This encourages the user to hit play as start listening to a song. As the user works their way down the screen they will then likely skim through the songs included in the playlist/album and will continue listening, select a different song, download the album etc. The information hierarchy can clearly be seen to aid the user in their user journey by guiding them to the most important information first.

Balance

The principle of Balance:

“The principle of balance refers to a satisfying arrangement or proportion of design elements. Balance occurs when there is an equally distributed (but not necessarily symmetrical) amount of visual signal on both sides of an imaginary axis going through the middle of the screen. This axis is often vertical but can also be horizontal.”

All visuals will have an imager axis, this can be both verticle and horizontal. Designs can become unbalanced when differently sized, weighted and spaced elements are placed on either side of the axis. In a balanced design, no area draws the eye too much that the other areas are missed. Balance can be symmetrical, asymmetrical and radial. Below are examples of each.

 

Symmetrical

 

Asymmetrical

 

Radial

 

Unbalanced

 

Contrast

The principle of Contrast:

“The principle of contrast refers to the juxtaposition of visually dissimilar elements in order to convey the fact that these elements are different (e.g., belong in different categories, have different functions, behave differently).”

This helps to identify that two elements are distinct from one another this is often applied through colour.

Gestalt Principles

Gestalt Principles:

“Gestalt principles explain how humans simplify and organize complex images that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than interpreting them as a series of disparate elements. In other words, Gestalt principles capture our tendency to perceive the whole as opposed to the individual elements.”

One of the most important Gestalt principles to remember as a UX designer is proximity. Proximity helps the user to group items e.g. items that are visually closer together are perceived as part of the same group. Other Gestalt principles include similarity, continuation, closure, proximity, common region, figure/ground, and symmetry and order.

 

Tips for Visual Grammar:

1. Simplify as much as possible – focus on the essentials
2. What can you do with constraints? (working with specific sizes/ shapes/ limited colour palettes) Keep it simple, minimise visual complexity.
3. Focus on re-using elements and minimising visual complexity (e.g. accessibility/ use a home link in the top nav)

 

Language and Typography

Language

In approaching language you must first develop a clear tone of voice/ style of writing that fits with a companies brand or your own brand as a designer e.g. do you want your writing style to be more casual and friendly or more formal. Therefore you should first consider what the message is you want to communicate and then how to communicate it. When thinking about the message you want to communicate consider the following:

• Who are you? (As an individual or business.)
• What are your values?
• What’s your mission and purpose?
• What do you hope to achieve?
• How will we know if you’re successful?

Macro and microcopy should both be considered when writing content. Macrocopy communicates a tone of voice and helps to establish a brand personality. Microcopy deals with design interactions by meeting functional requirements e.g. content on buttons.

The correct content can make a big difference to the overall user experience. Particularly if the user has to wait for something to load or if they are struggling to get a function to work. By simply indicating an estimated timeline of how long this will take the user will be satisfied that they can go away and come back and not be left staring at a screen waiting for something to happen. Equally, if the user has typed in the wrong password and can’t access their account the webpage needs to indicate what the problem is. By highlighting that the password is wrong and also that they can change it by clicking a button the user’s experience will be greatly improved. This is far more preferable to the login screen explaining nothing and leaving the user not knowing what the problem is. An excellent example of a company that does this well is mail chimp.

Macrocopy can be defined by simply listing keywords that demonstrate the elements/ personality of a product or brand. A great example was provided in this weeks lecture and has been included below.

This demonstrates the vast difference in the tone of voice when talking about a mini and BMW even though the cars are made by the same company. This has the effect of clearly displaying the difference in the cars target audience as one is presented as fun and dynamic while the other is presented as luxurious and well-engineered, note this is also reflected in the price range.

The importance of considering language in design is becoming more and more relevant as more than ever conversational interfaces are being introduced into mainstream products (e.g. amazon echo).

 

Typography

I wanted to an in-depth look at typography so I have focused on some of what has by covered by Ellen Lupton in her book Thinking with Type. As I am currently focusing on web design and have covered the basics of lettering and type anatomy I wanted to jump in with Typefaces on screen.

 

These pages first begin by discussing the limited options available to designers in the early years of the World Wide Web. At that stage, designers had to limit their typeface selection to those most likely found on their user’s computers.  Two of the fonts found on this limited list were Verdana and Georgia. Both were designed by Matthew Carter and released by Microsoft in 1996.

There are now a number of ways to embed fonts within a webpage that will deliver the font to the end-user in a web page. They can be hosted by third parties, popular services now include Google fonts (free) and Adobe Fonts (subscription-based) previously known as Typekit. An example of a webpage that has utilised Typkit to embed its fonts can be seen in the Bibulate example above. There is also the option to embed custom fonts into your webpage using the @font-face CSS rule. This is a slightly more complicated process and involves downloading the font, creating a WebFont Kit for cross-browsing, uploading the font files to the website and updating and uploading the CSS file. An example of this can be seen in theWeb Typography example above in which custom fonts we bought and licenced through Typotheque.

There are pros and cons to each approach while uploading a custom font is a more complicated approach it has the benefit of increasing the chance that your typeface selection will be far more original and stand out against competitors. However, Google Fonts does provide a free service that is perhaps the easiest to upload providing close to 1000 different options.

After having refreshed my memory on how to upload fonts to web pages I wanted to take a closer look at typeface classifications to broaden my knowledge beyond serif and san serif. Above are seven type classifications that I can consider when selecting typefaces for my brand/ portfolio website. This was an area that I felt required improvement in my previous design.

The classification are:

• Humanist or Old Style (Serif)
• Transitional (Serif)
• Modern (Serif)
• Egyptian or Slab Serif
• Humanist Sans Serif
• Transitional Sans Serif
• Geometrical Sans Serif

I really like the outcome of all of the above examples of the classification. I am used to sticking with Sans Serif typefaces in my design however I am now starting to find my Sans Serif selections a little done and intend to experiment with some of the above (most likely Transition or Modern) serif options.

Another important point to consider particularly web typography is line spacing, also known as leading. This is covered in good detail by Lupton. The default setting is generally 120% of the type. However, I feel that whether or not this is optimised for making the text readable is largely based on the typeface selection. This is something I will have to experiment with as I am designing my mock-ups particularly in areas with larger amounts of body text.

Another area to consider is alignment. As a rule, I generally stick to a left alignment and avoid a right alignment at all costs. However, depending on the size of the heading a left alignment can look a little unbalanced so I may have to consider a centre alignment in these instances. After looking at what Lupton has presented on this I have realised there may be a lot more considerations than I was previously aware of.

Above is a sample of options including:

• The beginning of the paragraph is moved to the end.
• A single line slides out of a justified block.
• Elements break away from a justified column.
• Text is forced into a grid of ragged squares.

I think these alignments are a little experimental for me however I do think the elements breaking away from a justified column is quite intersting.