--- title: "[old] whitespace" date: "2016-12-25" tags: - "design" - "english" - "productivity" - "tech" - "ux" --- > **disclaimer:** this post is really old, from when i first started writing technical articles. it's from 2016. #### 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](https://medium.com/u/6b4913453525) [describes it well:](http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it) > “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. ![](images/28fe9-1dwr6l_fjhnnuo1wf-jgehq.jpeg) 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](https://www.youtube.com/watch?v=bFEoMO0pc7k). > 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. 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: ```