Notes: Please add your name, if you contribute, to the 'Authors' section at the bottom of this file. DO NOT COPY AND PASTE THIS FILE WHOLESALE. IT MAKES IT SLOW. Export it or save it as text. 15/06/2006 10:45 - 11:45 Good Design vs. Great Design by Jon Hicks, Cameron Moll, and Veerle Pieters JH: Today we're going to talk about the difference between good and great design, and what makes that difference. We're going to try our best using our voices and the magical panel behind us. Define design in just 1 sentence CM: When I think of design, I think of it being a medium through which a message is conveyed, and through which a response is sought. Design has a medium through which it communicates, that makes it distinct from other means of communication. VP: It's a way of communicating that's emotional and expresses feelings. JH: Let's start by saying design is not 'pretty'. Design is about communication, not about making something pretty. Design is also very subjective: what we think of as great design may not match what you think of as great design. How important is it to be original and creative when designing something? CM: Originality and creativity are over-rated in many respects. It's difficult without being inspired by others. Good designers tend to look at other sources within the same genre. Great designers will be surrounded by anything in their environment: the carpet, the architecture, whatever. Looking for sources in the world they can use. VP: Originality is important. I always try to put some originality in the design. I think this is very wide: you can be original in several ways. JH: Just for personal sanity, it's nice to be able to be original, but what you should be doing may be best served by following conventions, then that's the route to go. Is it possible to have great design on a budget? JH: No, not possible. It depends how big is the budget, but designing something is as much about thinking time as it is about making. I've been working on a web application for six months, and I can say the interface is better for the extra time. CM: Often, the dividing line between good and great design _is_ the budget, rather than lack of talent or resources. At the same time, what seperates good designers from great designers is their ability to respond within a timeline. Great designers are able to produce something, a solutino that satisfies the requirements of the project. VP: I agree that most of the time, to create a great design, you need extra time,. You can create a _good_ design within a certain space of time, but a great design needs extra time. On the other hand, great designers can come up with something very good in a short time. Talking grid CM: Why grids? I was introduced to grids by Mark Boulton and Khoi Vinh. FOr me, the beauty is that a grid does the work for you. Instead of worrying about placement, proximity, the grid removes the decisions. Assess the content Characteristics Understand the specific needs of that project. What are the content characteristics? What about image sizes? What are the ad formats? Understand how these, in turn, may dictate what the grid may become, then: Structure the grid accordingly. Violate the grid when necessary. The grid should be flexible enough to accomodate a variety of content, but there may be exceptions. Perhaps a photo may need to span a couple of columns. Content doesn't serve the grid, grid serves the content. "It's important to understand that the grid É should never subordinate the elements within it" Method 1. Fixed with, uniform Equal divisions between the columns, NY Times obviously inspired by the Onion. KV now NYTimes design director. Grid stucture is 11 columns of equal size, spatial zones define the content itself. Put a background image on your using CSS to help grid adhesion. 2. Fixed width, heirarchical Content specifies the structure of the grid. Based on intuitive placement, rather than regular interval sizes for columns. Instead of looking at things uniformly, look at content structure. 3. Fluid width This is a challenge, but very possible. Vivabit: four columns, two joined, all fluid. 4. Fluid + fixed width Four columns fluid width, right column fixed. Three central columns being a joined spatial zone. 5. Modular scale Base an astronomy grid on star charts. Work of literature based on the hand of the author. Music, ratio of Major 3rd (4:5), etc. Talking type JH: Typography is the more subtle of the three areas, but no less important. Every typeface has a language which language is right? You can express emotion, status, age, nationality. Books by Lauren ChildÉ What she does with typefaces conveys emotion. She also uses them to denote who is speaking. A lot of you will be familiar with Jamie Read's cover fo rthe sex pistols. He create a feeling of something thrown together, that evokes punk itsulf. This was so popular that it was very copied. The type can be the design itself. If this is true, it can also ruin it, as well. Comic Sans is just a language that's right for a different situation. Comic sans is great for designs too. Farmer Gow's activity farm is centred around children's education. Throughout all their branding and signage, they use Comic Sans. I think they've chosen this very appropriately for the situation. On the web, we have this limitation of a select set of typefaces to choose from. Meta is used by Mozilla through everything, and has a unique g with a bowl on the bottom. Similar to Trebuchet (on 92% of computers). Too complex a typeface to be easily readable for body. Even posisble, with a choice of typeface to evoke nationality. A lot of American design sites use lots of serifs. The reason isn't apparent. Europeans, though, tend to focus on sans-serifs. The whole 'clean' european ethic comes from the Swiss. Great typography is notÉ choosing a 'cool font' Great typography isÉ invisible The purpose of typography is for reading, rather than being noticed. it's about the spacing between the letters. [JSM's ALA.com] The typography is pretty much the design itself. For example, to make it easier to scan: titles have been centred rather than left-justified. Using large serif type. Body text is ranged left. Also has good line-height. Makes a huge difference to be able to pick the lines of text easily. Nice that the author names are bold, all caps, sans-serif, with a little letterspace. You can still scan-read everything very easily. [KV's subtraction.com] When you think about scan-reading, you thinkk of larger text. Here, you see the title isn't much larger, but he's used the space around it and has arranged date, columns, remarks, or comments and picked them out in a bold, small uppercase. There's a definite heirarchy. You can scan down and see everything. Then, everything is ranged left. Very simple, but enough to create a visual heirarchy. those tiny little sparks There's an element of type design that isn't to do with rules. Rather than create logotype and a seperate logo, designers can use the type itself to be the logo. good designers use typefaces great designers use typography improving your typography Sign up for Type catalogues (fontfont.com) Get excited about typefaces and learn the languages! Read Bringhurst "Elements" + Rich's .net Mark Boulton's 5 simple steps. Like a condensed version of Bringhurst Talking Color VP: My area is color. Why is color such an important factor? Color is important because it sets a general mood. It reflects personality, it's emotional, and it helps give meaning to the content. Green means 'ok', alert is red. Can add balance and contrast to the design. A great design doesn't solely rely on colors Gives guidance to the design, but doesn't mean greyscale isn't as good. Can be as good. Simplicity is the key. Again, KV's Subtraction uses grid/type more than colour. Doesn't need extra color, save some hinting with orange. What makes a great design, purely judging on the use of colors? Grey can be stylish, we dont' have to use vibrant colors. It depends on the purpose of the design. Contrast is important, but you have ot use it in the right proportions. If you overdo it, it won't be nice anymore. Sometimes, you may want extra contrast to evoke aggression, but make sure you have enough blanace and rest points in the design. You have to dose the colors to get balance. Colors give extra guidance, for example through different sections of a site. Use colors in the right proportions, or it becomes a coloring book. Details are importantÉ they make a design better. JH: It's very difficult to try to answer what makes great design, but we've tried to give you some pointers. Questions: ---------- How do you approach design? Color, type, grids? JH: Use grayscale on layouts first, then add colours later. CM: I dont' site down and think 'right, I'm going to work on type'. You discuss with the client and soak these things in from the world around you. When I sit down to design, it's a collaboration of the elements at once. VP: Also a mixture, but generally start with the grid, then the colours follow quickly. If there is a house style, that has an influence. One of the example sites relies heavily on colorÉÊHow do you make that accessible? VP: We added something to the code to allow identification. Used CSS to hide text for color identification bits. How do you feel about display size differences? With huge displays down to mobileÉ? JH: It's very difficult, given the current technology. What I've tried to do is design an amount of fluidity. With coming technologies, we'll be able to use that space better. Reading Dave Hyatt's blog, he talks about ratios and how pixels work in browsers. Leading on from that, talking about grids, what's your take on elastic sizing with ems? CM: My experience has been with percentages. I use ems for modules or spatial areas to protect against text resizing. He'll mention something along these lines. This allows for flexibility but, in terms of ordering columns with that, I've not done that much. JH: This lends itself to sizing text columns well, but it very much depends on what you have to show. It can work. CM: The problem with using ems is that it's not exact across every user agent. You can't rely on 100% and then divide it four ways. Do you ever feel limited by grid design and want to break outside of that? CM: Molly wrote an excellent article on that topic. In terms of the grid being restrictive, I've not found that. I find it liberating in that I can make decisions and worry about things I wasn't concerned about before. That's why I recommend to violate that grid if you need to. JH: Grids is like having a skeleton. You can dress it any way you like on top, but if you don't have a good underlying structureÉ It's very liberating. CM: We tend to think of grids as equal columns, regular structure. Be creative with the grid, and allow that to spur creativity. -------------------------------- Authors: Steve Marshall: http://nascentguruism.com/