Interface Design – Week 8 – Working With Colour

Colour Theory

cute

This week explored the importance of the application of colour in website design.

Consistency of colour throughout a piece of work is called a colour scheme, and used effectively it can help communicate a message.

The Colour Wheel

The Colour Wheel is used to show the relationship between the 12 colours. There are 3 Primary Colours, 3 Secondary Colours and 6 Tertiary Colours.

wheel

The Colour Wheel

The Primary Colours

The 3 Primary Colours – Red, Yellow and Blue – form the basis of Colour Theory. None of these colours can be made by the mixing of other colours.

primary

Primary Colours

The Secondary Colours

The 3 Secondary Colours are orange, green and violet. Any of these can be made by mixing two Primary Colours.

secondary

Secondary Colours

Tertiary Colours

The 6 Tertiary Colours (+3 Primary + 3 Secondary) compete the 12-Colour Wheel. Tertiary Colours are made by mixing one Primary Colour with an equal, part adjacent secondary colour.

They are: YELLOW-ORANGE, RED-ORANGE, RED-VIOLET, BLUE-VIOLET, BLUE-GREEN and YELLOW-GREEN.

tertiary2

How Tertiary Colours Fit into the Colour Wheel

tertiary

How Tertiary Colours are Created

Tints, Tones & Shades

A HUE is a pure colour – one of the 12 on the Colour Wheel.

A TINT is a hue blended with WHITE

A TONE is a hue blended with GREY

A SHADE is a hue blended with BLACK

tintshuesshades

Tints, Tones & Shades

What About Black and White?

blackwhite

This Speaks for Itself!

One More Thing..

brown

How is the Colour Brown Made?

Brown is a composite colour, and is created by mixing RED, BLACK and YELLOW.

Colour Combinations

If colours are put together skilfully, the result can set a mood, draw attention or make a statement – colours can actually affect how a person feels emotionally. Thus it is a crucial tool in design, and needs to be utilised effectively.

When the 12 colours in the Colour Wheel are combined, it creates a ‘colour scheme’, and there are some tried and tested colour combinations which work particularly well – these are called ‘colour harmonies’: two or more colours with a fixed relation in the Colour Wheel.

warm

An Example of a Warm Colour Scheme – based around REDS, ORANGES and YELLOWS (also known as advancing colours)

cool

An Example of a Cool Colour Scheme – based arounds GREENS, BLUES and VIOLETS – also known as receding colours

Complimentary Colours

Complimentary colours are opposite each other on the Colour Wheel – when mixed they make GREY. When using complimentary colours in a colour scheme, the stark contrast between the two can be striking…but needs to be used carefully so as not to be garish!

comp

How Complimentary Colours are Made

compscheme

An Example of a Colour Scheme using Complimentary Colours

Split Complimentary Colours

A split-complimentary colour scheme is an expansion of the complimentary colour scheme. It uses ONE BASE COLOUR plus TWO ADJACENT COLOURS – this retains the contrasting nature of a complimentary colour scheme, but is more balanced and gentler on the eye.

split-comp

How Split-Complimentary Colours are Combined

split-comp-scheme

An Example of a Split-Complimentary Colour Scheme

Triadic Colours

A triadic (triangle) colour scheme uses three colours which are equally spaced around the Colour Wheel. It has the benefits of vibrancy and strong visual contrast but keeping a sense of balance. It works best when one colour is dominant and the other two are used as accents.

triadic

How Triadic Colours work in the Colour Wheel (make a triangle shape)

triadic-scheme

An example of a Triadic Colour Scheme

Tetradic Colours

A tetradic (rectangular) colour scheme combines four colours in the Colour Wheel, which are arranged in two complimentary colour pairs. This gives a good deal of scope for variation. However if all four colours are used in equal amounts the scheme could look unbalanced and chaotic.

Bearing this in mind, it is important to be aware of colour temperature when using a tetradic colour scheme. Two warm colours and two cool colours used in equal amounts help to bring balance and harmony.

tetradic-colours

Tetradic Colours in the Colour Wheel (make a rectangle shape)

tetradic-dining-room

An example of a Triadic Colour Scheme

