Designing for the screen

- Designing icons for the webmeans that the screen is your destination media.This brings a particular set of design challengesand considerations that you'll need to account foras you design your icons.The first thing that you'll need to decideis what type of artwork you'll work with,and what file format or formats you'll needto 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 gradientsto create more complex artwork if you need to.The most popular Vector art programsare 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 itat the finished size or larger to avoid losing quality.It's especially well suited for complex artworkwith lots of subtle tonal shifts.The most popular Bitmap editing programsare Adobe Photoshop and the open source Gimp.

Which tool you use is largely a combination ofpersonal 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 Photoshopto tweak the finished artwork.Your icons will likely be SVG, PNG, or GIFs.Let's take a quick look at the relative strengthsand weaknesses of each.SVGs are increasingly becomingthe most popular way to display icons.They're Vector based, so they can scale up or downwithout 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 editorsand manipulated using Javascript and CSS.This can make SVGs trickier to deploy,as there are multiple ways to display SVGsand 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 sizewhen compared with other formats.No matter how you pronounce it,GIFs are perhaps the oldestand most widely supported icon format.

They're Bitmaps as well, so the size restrictionfor 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 choosea 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 iconswith subtle color shifts.Of all the icon formats,GIFs are usually the smallest in file size.

Knowing the final formats you needbefore 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 versionsof your icons in various file types.This gives you additional flexibility when deploying them.You're also going to want to establish a gridearly on in the designing process,as it's one of the most important aspectsof designing web icons.They allow you to control how artwork aligns to pixelsand can help generate crisp, precise icons.

This is one of Susan Kare's original sketchesfor the first set of MAC icons.I've always been struck by how she took what most would seeas a constraint, and that's the small resolution ofscreen 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 pixelscould 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 gridfor 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 withhigh resolution screens, like Apple's Retina Displays.These types of screens have up to four timesas 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 seenas it would look on a 2x high-res display.

The loss of quality occursbecause 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 sizeto 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 128the artwork as enough pixels to display with no scaling,resulting in a crisp, clear image.Finally, make sure that you consistantly manage colorthroughout the design process.

First, make sure you choose RGBas your document's color space.Take the time to set up swatchesfor consistent color palates,and use a consistent ICC color profile to manage color.These can have a huge impact onthe 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.

Resume Transcript Auto-Scroll

Author

Released

8/27/2015

Learn techniques and best practices for designing smart, visually interesting web icons in any software, in this guide with senior author James Williamson. First, find out what makes icons most effective and how to plan your design right from the start. Then review the best practices for brainstorming, sketching your ideas, and finding the right visual metaphors. James shows how to build your designs at high resolutions and create variations that will work at smaller sizes. Finally, learn how to export your work to multiple file types, and optimize SVGs, one of the most popular formats for icons.