Skip to content

Instantly share code, notes, and snippets.

What would you like to do?

designtrack · Brief

I first wrote this on 9 July and it’s been sitting on my computer ever since. I’m finally sending it, nearly three months later. Gah! That’s how insanely busy I am.

The Problem

Here are thoughts on the Tiny Books’ site, good and bad. (I’m mentioning Tiny Books because it will have an influence on the designtrack site.)

I love the current Tiny Books website and I see aspects of designtrack following a similar approach. I like the big hero image on the main home page, which is why has a similar approach with big heroes throughout the site.

I’d like to do something like that for designtrack. The heroes give you a space for bold, arresting imagery and large call to action buttons.

I think we can use the site you built for IXD303 for the Smashing UX book, so nothing will be unused. That said, there are some changes I’d like to make so that the designtrack website is more me.

I’m pretty sure I’ll have to live with this for around a decade, so I’d like to be happy with what we do, plus this is an opportunity for us to approach designtrack afresh.

In terms of typography, I’d like to explore using Colfax (sans serif) and Elena (serif), so that the design echoes aspects of the Mr Murphy website’s look and feel. This will help with slide design, so that I can explore having one slide design for all my work.

The use of Elena is important, it’s better for reading articles on screen and it’s more suited to book design and downloadable PDFs, etc.. A serif’s superimportant for a content-focused site.

The space shuttle in the old brand, coupled with the Death Star on the first book (and the idea for planets on the cover of other books), all looked a little too childish. It lacked gravitas.

What was I thinking going down that route!?

Gravitas is important. It’s something I’m trying to convey as I move from being a full-time lecturer to a half-time design consultant, writer and freelance educator. It’s important that the overall aesthetic of designtrack conveys a sense of trust in the materials.

The existing Tiny Books website was also very complicated with ‘planets’ (long books) and ‘moons’ (short books). I need to get rid of the complex planet metaphor, which is explained on this – unfinished! – page.

On designtrack: a course is a course; and a book is a book. There’s no complex underlying system. That will make publishing courses and books much, much easier.

I also want to take this opportunity to redesign the new books themselves following the look and feel that you develop. My plan is to print books – with an emphasis on high quality print, think: Unit Editions meets LogoArchive – as well as making them available to download.

Overall, this should make a nice portfolio piece for you as it will be well-rounded with lots of different outcomes (screen and print).

The Solution

I think the solution is to simplify things and in the process develop the sense of gravitas.

As I think we’ve discussed, I like the idea of geometric shapes as the backbone of the brand. Your designtrack marque – the rail tracks – is superlovely, and very geometric, and I’d like to use that as a launching off point to explore the creation of different patterns.

I’d like to keep the designtrack marque exactly as is, unchanged. It’s clean and elegant and I love it.

I think we could develop a series of patterns that I could use for:

  • Book Covers
  • Course Materials
  • Slides
  • Social Media Imagery
  • Etc.

If you look at the Troubador branding – which I saw when I was walking in London over the summer – it got me thinking about how knowledge is lots of separate pieces, connected. That made me think that patterns could act as a nice metaphor, with elements that fit together.

The Troubador brand is 3D, but I think everything would be nicer if what we do was two dimensional and flat. It’s almost like what you design could be shown to Year 1 students as an example of what can be made using:

  • Point, Line, Plane…

In essence: Designing within constraints.

If you look at Stripe’s book covers – with their geometric forms – I can imagine book covers for designtrack handled in a similar manner. Strong colours, plus geometry.

I also like the colours that are used at A Book Apart. The bright colours lighten the mood a little and they give each book a distinct identity.

If you look at objc (which my supertalented friend, Paulo, designed), I love the colourful approach on their books page.

The flat colours at the top (Bundles) are nice, but the gradient colours (Individual Books) at the bottom are… I’ve been searching for a word to describe them, and this is the only one that fits: delicious.

From a readability perspective, The Manual (also by Paulo – he’s a talented chap!) is also nice. The content is very, very reader friendly, which is why we need a serif.

Lastly, if you want to get a feel for Colfax in action, OpenAI use it for their reports (scroll down to ‘Systems for Learning’). OpenAI also use the colourful gradient approach too, on their home page. See this screenshot.

Hopefully the above gives you a sense of what is in my head. I’m excited about this project and the potential it offers. Not just for changing UX design education, but for creating a nice portfolio piece, which I art direct and you design.

Next Steps

Our top priority is getting something up on

Over the long haul (3-5 years) I think we’ll end up with something like your visuals:

  • Dashboards
  • User Profiles
  • Community

That’s unrealistic for the short term and there’s no way I’ll get the amount of content we need done in time. It will take years to get to that point.

A better approach will be for us to MVP the fuck out of this. We launch with one course, with an in-depth page that explains the offering. The first course will be ‘Building Beautiful UIs’. I’ll be building slide decks to accompany the book.

We’ll need a page that’s a combination of Jared Spool’s UX Strategy Playbook, but handled in a more visual manner like Laura Elizabeth’s DesignAcademy. This page sells BBUIs, then we add other courses one by one as they’re done. Courses I have:

Immersives (12 Weeks)

  1. Building Beautiful UIs *
  2. Designing Delightful Experiences
  3. Digital Product Design
  4. Marketing (On- and Offline)
  5. Content Design

Fast Tracks

  1. UX Portflio *

The ones with asterisks have content semi-finished.

So, for immediate next steps, we need to build a site that has the following:

  • Home
  • Our Story
  • Courses
    • Immersive Courses
    • FastTrack Courses
  • Books
  • Journal

One critical next step is the creation of an email newsletter that we can build landing pages for. This will be used for gathering potential customers so that when we launch, we launch with an audience.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment