Crash Course in Design

Wednesday, February 13, 2008


March meeting: virtual reality,
April meeting: Marketing presentation
Upcoming drupal services provided by LTC

Crash course in Design

Presentation by Mike Tierney, Fine Arts

What makes good design: is invisible, uses structure, uses contrast, is simple, not cluttered with lots of information, should be broken into smaller chuncks.

Process of Design: the process of refining ideas.
  • Start on paper, using thumbnails.
  • Refining thumbnails
  • Quick rules for comping:
      • grid design for structure
      • illustrator, photoshop for putting guides on images. Look at other journals for ideas on designs that work for your area of work.
  • Sticky Notes: combines thumbnails and and large paper design into one. to add placeholders for major page elements

  • Logo in upper left
  • Search on right (upper left or right beneith th header image)
  • Navigation can be left, right or top
  • Users are already interacting with the scrollbar, which is on the right
  • No navigation images!
  • Common practices in place that you should be aware of.
  • For dynamic site, you probably do not want to go with a horizontal navigation. Typically want it stacked as a easy solution. If you are choosing left or right columns, the users are already using the right scroll bar.
  • Q. what research on left or right nav? Really split. poeple read left to right, so what is most important, the main content on the right ... the content is the most important and important.
  • Users start in upper left
  • Zig-zag down the page, scanning fontent in f-pattern

Where am I?
  • tell visitors where they are
  • Most are coming from search engines
  • Place indiciators on home page too


  • create structure and hierarchy
  • help establish clarity and consistency
  • Grid image: mike will provide tool
  • Aim for 2 to 3 columns, not more than 4
  • establish maximum width per column
  • Html interprets everything as a block which makes grid design easier. Can be controlled with CSS.
  • create the space between the columns with padding and margins in css.
  • Make sure all elements are lined on a grid to create heirarcy and order.
  • Design in em instead of pixels. 16px = 1em.
  • width/16px = size in ems
Typography: the use of fonts
  • dont use more than 2 fonts
  • best to use 1 and vary size and weight
  • Logos count too
  • If use too many fonts, it gets confusing.
  • Variation: headings can be use a different font.
  • Georgia, helvetica, verdana all work with friz quardraa (ua logo font).
  • Arial, helvetica are good for smaller text sizes. So are good for content.
  • Rhythm: patter of type on whitespace. Created by line-height.Repeating patter that is easy on the eyes.
  • Easy to do with line-height and argins.
  • Line-height, good on screen spacing for the web: font-size x 150%,
  • Don't set everthing in tiny type
  • Browsers defaults are 16pt, which seems a bit large. a lot of designers set to 10px
  • recommended no smaller than .85em (approx. 14px)
Contrast / Colors:
  • Color is an easy way to establish contrast
  • Type on top of a colored background can lose contrast and make it difficult to read.
  • Research: dark grey type on white background is the easiest to read. Full white on black is harder on the eyes.
  • Black back grounnds with white type is also hard to read, it makes the text look smaller than it is.
  • Keep colors in balance of warm (red, oranges, yellows, etc) and cool (blue, blacks, purples).
  • the UA colors are good for each other but make using additional colors tricky
  • UA Red is very dominating color -- good for borders, underlines. as an accent
  • Blue is good for blackgrounds, type colors, basically as a primary.
  • question about color... it is best to choose no more than 3 colors in design. Is that good advice. You want to keep in simple. Keeping it to 2, 3, at most 5 within a site is good.
  • When people print the webpages, how much would they nice the dark gray vs. black. Would recommend a print style sheet so that user print black in stead of gray.A printer will print white, and one shade of gray and black. it will not print ccc or other shades of gray.
  • You will lose background images and colors in a print out.
Print style sheet.
  • convert ems to points in a print style sheet. In firefox there is a tool to view print style sheets.
  • In firefox floats will also break in print style sheet. I usually design in regular blocks for print style sheet. It will mess up a page break.
  • Floats in firefox will cause problems in print style sheet.
  • may also be a problem with a column that extends beyond the page.
  • Will only print first page
  • Photos:Consistencey is important; theme the photos, only studnets doing activities, etc.
  • Images of people are best -- visitors associate quickest with another person.
  • Firebug and web developer tool bar, you can find classes and ids that exist on the site.
  • a web develoopment tool for firefox that adds on. can make real time changes; I often use firefox to move to adjust items on a page live. has a nice javascript debugger
  • fire bug example, displays an icon at the bottom of the page. Using the inspect tool, you can see what all the elements are and what the css roles are associated with them. It displays when css roles are over ridden by a different css rule. Can edit the css on the fly and test the results.
  • If you are doing somethign wrong will it tell you? It will not acknolwedge a bad css rule. it will help you catch errors.
  • It is a little to create new elements in but works well for adjusting existing elements.
  • the HTML panel is not showing our source, it is showing firebugs intrepretation of your source... same as with our css as well
  • It will not help with dynamic php. it just shows
  • Is the w3 validator still good to use? Yes. it is still good to use it. Most browers acknolwedge the standards.
  • Make sure you are using the right validator for the right Doctype and html.
  • Style sheet by eric myer. Takes care of all browser defaults. helps with browser compatability. It zeros out all the different browser settings.
  • w3 validator, i use it like a spell check. it does not fix everything but it is a good first start for debugging.
  • I have trouble between the strict, transitional, etc. You should specify the doc type.I end up with a lot of warnings for the forground/background color when validating. It is not a problem but you get a lot of the warnings.
  • You will run into a lot less issues if you try to code for the standards.