Since I started working freelance I've been doing more work as a Flash Developer and less work on the design side. While I really don't mind, since I enjoy development, it's becoming increasingly painful dealing with 'traditional media' designers and art directors that create artwork that simply doesn't translate well into the digital platform.
I believe that in order to design for the digital platform, one first needs to understand it. For me it boils down to one element: The pixel. The pixel, or at least the grid of pixels known as a screen or monitor, is the link between the user and the media.
A pixel is a tiny dot, consisting of 3 colours: Red, Green and Blue (RGB). Each pixel can display a different amount of each colour, which gives us the ability to see full-colour graphics on our screens, which brings me to:
Lesson 1: Always create your artwork in RGB, never in CMYK. The printing process is completely different, and probably irrelevant since your colours don't normally translate back to RGB very well. Check the CI manual for the RGB colours, chances are simply converting the CMYK or Spot colour will result in a colour that's brighter than it should be.
Lesson 2: Computer screens only have 72 pixels per inch, so please create your artwork at 72dpi. Next, view the artwork at 100% zoom to make sure your text is clear, and that the small details are visible.
Lesson 3: Get the right size for the artwork before starting your design. 1024x768 is most likely NOT the right size, unless you're designing a full-screen application. To view a website, we use an internet browser. Browsers have tool bars, address bars, status bars and other elements that take space on screen. So yes, while the average person has a screen with a resolution that's set to 1024x768, the actual size of content they'll see in the browser is closer to 990x600.
Lesson 4: No half pixels! Ever wonder why your artwork is displaying fuzzy? Chances are you've placed your vector art on half pixels, or created them in sizes that aren't on the nearest pixel. A pixel is a complete unit, it can not be split in half, so if your artwork has coordinates and/or dimensions that aren't on full pixels, the edge becomes fuzzy.
Lesson 5: Font sizes. The same rule applies to fonts: placement should always be on nearest pixel, and always round your point sizes to the nearest full number. Especially when working on a Flash application.
Following these 5 guidelines won't make you a better designer, but it will mean your artwork will be easily adapted to digital media, enabling the developer to accurately portray your vision and not waste time redrawing your graphics. Hopefully they'll then be able to spend more time writing decent code which will make the entire project a success.
Comments
Understanding the possibilities
Thank you very much for a really insightful article Holger.
Life would be a whole lot easier if we took the time to study the possibilities and constraints we have to work with.