Great Design ============ Jon Hicks, Cameron Moll and Veerle Pieters Will be talking about the difference between good design and great design. Defining design in just one sentence [Cameron] when I think of design, I think of a medium through which a message is conveyed, design is about communication [Veerle] way of communicating, it's emotional, expresses emotion [Jon] Design is not pretty. It's about communication and not about making something look pretty. Design is subjective - what the panel think of as great design you may not. About approach to a problem. How important is it to be original and creative when designing? [c] originality and creativity are overrated. Easy to be intimidated to be original and creative, and failing to be inspired - "good designers copy, great designers steal". Good designers are inspired by their fields - website designers look at websites. Great designers are inspired by everything - the carpet, the device in their hand [v] originality is important - can be original in several ways [j] for personal sanity - nice to be original in everything you do, but maybe what you're doing is best served by following conventions. Depends on job. Is it possible to have great design on a budget? [j] no. Designing is as much about thinking time as it is about producing. The bigger the budget the more thinking time. Working on a web package for 6 months, the more time the better product. [c] dividing line between good design and great is the budget and the time to execute. Difference between good designers and great designers is ability to respond within timeline - always shorter than preferred. Great designers can create a solution, execute, within timeline supplied. [v] agree with jon, to make the design great you need extra time, reflects on the budget. Great designers can come up with something quickly - but no guarantee it will be great. Chosen three areas that we think make great design - typography, colors, grids. Cameron - grids ---------------- HAd my eyes opened to grids about a year ago - Mark Boulton and Khoi Vinh. A grid does the work for you - instead of having to worry about placement and proximity and positioning, the decisions are made for you. 1) Assess content characteristics - what are the specific needs of content? Not "is this 730px", but "are there long headlines?", photo sizes, ad formats, look at those characteristics and then what that implies of grid. 2) Structure Grid accordingly 3) Violate grid when necessary - grid should work for content not against it. Individual photo may need to span 2.5 columns not 3. "It's important to understand the grid should never subordinate the elements within it...." Margins, Columns, Flowline, Modules (divisions between columns and flowlines), spatial groups, gutters. Method: How do we code this for the web? Here are just 5: 1. fixed with, uniform - equal divisions between columns - eg: new york times, inspired by onion, Khio Vhin. Equal width columns overlaid with spacial zones. Tip: put a background image on your body when you're coding - helps you stick to your grid. 2. Fixed width hierarchical - National Gazette - Jason Santa Maria and I - based on intuitive placement of elements rather than equal columns. Left and Right sidebars - site is heavily ad driven, so based on common ad sizes. Photograph dictated width of central column. Ask what the content is telling us the grid should be. Carries over into content pages. 3. Fluid width - bit of a challenge - eg: vivabit - fully fluid - 4 columns, two have been joined, all fluid. Have to understand why we use grids, they help us make decisions or make decisions for us, making our job easier. 4. Fluid + fixed width: couldn't find many examples, had to pull from my own projects - blank mockup. 4 fluid columns on left, fixed on right. 3 columns of 4 in center are a spatial zone. Why so bizarre - probably about 15th iteration where we tested a variety and settled on specific needs of content rather than skirting round issue. Needed static sidebar, but flexible content. 5. Modular scale: not chaotic and random, not seen it put into practice in web design. Think of a subject like astronomy - grid system would be based on star chars. Modernist literature based on width of authored hands. Music has defined ratios between major and minor. Major 3rd is 4:5 etc. Are there ways to do that on the web? I don't know - experimentation needed. Many ways to do grids, these 5 are just a start. Jon - talking type ------------------ most subtle of three areas. Every typeface has a language - what language is appropriate? Examples of typefaces, expressing emotion, nationality, age. [...] Type can be the design itself - Jamie Reeds cover of "never mind the bollocks" by the sex pistols. If type can be the design it can ruin it. Comic Sans and Princetown are not appropriate for a punk cover, even ironically. Comic Sans is the language for a different situation. Farmer Gow's activity farm - child focussed - all uses comic sans, and I think it's a great design, chosen appropriate language. On the web only have a few fonts - example of font called meta, used by mozilla foundation, unusual g, not many fonts have it but trebuchet uses it. Could use trebuchet for headings, Meta for logos, but not for body text, too complicated. Can use typefaces to evoke nationality - americans love serif type, europeans love sans-serif, because of swiss designers who created helvetica, whole european design ethic comes from swiss, clean look, unfussy typeface. Typography is not about choosing a font. Typography's purpose is to be invisible and aid reading. As much about spaces around and between text as the text itself. Jason Santa Maria on a list apart - typography is design itself. For example, to make it easy to scan he's picked out titles, centered them, serif font, body test ranged left, 1.8em line height. Picked out author names all caps bold sans-serif, can always scan read easily. When we think of hierarchy normally think of headings being bigger but not on Subtraction.com. Titles only 1px larger than body type, used space around it, way he's arranged it to highlight them. Only using bold and roman type but enough to make a visual layer. Lot of rules - but there's also an element of type design based on "sparks". Logos that use the type itself to be logo - shelter sharpened top of h to convey a house, dali exhibition using curly brace and dali moustache, 38one.com has more examples. Good designers use typeface, great designers use typography. (will post slides and links later) Go to fontfont.com - sign up for font catalogues - get them in the post, give you ideas. Leave them next to toilet. Read "The elements of typographical style" - best rulebook - richard rutter applying this to the web. Mark Boulton.com - 5 simple steps to better typography - markboulton.co.uk Veerle - Talking Color ---------------------- Why is color such an important factor? Sets the general mood, reflects personality, emotional, helps us understand content, gives meaning: green for go ahead, alerts as red. If color is used well it adds balance and contrast. A great design doesn't solely rely on colors - black and white designs can find it harder to achieve guidance, but can be great. Simplicity is key - typography and grids are important, colors are an extra layer on top. Subtraction.com - doesn't use color - grid and typography do the design - but uses orange as extra guidance for links. All prefer vibrant colors over grey - but grey can be stylish. Depends on circumstances, contrast is important, have to use it in right proportion, don't overdo it. Have rest points to make it balanced. Website with colors playing important roles - guide you through - corporate vs: consumer - same color for main navigation and text links, different colors for different sections - green for biking, orange for hiking. Don't overdo it, becomes a color book. Screenshot of GeekyChix.org - yellow and magenta, start designing and think about colors, but have to think about it for a night, then next day you look back at it it needs extra work. so in this example, change it to brown as purple was too close to magenta. Added extra blue as accent on some areas. Details are important in a design, make it better than good. Summary ------- Hope we've given you some pointers. Q&A --- Which comes first? [j] do black and white first, do color last [c] don't think i sit down and work on just typography, it all evolves. collaborative effort between elements [v] mixture - generally start with grid, colors follow quickly. depends on house style, sometimes colors are already there. Site relies on color to distinguish between sections - how to you make it accessible. [v] - in the browser, you see the color, but in the code there's inline text. Using css to hide it in browser. How do you handle display width? [j] difficult to approach with technology we have - try to design some fluidity in, with some restrictions. WIth technology that's coming, like svg, we'll be able to handle this better. Safari blog talking about how future display tech will be more fluid. Elastic Columns? Sizing with em's instead of px or percentages. [c] experience has been in % or px - not anything i've had experience of [j] lends itself to text columns, depends on context and the information you have to show [c] can't tell width of browser [v] mostly use percentages [j] mostly use pixels Do you ever feel limited by grid design, do you want to break out of grids? [c] Molly write an article for alistapart - breaking out of grids. But no, don't feel restricted, feel liberated to make decisions I wouldn't consider before. But if you're restricted then break out of that. [j] about underlying structure, can dress skeleton however you like if you have a good underlying structure [c] tend to think of grids as being equal columns, freedom to structure columns how you want. start with grid and be creative with it.