Design - PowerPoint PPT Presentation

1 / 40
About This Presentation
Title:

Design

Description:

... vero eros et accumsan et iusto odio dignissim qui blandit ... The Web Style Guide section on typography: http://www.webstyleguide.com/type/index.html ... – PowerPoint PPT presentation

Number of Views:265
Avg rating:3.0/5.0
Slides: 41
Provided by: bobk3
Category:
Tags: design | eros | guide

less

Transcript and Presenter's Notes

Title: Design


1
(No Transcript)
2
Design
  • Design is everywhere
  • Good design communicates the information (and
    when it does this well, most people dont notice
    good design)
  • Bad design says something about the designer (and
    may fail to communicate the information and many
    people notice bad design).

3
In these slides
  • Terminology terms you need to know and be able
    to apply
  • Design basics Concepts that help us all to be
    better designers

4
Design
Terminology Basic design principles
5
Terminology
  • From typography, design computingYou are
    expected to understand and use underlined words

6
At the end of this section, you should be able
to
  • Explain how the legibility of text is effected by
    a number of factors
  • Understand whats meant when basic terms in
    typography are used
  • Give examples of how the media, the audience and
    the purpose of a text can affect the choices of
    type to be used
  • Explain what some of the differences are between
    text on screen and text on paper

7
Text in Print and text on the Webhave major
differences
  • In print, everything is fixed at the time of
    production
  • The size of the page
  • The font
  • The resolution 1200 dpi dots per inch in
    printed material/600 dpi from the printer I ran
    this off on
  • The line length
  • On the Web, everything is variable
  • The size of page
  • The font
  • The resolution It approximates 85 dpi
  • The line length

8
Choice of the appropriate type may depend on
  • Purposes (communication, decoration, obfuscation,
    )
  • Body copy vs display type
  • Audience

9
Legibility depends on
  • Legibility depends on contrasts
  • contrasts between different letter forms,
  • contrasts between headlines and body copy,
  • contrasts between white space and text
  • Legibility depends on the physical reality the
    resolution of the medium
  • Legibility depends on how the the text relates to
    its surrounding space (figure and ground)

10
Fonts Serifs
  • Serifs are the little (often) pointy bits that
    are parts of some typefaces
  • Serifs

11
Fonts Serif and Sans-serif
  • Serif faces Times New RomanPalatine
    LinotypeBookman Old Style
  • Slab Serif facesSlab
  • Sans-serif facesArial Unicode MSTrebuchet MS
  • Sans

12
Fonts - other purposes
  • Monotype also called Monospaced fonts
  • Courier New is a slab serif face but, in
    addition, all letters are the same width. It (or
    fonts like it) are used to represent computer
    code.
  • Display special purpose
  • Comic Sans MS
  • Haettenschweiler
  • Monotype Corsive
  • These may not exist on a users machine. For
    Intranet use okay (you usually know whats on the
    machines), but for the Internet you need to be
    more careful.
  • adgcdfs

13
Typefaces / fonts
  • In printGenerally speaking the added contrasts
    in the letter shapes of many serif fonts lead to
    them being more legible in extended text.
  • On screenWhile theres some debate, the poorer
    screen resolution favours sans-serif fonts. As
    screen resolutions improve this may change.

14
Line length
  • What line lengths make for easy
    reading?NewspapersBookson the Web
  • The conventional wisdom here suggests, the main
    problem is with line lengths that are too wide.
  • It is harder to read material with long line
    lengths.

15
Line spacing
  • The space between lines of type can effect
    legibility. Theres a fixed distance between the
    baselines of type. In print terms 12 on 12 was
    12 point type on 12 point leading. While 7 on 8
    was 7 point type on 8 point leading. The rule
    usually was with smaller type, leading needed to
    be proportionately bigger.

16
Illustrating line spacing (cont.)
  • 12 on 11
  • 12 on 15

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi
Approximating
17
Caps and lower case
  • LEGAL DISCLAIMERS TELLING YOU WHAT YOU SHOULD BE
    CAREFUL OF AND AVOID ARE OFTEN WRITTEN IN TIGHTLY
    SET ALL CAPS. IF YOU HAVE A FAIR AMOUNT OF TYPE,
    IS ALL CAPS EASY TO READ?
  • what about all lower case, if you have a similar
    amount of type?

18
Size
  • For print, if know your primary audience, there
    are some standard decisions
  • Young children, old people get bigger
    typePeople who read a lot usually are
    comfortable with smaller type.
  • Compare a broadsheet with a tabloid.
  • For screen
  • On the web, choose appropriate standard default
    values.
  • Your audience in many cases might be able to set
    their own preferences.(Not always, of course)

19
More about size
  • Verdana x
  • Franklin Gothic Book x
  • Goudy Old Style x
  • Trebuchet MS x
  • Palatino Linotype x
  • Times New Roman x
  • x x x x x x
  • To my eye, these typefaces look to be of
    different sizes. Actually they are the same size.
  • In part this has to do with whats called the
    x-height of the font