Analogous Colours

Analogous colours sit next to each other on the Colour Wheel and share an undertone of the same colour (rather than mixing warm and cool colours which can look unbalanced) Using an analogous colour scheme offers a harmonious, calming and interesting effect.

analogous-wheel

Analogous Colours sit next to each other on the Colour Wheel

analogous-scheme

An example of a warm-colouredAnalogous colour scheme – using yellow, yellow-orange and orange

Monochromatic Colours

Monochromatic colours colours are made up of different saturations (tints, tones and shades) of the same colour.

The benefits of using a monochromatic colour scheme are that it is calming and brings a sense of serenity. It is consistently balanced and visually attractive. However, it can lack contrast (clearly!) and vibrancy.

mono-wheel

mono-theme

An example of a Monochromatic colour scheme

Types of Colour Theories

Additive Colour Theory

addtheory

Additive Colour Theory (RGB)

Simply put, this is about mixing two or more hues together to create a third.

The Primary Colours in Additive Theory are RED, GREEN and BLUE (RGB) – added together these make WHITE

It is also known as LIGHT THEORY, as it deals with radiated and filtered light. BLACK radiates NO LIGHT. WHITE radiates ALL LIGHT. The more light that is added, the brighter the colour mix becomes.

Because VIDEO is the process of capturing and RADIATING light, it uses Additive (LIGHT) Theory . This is used in TV, theatre lighting, computer monitors and video production. If an incorrect choice of colour process (ie not RGB) is made by someone when designing for a website, for example, then a bright red logo risks appearing muddy when it is on screen.

Subtractive Colour Theory

subtheory

Subtractive Colour Theory (CMYK)

This is more complex! It deals with how WHITE LIGHT is absorbed and reflected off coloured surfaces. It is also known as PIGMENT THEORY.

It is subtractive because light is subtracted by adding more colour (pigment).

The Primary Colours in Subtractive Theory are CYAN, YELLOW, MAGENTA and BLACK (CYMK)

Subtractive Colour Theory is most often used in printing and painting – colour that is seen on a physical surface. The CYMK colour combination allows printers to produce a wider variety of colours on paper than RBG.

THE TASK

The task was to rework my holiday website using 3 different colour schemes.

snowflake

The Original

warmscheme

A Warm Colour Scheme – Reds, Yellows and Oranges

splitsnowflake

A Split-Complementary Colour-Scheme – Pink, Purple and Yellow

analogousscheme

An Analogous Colour Scheme – Yellow-Green, Green and Blue-Green

Reflection

Out of all of the colour-schemes, my ‘cool’ original version remains my favourite. The blues and the white are clean and crisp and feel fitting for a skiiing holiday website.

However I do like all of the variations! Each one looks good, and the tweaking of  the colours show that Colour Theory  really does work. It enables different sets of colours to be combined in ways which produce great results.

Advertisements

Interface Design – Week 7 – Interface Development

This week was devoted to developing a home page from the wireframe we created in the last session.

My theme was to create a web page for a holiday company (I opted for skiing holidays!) I used the following three design references to help me put together my own:

Screen Shot 2017-04-03 at 18.04.19

Screen Shot 2017-04-03 at 18.01.03

Screen Shot 2017-04-03 at 18.06.41

THE DESIGN PROCESS

Screen Shot 2017-04-02 at 12.19.26

Using Photoshop, I created a new document (1366 x 768 @ 72ppi). then used a grid system to help me plan and organise my information on the page with the help of last weeks wireframe.

Screen Shot 2017-04-02 at 12.34.37

I knew wanted a blue and white theme. My initial idea was to style the name of the company to look like a ski-slope, but it seemed untidy, so I jettisoned it!

Screen Shot 2017-04-02 at 12.55.16

This is looking better

Screen Shot 2017-04-03 at 18.23.32

The finished product!

snowflake

Mission complete!

Interface Design Week 6 – Wireframes & Annotations

This session was about wireframes and annotations, and their importance in the design process.

Wireframes

This is an example of a wireframe..

wireframe-example-1.jpg

