Helpful web design tips for Graphic Designers
It's not uncommon for us to receive design files and artwork from traditionally trained Graphic Designers who don't have the experience of building a functional website. One of the issues we find with web pages designed by graphic designers is the consideration of various devices that the site will be view on.
This article attempts to bridge the gap between the graphic designer's approach and the recent changes in online viewing habits.
For the majority of graphic designers in the workforce, digital design was still in its infancy while they were at design school. At design school they were taught that a website design was just another application for branding. You made a nice layout for the dimensions of the average desktop screen. Many designers still approach web design in this manner however, the problem with this approach now is the general population are accessing websites on many different devices, and there's no longer one screen size to design for.
So what's a graphic designer to do? How can you bridge the gap between design approach/experience and the end-result? Short of learning HTML and CSS, the one thing you can begin doing immediately is changing your approach to designing for the web.
To get you started, we've compiled the following list of tips to help you with designing your next web design project.
1. Set-up your files at actual size
The most common thing we see from graphic designers are files supplied to us in the wrong size, scale or format. If you want to be sure that your design is built exactly how you envisioned it, set-up your documents to actual size in Photoshop. Make sure you set up your Photoshop document in RGB color mode at 72ppi (screen resolution) and set your unit preferences to pixels. Delete any unwanted layers, and make sure you name all your layers clearly - your front-end developer will love you for it.
2. Design multiple Photoshop layouts for different sized devices.
For responsive or adaptive websites, you need to design at least 3 layouts for your website: mobile phone, tablet and desktop. Here's some useful device sizes:
- Mobile phone (up to iPhone 5): 320px width (device viewing size is 320px x 568px)
- iPad: 768px width (device viewing size 768px x 1024px)
- Desktops and laptops: 1224px width
- Widescreen and larger monitors: 1824px width
As a side note, 1366x768px is currently (as of March 2013) the most common screen resolution.
3. Design to a grid
This is not essential, but designing to a grid helps you optimise your time designing. A good place to start is the 960 grid system. The photoshop templates included in the 960 download include 12, 16 and 24 columns grids for desktop sized screens. Admittedly, there are no ready-made tablet and mobile photoshop templates in the 960 download however, you can use the supplied templates for your mobile and tablets but remove a few columns to fit to size. The other approach is to scale the templates down to mobile and tablets device size.
4. Use web fonts
You've probably heard this one before, and you probably think 'Web fonts are so limited and ugly and they compromise my design!' - enter Google web fonts. Google web fonts is a large online collection of fonts that you can use in your designs for... free! You can browse and add fonts to your own personal collection, then review and download them to use in your web designs. Brilliant!
- May 2016 (1)
- June 2015 (7)
- May 2015 (3)
- April 2015 (2)
- March 2015 (6)
- February 2015 (3)
- January 2015 (2)
- December 2014 (3)
- November 2014 (1)
- October 2014 (8)
- September 2014 (8)
- August 2014 (8)
- July 2014 (14)
- June 2014 (12)
- May 2014 (9)
- September 2013 (2)
- April 2013 (2)
- March 2013 (5)
- November 2012 (2)
- June 2011 (1)
- February 2011 (1)
- August 2010 (1)
- July 2010 (1)
- June 2010 (7)
- May 2010 (1)
- March 2010 (5)
- February 2010 (1)
- November 2009 (4)
- July 2009 (1)
- July 2008 (11)
- October 2007 (2)