Design with web fonts, in the browser

Typecast is a browser-based design tool that allows users to experiment with web typography and create production-ready prototypes. I designed and built eight responsive page templates to integrate with the app.

Launch Website
  • Features:
  • Responsive design with proportional scaling
  • Varied, diverse typographic treatments
  • Ability to customise and download from typecast.com

User Experience Design (UX)

The fundamental purpose of each template is to serve as a foundation for users to experiment with typography and font-pairing inside Typecast.

The goals of the project were simple. Create eight themed templates that showcase intricate typographic treatments, helping to inspire and encourage users.

How this was achieved is unique to each template, though the process behind each was the same; research, prototype, conduct user testing and refine.

The user testing sessions helped ensure each template met the needs and expectations of users, while aiding in the theme selection process.

Typecast template 1 - longform article
Typecast template 2 - article index

User Interface Design (UI)

The sole focus of each template is the typography. The layout, flat design and unobtrusive colour pallets all serve to emphasise the type.

The templates were delivered in Georgia and Helvetica, denoting the use of serif and sans-serif styles. Both typefaces are extremely well established making them perfect to represent each classification. Realistic dummy content was used where possible to inspire real-world usage.

Typecast template 3 - product landing
Typecast template 4 - product pricing
Typecast template 4 - product pricing mobile
Typecast template 5 - product store

Front-end Development

To enable seamless integration with Typecast each template had to adhere to strict guidelines.

The markup had to be semantic HTML5 with no wrapping elements or bloat. Each template had to have it’s own unique grid.

All templates had to be responsive, using only ems and percentage based units for layout, and the font-size property for scaling. Complex CSS selectors, pseudo-classes and background styles were not allowed.

Typecast template 6 - about/team
Typecast template 7 - element collage

Working with Matt is always a pleasure. Beyond his obvious creative and technical skills, he brings a sense of responsibly and ownership to every projects that is hard to find elsewhere.

Jamie Neely / Director of Product Design @ Monotype
Belfast, Northern Ireland

Matt Fulton Web Design Belfast

Choose an experienced freelance design consultant

Design studios can be very expensive, with managers who shelter you from those working on your project. Similarly, many freelancers fail to understand the business aspects of a project.

As an experienced consultant I offer the best of both worlds and will create a website that will help your business grow.

Lets get started...