8.5 KiB
| title | date | tags | |||||
|---|---|---|---|---|---|---|---|
| [old] whitespace | 2016-12-25 |
|
disclaimer: this post is really old, from when i first started writing technical articles. it's from 2016.
breathe.
Because everyone needs to breathe.
Everyone has experienced stress in their lives in some way or another. For most people, the easiest ways to relieve some sort of stress in their lives is to take a break and step away from any information for awhile.
One of the genius innovations in design that’s gotten popular lately is one I’m real glad that exists today:
Whitespace.
Believe it or not, you experienced whitespace. The simple action of separating text using a new line to let one word take the center stage makes a difference.
What is it, really?
Whitespace can be defined as space where there is nothing — empty space. It’s a separation between your sections of content and the borders of the viewport you’re displaying things on. It allows for specific images or words to stand out because they’re separated from the rest of the content. Users can specifically focus on one piece of information.
Gisele Muller describes it well:
“It’s the space between graphics, columns, images, text, margins and other elements. It is the space left untouched in order to smooth things out and transform a page into something elegant. It is also the blank space that reminds us that simpler designs are beautiful and that we don’t need to create a layout filled with text and graphical elements to deliver a clear and direct message.”
But… why?
Information is important, but you can’t expect someone to consume whole paragraphs of information in seconds. Structuring information in a way that users can digest each snippet of information. That’s the key element to using whitespace.
Users need to understand what your message is at a first glance. If someone viewing your app or website can’t understand the meaning behind your site quickly, they will leave. Closing a web page or app is the easiest way to avoid confusing things that users don’t have time for.
If someone viewing your app or website can’t understand the meaning behind your site quickly, they will leave.
Users don’t care much about the flowery prose that your message is contained in, rather the actual message itself. Modern designs for websites only focus on images and quick phrases, or only display words that convey what the focus of your project is about.
Your focus should be on making sure that the core idea behind your content hooks the user in to consider looking at the rest of the page. If you have space that allows for information to be presented in bite-sized portions, users will remember you better. Key words and phrases are what users are going to know you by, not specific details. It’s how our brain stores information. Cut out the middleman and filter out unnecessary words and sentences.
Whitespace in web design
Google is probably my favorite example of whitespace in modern designs.
Yeah, Quechua. I was surprised, too.
Google’s front page gives you a limited amount of options to work with so that you don’t get confused. The whole website is centered around searching things, and your focus is centered on the content in the middle. The gentle shadow behind the search bar lets you know that it’s more important than the other elements.
The two buttons you’re immediately given access to ease you into the design — you have power over what you do! You can search for many options or try your luck and go to the first result for your query.
This way of spreading out the options you have lets you analyze what you need when you need it. Nothing is intruding your vision or forcing you to squint to read anything. You have enough time and ample room to digest what’s being presented to you. It feels natural to use Google’s search engine because there’s little guesswork in what you can and cannot do. Everything is spaced out and there’s never a place where content feels crowded.
Whitespace in programming
Whitespace isn’t only limited to design. Utilizing whitespace in your code is important. Your code should be legible and spaced. The fact that it could be a project that never sees the light of day is irrelevant. Your code should make sense and nested functions should have proper spacing.
Everyone has differing opinions on whether to use tabs, 4 spaces, 2 spaces or any other combination of separation of characters. I use 2 spaces in my projects, but that’s my personal preference. What does matter is that you use spacing to make your code stand out and appear readable to other people.
Take a look at this HTML code:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8"><title>This is an HTML document!</title></head><body><div class=”row”><div class=”col m5">Some content<div class=”row”><div class=”col s12">Some nested content</div></div></div><div class=”col m5">Some other content (woah)</div><div class=”col m2">Even MORE content</div></div></body></html>
Yes, it’s an HTML document, but there’s no real implication of what goes where. Everything seems like it’s on the same level. Tags could appear nested, but you’re not sure which one does which. Someone else might not want to touch this — they’ll be worried they’ll break something in the layout. Applying some whitespace to this code demonstrates the following:
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <title>This is an HTML document!</title></head>
<body> <div class="row"> <div class="col m5"> Some content <div class="row"> <div class="col s12"> Some nested content </div> </div> </div> <div class="col m5"> Some other content (woah) </div> <div class="col m2"> Even MORE content </div> </div></body>
</html>
Woah! There was a whole collection of divs that had nested content hidden in our non-whitespaced code! Storing the code this way makes it so that other people working on this static HTML page know how the page is really structured. It makes it so that people aren’t intimidated to dive in and help out with changing details in code. (also it’s common human decency)
This doesn’t just apply to HTML. This applies to practically any programming language out there (except the esoteric ones). Most languages have some sort of “beautifier” or “prettifier” to make your code seem legible and spaced out.
Knowing what lines of code are on the same level and what variables are accessible where is important in the long run. When you’ve got 100+ files of code and hundreds of functions, you need to be able to parse your code easier. A simple glance should be all it should take to know where a variable or function is located in relation to everything else.
Whitespace in your life
Jason Fried mentions in many of his posts that Basecamp, as a company, strongly encourages its employees to only work 40 hours a week. He also mentions that taking a few hours a day to yourself is important. Jon Westenberg also mentions that you should “slow the fuck down” and take life one step at a time.
In today’s bustle of constant information, sometimes we forget to take some time for ourselves. It doesn’t matter how many hours of work you do in a day, the final product matters. The quality of a product is more important than the time it took to make it. This time to generate a quality product is different for everyone.
Take some extended periods of time to do something that relaxes you. I normally take time to myself to play some games or catch up on reading Medium articles. Everyone’s ways of relaxing are different, but make sure you make whitespaces in between the hustle and bustle of the day to breathe.
You deserve it.