Ben Stevens Logo

Is this the new starting point for website design?

I stumbled on a novel idea recently that I'm keen to try out. Except, it's sort of controversial.

Straight into the code!

Ask any Digital Designer what their favourite work tool is and you probably won't be surprised to hear it's something like 'Sketch'.

Many of us, myself included, will begin designing on Sketch as a point of entry (after any documentation, UX and strategy have been considered) and take it from there. Pretty standard stuff these days.

But I heard a really good tip from Dan Sheerman, Tech Lead / Front-end Developer at Headscpe in the UK on the latest Boagworld podcast; 'The Hidden Challenges of Effective Responsive Design.'

I love the idea of starting with a sort of, 'pre-fab type-kit' or 'Typeplate' that houses base typography, and demonstrates basic media query breakpoints. In fact, just search for 'base typography code' brings up pretty much just such a template.

We're talking quite literally of starting the design with code. You style the typography purely by CSS to get all the fonts, sizing and breakpoints right before you dive back into Sketch.

I work atomically, so after getting the sizes and media queries right, the next step would be to plug all that back into my usual typography page and let it drive the design.

I, uh... don't really do production quality code though, so for me, this is more of a starting resource that I guess the real heros can get right later.

The advantage here is understanding what is going to work from a really early point in the design. Figuring out these basic elements, and just seeing them scale in a browser, could potentially be a huge driver for a whole range of atoms and molecules that come later.

I'll update this post once I've given it a go. have no idea if it will be ahelp, or a hinderance.

By the way, if you've never heard of Paul Boag and his little podcast (I say little, but he's got ten's of thousands of listeners) then I highly recommend checking it out too. Those guys are usually bang on the money.

Ben Stevens is a Digital Designer based in Melboure, Australia.

Was this article any good?

Recent articles.

Standard Post with Image

User Experience

Dark patterns of dealerships: the UX of buying a new car

My wife and I just went through the gauntlet of buying a new car, and I can say with confidence that it's as bad as you might expect; shady car dealers, questionable financing deals, and optional extras that are more like optional ball and chains.

Read More
Standard Post with Image


How to write compelling copy that won't bore your audience

One of the worst sins regularly perpetrated is ignoring your copy, or putting it off until the last minute. Make a stand and start putting your copy first.

Read More