A wireframe can be regarded as an architectural blueprint. Much like planning the building of a house, it is never a good idea to randomly start the construction process before mapping out where everything is going to go.

Wireframes provide a way to identify content and structure, and also behaviours of a view of a webpage or app. Layout and content can be planned without the distractions of colour choices and typefaces – the foundations of the design need to be fundamentally strong before it can be given it’s ‘bells and whistles’ of graphic elements or content.

Placeholder text (“lorem ipsum”)  is often used to represent where the actual text will be on the screen in the finished design. This is a useful strategy, as it stops people from focusing on perfecting the text rather than the design features.

Used in combination with site maps and task flows, wireframes are extremely useful for demonstrating prototyping scenarios and proof of concepts.

Wireframes usually begin their lives sketched out on paper..

paper.jpg

…this paper draft should identify the main elements to be included on the screen, such as:

  • Navigation (main and sub navigation)
  • Content (text and images)
  • Media (video and animation)
  • Form elements (search, login fields and buttons)
  • Calls to Action (CTAs  – a CTA may be a banner, button or some kind of graphic or text on a website which in intended to prompt the user to click on it)

Annotations

Annotations are explanations and notes about an element or interaction on wireframe. They often contain information such as:

  • Content identification or labelling
  • Content sources(s)
  • Display rules
  • Interaction rules
  • Interaction destinations
  • Error content/messaging

Wireframe annotations are important because they provide explanations as to design decisions, and why the design is effective.

In creating annotations it is useful to bear in mind the following:

  • Keep them short and to the point, as this makes them more readable, and focus on the benefits for the user.
  • Number each annotation and place them so that they read from left to right going down the page for a smoother reading experience.
  • Explanations about each annotation should be placed in a column to the right of the wireframe.
annotated.jpg

An example of an annotated wireframe

The task this week was to get into groups and pick a number from 1 to 5. Each number had a theme for a website design. I was in the ‘Holiday Company’ team.

The project began by using post-it notes to create a site-map for the website, having thought about the kinds of pages that should be included.

This led on to devising a list of requirements for the homepage, and doing some research on what typical website for holiday companies include on their own homepages.

Moving on, a paper wireframe was designed based around that list of requirements, followed by a more comprehensive digital wireframe.

holiday-wireframe

My wireframe for a holiday company

holiday-wire.png

Made in Creatly and Photoshop

Interface Design Week 5 -Images & Sitemaps

This session was focused on web graphics and understanding the different file types. Using the correct file type is crucial – it needs to load quickly, be compatible with the designer’s coding environment and also be viewable in a browser.

Varieties of Image Files

JPEG

This file type end in .jpg. It stands for Joint Photographic Experts Group – the ones who created the standard for this type of image. JPEG files are images which have been compressed to store a large amount of information in a small file size.

JPEG files are usually used for photographs on the web because of their small file size. A further benefit is that they present well on a web page, load quickly and support millions of colours.

This type of file is not considered suitable for logos or graphics due to the compression – it can create jagged lines and make an image appear pixelated rather than smooth.

GIF

This file type ends in .gif. It stands for Graphic Interchange Format. Unlike the JPEG format, the GIF does not lose detail when it compresses. However, the file cannot be made as small as a JPEG.

A benefit of GIF images is that they support transparency, which means that the GIF can be placed over a colour background (or even photographs), and there will be no visible border or background in the image – the only thing seen is the icon.

GIF files also have the disadvantage of being limited in their range of colours (it is an 8-bit format which means the maximum number of colours is 256), and are never used in photography for this reason. GIFs are useful for simple animations, logos and graphics which solid areas of colour.

PNG

This file type ends in .png. It stands for Portable Network Graphics, and was created as an open format to replace GIF. It is a good option for when a small file is required which maintains its original quality. PNG files support millions of colours, and also varying degrees of transparency (unlike GIFs which are either transparent or opaque). PNG-8 does not support transparency, but PNG-24 and PNG-32 do.

A Task…

The task was to create a set of web ready images from a flat-graphic logo and a photograph from Google images.

There needed to be FOUR versions, and each one should show THREE different levels of compression – HIGH, MEDIUM and LOW

  • JPEG
  • GIF
  • PNG-8
  • PNG-24

 Original Images

