Chris Armstrong From the Typecast Team on Designing in the Browser
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.
- ·The Future of Sex poster
- ·Top 100 Fonts.com Web Fonts for May 2016
- ·47 free tattoo fonts for your body art
- ·How to sell your typefaces
- ·Once Upon DESIGN: New Routes for Arabian Heritage
- ·Alphabet Stories by Hermann Zapf
- ·Type terms: the animated typographic cheat sheet
- ·TypeDecon Digital Download
- ·Linotype Ad: "Linotype vs. Intertype"
- ·The 52 best free graffiti fonts
游客ReviewFS Emeric字体：一款令人愉悦的新字体font article没看看有这款字体啊
我在这儿Review网页设计中的艺术字体设计与排版（1）font article很好 值得学习
新蒂字体 授权使用： 无需备案免费使用的情况： 在个人电脑上安装、打印个人文档、个人网站、博客、微博配图 需要备案免费使用的情况： 设计有可能商用的稿件（在商用时购买商业授权）、用于免费提供给他人的印刷品（印量在500份以内，且无需获得印刷品行政许可）的情况、用作没有品牌冠名的公益广告、用作完全免费（不能含有收费项目）的软件及网络服务。 需要购买个人授权的情况： 个人网店的装饰、个体商...