Joy and Tim recently presented at the Chicago Area Adobe User Group monthly meetup on the topic of transition from print to web and digital design, an intimidating prospect for many print-based designers.
Showcasing techniques and lessons learned from past Mightybytes projects, they provided valuable insights to a packed house of enthusiastic art directors, designers, and other industry pros at Ascend Training’s downtown location. Here are some of the take-aways from that presentation.
Universal Design Principles
The first portion of the presentation covered important design principles to consider regardless of how content is delivered. From print to web to video and mobile, these principles can be universally applied to any design project to improve results.
It should be clear to a reader of any page or screen what the most important content elements are. They should know intuitively what to look at first, what to look at next, and where, if applicable, to take action. Primary and secondary titles, placement of images, and (in web or screen design), where calls-to-action are placed are critical when devising layouts. How a user or reader’s eye follows a design is crucial to its intended purpose.
Employ the Gutenberg Rule, a design principle that splits up any page or screen into four quadrants based on how we visually digest content (from top left to bottom right in most Western civilizations). The top-left area is called the “primary optical area” and is typically where important visual branding elements are place for maximum impact. The bottom-right quadrant, the “terminal area”, is the last thing a reader sees on a page and thus is a natural candidate for important next step elements, such as calls-to-action.
Simply put, layouts, whether online or on paper, need to be legible. Color should visually support the content in a way that makes sense both psychologically and in a manner that supports good color theory. Here are several examples:
- Provide dark copy on a white or light background
- Avoid vibrating colors.
- Create a balanced color palette that employs colors to be used as backgrounds, text, and call-to-actions.
Color theory best practices are far too deep to go into much more detail here, but there are many tools available to help you create great palettes for print, web, and video. Adobe’s Kuler, for example, can help you kick-start the process of creating color palettes that work for your project. Just remember, color shifts when converting images from CMYK (print) to RGB (screen) can plague a design project’s visual integrity.
Platform-Specific Design Principles
There are certainly plenty of things to consider when moving your design work from print to screen. Here a few key components for making that transition a successful one.
Static vs. Dynamic Content
By its very nature, the web is a dynamic medium so creating layouts that support an ever-changing array of media types—text, video, images, etc.—is critical for successful online design. This is especially crucial when designing templates for sites that use content management systems. Define as many options for various content types as possible before creating the layout for a specific content area on a page. If possible, comp those options up or create a simple click-through prototype to better define how each unique element may affect design integrity.
Design on a Grid
The web is not only a dynamic medium but also a very grid-based medium as well. Grid-based layouts better support the flexibility required by many users viewing your content across many browsers on many platforms with many devices. Good designers know where their layouts can be divided to provide an equally rewarding experience to users on a handheld device and those on a desktop machine with a large flatscreen monitor. A grid-based design system, such as the 960 Grid System, helps facilitate this flexibility. This set of tools can be very helpful for setting up pre-configured grid lines in your interface designs.
Print vs. Screen Resolution
Big file, narrow pipes. Andrew B. King, author of the book Website Optimization, cites speed as one of the top three elements of a rewarding web browsing experience. High resolution image and graphic files—typically around 300 dpi—are critical in print for maintaining clarity, but there’s no reason to include all that extra unnecessary file data when most screen resolutions are only around 72 dpi. It’s just a waste of bandwidth and unnecessary data that decreases page load times and provides a less-than-optimal browsing experience. Compress your images and graphics to find a nice balance of visual integrity while minimizing file size. If you don’t have Photoshop or Fireworks, Yahoo’s free online image optimizer Smush.it can do much of the compression hard-lifting in just a few clicks.
Print vs. Web Typography
Unlike print design, where any font is at a designer’s disposal, only a handful of fonts are common across all platforms on the web. And there are only so many things you can do with Arial. Sure, you can convert your awe-inspiring typography work to images for online use, but there are many valid reasons—SEO, standards-compliance, etc.—why this isn’t a good idea. This is precisely why industrious type geeks devised tools like Typekit, Fontdeck, and Google Fonts. These services allow designers to embed custom fonts into their web pages without the end user needing to have said fonts installed.
Making the Transition
With devices like the iPad and iPhone changing the ways in which we interact with content and tools like Blogger and WordPress redefining the simplicity of having a web presence, it is now more critical than ever to expand one’s design skills to meet the challenges these tools present. Knowing how to design content that is contextual to the platforms upon which it is deployed is a crucial skill set for designers today, but it is also important to remember how basic design principles apply to these new mediums as well. The tips above merely scratch the surface of what designers need to know when transitioning from print to screen, but hopefully they can help you make that transition a smooth and seamless one.
Have you transitioned from print to digital? If so, are there any other tips or suggestions you’d like to add? Let us know!