Visual Design Elements

7/23/2019 Visual Design Elements

1/58

Visual Design

TypographyWebsite Design

Creative Industries Project Management


2/58

This Session

Visual Design, Typography, Website

Design - essentials

Resources

Examples


3/58

https://www.youtube.com/watch?v=wTFkJ9RVgnE

http://www.sagmeisterwalsh.com/
http://www.sagmeisterwalsh.com/http://www.sagmeisterwalsh.com/https://www.youtube.com/watch?v=wTFkJ9RVgnEhttps://www.youtube.com/watch?v=wTFkJ9RVgnE


4/58

isual DesignProducing

As well as possessing cultural awareness and being

aware of the world beyond design, the modern

creative needs to be a skilled communicator.

This means possessing the ability to talkabout

your work, especially with clients & non-designers,

in a coherent, convincing& objectiveway.

And since communication is a two-way street it

is about listening.

You have to present your project towards the end of this module.


5/58

The Creative Process

Look far and wide for your sources

in the creative processChase Design Group

Visual Design


6/58


Seeing design everywhere and taking inspirationfrom anything.

Be tuned in and receiving.

Visual Design


7/58


So what skills do you need to do good work?

Talent

Wide and generous interpretation of the design

area - multi-discipline

Industriousness

Dedication

Love of your craft

Visual Design


8/58


If you cant say that you have most of these then

perhaps this career isnt for you.

Also essential to have a questioning attitude to

your work.

Finally you need to acquire a voice.

Visual Design


9/58


A good voice is forged by 3 main elements:

1. Creative Conviction - you need to have a vision. A clear &

informed understanding of what is good and what has real worth

2. Personality- Inner confidence to trust your creative instincts

3.Awareness of fashion, cultural trends and history - look back andacknowledge

Important to make sure that all these elements

are all in your work for this module - inform

clients - look around - know your audience.

Visual Design


10/58

Inspiration

Allowing influences into your work is one of the

ways that you expand your extensive range.

Creatives enrich their work - not diminish it - by

looking at ways to incorporate new and radical

modes of expression into their work.

Visual Design


11/58

The Brief (Assignment)

All design jobs start with a brief even if its a

self-initiated project.

Creatives must have a brief.

1st duty - to understand the brief - research it,

question and challenge

Visual Design


12/58

DesignProcess

Because of this our focus has narrowed.

We rarely look at work from a distance or at

different angles.We work in miniature.

We avoid anything that cant be done on the

computer.

The screen dictates our relationship to our work -

it dictates how our work looks.

Visual Design


13/58

DesignProcess

Not Anti-Computer - it enables us to do more

work - enables us to operate to greater technical

proficiency.

It cant however do everything!

It is a good thing - but comes with its own set of

problems that virus-like, infect the process ofdesign.

Information overload!

Visual Design


14/58

DesignProcess

If you have a block - walk around, start your journey

from a different place.

Sometimes the only way to move forward is to dumpeverything and start again. You then might find that

the work you have already completed helps inform

your new direction.

The creative designer has become an editor - Photos/

type/film editing...

Visual Design


15/58

Process

STOP AND THINK

Visual Design


16/58

Inspiration

https://vimeo.com/62571528
https://vimeo.com/62571528https://vimeo.com/62571528


17/58

The Three Cs of Design

Composition -The way in which thecomponents of a design are visually

combined and arranged.

Composition takes into account

placement, grouping, alignment,

visual flow and the divisions of spacewithin a layout.http://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-

composition.html
http://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.htmlhttp://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.htmlhttp://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.htmlhttp://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.htmlhttp://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.htmlhttp://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.htmlhttp://www.noupe.com/design/a-graphic-design-primer-part-3-basics-of-composition.html


18/58


Components - The visual elements usedwithin a design. Photos, illustrations,

icons, typography, linework, decoration,

borders and backgrounds are allcomponents.


19/58


Concept - Abstract elements of theme,message and style. These intangible

ingredients of a design or image are

critical to its visual presentation and

delivery of message.


20/58

A design succeeds when Composition,

Componentsand Conceptare each

present and working in unison around a

properly identified audience and

purpose.


21/58

Search on google for infographics

interpretations of visual design.


22/58


23/58

http://paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/
http://paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/http://paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/


24/58

Resourceshttp://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory--

psd-2916

http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-

points-hierarchy/

http://www.postplanner.com/these-graphic-design-hacks-skills-make-you-pro-

designer-overnight

http://www.jimkrausedesign.com/
http://www.jimkrausedesign.com/http://www.jimkrausedesign.com/http://www.postplanner.com/these-graphic-design-hacks-skills-make-you-pro-designer-overnighthttp://www.postplanner.com/these-graphic-design-hacks-skills-make-you-pro-designer-overnighthttp://www.postplanner.com/these-graphic-design-hacks-skills-make-you-pro-designer-overnighthttp://www.postplanner.com/these-graphic-design-hacks-skills-make-you-pro-designer-overnighthttp://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/http://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory--psd-2916http://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory--psd-2916http://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory--psd-2916http://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory--psd-2916


25/58

TypographyuseAdobe Illustratorto give you more controlplusVECTOR = SCALABLE


26/58

Basics

Typeface or font?

Designers are often unsure of the difference

between these two, as they are both well

used terms for the same thing.A typeface is a family of fonts (such as

Helvetica Regular, Helvetica Italic, Helvetica

Bold, Helvetica Black, etc.) but a font is one

weight or style within a typeface family

(such as Helvetica Regular).

T f l ifi i


27/58

Typeface classifications

The most common two types you will hear of are:

Serif these typefaces are the more traditional ones. They

are distinguished by a short line or finishing stroke on the

end of character strokes and stems (shown in the anatomy

diagram below) and;Sans-serif as the name suggests, these are distinguished

by their lack of any Serifs. They only became popular in the

nineteenth century and are considered modern as a result.


28/58

Anatomy

The most common but there are a lot more.


29/58

Typography Resources

http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/

http://welovetypography.com/

http://www.fonts.com/content/learning/fontology/level-1

http://www.fonts.com/content/learning/fontology/level-3/signs-and-symbols
http://www.fonts.com/content/learning/fontology/level-3/signs-and-symbolshttp://www.fonts.com/content/learning/fontology/level-3/signs-and-symbolshttp://www.fonts.com/content/learning/fontology/level-1http://www.fonts.com/content/learning/fontology/level-1http://welovetypography.com/http://welovetypography.com/http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/


30/58

Typography Resourceshttp://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-

typography/

http://julianhansen.com/files/infographiclarge_v2.png
http://julianhansen.com/files/infographiclarge_v2.pnghttp://julianhansen.com/files/infographiclarge_v2.pnghttp://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-typography/http://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-typography/http://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-typography/http://designinstruct.com/roundups/10-infographics-that-will-teach-you-about-typography/


31/58

Website Design


32/58

A good websiteis easy to navigate.

Uncluttered.

Content is king.

Avoid using google sites, wix or weebly,

dreamweaver (unless you have a hosting

package) - think of your client - how will

they be able to update content?

Important to have control of this.


33/58

A good websiteintegrates social media

in a fluid simple way.

Has a blog / journal (informal) element.

Is constantly updated - FRESH.

http://builtbybuffalo.com/

http://goldenwolf.tv/
http://goldenwolf.tv/http://goldenwolf.tv/http://builtbybuffalo.com/http://builtbybuffalo.com/


34/58

Work with your client on theirneeds.

You are there to advise them.

Who is the audience?Who is the competition? good and bad.

Sit down with them and go through

different websites.

Design a logo that works well on the

website - is clear.

Black on white - vector graphic


35/58

Principles

ofUser Interface Design

Clarity

Interfaces exist to enable interaction

Conserve attention at all costs

Keep users in control

Consistency matters

Great design is invisible

Build on other design disciplines

Interfaces exist to be used


36/58

http://jackdaly.me/

Keep your website design as simple

as possible.
http://jackdaly.me/http://jackdaly.me/


37/58

Domain name purchasing from 123 Regalso enables you to forward your email. This

means that you can buy a domain name - for example I have islandcitystories.co.uk

and I can have [email protected] on the website, business card, CV as my

email (looks consistent) and then set up mail forwarding to a different email. https://

www.123-reg.co.uk/

Important that you

advise your client to buya domain name.

Looks professional.

You are there to advise

them on things like this.
https://www.123-reg.co.uk/https://www.123-reg.co.uk/https://www.123-reg.co.uk/https://www.123-reg.co.uk/


38/58

http://www.perou.co.uk/
http://www.perou.co.uk/http://www.perou.co.uk/


39/58

HORIZONTAL

SCROLLING

O li P f li l d f h i


40/58

Online Portfolios !loads of choice

http://www.behance.net/http://www.coroflot.com/http://carbonmade.com/

http://www.creativehotlist.com/ http://www.flickr.com/

http://www.agoodportfolio.com/

http://www.indexhibit.org/

http://subfolio.com/

http://dribbble.com/

http://www.viewbook.com/

http://shownd.com/

http://www.dripbook.com/

http://www.portfoliobox.net/

http://www.tumblr.com/

http://dropr.com/

http://imcreator.com/

http://format.com/

https://wordpress.com/
https://wordpress.com/https://wordpress.com/http://format.com/http://format.com/http://imcreator.com/http://imcreator.com/http://dropr.com/http://dropr.com/http://www.tumblr.com/http://www.tumblr.com/http://www.portfoliobox.net/http://www.portfoliobox.net/http://www.dripbook.com/http://www.dripbook.com/http://shownd.com/http://shownd.com/http://www.viewbook.com/http://www.viewbook.com/http://dribbble.com/http://dribbble.com/http://subfolio.com/http://subfolio.com/http://www.indexhibit.org/http://www.indexhibit.org/http://www.agoodportfolio.com/http://www.agoodportfolio.com/http://www.flickr.com/http://www.flickr.com/http://www.creativehotlist.com/http://www.creativehotlist.com/http://carbonmade.com/http://carbonmade.com/http://www.coroflot.com/http://www.coroflot.com/http://www.behance.net/http://www.behance.net/


41/58

http://themecloud.co/

for tumblr users.

Go to their blog

for free codes
http://themecloud.co/http://themecloud.co/http://themecloud.co/http://themecloud.co/


42/58

http://clairesambrook.tk/ using Theme Cloud template

W b i D i
http://clairesambrook.tk/http://clairesambrook.tk/


43/58

Website Design

http://siteinspire.com/showcase
http://siteinspire.com/showcasehttp://siteinspire.com/showcasehttp://siteinspire.com/showcase


44/58

http://www.superrb.com/
http://www.superrb.com/http://www.superrb.com/


45/58

https://www.sensible.com/dmmt.html

Copies in the library.

One of the best books

written on web usability.

https://books.google.co.uk/books?

id=QlduAgAAQBAJ&printsec=frontcover&dq=steve

+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIju

Gj5f2PyAIVwdYUCh1Ywg4Q
https://www.sensible.com/dmmt.htmlhttps://www.sensible.com/dmmt.htmlhttps://www.sensible.com/dmmt.htmlhttps://www.sensible.com/dmmt.htmlhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://books.google.co.uk/books?id=QlduAgAAQBAJ&printsec=frontcover&dq=steve+krug&hl=en&sa=X&ved=0CCAQ6AEwAGoVChMIjuGj5f2PyAIVwdYUCh1Ywg4Qhttps://www.sensible.com/dmmt.htmlhttps://www.sensible.com/dmmt.html


46/58

http://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/

http://www.hongkiat.com/blog/best-color-tools-for-web-designers/

Resources - Web Colour


47/58

Logo Design

L b l


48/58

Logos are symbols.A logo should not only reflect the company for which it stands; it

should reflect its target audience, too.Keep it SimpleThe best logos the ones that give the viewer an immediate and

clear sense of you are clean and uncluttered.

Make it MemorableA logo should be easily recalled after just a glance. A glance,

after all, is typically all your logo is going to get from most

people.

Make it Look New and NOT clonedDont settle for a me-too logo. Do a quick search of logos in your

industry and look for patterns and avoid mimicking them.


49/58

Make it Proportional and Well Balanced

The best logos are designed using principles of

proportion and symmetry. Illustrated below, you can seehow both the Apple logo and the Twitter logo utilise

circles of proportionate values as well as symmetry to

create a pleasing, balanced aesthetic quality.


50/58

Make it Versatile

Your logo might be used in a number of ways and in

multiple contexts. Here are just a few:

On t-shirts, baseball caps

On pens, keychains and water bottles

On very horizontal and extremely vertical banners

On both black and white backgrounds (make sure yourdesigner creates your logo in black and in white to

satisfy these needs if necessary)

Very large and very, very small -VECTOR = SCALABLE

Alongside other company logos, like those for specific

products and services


51/58

When designing a logo you should have a system in

place similar to the one below:

Meet with client

Research (look at the intended demographic)

Brainstorming/Develop ideas through pencil sketches

(Do not go onto the computer at this time) Develop a selection of your designs using vector

based software such as Adobe Illustrator

Send to client for feedback

Make any changes as requested by your client Produce final artwork and send to client


52/58

The importance of putting pen to paper before sitting down at a computer

http://www.hongkiat.com/blog/advantages-pen-paper-computer-design/


53/58

http://mamas-sauce.com/


54/58

!"#$%%&&&'&()*+,-./0'1(2%3%)./0(2


55/58

http://imjustcreative.co.uk/logostack/


56/58

The production part of your project is very important. You must

be able to understand your client/projects needs and priorities.

Take into consideration all the visual elements that you will needto gather to make this into a successful project.

One that you and your client can feel proud about.

Attention to detail is vital.

Only skimmed the surface of visual design elements.

Know your audience - use them for feedback and check

regularly within your design and production stages.


57/58

Drop-In Sessions start 6th November.

Remember to fill out your project proposal and bring this along.

Check the module blog - http://creativepm.tumblr.com/

Fi l d
http://creativepm.tumblr.com/http://creativepm.tumblr.com/


58/58

Final words

Choose a subject, discipline that you love

and can dedicate time, care and attention

to.

Capture as much as possible.

Vary your documentation - photos,

sketches, videos.Have fun in your exploration and research.

Documents

Visual Design Elements