20
Colour-type background
  • Changing colour can be very bit distracting
  • Background type

May be unreadable on print outIts not very
readable on the screen
Serif Sans-serif
Text and background colour may fail to go
together well.
21
Alignment
  • Books and magazines are often justified.There
    are some readability advantages to justified
    type.It get justified type to look its best
    requires a number of adjustments (letter and word
    spacing) as well as fairly sophisticated
    hyphenation programs.
  • What about justified type on the web?

22
Some principles for Web typography.
  • Remember on the Internet Users have
  • different platforms,
  • different browsers,
  • different versions of browsers,
  • different user settings,
  • different resolutions, different sizes of
    windows,
  • different web connections
  • And users themselves are different
  • Plan so things will work regardless
  • For example, use relative rather absolute sizes /
    dimensions etc.

23
HTML and CSS
  • With HTML, you cantcontrol the space between
    lines. You cant control size of type or line
    length.
  • With CSS, you can do most of these things. Some
    you should do some you shouldnt
  • Even with CSS you dont have available
    everything. For example, you dont have automatic
    hyphenation programs

24
Terminology summary
  • Sans-serif faces and serif faces
  • Resolution
  • Baseline
  • Descender
  • x-height
  • an em
  • Picas and points

Most, but probably not all of these terms have
been explicitly covered in the previous
slides. If there are some you dont know. Find
out about them.
25
References
  • Theres a lot of interesting material on the web
    about typography. Heres just a sampling
  • The Web Style Guide section on typography
    http//www.webstyleguide.com/type/index.htmla
    little out-of-date perhaps
  • http//www.typ.nl/TYP04/woud/illegibility/illegibi
    lity00.html
  • http//desktoppub.about.com/blaztypefonts.htm
  • http//psychology.wichita.edu/optimalweb/text.htm
    for research

26
On your own


















































































































































































































































































































































































































































































  • Pay attention to the choices that designers have
    made when you see something with text on it.
    Whether its an adverts, a logo, a sign on the
    motorway, a newspaper or magazine, a food
    container, a pop-up window from your operating
    system, a powerpoint slide in a lecture, somebody
    has designed it. What choices did they make?
    What kind of font, size, weight, line length,
    spacing ? Did they get it right? Can you make
    it better?

27
Design
Terminology Basic design principles
28
Design for non-designers
  • Understanding a few basic concepts can help
    anyone be a better designer
  • Proximity
  • Alignment
  • Repetition
  • Contrast

29
Proximity
  • Group related items together.
  • As a rule, related items should be closer and
    unrelated items, separate
  • Bob Keim
  • rgk_at_kent.ac.uk
  • Roger Sutton
  • crs_at_kent.ac.uk
  • Simon Thompson
  • sjt_at_kent.ac.uk

30
Proximity - better
  • Group related items together
  • As a rule, related items should be closer and
    unrelated items, separate
  • Bob Keim
  • rgk_at_kent.ac.uk
  • Roger Sutton
  • crs_at_kent.ac.uk
  • Simon Thompson
  • sjt_at_kent.ac.uk

31
Alignment
  • Make everything connect.
  • Does it looks like its just stuck there? If
    it does, its wrong!
  • Where should I put it? Where it
    lines up with other things.

Whats wrong with this slide?
32
Example

33
Example
Give it a try! What would you do to improve this?
34
Repetition
  • Repeat elements of the design throughout
  • If you use a triangle for a bullet, use triangles
    for other things.
  • If you use an accent colour, choose other places
    to use that accent colour. For example, this
    slide would be better if the Kent logo . colour.
  • If you make something flush left, make other
    things flush left.
  • If something is centred, make other things
    centred.

35
Contrast
  • If two items are not exactly the same, make them
    different - really different.
  • If items are just a little different (a point or
    two in size, a very similar but different font, a
    very similar but different weight or colour etc),
    it may look like a mistake (if its noticeable)
    or it may just give a feeling that somethings
    wrong

36
Example
37
Limit the number of possibilities
  • One or two colours great!Three colours,
    maybe!?More than three, very doubtful
  • One or two faces great!Three faces only for
    a very good reasonMore than three very, very
    doubtful

38
When to do something different
  • Differences should contrast.
  • They should be noticeably different.
  • Differences should carry meaning. The contrast
    between code and text. Col
    1Col 2
  • Differences should reflect organisation. Headings
    , examples, changes of voice, meta-information

39
Designing for the Web
  • Cut out everything that isnt necessary.
  • Screen space is precious. White space on the
    screen is important. Dont let your messages get
    lost in junk.

40
Design References
  • Robin Williams The Non Designers Design Book
    PeachPit Press 1994.Includes little quizzes
  • D. Sano K. Mullet Designing Visual Interfaces
    Prentice-Hall 1995.Includes principles, common
    errors and techniques
Write a Comment
User Comments (0)
About PowerShow.com