A blog about trying to make yourself better at making and designing websites. Also about random shit.

Know what happens under the surface

A screenshot of PrivacyHeroes.io. It features six privacy-centered companies depicted as superheroes. 

What I love about the web is that it's easy to see the code that makes any website tick. By opening up DevTools, you can learn about a myriad of things on the page such as animations, the style of a certain component, the assets that were loaded, and even the way JavaScript interacts with everything else.

But what's hard to see is all the decisions that happen behind the scenes. When you're building a website, it's important that you know that you can't just sit down and immediately start coding. I used to be the kind of person who would excitedly jump into working on code without giving any thought to boring processes.

We, as makers, are building things with other people (co-workers, stakeholders, content creators, etc.) that other people will end up using. So it's worthwhile that whenever we work on a project, we have a process that will increase our chances of success.

I recently got to work on a website called PrivacyHeroes.io, and I want to share with you the sorts of decisions that you don't see when you look at a deceptively simple webpage. Let's dive in!

A screenshot of PrivacyHeroes.io that shows the whole page. One section has superheroes and the next section explains the reason for the page.

Project Goals

Before diving into any code or design, it's important to think through the goals of the project and if you have all the resources that you need available to you:

  • What's the purpose of this project?
  • Who is the audience?
  • Who's involved in this project? Who are your stakeholders?
  • Who will create the design?
  • Who will program the page?
  • What's the goal of this project? What's the success criteria?
  • What's your deadline?
  • Who will create the content for the page?
  • What's the budget for the project?

Why is this important? Thinking about questions such as the success criteria of your project or the audience that you're targeting will force you to be more focused and will help you determine if the project was a success or not.

It might be boring work, but this is the meat and potatoes of any website that you're going to create. Of course, the kind of detail that goes into this depends on your project: Answering these questions might be faster if you're working on a more personal, short-and-sweet website compared to a collaborative website that involves multiple companies.

So to give you an example, here's how I went about answering these questions:

  • The purpose of this project is to have a landing page for people who see our in-flight magazine ad.
  • Our audience is the people who are on the plane.
  • The people / companies involved are DuckDuckGo, Brave, ProtonVPN, Tresorit, Threema, and ProtonMail. Plus Matt Anderson for the illustration.
  • I'll be designing and programming this page.
  • Deadline is 3 weeks.
  • The goal of this project is to see how many people see the ad and go to the landing page.
  • DuckDuckGo and ProtonMail will create the copy.
  • There's no set budget for the project. Only a deadline.

Expect a lot of back and forth communication when working on answering these questions because, more often than not, you're likely to be working with multiple people in different teams.

Design

Design is a bit easier for this project because there's only one static page to work on. This meant I didn't have to think about empty states (or any state for that matter), themes, consistency with other pages, different languages, or new data.

A screenshot of the mobile and desktop designs of PrivacyHeroes.io in Sketch.

But there were still some things that I needed to figure out:

  • What alternate fonts can we use in place of Gotham? (You're not allowed to self-host Gotham on the web unless through Cloud.typography.)
  • Do we want to add some sort of animation on the page?
  • How should it look on mobile and on desktop?
  • How big should the icons be?

If you're interested in thinking about design process and thinking about the people who'll be using your website, I recommend these:

Programming

Now we're on the actual programming part! Just like design, it's relatively straightforward to actually create the page, but before you really dive in to the code, think about how this will affect your users and future maintainers of the code (and that includes you).

  • Should I be using a build system like Grunt?
  • Can I use features like CSS Variables and Flexbox?
  • What sorts of engagement do we want to measure?
  • Can I use more recent JavaScript features like let, const, and Promises?
  • Will I be able to use CSS Animations?
  • What can I do to make the website lighter?
  • Who's responsible for getting the domain and setting up the DNS?

As you can see, a lot of work can go into a simple website like this. Whenever you visit a page, try to think about the sorts of decisions that they had to think about. Try going to a website like YNAB and think about their target audience, animations that get your attention, how the page is divided into sections, and so on.

And that's it! I hope you can use this in your projects. Have fun with your new super power!