The Principles of Beautiful Web Design - PowerPoint PPT Presentation

Loading...

PPT – The Principles of Beautiful Web Design PowerPoint presentation | free to download - id: 1c580e-ZjZlN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

The Principles of Beautiful Web Design

Description:

... a website for 'Clyde's Turtle Rising,' which font ... Clyde's Turtle Racing. Relevance- can add an interesting value to your website. Is it interesting? ... – PowerPoint PPT presentation

Number of Views:120
Avg rating:3.0/5.0
Slides: 33
Provided by: Mon6107
Learn more at: http://www.internet-marketing-design.com
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: The Principles of Beautiful Web Design


1
The Principles of Beautiful Web Design
  • Monica Glover
  • Internet Marketing 450
  • 11-3-09

2
Whose this guy?
Jason Beaird
3
Preparation
  • Understand The Task
  • No direction
  • Figure out what the client does

4
Lets get STARTED!
  • Start with a blank sheet of paper
  • Allows you to ignore the technical limitations
  • Create a few different designs

Before taking your masterpiece to Photoshop…
5
What is a Good Design?
  • The website should be functional, beautiful,
    simple to use and consistent with theme.
  • Usability forces on the functionality, the
    presentation of information efficiency. The
    most important
  • Aesthetics- Presentation, animation graphics

6
3 Ways to Good Design
  • Users are please by the design, but drawn to the
    content.
  • Users can move about easily via navigation
  • Users recognize each page as belonging to the
    site.

7
Web page Anatomy
  • Containing Block
  • Logo
  • Navigation
  • CONTENT
  • Footer
  • White space

8
Balance
  • Symmetrical- occurs when the elements of a
    composition are the same on either side of an
    axis line.
  • Asymmetrical- a little more abstract and visually
    interesting. Different sizes, shapes tone and
    placement.

9
Jazz it up and Personalize!
  • Unity
  • Proximity
  • Repetition

10
Ok… For Real Now, Lets GET STARTED!
  • After speaking with the client again, you must
    find out….
  • How much content do you need
  • What kinds of content do you want to provide on
    the website
  • Is the logo on the business card used
    consistently across all collateral to brand the
    company

11
Color
  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Purple
  • White
  • Black

12
Color Temperature
13
Color Scheme
  • Monochromatic
  • Analogous
  • Complementary
  • Split complementary
  • Triadic
  • Tatradic (double complementary)

14
Monochromatic
  • Monochromatic- consisting of the same color with
    various shades.

15
Analogous
  • Analogous- colors that accent each other that are
    adjacent of the color wheel.

16
Complementary
  • Complementary- colors located opposite the color
    wheel.

17
Split Complementary
  • Split Complementary- color scheme, using two
    adjacent colors to your base colors complement

18
Triadic
  • Triadic- using colors that are not next in the
    color wheel.

19
Tetradic
  • Tetradic- involves 4 colors, generally two sets
    of complementary colors.

20
Texture
  • Texture is anything that give a distinctive
    appearance or feel to the surface, design or
    object.
  • http//fishmarketing.net/

21
Line
  • Horizontal- as a background can create texture
    and design.
  • Diagonal- can make the page more exciting and
    create more eye movement around the page.
  • Thickness of line can also create a sense of
    expression

22
Shape
  • Shape- Any time two points met you have created a
    shape.

Shapes
23
Light and Shadow
  • Light and shadow can give an illusion that an
    image is 3D, just by adding lighting and
    highlighting colors along with shadows. It can
    make and image pop!

See the difference…
24
Pattern
  • Can really help the visual appeal and create a
    lot of texture in your website.
  • http//veerle.duoh.com/

25
Typography
  • Safe Font list
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Typography- Making impressions with writing

26
Text Spacing
  • Horizontal spacing- a process called Kerning
    shows how far and close letter should be to each
    other.
  • Vertical Spacing- space between the lines of text
    is knowing as leading. Makes it easy to read.

27
Font Types
  • Serif fonts- Type face strokes with accents at
    the top and bottom. Ex Times New Roman font ?AT
  • Sans Serif Font- Doesnt have the accent marks at
    the top and bottom (just like this font)
  • Handwritten- can be difficult to read, but show
    personality ex? Hey Monte
  • Novelty fonts- very off the wall, but if used in
    the correct way can show great personality.
  • Ex? Hey Monte

28
Choosing the Right Font
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Clydes Turtle Racing
  • Lets say we are creating a website for Clydes
    Turtle Rising, which font would you pick?

29
Imagery- what to look for?
  • Relevance- can add an interesting value to your
    website
  • Is it interesting?
  • Does it catch your eye and make you understand
    the theme?
  • Is it appealing?
  • Because everyone has different style and taste on
    what is appealing its best just to find out who
    your audience is and direct the site to them.

30
Photography
  • Do it your self- Its generally best if you do it
    your self because, its your vision you are the
    only one that can get it right.
  • Illustration- can also be good to… this shows the
    client that you have a real interest in there
    company.
  • Stock- if you dont have the time or talent you
    can also purchase stock images that you many need
    to pay a fee for
  • Buyout all rights if you can.
  • Can be difficult

31
What not to do!
  • Google Jacking- finding an object on Google,
    possibly photoshopping or cropping the image. We
    all do it, but its not ok especially for a
    professional website.
  • Hot linking- linking your site to the image
  • Clip art- need I say more

32
One Love
About PowerShow.com