Visual Design

Typography
Website Design
Creative Industries Project Management

This Session
Visual Design, Typography, Website
Design - essentials

Resources
Examples

Visual Design
Producing

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 talk about
your work, especially with clients & non-designers,
in a coherent, convincing & objective way.
And since communication is a two-way street it
is about listening.
You have to present your project towards the end of this module.

Visual Design
The Creative Process

Look far and wide for your sources

in the creative process
Chase Design Group

Visual Design
The Creative Process
Seeing design everywhere and taking inspiration
from anything.
Be tuned in and receiving.

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

Visual Design
The Creative Process
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
The Creative Process
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
The Creative Process
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 and
acknowledge

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
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
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
Design
Process
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
Design
Process

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 of
design.
Information overload!

Visual Design
Design
Process
If you have a block - walk around, start your journey
from a different place.
Sometimes the only way to move forward is to dump
everything 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
Process

STOP AND THINK

Inspiration

https://vimeo.com/62571528

The Three Cs of Design

Composition - The way in which the
components of a design are visually
combined and arranged.
Composition takes into account
placement, grouping, alignment,
visual flow and the divisions of space
within a layout.
http://www.noupe.com/design/a-graphic-design-primer-part-3-basics-ofcomposition.html

The Three Cs of Design

Components - The visual elements used
within a design. Photos, illustrations,
icons, typography, linework, decoration,
borders and backgrounds are all
components.

The Three Cs of Design

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.

A design succeeds when Composition,

Components and Concept are each
present and working in unison around a
properly identified audience and
purpose.

Search on google for infographics

interpretations of visual design.

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

Resources
http://design.tutsplus.com/articles/50-totally-free-lessons-in-graphic-design-theory-psd-2916
http://www.smashingmagazine.com/2015/02/design-principles-dominance-focalpoints-hierarchy/
http://www.postplanner.com/these-graphic-design-hacks-skills-make-you-prodesigner-overnight

http://www.jimkrausedesign.com/

Design has nothing to do with art:

Design legend Milton Glaser dispels a
universal misunderstanding

This confusion is not just a matter of semantics. In businesses, schools, offices, even
newspapers, design is often associated with the art department. Thats a fundamental
misunderstanding of the aim of design. When art and design are confused, the
designers domain becomes limited to style and appearance.
In truth, good designers are primarily problem solvers. They seek to understand
the purpose, audience, technical parameters, and strategic nuances (subtle
differences) of an assignment before reaching for their Moleskine sketchpads or
going to town in Photoshop. Next time you work with a designer, start with an
overview of your goals, before diving into a discussion about colors, fonts or
materials.

http://qz.com/823204/graphic-design-legend-milton-glaser-dispels-a-universal-misunderstanding-of-design-and-art/

Typography
use Adobe Illustrator to give you more control
plus VECTOR = SCALABLE

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).

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.

Anatomy
The most common but there are a lot more.

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

Typography Resources
http://designinstruct.com/roundups/10-infographics-that-will-teach-you-abouttypography/

http://julianhansen.com/files/infographiclarge_v2.png

Website Design

A good website is 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 for them to have control of this.
Make sure that when you hand over your website to a
client they understand how they can use it in a clear &
simple way.

A good website integrates social media

in a fluid simple way.
Has a blog / journal (informal) element.
http://builtbybuffalo.com/
http://goldenwolf.tv/

Is constantly updated - FRESH.

Work with your client on their needs.

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

Principles of User 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

http://jackdaly.me/

Keep your website design as simple

as possible.

Domain name purchasing from 123 Reg also 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 buy
a domain name.
Looks professional.
You are there to advise
them on things like this.

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

http://www.lawrencefish.co.uk/

Online Portfolios - loads of choice

http://imcreator.com/
http://www.viewbook.com/
http://www.behance.net/
http://carbonmade.com/
http://www.creativehotlist.com/

http://www.coroflot.com/
http://www.flickr.com/
http://shownd.com/

http://www.portfoliobox.net/
http://www.agoodportfolio.com/

http://subfolio.com/

http://dribbble.com/

http://dropr.com/

http://www.dripbook.com/
http://format.com/
https://wordpress.com/

http://www.indexhibit.org/
http://www.tumblr.com/

http://themecloud.co/

for tumblr users.

Go to their blog
for free themes

https://dcrazed.com/best-free-tumblr-themes/

Website Design

http://siteinspire.com/showcase

http://www.superrb.com/

https://cmd-t.webydo.com/75-of-the-best-resources-for-web-designers-98208e8709a#.bw413cfk6

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.html

Resources - Web Colour

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

Logo Design

Logos are symbols.

A logo should not only reflect the company for which it stands; it
should reflect its target audience, too.

Keep it Simple

The best logos the ones that give the viewer an immediate and
clear sense of you are clean and uncluttered.

Make it Memorable

A 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 cloned

Dont settle for a me-too logo. Do a quick search of logos in your

industry and look for patterns and avoid mimicking them.

Make it Proportional and Well Balanced

The best logos are designed using principles of
proportion and symmetry. Illustrated below, you can see
how both the Apple logo and the Twitter logo utilise
circles of proportionate values as well as symmetry to
create a pleasing, balanced aesthetic quality.

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 your
designer 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

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

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

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

http://mamas-sauce.com/

https://omfgco.com/work/logo-explosion

h"p://www.workbyland.com/#/random4

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

Logo should be designed using Adobe Illustrator VECTOR graphics (scalable & no pixelation).
Creative Skills in Eldon run courses -

http://www.port.ac.uk/faculty-of-creative-and-cultural-industries/facilities/creative-skills/

Also some great videos/guides out there:

https://helpx.adobe.com/illustrator/how-to/illustrator-templates.html

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

https://www.youtube.com/watch?v=-3wJo3TiCIk

https://www.youtube.com/watch?v=3aUHppE0zp4

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 need
to 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.

Drop-In Sessions start 18th November.

Remember to fill out your project proposal and bring this along.
Check the module blog - http://creativepm.tumblr.com/ there are
links on there to view previous student projects and also their
documentation - make sure you go through this.
Remember to use the 1-10 section sheet to work through your
projects.

Final words
Choose a subject, discipline that you love
and can dedicate time, care and attention.
Capture as much as possible - great for
evidence gathering.
Vary your documentation - photos,
sketches, videos.
Have fun in your exploration, research and
project production.

any questions?