Upload
dphotoportsmouth
View
227
Download
1
Embed Size (px)
Citation preview
7/23/2019 Visual Design Elements
1/58
Visual Design
TypographyWebsite Design
Creative Industries Project Management
7/23/2019 Visual Design Elements
2/58
This Session
Visual Design, Typography, Website
Design - essentials
Resources
Examples
7/23/2019 Visual Design Elements
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=wTFkJ9RVgnE7/23/2019 Visual Design Elements
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.
7/23/2019 Visual Design Elements
5/58
The Creative Process
Look far and wide for your sources
in the creative processChase Design Group
Visual Design
7/23/2019 Visual Design Elements
6/58
The Creative Process
Seeing design everywhere and taking inspirationfrom anything.
Be tuned in and receiving.
Visual Design
7/23/2019 Visual Design Elements
7/58
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
7/23/2019 Visual Design Elements
8/58
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
7/23/2019 Visual Design Elements
9/58
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 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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
15/58
Process
STOP AND THINK
Visual Design
7/23/2019 Visual Design Elements
16/58
Inspiration
https://vimeo.com/62571528
https://vimeo.com/62571528https://vimeo.com/625715287/23/2019 Visual Design Elements
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.html7/23/2019 Visual Design Elements
18/58
The Three Cs of Design
Components - The visual elements usedwithin a design. Photos, illustrations,
icons, typography, linework, decoration,
borders and backgrounds are allcomponents.
7/23/2019 Visual Design Elements
19/58
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.
7/23/2019 Visual Design Elements
20/58
A design succeeds when Composition,
Componentsand Conceptare each
present and working in unison around a
properly identified audience and
purpose.
7/23/2019 Visual Design Elements
21/58
Search on google for infographics
interpretations of visual design.
7/23/2019 Visual Design Elements
22/58
7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
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-29167/23/2019 Visual Design Elements
25/58
TypographyuseAdobe Illustratorto give you more controlplusVECTOR = SCALABLE
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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.
7/23/2019 Visual Design Elements
28/58
Anatomy
The most common but there are a lot more.
7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
31/58
Website Design
7/23/2019 Visual Design Elements
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.
7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
36/58
http://jackdaly.me/
Keep your website design as simple
as possible.
http://jackdaly.me/http://jackdaly.me/7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
38/58
http://www.perou.co.uk/
http://www.perou.co.uk/http://www.perou.co.uk/7/23/2019 Visual Design Elements
39/58
HORIZONTAL
SCROLLING
O li P f li l d f h i
7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
42/58
http://clairesambrook.tk/ using Theme Cloud template
W b i D i
http://clairesambrook.tk/http://clairesambrook.tk/7/23/2019 Visual Design Elements
43/58
Website Design
http://siteinspire.com/showcase
http://siteinspire.com/showcasehttp://siteinspire.com/showcasehttp://siteinspire.com/showcase7/23/2019 Visual Design Elements
44/58
http://www.superrb.com/
http://www.superrb.com/http://www.superrb.com/7/23/2019 Visual Design Elements
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.html7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
47/58
Logo Design
L b l
7/23/2019 Visual Design Elements
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.
7/23/2019 Visual Design Elements
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.
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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
7/23/2019 Visual Design Elements
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/
7/23/2019 Visual Design Elements
53/58
http://mamas-sauce.com/
7/23/2019 Visual Design Elements
54/58
!"#$%%&&&'&()*+,-./0'1(2%3%)./0(2
7/23/2019 Visual Design Elements
55/58
http://imjustcreative.co.uk/logostack/
7/23/2019 Visual Design Elements
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.
7/23/2019 Visual Design Elements
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/7/23/2019 Visual Design Elements
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.