rocket-original
(PNG) Original Image

nasa-logo-original
(JPEG) Original Image

Adjusted Images

JPEG

JPG is best for photographs of natural images. JPEGs are ‘lossy’ which means they retain all colour information, but compress file size by selectively discarding data. That compression can result in loss of quality. JPEGs cannot be animated.

Low Quality

rocket-low
(JPEG low quality) 27.44K – 6 sec @ 56.6Kbps

 

nasa-logo-low


(JPEG low quality) – 63.31K – 12 sec @ 56.6 Kbps

Medium Quality

rocket-medium
(JPEG medium quality) 48.88K – 10 sec @ 56.6Kbps

nasa-logo-medium

(JPEG medium quality) 89.77K – 17 sec @ 56.6Kbps

High Quality

rocket-high
(JPEG high quality) 88.65K – 17 sec @ 56.6Kbps

 

 

nasa-logo-high

(JPEG high quality) 171.2K – 32 sec @ 56.6Kbps

GIF

The GIF format is best for images which have solid colours, text and line art, and computer-generated images. It is also useful when an image has text, and every pixel counts in order to preserve clarity. GIF does not compress photographs very well. GIFs are rarely used for large images on web pages due to download times and file-size.

Low Quality

rocket-low

(GIF low quality) 57.37K – 11 sec @ 56.6Kbps – 4 Colours

nasa-logo-low

(GIF low quality) 35.44K – 7 sec @ 56.6 Kbps – 4 colours

Medium Quality

rocket-medium

(GIF medium quality) 168.9K – 31 sec @ 56.6 Kbps – 32 colours

nasa-logo-medium

(GIF medium quality) 142.1K – 27 Sec @ 56.6 Kbps – 32 colours

High Quality

rocket-high

(GIF high quality) 263.9K – 49 sec @ 56.6 Kbps – 256 colours

nasa-logo-high

(GIF high quality) 225K 42 sec @ 56.6Kbps – 256 colours

PNG-8

PNG-8 (or 8-bit PNGs) images are more optimised for things with simple colours, such as logos, or user interface elements like icons and buttons.

Low Quality

rocket-low

(PNG-8 low quality) 65.28K 13 sec @ 56.6 Kbps

nasa-logo-low

(PNG-8 low quality) 37.11K – 8 sec @ 56.6 Kbps

Medium Quality

rocket-medium

(PNG-8 medium quality) 126.4K 24 sec @ 56.6Kbps

nasa-logo-medium

(PNG-8 medium quality) 110.4K – 21 sec @ 56.6 Kbps

High Quality

rocket-high

(PNG-8 high quality) 241.2K 45 sec @ 56.6Kbps

nasa-logo-high

(PNG-8 high quality) 188.9K – 35 sec @ 56.6 Kbps

PNG-24

PNG-24 (or 24-bit PNG) images can handle much more colour than their PNG-8 counterparts. This makes the format ideal for complex images with lots of colour such as photographs. When there is a need to preserve transparency and large amounts of colour (as well as achieve full or partial transparency) PNG is likely the best option.

rocket-24

(PNG-24) 662.8K 121 sec @ 56.6Kbps

nasa-logo-24

(PNG-24) 493.7K – 90 sec @ 56.6 Kbps

Site Maps

Site Maps are a visual tool which identify the structure of websites and applications. Site maps depict hierarchies and connections between pages, and also show how users may locate content. They are like an interactive table of contents, in which each item listed links directly to its counterpart section of the website.

In their most general sense, site maps give an overview of a website’s navigation, as well as the connections each page can have.

site-mp-example.jpg

An example of a site map

The Basic Elements of a Site Map

  • Page – This usually takes the form of a plain rectangle. A page is the basic unit of user experience on the internet.
  • Page numbering – Every page on a site map should be numbered. This allows other documentation, such as wireframes and taskflows, to sync up with it
  • Pagestack – This represents multiple pages of similar content
  • Decision Point – A decision point is like a virtual crossroads. It shows the path a user can take depending on the answer to a question.
  • Connectors and Arrows – These show the direction of progress between pages, pagestacks, decision points etc..
  • Conditions – It is common to use a dashed line to represent a condition. It can either be used a connector or as a box around an area to highlight that a connection to a page (or set of pages) is conditional on some other action or event

