Designing from scratch: a blank canvas

A blank canvas. it might as well be the devil himself. Complete nothingness. And it’s not just on that page in front of you; it surrounds you and swallows you whole. There’s only nothing, and it’s everywhere. Ultimate freedom. No guidelines, no boundaries.

… so, where do you start?!

1 ) Requirements

The indexing of the requirements of your project can take many forms. And the amount of effort going into this phase is determined by the available resources and the scope of the project. It’s vital to set a goal at the start of your process, even if this goal is a target in motion.

Examples of how to kick things off:

• A quick chat with your aunt, about how she wants to put photos of her floofy poodle pup thing online
• A workshop with a group of engineers, to outline the data they want to exchange between two power plants
• A shower-thought, followed by a boring commute spent pondering the next move for your awesome little side-project

The point here isn’t that you should always have a documented scope of the problem, because sometimes a general idea or direction is good enough.

2 ) Research

As with the previous step, research can take many shapes. Sometimes you’ll spend 5 minutes, sometimes you’ll spend 5 weeks.

• Hit up Google Images or Dribbble, with a loose search term
• Join some online communities, to talk about solutions to your UX problem
• Engage your colleagues on the Marketing and UX teams, to have them investigate the wants and needs of your app’s target audience

You really just want to see how others solve the issues that are currently in front of you. Or related issues. Or perhaps you’ve got some solutions in mind already, in which case it might be a good idea to see how others executed those solutions!

Pause.

John Cleese talks about creativity requiring time. (And time!) Relax. Sit down and watch some Netflix. Go for a walk with your better half. Interact with some strangers. Play some basketball. Have a cuppa with that one friend that doesn’t stop talking. Practice the harmonica. Look. Feel. Experience stuff.

Did you know that if I use the word whimsical, you’re likely to find yourself using it soon as well? That’s how human brains work. They’re not random. They connect pieces of information together and turn them into new ideas. And the more recent you’ve been exposed to a thought or pattern, the more likely you are to reach for it as a solution.

This is why you pause after doing your research and setting your goal. Keep your project loosely in the back of your mind, and puzzle pieces will start falling into place around you, whimsically. (… I’m on a mission here.)

Pausing actually doesn’t need to be step 3. It can be useful at any point where you’re mentally roadblocked.

3 ) Constraints

Pencil to paper. Not literally. Unless that’s your jam. Feel free to use a marker and a post-it note instead. Or a whiteboard. Or PhotoShop, Sketch, Balsamiq, a box of LEGOs… whatever makes you comfortable.

This part is about constraints. The scariest part about a blank canvas, is the fact that there’s nothing holding you back. Creating your first boundaries will give you something to work with(in), a bearing or at least a direction.

Because the first design you’re creating is nothing more than a rectangle. Affectionately name it “my lil’ view-port”.

This little rectangle just created your first set of limitations. Your ball-park. It confines you to an area, but it also gives you the goal-posts you can lean on.

4 ) Define context

With any type of interface, look at the big picture first, the context. Get the overall lines in place. As an example, let’s look at Google Maps, which perfectly illustrates the point.

• When you zoom out on a Google Maps, you see the planet
• Zoom in a bit. There’s some countries
• More zooming — the city of Naarden and its streets
• … and suddenly, we can count the cobbles!

This works with your design as well. Take your view-port, and start populating it with rectangles. Think big first. What does your content look like when viewed from space?

• What portions of your home page will be dedicated to your primary product, your slogan and your mission statement?
• What are the most convenient ways to browse your music videos? Do you show a list of titles, a list of categories and/or filtering options? Or just a search bar?
• What is the order of sections on your one-page-checkout? Shipping details first? Or payment details? Credit card at the top?

Even when you’re designing a tiny widget, you can still apply this philosophy. Think big first. Draw large squares. Fill out the details later.

5 ) Detailing

You’ve done the groundwork by digging the road and flattening the surface. Now it’s time to put in the cobble-stones. One by one.

• Draw a button. And its twelve states. Active, inactive, pre-purchase, post-purchase, post-completion, re-available, re-purchase, pre-re-completion, etc.
• Draw a search bar. And its search hinting. Some arrows to show how it animates as you type. Preemptively show the number of search results.
• Draw a cog. And the drop-down shown when you click it. Think about the wording of each item. Add a small badge and icon for updates.

This really is where your canvas starts filling up. It’s all about ironing out the details, getting closer and closer to showing the most granular, raw form of your content.

Too long, didn’t read:

If you’re scared of a blank canvas, set a simple process for yourself to start filling it up.

1. Requirements — scope out your task
2. Research — research solutions
3. Constraints — set simple boundaries
4. Define context — view from a distance
5. Detailing — sweat the small stuff

… and don’t forget to take your time where you can. Sit with the problem you’re trying to solve and look for solutions anywhere and everywhere. The more time you get to spend with a problem, the more likely you are to solve it in an ingenious, illuminated and previously inconceivable way.

Do the above and you’ll find:

… a blank canvas is only scary with a blank mind!

Enjoy UX related banter? Wanna learn from fellow design-nerds? Need a hug?

Join us over on United Designer’s Slack chat!