The notion of browser-based Web designs has gained considerable momentum over the past year. I sat down with Chris Armstrong to discuss the many benefits of starting in the browser that have many Web designers rethinking their workflow.
JZ:What are the problems you see with the traditional Web design workflow?
CA:The traditional Web design workflow tends to give too much priority to flat comps like those done in Photoshop. It assumes that a flat comp can communicate the right design effectively but it doesn't show you the whole picture. Applications like Photoshop and Fireworks are great for ideation and exploration, but we really need to test those ideas and work within the realistic constraints of the browser. You can get something that looks good but it's only when you prototype that those awkward questions like, "What happens when that H1 goes onto two lines?" are asked.
JZ:What projects have you worked on where these problems were particularly apparent?
CA:I recall one project where we delivered pixel perfect comps, but when the client saw the prototype, he wasn't happy that they weren't as tight as the comp. Our developer was doing a great job, but he had 101 things to think about and the subtle typographic details that really hold the design together got lost in translation. It was a
lot of work to go back and add that finesse afterward. That project led us to determine we needed to get the typographic foundation right at the beginning and build from there so that we always have a basic level of quality. –And the designer needs to be the person who does this.
JZ:How does designing in the browser address these issues?
CA:Designing in the browser makes it easier to test your design decisions against different types of content, and see how a site is going to adapt to different device sizes. Because it's composed of HTML and CSS – the raw materials of the Web – you know that if you can get it to work well here, it's likely to work in the wild. Designing in the browser also forces you to consider the edge cases, and cater for them to avoid nasty surprises – things like the font not rendering well in a Windows environment.
JZ:How has this approach impacted the way you work with your clients?
CA:It allows us to work more closely with our clients to evolve their content. Showing them how a design renders in the browser helps us have the right conversations early in the process. It helps the client understand the constraints of the medium and give more informed feedback.
JZ:Do you still see a role for Photoshop and other drawing applications in the design workflow?
Absolutely. Applications like Photoshop and Fireworks are great for sketching and ideation. Designers are so comfortable with them; they're like using pen and paper. But we need to spend less time ideating and more time testing and iterating those ideas against real content, within the realistic constraints of the browser environment.
JZ:What led to you developing your own application (Typecast) for designing in the browser?
CA:We got tired of waiting for someone else to do it.
JZ:You're just about ready to debut Typecast to a broader audience. What's next for the application?
CA:At the moment we're focusing on getting the basics right – setting hierarchy, color, contrast. But, in the future we want to do all we can to make it easy to create a complete set of elements, to create good vertical rhythm and help with things like swapping between pixels and ems, and introduce effects. The goal is to provide the tools you need to provide a complete design system for your site.
JZ:Do you have a favorite typeface or one in particular that you've been using frequently as of late?
CA:I'm loving Avenir. I just love the elegance of it.
Typecast is a tool for designing in the browser with Web fonts and real content. It includes many of the most popular typeface families from our Fonts.com Web Fonts service and is currently in private beta. Apply for an early look at Typecast on Typecastapp.com.
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor's degree in marketing and a master's degree in business administration from Bentley University.
