I had a blast giving a presentation at the Chicago Creative Collation last November. My 2-hour presentation “How to Translate Your Design Expertise into Amazing Websites” was enthusiastically received by about 20 graphic designers and creative professionals.
In the beginning of my presentation I covered some “Basics” of web design that I thought might make for a good blog post here. Here are some of my tips for print designers who are ready to take the leap into Web design.
It’s all about the pixels.
People who work on the Web measure in pixels, not centimeters, inches or points (font). To clearly communicate with the rest of your development team, be sure to reference distance and font sizes in pixels.
Always work in 72 dpi.
This is as high resolution as the web gets. You can work in a higher resolution, but it will only bloat file size and slow down your website.
Design sites to 984px wide or less.
900px is a bit safer, 800px is very safe. Though this width will likely increase over the next several years as monitors improve, right now about 95% of web users will be able to see the full width of your site as long as it is about 900px wide. To learn more about this and see real-time data about the width of browser sizes visit browsersize.googlelabs.com.
Plan on the “fold” for your website at about 450px tall.
The term “above the fold” comes from the newspaper world so it shouldn’t be an unfamiliar concept to most print designers. When web folks talk about “above the fold” we mean what can be seen without scrolling when someone first opens a site. Again, this height is slowly expanding as monitors improve and you can check in on current data at any time at browsersize.googlelabs.com.
Main Text should be no smaller than 12px.
Though this is not a hard and fast “rule,” in my experience, everytime I build a site for a client with text less than 12px font, they come back to me at some point and ask me to increase the size. This can degrade clarity, hierarchy and layout if it’s done after the design phase so my suggestion is just to start with 12px as your minimum font size and chose the size for headers, etc. off of that. (And if you were wondering, yes, on the web pt and px are the same.) Here is a link to a site that shows pt to px conversions: http://sureshjain.wordpress.com/2007/07/06/53/
There are a limited number of Web-safe fonts – stick to them.
Here is a list of the 13-15 web-safe fonts currently available to designers. If you go outside of this list, you will need to either specially code your site using a technique like sIFR which can greatly increase development time (and budget) or you can convert the text to images or Flash which is definitely not recommended for the main text on your site since it can have huge impact on Search Engine Optimization, accessibility to visually disabled users, and site load time.
Do Not Build Your Sites Entirely in Flash.
Present Your Designs on a Screen, Not a Piece of Paper
Resist the urge to print out your designs to present them to a client. Colors are based in light, not pigment, so contrast is ruined. Size issues like balance and legibility become impossible to evaluate. I recommend exporting review documents as exactly sized, medium quality JPGs and if possible post them for review in an environment that shows the client the JPG in a browser window (Basecamp is great for this.)
Haven’t experienced an epiphany yet? Sign up!