The following article is an overview of a keynote presentation given by Gatorworks’ during the 2009 AAF Student Conference discussing “Making the Transition from Print to Web”. Gatorwork’s president Brian Rodriguez finds that “many graphic designers coming out of college have a strong background in print design, however they have a hard time making the transition into web designers.”
Coming from a print design background does not necessarily mean you have to neglect basic print principles and styles — use the skills you know well to design for the web. Imitating print design on the web has become increasingly popular, especially among e-commerce, blogs, news and political websites.
Good exploration of print styles on the web
- New York Times - designed to resemble the famed newspaper layout of the NY Times newspaper. The masthead is designed to resemble a typical newspaper and the modular layout dictates the way the content should read.
- Book of Numbers – it looks like a book. It navigates like a book. Is it a book?
- CSS Tinderbox – it looks like a Russian propaganda leaflet created in the 40′s with strong block type masthead and grungy/paper-like textures. Also, the fact that Lenin is on there is a dead give away.
- Jason Santa Maria – his blog definitely lets the content dictate his layout. It reads more like a magazine than a website and the hierarchy is MUCH more apparent… He definitely takes it one step further.
1- Design your sites and images at 72dpi
Design your sites and images at 72 dpi, not 300 dpi. Your standard screen resolution is 72 ppi. If you bust a site out in 300 dpi you are packing more information into each pixel, meaning a MUCH longer loading time for the entire site.
2- Use RGB
Make certain to work in RGB color mode instead of CMYK. Print = CMYK; Computer Screens = RGB. There’s no spot and Pantone colors on the web.
3- Design in Photoshop
Design your sites in Photoshop. Photoshop is used as a tool to create and manipulate raster graphics. When designing in Photoshop you are designing for pixels not for a number of minute decimal increments as you would in Illustrator creating vectors.
4- Use a grid and check your width
Make sure your rules and your text are in pixels and by all means use a grid! Your content area when designing should be within the optimal range of 960px wide. Try not to go over 1000px.
- http://site.ringce.com/products/slammer/slammer.html – creates a translucent grid that you can overlay on any application. *(Currently for Mac users only)
5- Use web safe fonts
Know your core web fonts! Different computers can have different font sets installed. When designing a site keep in mind those fonts you chose may not be on the viewers computer.
Every Web designer should use Web safe fonts! Using a font as a header or illustration style through image replacement is fine, but DO NOT use images for body copy. So how do you know what fonts to use?
Core Web Fonts (that will work on every computer):
- Andale Mono
- Arial Black
- Comic Sans MS
- Courier New
- Times New Roman
- Trebuchet MS
Other Font Families / Stacks:
- Lucida Grande & Lucida Sans Unicode
- Baskerville & Palatino Linotype
6- Never rasterize copy
Never rasterize your body copy in a website mock-up.
7- Organize. Organize. Organize.
Organize your layers by folders with proper headings. Also, a good thing to do if you are handing the site off to a developer is to have a folder (hidden) labeled “Notes” to give them notes and information about the design if they have any questions.
Also don’t ever flatten your layers. This way you can go back and edit it later if you or your client decides to make changes.
8- Design for the content and for your users.
Make the content the priority. The artwork should compliment the content and directs the visitor to it, but does not overwhelm the site. Effective web site design is dedicated to getting people the information they want in a simple way.
9- Know your shortcuts
Shortcuts save so much time. It is proven that by using shortcuts you can be more productive as a designer.
10- Save comps properly
When you save comps, ‘Save for Web’, and save jpgs. But, don’t forget to keep your original Photoshop (.psd) file. There is a lot of information in the file when not saved for web. So by ‘Saving for Web’ you are reducing anything over 72dpi, and clearing out all the unnecessary junk.
11- Stay informed and inspired
Absorb yourself with information: bookmark blogs, read, absorb. Joing online social networking sites. Get involved in the design community.
Web Design Resources:
- http://alistapart.com/ – dedicated to design knowledge, with fantastic articles. Created by the godfather of web standards Jeffery Zeldman and Mr. CSS Eric Meyer
- http://www.webdesignerwall.com/ – a useful site devoted to trends, tips and tutorials on the web. Literally a wall of design ideas.
- http://www.webdesignerdepot.com/ – a relatively new site chock full of hints, tips and loads of freebies to help you with your venture into all things web.
- http://www.designmeltdown.com/ -a mecca of cached screenshots of sites at your fingertips. Broken down into categories even. A great resource for design styles and themes.
- http://psd.tutsplus.com/ – blog that was made to house and showcase some of the best Photoshop tutorials around. This site is awesome, because it easily explains, with screen shots, step by step processes of basic to advanced tutorials.
For more information visit the Gatorworks website for additional information covered at AAF by Brian Rodriguez, Alise Johnson and David Link. You can also download the presentation: keynote | powerpoint.