Reboot: The Design Process

In which I get frustrated about people telling me the site looks weird.

06:30 · 11th Mar 2020 - 479 words about creative

Many people have already looked at this site since the reboot and have made either one or both of the following comments.

“It looks weird.”

“Your CSS is broken.”

Which in hindsight illustrates that I probably should have outlined the process I was intending to go through and how the presentation fits into that process.

Keep in mind, this is my 12-step opinionated design process, your mileage may vary.

  1. site exists, so review
  2. define goals
  3. research, user and otherwise
  4. information architecture, URLs
  5. information architecture, content outlines
  6. content writing
  7. build infrastructure: Laravel + Markdown
  8. build structure: HTML (incl. meta)
  9. build presentation: CSS
  10. build behaviour: JS
  11. celebrate
  12. review

Each point actually has its feedback loop as well, which takes the form of Brainstorm, Research and revise, Proof and edit, Publish, and Review.

Point of note: Review is after Publish to counteract the tendency for inertia.

But as you can see, we’re just about getting to step 5, meanwhile, you’re asking me about step 9.

Except of course you’re not actually, you’re asking for the artefacts from the Design, which often comes in the form of a Sketch or Figma file.

The Design being loosely comprised of fractions of step 4, 5, 8, 9, and 10. Maybe some step 6 if you’re lucky but mostly not.

Design, to me, is the execution following a carefully deliberated intention. It isn’t decoration or ‘how things look’, it’s how things work—or don’t work.

And if design is how things work/don’t work, then all of this is design and good design needs time.

Great design needs a lot of time.

And whilst I might not be much of a designer—I’ll let you be the judge of that once we get that far—I’ll be damned if I’m not at least going to try.

Or put it differently.

If all you have is a CSS file, what do you get? Nothing.

If all you have is an HTML file, what do you get? A website.

Technically I skipped to step 7 as the first thing I did anyway simply because without the bare minimum from step 7 you wouldn’t be able to read this as it’s happening.

Look mom, I’m being inconsistent with my own narrative!

Once we do get around to the presentation, I will not be taking a utility-first approach.

Utility-first CSS is a symptom of the broken and siloed design process where structure and meaning are thought of after presentation instead of before.

Instead, I intend to follow the grain of the web, as Frank Chimero would call it, by embracing what the web truly is, or is meant to be.

So with that in mind, the answer to the question implied in the, “Your CSS is broken,” is a resounding, “No, no, it isn’t.”

But I’m very excited for once we got that point because it means we’ve reached the three-quarter mark and we’re in for the final stretch.


Theme: creative

Topics: web design, behind the scenes, design, process