So you're a predominately print based graphic designer. You have mad design skillz (even if you're too modest to say so yourself!), your clients love your work and so they have asked you to design a website. Your reasonably proud of the quality and strength of the branding you've built on their behalf so you want the website to be of the same high quality as the rest of your work.

Here at Karmabunny, we have worked with quite a few great graphic designers and agencies in the past and there are some issues and questions that often pop up so we've put together a few tips and guidelines.

The bad news. You can't build your design in InDesign.

Please, it's best for everyone if InDesign is never involved. It may be your tool of choice and it might have lots of great interactive and web based uses these days but trying to get design elements out of an InDesign document or PDF is like pulling teeth. Colours can go awry, layer effects can change for the worse and the design relationships you worked so hard on can become much more difficult to maintain.

All of the tools you need are available in Photoshop. Vector shapes, gradients, effects and more. InDesign is built for you to provide powerful control over the quality of your work in print, not pixel based element slicing for the web.

We've had designers in the past try and create the designs in InDesign and then transfer their design into Photoshop. The problem with that is often developers need your raw elements to fix new design challenges or make client changes that crop up in the development process. A text change that has made a banner area bigger, a button that needs a hover state created, that sort of thing. We need to be able to do things like turn layers on or off (please don't flatten your layers!), make larger versions for retina displays or make things wider to accommodate edge cases.

Gone are the days where Web Developers would receive a glossy image of a page, carefully slice it up and insert the images into their code. If we can produce as much of the design in code as possible with only small feature images, your clients site will be fast loading, accessible to people with disabilities, more readable by search engines and provide much more flexibility for the content and the updates to the site to meet future client needs.

Photoshop really isn't that bad we promise!

File specs

Traditionally web design was designed for the lowest common screen size. 800 x 600, 1027 x 768 etc. With the huge array of differently sized web enabled devices now available, one-size-fits-all is no longer a good option.

These days there are many techniques for catering to different screen sizes. Depending on your project we will probably flex your desktop design to fix the users screen in some way so currently we would recommend starting with a main canvas area of 1200 pixels wide but keep in mind that it could get as narrow as 1000px*.

*Note that the above dimensions discussion is largely concerned with desktop iterations of a design. We will write a specific post on designing for a responsive site but it is still worth noting the above in all cases.

Textures, photos and backgrounds

If your design features big beautiful background images or textures, try and consider how they might deal when the background area gets bigger or smaller. A pretty straight forward option is fade to a solid colour, although you'll want to make sure that there is enough image area around the features of a photograph to do so. A better option for textures is a small seamless, repeatable tile. These are great because they don't need to be the size of a screen which will keep page load times down. It requires some considered Photoshop work though if the original source wasn't seamless. To keep it to a level of quality you are happy with you may wish to do it yourself rather than rely on the developer to generate it for you.

Another option is a fixed background that shrinks and grows depending on the screen size. These are great for photos with a bit of blur or softness to them as a sharp focus can be lost by the browser's attempt to resize the image. It's best to provide the developer with the largest possible image and allow them to resize it appropriately.

Fonts

Web technology has gotten to the point now where we can embed pretty much any font we like on our websites, kinda like how we embed images. It's pretty awesome.

A lot like images, whilst technically it wouldn't be hard to just google it, convert it to the right format and use it, that is generally not allowed by the font licence. Even if you have purchased a font for use in print that license does not automatically transfer to the web. Most of the time they require a separate license for web use.

You are generally rewarded for doing the right thing too. We primarily use 2 web font subscription services, Adobe Typkit and Fonts.com. They provide fonts that are optimized for the web to look as good and consistent as possible across the various browsers and it's rare that a popular font can't be found via one of their services and if not they generally have very good alternatives. Its worth investigating web font options and their prices before you get too far along.

A couple of caveats on using custom fonts from online foundries like these:

• Getting carried away - unlike using a font family installed on the user's computer, the browser has to download all your typefaces. If you use too many typefaces or font weights and styles on one website it will cause the initial page load to be slow. If you need more than 2 fonts you should ideally try and find a nice complimetary system font to add to your stack.
• Font Weights & Styles - Make sure that your Typefaces of choice includes more than just a single font weight, inparticular for your main body text. Too many font weights and styles can cause loading issues, but when browsers can attempt to apply a faux bold to custom fonts, they normally do a rubbish job, making your text unreadable on certain browsers.

Letting go

Whilst the differences between browser rendering these days is not as bad as it used to be (let us never speak of IE6 again..), the ways we view the web and the number of devices we use has exploded. Pixel perfection is pretty much a pipe dream across all of these platforms. But if you keep an agile eye on your designs and can work in a nicely formed grid, together we'll be able to create a positive, constructive and enjoyable experience for your clients and their website users. And happy users is good business for everyone.