Translating Print Skills to Web Design

Roberto Blake

9

Today, many print designers are finding themselves marginalized as budgets shift to online advertising and video. That is not to suggest that print design is dead or that its audiences is waning, but rather that the budgets and companies that leverage print in advertising and marketing are shrinking. As a result, many print designers are finding themselves having to offer at least some web design services to stay relevant and keep a steady workload (or find employment). As with any profession where you have a concentrated specialty, shifting gears can be very difficult. However, in the case of design thankfully many of the skills are transferable from one medium or media to another.

Coding is Not Web Design, Designing for the Web is Web Design

The biggest barrier for traditional print designers is the coding aspect of web design. Coding in HTML is a completely new skill and literally requires them to learn a new language. That can be very time consuming and it is difficult to know where to begin. However while all websites are based in HTML, that does not mean you have to know HTML to create a website. While HTML coding is the overall preferred (and arguably best) method for creating websites, it is not the only option.

Keep in mind that while some folks will insist that “real web designers code,” coders without design skills are merely “building” web sites, they are not designing them. As a designer, you understand the importance of user experiences and that often times “form is function” rather than just being secondary to it. With that in mind, you have likely seen websites that had no design sense behind them. These websites usually are very bland, but functional, have no sense of visual hierarchy, poor typography and very little aesthetic appeal to them.

In the traditional design process, you would usually sketch out thumbnails and create wireframes of potential layouts or even general mockup. Often this is something that coders skip over, preferring to immediately work in the computer via a text editor after receiving a brief. These differences in process reveal the lingering divide between what makes one a designer, vs. what makes one a developer. It’s not the tools you use that make you a “real web designer” but a the process you use and its focus on a design and problem solving.

If you are a print designer looking to immediately use your skills in typography, color theory, layout and visual design to create simple websites for your customers then one of the best tools available to you today is going to be Adobe Muse. Adobe Muse is very similar to Adobe InDesign, which most print designers are very familiar with in terms of layout and typesetting. Both programs take advantages of Master Pages to create templates for repeating elements such as headers and footers. Majority of the shortcuts are also the same between the applications (true across most of the Adobe Creative Cloud applications), greatly reducing the learning the curve.

Adobe Muse allows designers to focus on the experience, presentation, and structure of a website rather than on the technical aspects of coding. Muse also allows designers to easily incorporate interactive elements in the form of drag and drop widgets for assets like galleries and contact forms that otherwise would require complicated coding and the use of javascript. WYSIWYG (What you see is what you get) editors like Adobe Muse and even on some level Adobe Dreamweaver, allow designers to create solutions that fit with their sense of design, despite any technical limitations they may have.

The Real Differences Between Print and Web

It is essential to understand the key differences between print media and web media. For one thing, rather than working with CMYK subtractive color values you will be working with RGB additive color values. Print is also static media while web is more fluid and dynamic. Websites need to look good in the context of the multiple devices they will be viewed on, whether it’s a 15-inch laptop screen or a 27-inch desktop monitor. With print, you are designing once for a fixed and consistent size; with web you are designing for multiple potential experiences and you have to be sure they will be consistent and adaptable. This is what’s known as “responsive web design.”

Because the web is a digital platform, you have to consider how people will be using it—much like in print, where you have to consider the differences between how people interact will billboards vs. magazines or posters. Instead of thinking in three dimensions you have to think in four. You have to consider how long it will take to perform an action, and what the experience and flow will be like for users. This can require a bit more thought and research than you might be used to when developing a print project. It’s important to have an understanding of the experience users will have from beginning to end when they interact with a web site.

Beyond that, design is consistent in its principles and application regardless of whether you are dealing with print or web, large or small. It’s about creativity, consistency, and context. As long as you keep these things in mind, screens are just “bad paper.”