Basic principles of..

1
Basic principles of..

• Web design
• JLMC 315, Groshek

2
Web design ???

• Who are we designing for?
• Our users
• User-centered design

3
What gets users attention?

• Chunks of text
• Dont be afraid of white space
• Lists
• Occasional use of bolding
• Subheadings
• Links
• Users are selfish, lazy, and ruthless.
• Jakob Nielsen

4
What do most users avoid?

• Long blocks of text
• Horizontal scrolling
• Long vertical scrolls
• Information that is hard to find
• See Nielsen link
• http//www.useit.com/alertbox/9605.html

5
Remember our four steps
Where are we now?

• Research
• Planning
• Execution
• Evaluation

6
In a perfect world, we have

• Content experts
• Writers
• Information architects
• Graphic designers
• Technical experts
• Producer

7
Web pages should easily answer

• Who
• What
• Where
• When
• Easy for Journalism folks like us, no?

8
Ideally, every Web page should have the following

• Informative title
• Creators identity
• Last revision date
• Home page
• Links to home

9
More basic rules

• Screen size (in pixels)
• 1024x768
• 800x600(safe)
• 640x480(outdated)
• But you should shoot for smaller, rather than
  larger screen sizes
• 1000 pixels of usable space has become a default
  standard for many designers
• Type sizes
• Fixed or user controlled

10
Stick to your original goals

• Avoid scope creep
• Develop a general template, even if all of your
  pages wont look exactly the same
• Be consistent from start to finish

11
Four principles of Web design

• Alignment
• Proximity
• Repetition
• Contrast

12
Four principles of Web design

• Alignment
• Vertical
• Horizontal
• Dont mix

13
Four principles of Web design

• Proximity
• Group related items together
• Dont leave wide gaps between items

14
Four principles of Web design

• Repetition
• Colors
• Images/graphics
• Fonts
• Navigation
• Layout

15
Four principles of Web design

• Contrast
• Links
• Focal point
• Readability
• Hierarchy of information

16
Homework

• Find at least one example of
• Alignment
• Proximity
• Repetition
• Contrast
• Email them to me, we will look at them on
  Wednesday

17
Two Types of Design

• Web page design
• Interface design

18
Interface Design

• Clear, consistent icons
• Predictable choices
• Efficient hierarchy

19
Interface Design

• Bandwidth Issues
• Simplicity
• The best information designs are never noticed
• Consistency
• Same basic layout, graphic elements, editorial
  style, and organization

20
Webpage Design

• Web designers never have perfect control
• Browsers differ
• PCs and Macs differ
• Screen resolutions make pages look different
• So do video cards and processor speeds
• Research topic sign ups!
• HTML, XHTML, XML to begin

21
More Web Design

• Colors
• Some colors are considered Web safe
• Typography
• Focal point
• Rule of thirds
• Visual appeal matters

22
Moving ahead to HTML

• HTML document structure
• The basic structure of an HTML document is made
  up of these elements
• html
• This is the containing element for the entire
  document everything is a child of this element.

23
Moving ahead to HTML

• head
• This element contains information about the
  document, but none of the actual content of the
  document. Here are included things like page
  title, character encoding, keywords, description,
  style sheets, and script files.
• body
• This element contains everything you see on the
  page.
• paragraphs
• are used to contain blocks of text, or
  "paragraphs" -). Unlike other block-level
  elements, these are not allowed to contain
  block-level elements, just inline elements.
• more on this later.

24
Lets write some code!
But first, what is our mission?!

• Name yoursthis really can be key

25
Lets write some code!

• On your Mac, open TextWrangler
• Start by typing the following
• My Web page
• Hello world!

26
Lets write some code!

• Now, lets write this code somewhat differently
  by typing the following
• My Web page
  Hello world!

27
Lets write some code!

• How did we do?
• Save your documents with the extension
  yourdocname.html to somewhere convenient (perhaps
  your desktop)
• Drag this file over Safari or Firefox
• Did it work?
• What is the difference between the two files?

28
Lets write some code!

• Start practicing in this format
• For help, visit
• http//journalism.indiana.edu/resources/webediting
  /introduction-to-html/
• OR TRY
• http//www.w3schools.com/html/default.asp
• Try to insert an image, a link, and other types
  of formatting

29
Lets write some code!

• I dont expect you to be an expert in writing
  code
• Just DONT BE AFRAID when you see html code or
  related CSS style sheets
• Troubleshooting if often easier by analyzing code
  rather than visual WYSIWYG platforms.

30
Homework

• Practice working with code
• You have nothing specific to produce at this
  point
• Just use it and be ready to report on Wednesday
  what you found
• Read Handout 2 at
• http//www.webstyleguide.com/site/print/site.html

31
Homework

• Find at least one example of
• Alignment
• Proximity
• Repetition
• Contrast
• Email them to me, we will look at them on
  Wednesday