Making the Switch

From Picas to Pixels

Many designers are seeing the need to be versatile in their design skills and are working on making the transition from print based design to the digital world of websites, apps, and software. While the design process is similar from a fundamental level, there are significant differences in approaching the two mediums.

From what we've seen, there are three main aspects of web design. There is the visual design, the user interface design, and the information architecture. At large firms there may be separate designers specializing in each area, but typically a single designer needs to be familiar with each of these skillsets.

Information architecture is what we recommend all our design firm partners to start with. How the content of the site is structured is key in the design process. As Kerri Liu advises, "Understanding how the info on the site can be best organized for optimal usability before any graphics start will save a ton of headache in the end." We've seen this pre-planing benefit projects from design to eliminating unnecessary changes. Considering where each of the content elements belong on the site helps with the overall site design and architecture. JumpChart is a tool that some of our partners use help with content mapping and provides a simple structure to track the various content items. A question to ask yourself during this process is: What type of content goes here?

The next step in the process is referred to as user interface design. Most designers start this process taking the content map they have developed and creating wireframes. As Josh Jenson recommends, "Create wireframes, perform usability testing, and review functionality. It can look great, but if the user doesn't get it, you've failed." Many prefer to sketch various options in a Moleskin, but there are many other tools available to help out as well. Wireframes should be not graphically detailed, but should outline functionality features in a block drawing format. Typical elements would include news listing, twitter feeds, login boxes, image rotators, navigation style, etc. A question to ask yourself during this process is: What happens on this page?

The visual design aspect is where print designers will most at home. This is stage is very similar to the print design process as brand continuity and communicating the clients message is consistent. We've seen that the best visual web designers thoroughly consider the other two aspects of web design before even starting this process. A question to ask yourself during this process is: How does the site look and feel?

While most experienced digital designers will combine these steps and think about all aspects at once, it is a good practice to step through them periodically to see can be learned from focusing on each stage individually.

Finally some parting tips from our web design partners, hopefully their tips will give you a little more confidence in making the switch.

Lauren Castady - "Learning HTML/CSS was the basis of me transitioning into web design. I felt that I had to understand the basics of the new medium in order for me to make smart decisions when designing."

Jon McGrath - "Tools of the web are very different from those of print. To successfully switch you need to understand the medium."

Jesse Oxford - "WordPress has enabled me to lean into my skills as a designer"

Jeff James - "Web design is not as exact as print design."

Tim Damitz - "Forget what you think about websites. It keeps you from thinking outside of the box. Think about user experience rather then standards."

Jeremiah Chiu - "For me, the biggest shift from designing for the web versus print is understanding the relationship between the user/viewer and the medium. Meaning, as a print designer, you design linearly, where, as a web designer, you design for many different paths with different outcomes, that all must stay focused and in tune with each other. As a print designer, you have much more control in all aspects of how people view your work, no browser/computer/etc... factors are involved. When I design for the web, I try to develop a strong system as an underlying foundation so it can handle any number of circumstances."

Kara Aryam - "The biggest different for me when designing a web layout over a print layout is that the web layout has to be flexible and easily adapt to its content. You can't control everything in web like you can in print. So the design has to be smart in that way."

Mark Novelli - "The learning curve for me has been in learning the technological boundaries of the web, and thinking through usability. How we interact with a web page is pretty different than holding a brochure in our hands."

Craig Clark - "I'd recommend beginning web designers learn the basic standards and not try to reinvent the wheel each time, but rather figure out enough of the fundamentals to where they can push and pull in a position that is actually functional and deplorable with current technologies."

Susan Fireside - "Stick to one type family. Use bold photography.....Keep it simple"

Hopefully this article has helped outline some of the differences in approach to tackling a web design project. We'd love to chat further with you about your next project and assist in any way we can.