Category Archives: front-end coding

My first In-the-browser design

Thank you Robert Nealan

Check out It’s an Agile project, so ongoing, but even in its nascent form celebrates personal firsts:

First use of Robert Nealan’s Design in the Browser.

Robert was the second design person to make me believe I could get on top of the coding mysteries and make my pages do what I want. I have some questions for him – in that first workshop he gave, we didn’t get beyond beginning steps – but it has been exciting to move from closed systems into something portable.

First one-page site.

I didn’t understand why folks made one-pagers. Or, rather, I understood the concept but the reality seldom seemed interesting in an experiential way. Generally, soft on content. But for this client, I realised that I wanted a full rollout of the product, in a way that phone users could enjoy, with no decisions and no clicks until you get to answering, Which of these do I want to buy? question.

And, yes, I know it’s got an Info page to come, which makes it a two-page site. But it works on the one-page concept: Scroll not click. Draw them in.

First Agile project.

Working with a diverse team, with everyone up to their eyeballs in every aspect of UiX, branding, product lineup, imagery, pricing, messaging – if we waited until everyone agreed, the brand would never launch. Not to mention that most of the team can’t picture things they can’t see and use, so we need this for, if nothing more, a test site.

I think it works. Do you?

There are questions, of course. And things that need doing:

The Info page, another one-page model, needs drafting.

Real photos need to be shot, showing the product as the branding and marketing gurus want them.

Photos need to be optimised for web, so they pop up instead of lazily scrolling onto the page.

Type faces and design details need crafting. For this first go-round, I stuck with generic. Next, I need to tackle mixin files and learn how to Grunt. I’ll be asking Robert questions.

Let me know what you think about the page, how it looks and how it works. Ask questions about how I did it and why. Give me ideas on ways to make it better. Ask me out for coffee.

My design approach: Show what I mean, mean what I show


All we live through changes us; I’m not sure we always recognise ourselves in the mirror. Through my professional life – from designing for letterpress, silkscreen and ditto to working with code – I’ve developed a few continually morphing approaches to help me make useful, sustainable and effective design choices.

Here’s today’s quick summary:

Objectives-first. Projects begin with Mission and the site’s rôle in achieving business objectives.

Collaborative. Common resources and shared imagery project a unique vision. Audience and community are challenged to respond, reject, rejoice and change – both the vision and themselves.

Process-oriented. UX belongs to the user; design encourages positive experiences by providing results through productive, simple interaction – and a dash of anticipation.

Branding-identified. Design and content dominate a niche with ID image, voice, tone, attitude and expertise.

Structure precedes detail. Organisation harnesses diversity. Specification builds durability. Content is substance. Code is design.

I found my doll Ona behind a dumpster in Barcelona. She keeps me IRL, to do a better job for you.