Designing for the screen

- Designing icons for the web means that the screen is your destination media. This brings a particular set of design challenges and considerations that you'll need to account for as you design your icons. The first thing that you'll need to decide is what type of artwork you'll work with, and what file format or formats you'll need to export your icons out to for deployment. You'll be working with either Vector or Bitmap artwork. Vector artwork is extremely flexible, as it can be scaled up or down with no loss of quality. It's best suited for flat design and solid shapes. Although, you can use blends and gradients to create more complex artwork if you need to. The most popular Vector art programs are Adobe's Illustrator and Bohemian's Sketch. Bitmap artwork, also referred to as raster art, is resolution dependent, so you'll need to work on it at the finished size or larger to avoid losing quality. It's especially well suited for complex artwork with lots of subtle tonal shifts. The most popular Bitmap editing programs are Adobe Photoshop and the open source Gimp. Which tool you use is largely a combination of personal comfort level and artwork requirements. It's not unusual to use more than one program either. I almost always create my icons in Illustrator, but it's pretty common for me to use Photoshop to tweak the finished artwork. Your icons will likely be SVG, PNG, or GIFs. Let's take a quick look at the relative strengths and weaknesses of each. SVGs are increasingly becoming the most popular way to display icons. They're Vector based, so they can scale up or down without any loss of quality. This flexibility makes them ideal for responsive designs. They're also code based, as SVG is a markup language similar to HTML and XML. This gives authors even more flexibility, as the icons can be tweaked through code editors and manipulated using Javascript and CSS. This can make SVGs trickier to deploy, as there are multiple ways to display SVGs and some older devices lack support. PNG, or Portable Network Graphics, are another popular choice for icons. They're Bitmap files, so they're resolution dependent. To support Responsive Designs or Retina Displays, you'll need multiple sizes of the same icon. PNG files support transparency, so it's easy to integrate them with any background. They also support millions of colors, which makes them ideal for icons with subtle tonal shifts. Now typically their slightly larger in file size when compared with other formats. No matter how you pronounce it, GIFs are perhaps the oldest and most widely supported icon format. They're Bitmaps as well, so the size restriction for PNG files apply to GIFs as well. They also support transparency. Although they don't support alpha transparencies as PNGs do. That means you'll need to choose a matte color for the edge pixels. That works well on solid color backgrounds, but not so well on complex backgrounds. GIFs are also limited to 256 colors. That's usually enough for icons, but could be an issue with highly detailed icons with subtle color shifts. Of all the icon formats, GIFs are usually the smallest in file size. Knowing the final formats you need before you design your icons is important, as it lets you design to their strengths and weaknesses. It's a good idea to determine this beforehand, as it will guide many of your design decisions. It's also not unusual to create multiple versions of your icons in various file types. This gives you additional flexibility when deploying them. You're also going to want to establish a grid early on in the designing process, as it's one of the most important aspects of designing web icons. They allow you to control how artwork aligns to pixels and can help generate crisp, precise icons. This is one of Susan Kare's original sketches for the first set of MAC icons. I've always been struck by how she took what most would see as a constraint, and that's the small resolution of screen sizes at the time, and used it as a creative spark. To establish a grid, determine the default target size for your icon. The grid should then be a multiple of that value. A target size of 64 pixels x 64 pixels could be represented by an 8 x 8, 16 x 16, or even a 32 x 32 grid. There really isn't a specific rule, but, in general you'll need a bigger grid for more complex artwork. By using a grid, your artwork will map better to the screen, and you'll find yourself generating more creative solutions. You'll also need a strategy for dealing with high resolution screens, like Apple's Retina Displays. These types of screens have up to four times as many pixels as other devices, and they scale artwork to maintain size. In the example that you see here, a 128 x 128 pixel icon is seen as it would look on a 2x high-res display. The loss of quality occurs because the artwork is only 128 pixels across. The screen actually has 256 device pixels, so it has to scale the artwork at two times it's size to get it to display at the appropriate size. By providing a copy of the artwork at 256 x 256 pixels, and instructing it to display at 128 the artwork as enough pixels to display with no scaling, resulting in a crisp, clear image. Finally, make sure that you consistantly manage color throughout the design process. First, make sure you choose RGB as your document's color space. Take the time to set up swatches for consistent color palates, and use a consistent ICC color profile to manage color. These can have a huge impact on the final color of your exported icons. Here's an icon exported with the Adobe RGB profile. And here's one using the sRGB profile. Notice the difference in color, especially in the red. Getting consistent color's important, so learn how to manage color in your software of choice, and develop a strategy for working with your icons.