PLANNINGCAEL5045 - Networked Worlds

WEEK 2

WEEK 2 • CHOOSING COLOURS

• CHOOSING FONTS

• COLLECTING CONTENT

• PLANNING STRUCTURE

• WIREFRAMES + MOCKUPS

– Martin Christie Creative Bloq, How to choose a colour scheme for your logo design

“Every colour, including black and white, has implications for logo design. As a designers

you need to pick your colours carefully to enhance specific elements of the logo and

bring nuance to your message with the use of shade and tone.”

WHAT COLOURS MEAN

• The use of colour can bring multiple layers of meaning, from primitive responses based on millions of years of evolved instinct to the complex associations we make based on learned assumptions.

• Every colour, including black and white, has implications for design.

• In general terms, bright and bold colours are attention-grabbing but can appear brash. Muted tones convey a more sophisticated image, but run the risk of being overlooked.

COLOUR THEORY• Colour Theory actually covers a number of things, but at the most basic level it

is the interaction of colours in a design through complementation, contrast, and vibrancy.

• Complementation - refers to the way we see colours in terms of their relationships with each other. e.g. - when colours occupy opposite ends of the colour spectrum, they establishing a happy medium the eye can reside in.

• Contrast - reduces eyestrain and focuses user attention by clearly dividing elements on a page. The most apparent example of contrast is an effective selection of background vs text colour. e.g. - Using a variety of contrasting colors can help focus the viewer's attention on specific page elements.

• Vibrancy - dictates the emotion of your design. Brighter colors lead the user to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things.

SELECTING COLOURS

• These are 3 of the commonly accepted structures for selecting a good colour scheme: triadic, compound, and analogous.

TRIADIC

• Composed of 3 colours on separate ends of the colour spectrum. There is a very easy way to create a Triadic colour scheme:

• Take a colour wheel, and choose your base colour.

• Draw an Equilateral Triangle from this point.

• The three points of the triangle will form your tri-colour scheme.

• Using an Equilateral Triangle, you can ensure the colours have equal vibrancy and compliment each other properly.

COMPOUND

• The Compound colour scheme is based on providing a range of Complementary Colours.

• Two colours are chosen from opposite ends of the colour spectrum.

• This allows freedom in their design while also benefiting from the visual appeal of complementary colours.

ANALOGOUS

• An Analogous colour scheme is based on a careful selection of colours in the same area of the colour spectrum. Usually the colours are differentiated by their vibrancy, and their contrast when compared to each other.

• Two examples of an Analogous colour scheme are:

• Shades Yellow and Orange

• A Monochromatic Selection (Shades of a base colour)

• Go to color.adobe.com and use the this great tool to create a potential colour scheme for your project. Think about what your selected colours mean and how they will add to the conceptual understanding of your publication.

• REFERENCES:

• An Introduction to Colour Theory for Web Designers, Thomas Cannon, TutsPlus

• How to choose a colour scheme for your logo design, Martin Christie, Creative Bloq

CHOOSING FONTS• There are four basic font categories that are useful to understand when

choosing a suitable fonts for your design projects.

• Serif fonts - have little “feet” or lines attached the ends of their letters. They’re generally thought to look more serious or traditional.

• Sans-serif - these fonts don’t have the extra lines on the ends of letters. For that reason, they’re generally thought to look more modern and streamlined.

• Scripts are what we might think of as cursive- or handwriting-style fonts.

• Decorative or Display - fonts that are meant to get your attention. They’re often more unusual than practical and should only be used in small doses and for a specific effect or purpose.

WHY FONTS MATTER• Font choices often set the tone for the whole design and can

influence viewers’ feelings toward and interactions with your design

• Bad typographic choices always distract from your design’s message and intentions.

• Do the elements of your font clash, or do they complement each other?

• Are they effectively communicating the qualities you want to project?

• These considerations are part of what makes choosing fonts such an important part of the design process, one that should be approached thoughtfully.

CHOOSING A FONT• Your first concern when choosing a font for a project

should be that it matches the message or purpose of your design.

• Brainstorm some of the qualities or characteristics that you want your design to communicate.

• You’ll need to determine what a particular font is saying to you, and whether that fits with your design.

• Where and how your design will be viewed should also figure into your font choices.

COMBINING FONTS• Choosing two or more fonts to use together can be tricky. You

want the fonts to complement each other, but not be too similar.

• Fonts that look significantly different but share something in common are more likely to work well together. Things like; general proportions, letter height or width etc. Even if the similarity is subtle, it will help give your font combination a basic cohesiveness.

• Your chosen fonts will need to be different enough that they create a clear visual hierarchy — showing viewers where to look and what’s important. One sans-serif and one serif font are often enough to do this effectively.

WHAT ABOUT TYPOGRAPHY?

• Typography is how text looks, which is the cumulative result of many small decisions — like the font in use, the font size, the line length (for example, the width of a paragraph), and the line spacing.

• Typography encompasses every element in a composition, from paragraphs to headings, lists, navigation, forms, and more, as well as the spaces between and around those elements.

• Negative space, or white space, also plays an important role in typography.

• The amount of white space in and around glyphs (characters), and its proportional relationship to the positive shapes of glyphs, gives us an idea of whether the typeface feels balanced.

• The same goes for the composition in its entirety — the white spaces in and around text blocks, like margins and gutters, give us an idea of compositional balance when we compare them to the positive shapes of text blocks.

• REFERENCES:

• Font Design - How Designers Choose Which Fonts To Use, Janie Kliever, Canva Design School

• Typography is how text looks , Typekit Practice

PLANNING CONTENT

• The first thing you should start to do when you're working on a new project is plan!

• When you have a project that is well planned, it's much more likely that the project will run smoothly.

COLLECTING CONTENT• In the development stage, working with real content means that

you can see how this content interacts with the other design elements on a page… so the sooner you get some real content and stop using ‘dummy text’ etc, the sooner you see your project take shape.

• Once you have collected content, the first thing you want to do is analyse it and see if you can spot anything that needs changing or removing.

• When you're sorting content, you also want to try and think about the relationships between all of the content… look to see if you can spot any modular or common patterns to the content and keep these in mind.

Content Hierarchy• Hierarchy is "a system in which things are ranked one above the other".

• In ideal terms, we are trying create a system that displays our content in a meaningful and useful way.

• When you are sorting through content, ensure that you are always thinking about how the content relates - you really want to think about making the content as easy to digest as possible.

• Think about using headings, lists, quotes, imagery and more to break up the content and make it easier to communicate more focused messages to the users.

• Once you're happy with the state of your content, you need to start looking at how it will work in the finished publication.

SITE MAPS

FLOW CHART

• REFERENCES:

• Planning a Design Project, Rachel Shillcock, Tuts Plus

• How to Flow Chart, Liza Mock, Gliffy Blog

MOCKUPS + PROTOTYPES• Once you've finished working with your content - great

news! You get to start thinking about the actual design.

• Sketching out initial ideas can be a great way to visually play… you don't have to draw really pretty pictures or make sure the sketches you do are neat - the idea is to visually note down as many ideas as possible, as quickly as possible.

• The best thing you can do with sketching is to experiment. It doesn't matter if you make a mistake, or something doesn't look right to you, as you can easily just move on to the next sketch.

WIREFRAMES• After sketching, there is one final thing you should work on before

starting to design (although, admittedly, this is all part of designing).

• Wireframing is essentially a visual guide to a website which helps you to look at layout without thinking about the aesthetics of the project.

• The idea of a wireframe is to be able to display the visual layout and flow of a project, without the distractions of design details such as colour, typography etc.

• The main focus of wire-framing is understanding the viewers experience of a project.

• You want to make sure all of the essential elements are present e.g. headings, page numbers, links, navigation etc.

Good Wireframes• A well-designed wireframe is one that keeps in mind that

the content is the most important thing on the page and is sympathetic to displaying that content in a manner that is suitable for the project and its end users.

• When you're designing your wireframes, one thing you should think about is the flow of the page - look at the way the content sits on the page and how it flows from one section of content to another.

• The aim here is to make sure that the content reads correctly and that you the eye moves fluidly from one section to the next.

EXAMPLE:

• REFERENCES:

• Sketching and Your Design Workflow

• Introducing Wireframes to Your Design Process, Rachel Shillcock, Tuts Plus

EXERCISE• Working in groups of 3-4 students you are asked to develop a sitemap and

wireframe for a hypothetical website based on one of the printed publications distributed in class.

• Consider the design decisions that went into what you see — the colour choices, the font selection, the small details, the spaces etc.

• What is the purpose of this publication?

• What are the major categories that you will employ to group information?

• Is there a “natural” taxonomy that you can apply to this information? Does the information itself suggest a certain grouping approach?

• What relationships exist between the categories of information?

• The results will be presented to the rest of the class.