A Task..

The task was to select from a list of websites and then create a comprehensive site-map. I chose Valve Software

Screen Shot 2017-05-15 at 18.15.01.png

Screenshot of the Valve Sofware Website

I used Creatly to make the sitemap, which is below

ValveSoftware.com

The site map I made for the Valve Software website

 

 

 

 

 

 

 

 

 

 

 

 

 

Task Flows

Task flows are a useful tool for helping think through the design of a website before it is actually developed. They use many of the same basic visual elements as site maps, and when used in combination with these, the two together can show how a user arrives at a page with the information which was desired.

It is important to have in mind the objective of the user when creating a task flow – this is connected to UX (user experience)

taskflow-example.jpg

An example of a website’s task flow

Interface Design Week 4 – Grids

This session was all about grids. We learned about the importance of an underlying structure when designing something, and how to see the logic behind any design layout.

Otl Aicher, a graphic designer and typographer from Germany,  said “the creation of a common language through repetition” and “use the design grid not only as a design aid but as a direct inspiration for schematic representation.”

The most famous work Aicher did was for the Munich Olympic Games in 1972 – all his designs were on top of a grid system, and featured on posters, flags, mascots, medals, tickets and stationary.

otl.jpg

Otl Aicher – Graphic Designer & Typographer

The design grid he spoke consists of a set of alignment-based relationships which act as guides for distributing elements across a format.

aicher-grids.jpg

Aicher used the grid system to develop his pictograms

Grid systems are a simple and effective way of communicating a large amount of information (multiple pictures, text, quotes, headlines etc..) to a viewer in a coherent manner. Each and every part of the system fulfils a specific function. A designer can use their discretion to combine and/or omit parts as required.

DIFFERENT TYPES OF GRID

Manuscript Grids

This is the simplest of the grid structures, comprised of a large rectangular area taking up most of the space within a format.

Manuscript grids are excellent for extensive and continuous blocks of text – for example, in books and long essays. Images can also be used to fill the block.

Tinkering with the margins can create interest, with wider margins focusing the eye on the text. This gives a sense of stability. Narrower margins push the text to the edge of the format and create a sense of tension as the two are close together.

In order to create visual interest, typography is important in manuscript grids – the choice of typeface, font-size, leading etc are all important considerations.

manu-x.JPG

The Manuscript Grid System

mangrid.gif

An example of a Manuscript Grid system

Column Grids

Column grids are made up by placing multiple columns within the format, and are useful when non-continuous information needs to be presented. There could be one column for text, one column for images, another for image captions.

There are a great degree of flexibility when organising information on the page when the column grid system is used. Columns can be dependent on each other, independent from each other and crossed over by design elements.

If a column is too wide…or too narrow, reading can become difficult.

Consideration needs to be payed to gutters – when the margins are wider than the gutters between the columns, the reader’s eye is drawn inward and this eases the tension. When the margins are narrower than the gutters, the reader’s eye is directed outwards and there is increased tension.

The traditional rule is that if the size of the gutter is Y then the margin is set to 2Y.

col-sys.png

The Column Grid System

column-grid.jpg

An example of the Column Grid System

Modular Grids

Modular grids are the most flexible grid option. They are like column grids, but they have horizontal divisions marked by rows – the columns and the rows and the gutters between each, form a matrix of cells.

These modular grids are extremely useful for more detailed design projects since they offer greater control that column grids. They are often used for charts, forms, schedules, tables of data and image galleries.

modular-base.gif

The Modular Grid System

modular-grid.jpg

Another Modular Grid System

modular-example.jpg

An example design which has used a Modular Grid System

Hierarchical Grids

This form of grid is widely used on the web, and involves more intuitive and spontaneous placement of elements, yet still conforms to the needs of the information. Hierarchical grids are handy when a design project needs a grid which does not fit into any of the other types of grid.

They mostly use customised proportions, with varying column widths. Development of a hierarchical grid often starts with random placement of design elements. Later on in the project a rational structure to coordinate those elements can be established.

