Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Striving for Craftsmanship in Web Design

By Paul McKeever on Friday 30th of September 2011

We’re developing Typecast to help you create beautiful, realistic and consistent designs. Less labour, more love.

This summer, we were asked two questions that deserve a public response: why are you creating Typecast and why is it useful? We’d like to answer these questions by sharing our perspective on the challenges facing web designers today.

Browser -vs- rendered web fonts

We’ve found that designing with web fonts, using real content, and in a responsive way is difficult and time consuming. To design for the wider web, we need tools that create space for craftsmanship. We think Typecast can do this by making it quicker and easier to design in the browser.

We want to help you:

  • use the right fonts for your project;
  • design with real content;
  • publish your design as a standards-compliant prototype.

Craftsmanship

We believe that design for the web is about striving for craftsmanship. Our work should exhibit care for our users, and for the web as a whole. How we perform affects our reputations, our clients’ success and how the emerging discipline of web design is seen by others.

Unfortunately, craftsmanship is expensive. It takes time to do things right, yet most of us work to a deadline. We rarely have enough project time to focus on those fine details that distinguish good design from great design.

The web doesn’t need any more mediocrity. But we do need a tool to make great design on the web more attainable. We know from speaking with designers we respect that even a good design process is horribly inefficient.

That’s why we’re creating Typecast.  We want to give you more time to be an awesome designer, by helping you spend less time on manual changes, re-work and hassle. 

Use the Right Fonts for Your Project

Without textual content, much of the web is meaningless. Therefore, typography is a vital link in any design system, connecting ideas between content and presentation. A good typographic foundation is essential and deserves a place in our projects from the outset.


Narrowing down web font choices for Dyslexic readers

Web fonts represent a promise of creative expression. But finding, previewing and designing with web fonts is, at best, frustrating. Creating design mockups with web fonts is a real problem if you don’t have a desktop version of the font.

Many of us resort to using screenshots of web fonts in Photoshop and Fireworks to represent how a website might look. Others spend hours or days hand-crafting HTML prototypes to show how the typography will perform in the browser.

We believe that you should be able to design with the right fonts from the very start of your project. So Typecast makes it easy to quickly test font combinations, establish a good vertical rhythm and design in relative units without needing a calculator.

Design with Real Content

We believe it is better to design from the content out. To use lorem ipsum relegates design to mere visual decoration. Content and design are not independent tracks to be merged at the end, but two facets of the same creative problem.

But designing with real content is messy. Pasting content from a Word doc into Photoshop/Fireworks is laborious and time consuming. Keeping content up to date as a design progresses can be equally frustrating.

We think that great design comes from working collaboratively and forging a genuine partnership with writers and content strategists. We should make it simpler to create meaningful content as part of the design process, then iterate and refine the content as the design develops.

For anything more than the most straightforward of sites, sharing content using Word and Excel can be hugely frustrating. We think Typecast should help writers and content strategist provide (and update) real content for you to design with, saving time later on.


Typesetting web fonts with Typecas

Testing Typecast on live projects has proved promising.

Responsive Web Design Means Prototyping

Responsive web design represents an attractive promise: presenting content in different ways, depending on the capabilities of the viewing device.

Creating a responsive design means designing for an infinite canvas and resolution independence. This focus on designing for the wider web makes the concept of a fixed layout presented in a design comp less relevant. It becomes more important to produce a visual language that will perform well in different states.

It does away with the production of beautiful drawings to be converted from bitmap graphics into finished pages. And its much easier to judge how things will perform in different states if we actually design in those states.

This is Typecast’s greatest advantage. It lets you design, iteratively refine then provides a realistic and reliable what-you-see-is-what-you-get experience.

This appeals to a lot of the designers we spoke to who are moving to browser-based prototyping earlier in the design process to allow for more iterative refinement.

Summary

The role of tools like Typecast is to let designers focus on the parts of a project that matter most. We want to support elegant typography, compelling content and refinement through iteration. Design is a collaborative process and by eliminating friction from the design process we hope to help other designers craft beautiful, realistic and consistent designs.

We want to create something that other designers find useful and would love to hear what you think on twitter.

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus