Graphic Design for the Web
Posted in Website Design Advice on April 15th, 2009 by JoeGraphic design is graphic design, right? Wrong. Many designers are experienced at creating layouts for print, yet encounter problems when creating a design for use on a website. Here are five simple tips to keeping your web developer sweet by providing them with what they need:
- Ensure graphic drafts are provided at 100% their screen size to avoid any errors in rescaling them for the screen. Do not provide visuals in a scalable format such as a pdf - clients may view the draft at a different zoom level and expect layouts to be a different size than intended.
- Layouts should be provided in a layered image (Adobe’s PSD or the open source XCF files are both ideal), with each element on it’s own transparent layer. This will enable your web developer to grab the sections they need quickly and easily. Be sure to name your layers with sensible titles!
- Layouts should be fixed width and not attempt to resize with the browser window. Layouts which resize to fill the available space are unreliable with the wide range of screen resolutions currently in use.
- The smallest common resolution in use is 1024×768 pixels, therefore layouts should currently use a maximum width of around 980 pixels.
- Use fonts which are ‘web safe’ or have a cross-platform option of the same basic dimensions to fall back on. There is extensive information regarding web safe fonts on internet and it’s worth familiarising yourself with them. Remember: A Mac will have a different font set to a Windows PC and a Unix PC will likely have a different set again!