---

Anyone can be a great designer. My take is that we’re all born innately creative, but we unlearn so much of that childlike creativity through education, work and the culture we live in, and so we look at “creative” people and see them as “other”, or somehow gifted in a way that we could never be. I mean, I’m a professional designer and I do that!

So much of being a great designer is feeling confident in having something to say, or finding something within the messaging of a piece of work that you can confidently stand behind. Yes there’s technical skill needed, but the job is fundamentally about getting people to pay attention, and so you’ll get a lot further if you’re saying something interesting.

Every time you add something to a design, you’re making a decision and those decisions add up. Think of the messaging as the foundation. If every design decision is made in support of communicating that same foundational idea, then not only will our design hold together well, but each element of the design will subtly help communicate what it is we’re trying to say.

For JavaScript for Everyone, the messaging we’d chosen to build the design around was communicating taking your skillset way beyond where you’re at, with a UI inspired by sci-fi films and retro futuristic computer games. With this settled, each design decision for the JavaScript for Everyone course brand and landing page was much easier.

Starting with typographypermalink

Nine times out of ten I’ll begin a design by trying out typefaces. Not just because it’s a good excuse to spend an afternoon digging for fonts, but because each design decision shapes the next. Building on the metaphor of the messaging acting like a foundation, the display and body font for me act like the cornerstone in a design. They’re usually my first design decision and all the other decisions I make tend to build off that first decision.

For the heading typeface, I quickly fell in love with Orientation Bold. It’s easy to imagine it adorning a racer in the WipEout universe (thanks for the tip off on that book Mat!). The shapes within the letterforms looked like they were pulled straight from sci-fi iconography.

With Orientation Bold taking the lead, I chose Azeret Mono as a supporting accent font for use in ledes, buttons and other incidental typography. Monospace fonts have a very retro sci-fi feel by their nature which is perfect for our needs. Why did I choose this mono font though?

A quick tip when choosing typefaces — I like to read the background info on the font and get a sense of the design inspiration and details. There’s often some information hidden in there which can help inspire aspects of a design or clues as to whether it’s going to fit your brief. In this example, I discovered Azeret Mono is based on optical character recognition (OCR) fonts, which were designed in the late 60s to be read by machines.

The design aesthetic is also deliberately styled to look like a futuristic operating system font — perfect! I also know we’re in good territory with anything from Displaay Type Foundry. On that note I’ve got a list of go-to type foundries and font designers I swear by. A good workman is only as good as his tools after all! This “building a house” analogy is holding up well — I do love to string an analogy out as far as I possibly can!

Another thing I look for when I’m pairing fonts are shared traits within different characters. It’s the little details like this that can make a font pairing work, even with pairings that might on the surface seem unusual. If you’d like a great primer on pairing typefaces based on their characteristics, check out Bethany Heck’s The Value of Multi-Typeface Design.

Both fonts share similarly tightly rounded corners. This shared characteristic really helps give the pairing an intentional feeling, like they’re two different parts of a considered system.

The alternate characters in the font (a, b, c, d, g, h, m, n, p, q, r, s, u, y) take this cohesion a step further. We can use CSS to get those enabled too.

For the body font, Georgia offers a nice stylistic contrast but the main reason I chose Georgia here is because it’s such a clear throwback to the early days of the web.

It gave the retro feeling I was trying to create a kind of authenticity that I liked. I imagine everyone expects a sans serif font in this kind of design, so I wanted something to break away from the stereotypes I was playing on so heavily elsewhere.

Iconographypermalink

In this kind of retro futuristic design, iconography often plays a huge role in building out the design language, as you can see going back to some our references…

I wanted to bring some of the angular shapes from Orientation into the rest of the design. So I chopped up some of the more interesting characters to see what might be useful for iconography.

This evolved into the “TIE fighter” inspired icon below. The “wings” were based on an evolution of the angular shapes used in the exploration above.

Building cohesion into your designspermalink

Those angled shapes also fed into other aspects of the design like image masks and the runway horizon background in the hero design. There are plenty more aspects of the design I could reference here that all build off this aesthetic, like the CRT screen inspired background texture, or the image dither effects, but I think this is enough detail for this post!

This process of adding layers to the design, with each decision building off the last is central to my own process. Over the course of a design I build a clearer and clearer picture of what it is I’m making. This is how you build cohesion into your designs.

Because we set our visual foundation on the messaging we want the design to communicate, everything is subtly communicating the same central idea, which is going to help our messaging to hit home, which is the most important outcome.

Next post in this project

Identifying issues with design assets