Site Design
Download
1 / 30

GuidelinesEye AppealSketching - PowerPoint PPT Presentation


  • 262 Views
  • Uploaded on

Site Design. Guidelines Eye Appeal Sketching, Prototyping, and Testing the Design. Site Design. Guidelines Eye Appeal Sketching, Prototyping, and Testing the Design. Guidelines. aspect ratio relationship between height and width Most computer screens have h:w ratio of 3:4

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'GuidelinesEye AppealSketching' - Solomon


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Slide1 l.jpg

Site Design

  • Guidelines

  • Eye Appeal

  • Sketching, Prototyping, and Testing the Design


Site design l.jpg
Site Design

  • Guidelines

  • Eye Appeal

  • Sketching, Prototyping, and Testing the Design


Guidelines l.jpg
Guidelines

  • aspect ratio

    • relationship between height and width

    • Most computer screens have h:w ratio of 3:4

    • eg, display size of 600 pixels X 800 pixels

    • browser borders and title bar takes space

    • For most users screen is really 420 X 750.

    • At 72 dpi, that’s 5.6 inches X 10.1 inches


Guidelines4 l.jpg
Guidelines

  • page layout

    • magazine: eye first sees top right-hand corner

    • web pages: eye first sees top

    • also, eye sees item faster if page is not cluttered

    • movement often catches eye


Guidelines5 l.jpg
Guidelines

  • text

    • black on white is easiest on eyes

    • never display text on photos

    • Best line length for readability is 10-12 words per line (adults) or 8-10 per line (children)


Guidelines6 l.jpg
Guidelines

  • Text

    • 12 point system fonts easiest to read.

      • example: Times, Helvetica, Arial, Times Roman, Verdana, Georgia.

    • System fonts most likely to be found on all computers


Guidelines7 l.jpg
Guidelines

  • Text (cont)

    • 12 point system fonts easiest to read.

      • example: Times, Helvetica, Arial, Times Roman, Verdana, Georgia.

    • System fonts most likely to be found on all computers


Guidelines8 l.jpg
Guidelines

  • Text (cont)

    • Use serif font (eg Times) for body text

    • serifs are the little feet on the tops and ends of letters. Easier to read in paragraphs.

    • Use sans serif (without serifs) for titles. Easier to read in short titles.

      Times New Roman is a serif font

      Arial is a sans serif font


Guidelines9 l.jpg
Guidelines

  • Text (cont)

    • Use only 2 fonts and 2 sizes per page. Less confusing.

    • Use one font for titles, one for body text.

    • Avoid words in all caps. Looks like your YELLING.

    • Web page readers skim more than magazine readers. Use larger and heavier font for headings.

    • Use lots of subheadings.

    • Separate paragraphs by a single line OR indent, not both.

    • Leave lots of white space around text.


Guidelines10 l.jpg
Guidelines

  • Text (cont)

    • Build your page around a single axis. Easier to read if text, images and graphics align.

    • Axis can be near left, at center, or to right.

    • page should balance visually from top to bottom and from right to left

    • eg, Don’t concentrate the graphics in one corner.


Guidelines11 l.jpg
Guidelines

  • Text (cont)

    • Simpler is better.

    • Cjaps amd c;itter are bad/


Site design12 l.jpg
Site Design

  • Guidelines

  • Eye Appeal

  • Sketching, Prototyping, and Testing the Design


Eye appeal l.jpg
Eye Appeal

  • color

  • balance

  • contrast

  • alignment

  • scrolling


Eye appeal14 l.jpg
Eye Appeal

  • color, balance, and contrast

    • bold, bright colors in menu areas and mastheads are distracting. Use pastels.

    • Use the color wheel to avoid complementary colors since these are contrasting.

    • Colors that sit directly across the color wheel from each other are complementary.

    • Colors close to each other are less contrasting, more pleasant.

    • Better to use shades (add black to a color) and tints (add white to a color)




Eye appeal17 l.jpg
Eye Appeal

  • alignment

    • Human eye likes things to line up.

    • Example: left edge of a picture should line up exactly with the left edge of the text column in which it is embedded.

    • Alignment scheme for site should be the same from page to page.

    • Usually use left column edge as core of alignment scheme since text can only be justified left or right, but not both.

    • Other types of media can justify text both right and left, so have more alignment options.


Eye appeal18 l.jpg
Eye Appeal

  • Frames, menus, and scrolling

    • Advantages of frames:

      • main menu items are always available to users

      • title is always present to answer “what site is this?”

      • graphics do not reload and flash every time a new content page is called up.


Eye appeal19 l.jpg
Eye Appeal

  • Frames, menus, and scrolling

    • Menus

      • should always be visible

      • should only show main sections, not every page.

      • can use hierarchical menus to show subsections

      • must be in consistent position from page to page

      • should be based on the flowchart created in the design phase.


Eye appeal20 l.jpg
Eye Appeal

  • Frames, menus, and scrolling

    • Scrolling

      • computer screen is more like a TV than a newspaper

      • is disruptive. Do not scroll a TV screen.

      • make sure most important information can be seen without scrolling.

      • better to link small pages than to make user scroll down one large page.


Eye appeal21 l.jpg
Eye Appeal

  • User control

    • should offer as much control as possible.

    • user control it the center of interactivity

    • pages should be as simple as possible yet give maximum number of choices.


Site design22 l.jpg
Site Design

  • Guidelines

  • Eye Appeal

  • Sketching, Prototyping, and Testing the Design


Sketching prototyping and testing the design l.jpg
Sketching, Prototyping, and Testing the Design

  • Sketches are part of the design process (see next page).

  • Sketching introduces the artistic component to the design.


Planning process l.jpg
Planning process

Goals chart

Planning Table

General Flow Chart

Detailed Flow Chart

Specifications

Storyboard

and sketch

Prototype


Sketching prototyping and testing the design25 l.jpg
Sketching, Prototyping, and Testing the Design

  • Sketch components:

    • Display of info: text, images, sound, vcideo, tables, lists.

    • Navigation: menus, identification, user control

    • feedback and interaction

    • corporate identity

    • location and type of text

    • color, contrast, balance.

    • frames and alignment

    • scrolling


Sketching prototyping and testing the design26 l.jpg
Sketching, Prototyping, and Testing the Design

  • Can sketch in any medium: paper, computer, etc.

  • Can use callouts or comments that identify font specifics, colors, etc.


Sketching prototyping and testing the design27 l.jpg
Sketching, Prototyping, and Testing the Design

  • Prototype

    • a pixel by pixel model of the page that users will see.

    • built on the computer and displayed in the same manner as its published form.

    • Similar to sketch, but more detailed.


Sketching prototyping and testing the design28 l.jpg
Sketching, Prototyping, and Testing the Design

  • Testing prototype

    • Display of information: is text readable? Are images useful? Can you find info in the tables and lists? etc.

    • Navigation: Is it clear what site you’re at? Where you are in the site? What else if available at the site? Where you should go next?

    • Are all menu choices evident? How do you search the site?


Sketching prototyping and testing the design29 l.jpg
Sketching, Prototyping, and Testing the Design

  • Testing prototype

    • Communicating the corporate identity: Who is sponsoring the site? How can you tell? Is the company logo visible? etc.

    • Design issues: What’s missing? What could be eliminated? Is the page cluttered?


Testing the final site l.jpg
Testing the final site

  • Testing

    • Test every browser and browser version that your users will probably use.

    • Test on all platforms.

    • Test with all reasonable screen sizes, resolutions, color depths

    • Test with different bandwidths

    • Test different versions of necessary plug-ins.

    • Do user testing


ad