DEI 626 Online

Visual Design Lecture 26/03/2020

Visual Elements in Design

Visual Elements are the building blocks of graphic design and make up our visual designs. As designers, we choose, blend, rearrange, and build on these visual elements to create our designs. We arrange them on a surface to build a layout to convey our ideas. Core visual elements are present in all graphic designs and consist of the following:

1. Lines
2. Colours
3. Shapes
4. Textures
5. Space
6. Form
7. Typography

Whatever the final work you produce with them, these elements are the core of all of your visual designs. I will describe each principle in more detail in each of the modules below.

• Lines

  Lines

  A line is the first visual element of graphic design. Lines are the most basic visual elements of design. While lines are plain, they are important core elements of design and should not be underestimated. Lines are quite versatile and come in many different forms: solid, dashed, thin, thick, straight, or curved. They help you compose layouts and give structure to your information. They can add borders and frames, be used for decoration or as connectors or dividers of a layout. Lines can add prominence and organization to the elements of your design. They will help draw your eyes to specific points of a layout. In type, they can help structure paragraphs and headings. In infographics, they can connect several elements of the information together and give it all a flow.

  If you think about magazines, newspapers, or maps, the line is the most common visual element found there because it works extremely well to structure much information. The following picture shows some variations of horizontal lines. The strokes are shown in different sizes and with hatching and sketching and other alternatives to display the shape of a line. Lines can consist of many individual strokes or dots.

  

  The following example is from Gareth David's course on the visual elements of graphic design. He composed the examples in black and white for the sake of simplicity. In the image below, the line is the foundation of building the infographic. It shows a tree diagram with lines coloured in different shades of gray. The visual icons in the leaves of the tree are also lines that make up the icons for illustration. It's a simple visual depiction of lines forming a tree with another line on the bottom to provide an anchor point for the eye and the layout to sit upon.

  

  The following is an example of line usage in typography. Here lines are used to draw emphasis to specific words.

  

  Below is an example of lines to create a border of a layout. There are two stroke-lines (thin and thick) on the edges of the layout that create this border or frame of the image. The type of stroke lines in relationship to the other elements of your composition define its look and feel. This case has a boutique feel to it. The line in the middle also elegantly divides the two types of the type present in the image.

  

  In the next example, lines are used to structure the composition of the layout. At the same time, the lines in the image decorate it. Shown is a chapter index page, the same way you would find in a book. We have a large dark line running vertically down the page and smaller lines dividing the content on the page horizontally. When the horizontal lines pass the vertical one, they are inverting their colour. This creates a loose grid for the type elements to exist. The lines are clearly defining and position the type elements on the page.

  

  Here is another example of how lines can divide information on a page. Newspapers struggle with presenting a complex structure of information to their readers. Much information is presented at the same time. Lines play a core role here to divide and decorate the information. At the top, the lines separate the section header from the rest of the article below. In the top section and the bottom section we also have small lines to call out and decorate the information. Lines do not always have to be represented as solid strokes but also come from contrasts of colours or shape. For example, there is a big picture in the article and the solid colour fill of that picture creates a line around it. In the main body of text, we have an infographic again made with lines. Some lines break information out, in particular diagrams, quotes, and footers of the article.

  

  The last example shows lines creating decoration. You can see a variety of lines embellishing the page. First, you see lines on the page creating decoration by using different stroke effects on them. Those two larger sets of lines on the top left and the bottom right also create a larger white background line in the middle of the page (as negative space). There are also three columns of type visible with the third column breaking out of the alignment and up to the top. This creates an interesting and dynamic layout on the page.

  

  There are many ways that lines can be used in graphic design and these are just some core examples. Train your eye when you look at graphic design to see how lines have been used as graphic elements in the design to create interesting layouts.

  And definitely check out the video below that provided the inspiration for this concept.

  Video from Gareth David explaining Lines

• Colours
  

  Colour can create emphasis, give impact, and build a specific look and feel in graphic design. When working with colour, it helps to know a bit about colour theory. It all starts with the colour wheel. This example here is the red-yellow-blue colour model consisting of 12 colours. A colour wheel can also be seen as a colour spectrum. If you want to experiment a bit more with colour, I recommend you try out Adobe Colour.

  

  There is much to know about colour beyond the 12-colour wheel representations of primary (in light-based colour mixing, Red, Green, and Blue (or RGB) are most efficient for adding colours on a screen, making up the additive colour wheel), secondary, and tertiary colours.

  Besides RGB, there are some other important colour spaces and models:

  • L*a*b*/LAB (either CIELAB [newer] or Hunter Lab [older], where in the former colour is represented in three dimensions: The L-axis to determine lightness from black to white, a*-axis from green to red/magenta, and the b*-axis from blue to yellow light)
  • RGB/light-based variants:
  • Hue-Saturation-Value (HSV)
  • Hue-Saturation-Lightness (HSL)
  • Hue-Saturation-Intensity (HSI)
  • Hue-Saturation-Luma (HSY)
  • Grayscale, (for printers)
  • Cyan-Magenta-Yellow-Key (CMYK), which is a subtractive colour space (because all colours added would yield a black colour)
  • Luminosity-Red-Chroma-Blue-Chroma (YCrCb) (often in cameras)
  • XYZ (used for understanding human colour perception)

  Video from Gareth David explaining Colour

• Shapes

  Shapes

  Everything is ultimately a shape. All objects on your screen or page are shapes. Shapes have two dimensions: height and width.

  

  They are defined by boundaries such as lines or colour. Shapes can also be created with negative space. Shapes are used to add interested and substance to graphic design. You can decorate with them, use them as symbols, for patterns, or textures.

  

  There are two types of shapes: geometric shapes and organic shapes. Geometric shapes can be drawn with a ruler or circle of mainly straight lines. They produce a feeling of control or order. Organic shapes can be drawn freehand or are based on shapes found in nature. They produce a natural feeling.

  Shapes are single visual elements, so in visual design, we combine shapes and place them together to create visual relationships. This relationship, be it a simple or complex one, can trigger feelings, convey messages, or engage your audience, it adds emphasis to a portion of your layouts and creates the perception of movement. Grouping or moving shapes closer or further apart from one another, we tap into the C.R.A.P. design principle of proximity, discussed below. You can combine geometric and organic shapes and fuse them on many levels to create a variety of design elements that allows you to communicate visually.

  Video from Gareth David explaining Shapes

• Textures

  Textures

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

  Video from Gareth David explaining Textures

• Space

  Space

  Positive and negative space. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

  Video from Gareth David explaining Space

• Form

  Form

  The three-dimensional equivalent of shapes. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

  Video from Gareth David explaining Form

• Typography

  Typography

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

  Video from Gareth David explaining Typography

Visual Principles of Design

The CRAP principles of design are:

1. Contrast
2. Repetition
3. Alignment
4. Proximity

I will describe each principle in more detail in each of the modules below.

Communicating UX Findings 2/4/2020

This lecture is about communicating UX findings. And this will be the last lecture in the course in DEI 626 (Slides).

Introduction

So in today's lecture, we want to talk about why a UX research handoff is challenging, because at the end of the UX project, you want to hand over your UX project to stakeholders. And essentially, the best plan most insightful user research is worth very little to the stakeholders if the problem that you find in user research is never being fixed, or the business opportunities that you reveal, go completely unrealized.

When you ask yourself, what makes this user research handoff so challenging? And there's essentially three problems that stand out here. One is that researchers and stakeholders may disagree about what the research actually means, and stakeholders may disagree with one another about what the research means. Or even if everyone agrees about the implications of the research, it's still hard for the organizations to commit to the action and especially if that means changing the way things have been done until now. So, that's problematic.

So after encountering these problems over and over and getting super frustrated, most user researchers have realized that it's not enough to produce insightful research to tell the company what you've learned, and just hope that the company would act on your recommendations in the future. Research really has to be delivered in forms that the executives and the product teams can refer to whenever they need to make decisions about the products and their services. So this needs to happen during planning meetings, needs to happen when they're prioritizing different features, when they're writing specifications, when they're comparing proposed solutions to a problem. And, you know, here, teams are unlikely to go into their wiki or email and pull out that research report that you've written. And, you know, put a lot of time into that. And they won't sift through that big of a report and get all that key information. So you want to make the information available. So that essentially key stakeholders are able to remember the key points from the research and that they're able to put those key points from your research to use right away.

Now to meet these needs of the people that you're delivering that research report for, you have different representations of user research available to you. The first one is, of course, your written summary, which you already know about, you need to write a good summary of the type of research that you've done. But you also need to include personas, scenarios, task analysis, diagrams and experience models. Most research deliverables that you find on the market today, have a blend of all of these or a mix of all of them. So you have, you know, written summary component describing the techniques and the main findings, as well as one or more of these representations. So personas scenarios, task analysis, diagrams, experience models, and so forth.

Personas Revisited

Representing Situations: Scenarios

Representing Activities and Processes: Task analyses

Representing Systems: Experience Models