The Pixel Pusher’s Guide to Web Design

As web designers, we have a lot of things to remember when starting a new project. Even though each one is unique, there are workflow and QC tasks that should be done every time, no matter what.rom websites to apps to static ad units, follow these guidelines and you’ll be off to a great start.

Before beginning, read over the directions you were given and take a look at the files you were provided (if there are any). Make sure you have all the assets you need to build your files. Whether it’s images, logos, icons or copy, getting everything beforehand will save time in the long run. Once you’ve received your image assets, ensure that they are in the RGB color space, they are in the correct resolution for your project and they meet the brand standards for that particular client. If they don’t meet these criteria, take the time to correct them so they’ll be easier to work with later.

Now, you’re ready to start. It’s best to begin with a new layout and only use the provided layouts for reference. Often, provided layouts don’t have the most current assets in them, colors may be incorrect, old logos might be used or the wrong fonts are included. Typically, digital files should be built as 72ppi, RGB and in Photoshop. But why Photoshop and not some other application like InDesign? Well, simply put, the Internet is screen-based. And computer screens, mobile screens and TVs are all based on pixels. Photoshop is an application specifically built to manipulate pixels; InDesign is not. Standard-resolution screens display in 72ppi and RGB. If you build your layout at a higher screen resolution, it will likely result in a much larger file size, which will make your layout harder to work with, especially if it’s image-heavy. Similarly, building your file in CMYK rather than RGB will likely result in your colors being inconsistent. A vector-based application such as Illustrator can be used to design layouts, but there are issues with that as well. Photoshop is the industry standard for a reason.

Once you’ve begun adding copy to your layouts, you’ll need to pay attention to font size. It’s best to keep fonts above 10 points, which is a minimum digital standard. If you’re working with a Retina-based resolution, your minimum font size would double to 20 points. Since you can’t split a pixel, copy should be kept as whole point sizes, otherwise it will dither, potentially causing it to look blurry.

When placing images and other assets into your file, it’s a best practice to make sure your images are placed as smart objects in Photoshop, not as linked files from the server or, worse, your computer’s hard drive. This can cause all kinds of problems down the road, especially when the files are linked to your desktop. It’s easy to do, too. Simply place your files into your layouts by dragging them from your finder window into the layout, rather than through File > Place Embedded or File > Place Linked. Once you’ve got your assets in your layouts, you may want to add some effects to make them stand out or blend in. You’ll need to be careful when applying these effects, because many of the effects in Photoshop won’t translate once the files go into development. Now that our industry has moved from Flash to HTML5, we have to change the way we handle our Photoshop layouts. Effects such as multiply, overlay, screen, and others won’t translate into HTML5. If you have questions, any skilled developer would, I’m sure, be more than happy to help you.

And last but not least, make sure your file is clean. No developer likes to get a file that has a zillion unordered and unnamed layers. Delete the extra layers, and organize the file into an easy-to-understand format. If you’re using layer comps, make sure they’ve been updated to reflect the most recent changes, or, if you’re not using them, delete them. Your file should be easy for developers to use. They shouldn’t have to wade through tons of unused and unnamed layers to find what they’re looking for.

I know this may seem like a lot to remember, but the more you make it a standard part of your workflow, the easier it will get. Soon, all this will be second nature, and you’ll be building digital work like a pro.