hierachical-grid-example.jpg

An example of a Hierarchical Grid System

hier-ex.jpg

Another example of the use of a Hierarchical Grid System

THE BENEFITS OF USING A GRID SYSTEM

Clarity/Order

Grids bring order to a layout and make it easier for readers to find and navigate through information. They lead to rational and standardised systems which help people absorb the information which is being communicated.

Efficiency

Grids impose constraints on a layout, which helps to reduce an overwhelming number of possibilities to a more manageable few. They allow designers to elements to a layouts quickly. This is because many layout decisions are made while building the grid structure.

Economy

Grids make it easier for designers to work and collaborate on the design, as they can provide a plan for where to place elements. The grid can become a blueprint for other to quickly follow.

Consistency, Proportion and Harmony

The use of grids leads to consistency in the layout of pages, creating structural harmony in the a design. All parts of the grid (fields, rows, columns, gutters…) are based on geometric and natural proportions, which lead to rhythm and structural harmony in the layout.

The Task This Week…

…was to choose two examples from magazines, and two examples from books, of a modular grid-system in action, and then to show how it is modular in nature using Photoshop tools.

maggrid1

My first choice of magazine – The Week Junior

mag-grid2

My second choice of magazine was Total Film

book-grid-no-2

I used a psychology book for my book examples

book-grid1

Example number 2 of a modular grid system in a book

Interface Design Week 3 – The Principles of Design

This session focused on the 9 Principles of Design.

The task was to create a mock-up for an app for the 9 Principles of Design, which would demonstrate typographic and layout skills. It was created in InDesign, and used Otl Aicher’s drawings for the 1972 Munich Olympic Games as inspiration.

Otl Aicher founded the Ulm School of Design in 1953, with Inge Scholl and Max Bill. Aicher was heavily involved in designing the logo for Lufthansa, the German airline, in 1969, and also in that company’s corporate branding.

luft

The Lufthansa Logo

luft2

A Sample of the grid system used in designing the logo

In 1966 Aicher was asked to become the lead designer for the 1972 Munich Olympic Games. Aicher created a set of pictograms with the purpose of giving a visual representation of the sport they featured. This was to help visitors, as well as athletes, at the Olympic Stadium and village, find their way around with ease.

He used grid systems to create the pictograms.:

otlgrid2

An Example of Otl Aicher’s Grid System

pict3

A more detailed example of Otl aicher’s use of grid and the resulting pictograms

These are some example of the actual signs designed by Aicher and used at the Munich Olympic Games:

pict3pict2pict1

 

Below is my mock-up for the app for the 9 Principles of Design:

kjp_interactive_0801_b2

The 9 Principles of Design – Page 1

2kjp_interactive_0801_b

Page 2 – Overview

kjp_interactive_0801_b4

Page 3 – Balance

kjp_interactive_0801_b5

Page 4 – Emphasis

kjp_interactive_0801_b6

Page 5 – Movement

kjp_interactive_0801_b12

Page 6 – Unity

kjp_interactive_0801_b11

Page 7 – Variety

kjp_interactive_0801_b10

Page 8 – Rhythm

kjp_interactive_0801_b9

Page 9 – Proportion

kjp_interactive_0801_b8

Page 10 – Repetition

kjp_interactive_0801_b7

Page 11 – Pattern

Interface Design Week 2 – Designing Business Cards

This session focused on the use of grids in graphic design.

The task was to make a set of business cards, using Adobe InDesign.

The process began by setting up a digital publishing file at 320px x 480px in portrait orientation. We were taught about using InDesign tools such as the Selection Tool and the Type Tool, as well as the functionality of the Control window. It was interesting to note how that interface changes when the Type Tool is selected.

We learned about some aspects of typography, and how some fonts are grouped into ‘families’ (for example: Helvetica: Light, Regular, Bold etc..)

The next step was to use guides to set up a 14 x 22 grid, to organise the content on the page (which could later be simplified to 7 x 11).

My completed set of business cards is below:

business_cardsbusiness_cards2business_cards_2business_cards4
business_cards5