How to Effectively Use Whitespace in Web Design

Have you ever found yourself gazing at a finished design thinking, ‘something’s missing’? More specifically, have you ever come to the conclusion that a design is ‘too empty’ or ‘too busy’? For us designers, it’s difficult to spend any appreciable time in our craft without running into this scenario.

This really shouldn’t come as a surprise either. After all, the most basic principle of our work revolves around the creative removal of whitespace. Yet, despite it being at the very core of what we do, it never fails to be one of the more difficult aspects of design. How do you use whitespace effectively?

Is It Really Empty?

Have you ever thought of whitespace as ‘spaces between design’? While that’s a prevalent line of thought when it comes to the barren spots of our designs, it’s an entirely incorrect perspective. White space isn’t just the filler between design elements, it’s a crucial design element in its own right!

Whitespace is like the mortar between bricks or the adhesive in a stained glass mosaic. Though our eyes are trained to admire the content -bricks / colorful glass- it’s the stuff in between that holds the content together and helps shape the overall flow of the design.

whitespace example Beatbox Academy
Effective Use of Whitespace: Beatbox Academy.

Just like a beautiful mosaic sans glue, our designs without the whitespace would simply be a colorful mess. Once you recognize the significance of the so-called empty elements of your designs, you’ll then be better equipped to leverage this white space to its fullest extent.

Focus

Now that we’ve established the importance of whitespace in our designs, how do you use it?

Let’s start with a little exercise. Open a new tab in your favorite browser and point it to google.com. What’s the first thing you see? I’ll wager it was the brightly colored Google logo right? Where was this logo? It certainly wasn’t at the top edge of the window where your eyes naturally start. So how’d your attention get drawn immediately to the center of the page?

whitespace example Google homepage
Effective Use of Whitespace: Google.

You guessed it. Whitespace. Google uses an abundance of white space to naturally tune your focus to the center of the page where the meat of its minimalistic design resides. Whitespace is one of the most simple methods of guiding the eyes of your audience.

We can use this design tool to create natural hotspots in our layouts. With the focus and attention of our audience drawn to these areas, we can then place important content within to more effectively convey our message.

Organization

Going hand in hand with directing the audience’s focus, whitespace affords designers an easy way to organize different elements of design. Just like we use whitespace to break up walls of text into more manageable paragraphs, it’s exceedingly effective at creating clean organization of the content in our designs.

whitespace example Bagigia
Effective Use of Whitespace: Bagigia.

A useful tip when organizing with whitespace is to be consistent. It’s helpful to think in terms of content groupings when using whitespace this way. Do your best to come up with a uniform measure of whitespace for margins, sections, text and graphic elements.

One of the best aspects of whitespace organization is that it’s both easy to adjust and can have far reaching effects on design. So feel free to experiment!

Emphasis

Owing yet again to its remarkable ability to guide the eye of your audience, whitespace can really help certain elements of your design stand out. Building on the previous theme of consistency for organization’s sake, breaking the continuity in creative ways can quickly grab attention.

whitespace example Cultured Code
Effective Use of Whitespace: Cultured Code.

When you create a steady theme of white space use in your designs, it creates an instant familiarity in the eye of your audience. As they continue to navigate the design, any hiccup in that continuity, even subtle ones, will naturally stand out.

A great example of this, and one which you can easily implement, is to ever so slightly change the letter spacing on titles you wish to emphasize. With that mastered, try using it in more subtle ways by experimenting with the spacing of section elements within your designs.

It Doesn’t Have to Be White

The above tips all revolve around guiding the eye of the audience. That is after all what whitespace is best suited for. That being said, just because we call it white space doesn’t mean it has to literally be white! There’s no unwritten law of design dictating the color -or lack thereof- of the space between the prominent pieces of your designs.

whitespace example Huge Inc
Effective Use of Whitespace: Huge Inc.

A fantastic example of this in practice can be seen with the single-page design trend. When you’re relegated to only one page for content, effective whitespace use is critical to maximize focus, organization and emphasis.

Blocks of content are often designed to be continuously flowing in these scenarios. In such cases, simply changing the color of white space in these blocks helps maintain all three areas of design we’ve talked about while also providing breaking points for content in tight spaces.

With these tips, I hope you look at the whitespace in your designs from a fresh, new perspective!

Finding and Using Your Own Design Voice

Your design voice – or design style, if you will – is how you choose to relay information to your audience. That sounds simple, but for the uninitiated, it can be incredibly confusing.

I have a confession to make today: when I started writing this article, I was stumped at how to best phrase my main idea. I had something important I needed to tell you wonderful readers, but I just wasn’t sure how to do it. Then it hit me that I wasn’t approaching it in a writing voice I recognized as being “mine.” I was attempting to get too lofty with my idea (since it’s so important and all), and missing the point of my own message. How’s that for irony? In your face, Alanis Morissette.

I eventually decided to scrap what I was originally going to write about, and start over in my own personal style. I love telling stories, and I think that’s where I shine as a writer. Plus, I’m incredibly modest, as you can tell.

Retro mass media microphones for broadcasting or recording front mint green wall background

So, what is voice? What is personal style, and how can we creatives develop it? One thing’s for sure – it’s not just something for writers to think about. Creative professionals of all stripes struggle with developing their own unique way to express their ideas, especially with so many amazing people out there doing things we admire and are inspired by. It can be hard sometimes to separate what you admire from who you are, but it’s certainly doable. The key is knowing how to interpret the feedback you get from others.

Translating The Conversation

It’s entirely possible to say one thing dozens, and sometimes even hundreds of different ways. Typography is the best way to illustrate this point. A poster that doesn’t hold back with the chunky slab serifs is going to have a completely different emotional impact than one that uses a delicate, understated script – even if the message is exactly the same.

The design language you use will be different depending on who it is you’re trying to reach. I say language quite deliberately, because I compare what we do for our clients as designers to what an interpreter does for two people who speak different languages. Interpreters create commonality and facilitate conversation between two opposite forces, much the same way that a designer facilitates a communication between their client and their client’s audience. You take what your client has to say and tell it to their audience in a way that’s clear for both parties to understand.

Communicator

When you develop your own personal design voice, you are effectively alienating those people who don’t care for your style, just like a baby’s brain closes itself off to all of the potential sounds a human being can make in favor of the particular set it learns from its parents. When you’re born, you can effectively speak every language. But the more you learn and listen, the more certain words and sounds take precedence over the others.

By the time you can talk, you’re communicating in whatever your first language is, excluding all the others you could have learned instead. It’s impossible to try to learn every single language in the world, so why should you try to earn the approval of every single person with your design work? The best way you can use your own voice is to reach people who want to hear your specific message. The world in general wants you to be bland and inoffensive, easy to understand and digest. But your niche audience wants the compelling visual narrative that only you can give them.

When Inspiration Becomes Copying

Without a doubt, the best way you can expand your own design fluency is by learning from others. Like I said, there’s a ton of exciting, creative work out there that inspires us all, and the argument has certainly been made many times that there’s “nothing new under the sun” in terms of ideas. But there comes a time when design inspiration can go too far and veer off into plain old copyright infringement.

In 2010, copyright representatives for Dutch author Dick Bruna successfully sued Japanese heavyweight Sanrio for copyright infringement over Sanrio’s white bunny character, Cathy. Bruna, who created the white bunny character Miffy in 1955, said explicitely that Cathy was “a copy” of his famous children’s book bunny, who was very popular in Japan several decades before Sanrio began licensing their character designs. But Sanrio’s Cathy was pretty obviously done in Sanrio’s own style – the bunny character looks very much like their iconic Hello Kitty.

miffy

Was Sanrio merely designing in their signature style, or was it in fact a deliberate infringement on Bruna’s copyright? There are plenty of incidences of simultaneous design, when more than one person comes up with the exact same or a series of very similar ideas at around the same time. But as a general rule, unless you can prove in court that you were the original holder of a copyright, it’s not really a good idea to fall victim to that kind of unknowing.

Doing your research, involving yourself in the creative community, and making sure you know who your competition is are vital steps to maintaining your reputation as an original designer with an original voice. As Albert Einstein said, “the secret to creativity is knowing how to hide your sources.” Being inspired means not being ignorant of what your peers are doing.

In Conclusion

Remember, your main goal as a freelancer is getting repeat customers who respond well to your unique voice. If you’re telling your own stories and drawing from your own personal experiences, it’s virtually impossible to create designs that look just like everyone else’s. You can’t help but be original when you’re being authentic.

What Do You Think?

How do you apply your unique voice to your design work? Do you ever have to remind yourself to trust your instincts sometimes?

7 Useful Prototyping Tools for Websites and Mobile Apps

Let’s start by clearing up some common misconceptions. Some designers, and even their clients, have a tendency to use wireframe, mockup, and prototype, interchangeably. It’s true that all three represent a conceptual or early stage representation of a design. Yet, the three are not one and the same thing, and they serve somewhat different purposes.

  • A wireframe is a low-fidelity depiction of a design. It generally lacks detail, it is static, and while it may depict shape, it does not have substance.
  • A mockup can provide a great deal of information about a design. It is generally a medium to high-fidelity depiction; but like a wireframe, it is also static.
  • A prototype is a dynamic, mid-to-high fidelity representation of a design. It can be used to highlight certain features of a design. Some prototypes can be virtually indistinguishable, in terms of look and feel, from the proposed end product.

But, they do have several things in common. They can be used to show the current or proposed state of a design. And they are generally used for requesting feedback.

Prototypes don’t have to be attractive, but they must work well enough to show key design principles or features.

A typical prototype workflow:

  • Sketch out how a user might navigate (the page flows)
  • Build low-fidelity, digital versions of each page; run usability tests, and note lessons learned.
  • Add detail until you have a high-fidelity model that can emulate the look and feel of the proposed final product.

InVision

InVision

Forbes recommends it, thousands of large companies and major enterprises use it — including most of the leading Fortune 100 companies — and the project managers who use it are quick to tell you that it simplifies virtually every aspect of their design workflow and team collaboration activities.

InVision is a thoroughly effective designer or project manager tool, since it allows collaboration to be done in-browser, in real time.

With InVision, you can create a pixel-perfect prototype, you can achieve faster design turnaround, and you can take advantage of unlimited, free testing of the prototype you create. Over 2 million designers already use InVision, and don’t have to worry about coding while doing so.

You can try out this excellent tool for free. Signing up for a free trial is easy. There are no setup fees involved, and you’re not obligated to make a purchase — although it’s likely you’ll decide to. First things first though: Click on the website link to find out more about how this top-tier prototyping tool could be put to work for you.

Pidoco

Pidoco

Pidoco’s main strength lies in creating fully interactive UX prototypes. It should be mentioned however, that if you happen to have a situation calling for a wireframe, Pidoco is an excellent wireframing tool as well.

Pidoco’s prototypes enable you to simulate the look and feel of a real website or app to the point that you can test and demonstrate the entire range of clicks, taps, swipes, device motions, and keyboard commands. Quite simply, this tool is ideal for web designers and mobile app designers.

Pidoco-generated prototypes can be tested in real time on iOS and Android devices, as well as on web browsers. The templates that come with this tool make prototype creation super-fast and ridiculously easy. You don’t need to install anything, since Pidoco resides in a cloud. Log in, and you’re there. Pidoco is easy to learn and does not require any coding.

Proto.io

Proto.io

Proto.io provides a mobile and web prototyping platform that is ideal for app designers who are building and testing fully interactive mobile app prototypes that have the look and feel of the target product. Proto.io is easy to use. I

t runs in most browsers, its dashboard enables you to manage your projects, its editor enables you to build them, and the player is used to view and interact with the prototype and to receive feedback.

Your prototypes can be tested directly on actual mobile devices, and free apps are provided that allow full screen and offline mode operation on iOS and Android devices.

Since large companies such as PayPal, Disney, and Airbnb rely on Proto.io, there are no risks involved in making this prototyping platform your tool of choice; plus, you’ll benefit by being able to speed up your design efforts and get a better product to the market in a shorter time.

Webflow

Webflow

Prototype, design, develop. You can do one thing at a time, or all of them at once with Webflow. Project management aids are there too. Everything you create on Webflow is powered by production-ready HTML, CSS, and JavaScript, making the transition from prototype to deliverable a relatively seamless step.

Your website design automatically is adjusted for smaller devices, you can test your work on any device, and with Webflow you can bring team members into your design efforts. Not too many prototyping tools offers all of these extras.

PowerMockup

PowerMockup

PowerPoint users take note. Now might be a good time to download a free trial version of PowerMockup, and start building wireframes and mockups for websites or for mobile or desktop applications.

PowerMockup isn’t simply a tool that PowerPoint devotees can use to their advantage, PowerMockup was created as an add-on to PowerPoint.

It features a library of shapes, icons, and design elements that can be dropped onto PowerPoint slides to create wireframes or mockups. Having done that, simply use PowerPoint’s slideshow and animation features to make your prototype interactive.

Lucidchart

Lucidchart

Lucidchart is an online diagramming and wireframing application featuring a shape library containing a full range of icons and device types for websites and iOS or Android devices.

The Lucidchart package also includes a pre-built library of modern design elements, drag and drop technology, and an interactive demonstration capability, combined with layer technology that allows you do see how your design will behave in the real world.

Collaboration is easy as well, and Lucidchart is cloud based and fully integrated with Google Apps, Google Drive, Jive, and other useful applications; perfect, if you want to migrate design information to the cloud.

HotGloo

HotGloo

One of the challenges designers face is creating a good experience. With HotGloo, you can create web, mobile, or even wearable prototypes from the comfort of your own browser. A 2000+ UI elements library is at your disposal, along with a multiple licensed account that permits easy collaboration between you and your coworkers. Create, test and iterate to achieve a good experience for your clients.

Try HotGloo for free today! Full documentation, tutorial videos, and live webinars are easily accessed to help you on your way.

Summing Up

You should have little trouble finding a prototyping tool that meets your needs here. Whether this is the first time you’ve been in the market for such a tool, or you’re in need of something better. Hopefully, our opening discussion has cleared up any confusion you may have experienced on the differences between wireframes, mockups, and prototypes. Several of these tools allow you to create any combination of these design aids.

If you are in need of a tool to assist your collaboration or project management activities, there’s something here for you as well. All these products are among the best of their kind on the marketplace.

Teach and Become the Best Designer You Can Be

It’s been said many times that, if you want to learn more, you should teach. Taking on proteges, apprentices, students – whatever you want to call them – who will appreciate and absorb your knowledge not only boosts your ego, it can also help you learn and grow as a designer.

And no, you don’t have to become an actual teacher at a school or university. Even something as simple as writing a blog post or a tutorial can be immensely informative for you as well as your readers. But what, specifically, does teaching help you learn from a design perspective?

We’re going to explore some of the key ways that teaching will help you become the best designer you can be. If that’s not incentive to get out there and impart your wisdom, I don’t know what is.

You Learn To See Through A Client’s Eyes

It’s true. By taking on a student, you learn to better understand what a client sees and understands when they are presented with your work. Students are inexperienced; maybe not as inexperienced with design as the average client, but still pretty new to the industry.

book and background Graduation
Image Source; Book and Background Graduation via Shutterstock.

What they see when they look at your work is almost the equivalent to that of a client – someone unburdened by the standards and expectations of the design industry, who is looking with fresh eyes. Through their feedback, you can better refine your designer’s eye to continually benefit from a fresh perspective.

You Communicate Your Ideas Better

Teaching helps you not only see your own work through a new perspective, it helps you gain clarity in the way you explain your ideas. You learn not only what people are struggling with through their feedback, you also learn how to effectively communicate information so that people will understand and be able to replicate your results. By breaking down how to achieve a certain effect, you test different delivery methods, seeing what works with your audience and what doesn’t.

Content Creativity Layout

People who’ve been teaching for awhile tend to have a certain confidence about them when explaining and presenting ideas to others. After you do it long enough, you learn what works and what doesn’t when it comes to communicating. Like a veteran actor who’s mastered the art of ad libbing, you can test and adjust your delivery, the exact words you choose, your tone of voice, and many other details that help you cultivate an enthusiastic and dynamic audience who completely understands what you’re saying.

Your Expert Status Means More Clients

There’s a horribly inaccurate saying that you’ve probably heard when it comes to teaching, which is: those who can, do; those who can’t, teach. I don’t agree with this statement at all, and neither did the dozens of highly successful industry leaders who taught at my design school. These teachers had no problem “doing” – getting clients and maintaining multiple income streams better than many online marketers.

When you teach, you can leverage your own “expert” status to get more clients. Clients are much more comfortable with designers who have instructed and inspired others. Why? Because it immediately establishes credibility. No one would hire a teacher who didn’t know what they were doing, right? (I’m choosing to look at the bright side here.)

You Make Better Design Decisions

When you work with students, you need to make snap judgments about the quality of their designs on a constant basis. You have to, if you’re going to be giving them sound advice as to how they should best proceed with their projects. As a result, you develop your eye for when any design, not just your own, needs adjustment, and how best to do it.

This type of design training happens quicker than even working with clients on a regular basis. Why? Clients simply give you their approval or non-approval of the project, which you then incorporate into making the work better suited to their needs.

With a student, you’re dealing with someone who requires a thorough, working explanation of why you’re making a change to the design. This is something you yourself will have to ponder as you come up with your reason. You repeatedly see what works and what doesn’t, and you’re far less likely to make those types of mistakes in your own work.

You Become An Industry Leader

Lastly, the absolute best thing about teaching is that you get to give back. Through becoming an authority on design matters, you help others who are less knowledgable than you are and help to build your industry with new talent. This is how the industry grows and remains strong; the constant passing down of wisdom and experience to younger generations.

Content Creativity Layout

Helping to build up the design industry can teach you a lot about leadership, not only on a small scale with your students, but also in making major decisions that can affect the entire industry. An opinion you have, as an industry leader, can foster the birth of a massive trend. A word you say against a particular practice can have huge, unforeseen consequences.

There is a lot of responsibility involved in this type of leadership, because so many people listen to you. Should you be so fortunate to become a leader in the industry, remember to use your power wisely and help to steer young designers toward a bright future.

35 Free Time-Saving Web Apps for Web Designers from 2016

All released this year, these free web-based apps let you do so much without ever needing to install anything. All you need to do is bookmark them. They either offer a time-saving solution to many of the tasks web designers need to accomplish every day or are something you need to save for a rainy day.

Some of the tools will help you manage the performance budget of a project, organize your code snippets, create professional design briefs, or even generate detailed stats about your CSS stylesheets.

I’ve categorized all of the apps and tools into: Performance Tools, Checklists, CSS Tools, Responsive Tools, Typography Tools, Color Tools, Image Tools & Editors, Handy Directories, and finally a bunch of uncategorizable Miscellaneous Tools.

Performance Tools

PerfTool is a handy tool that collects detailed info about your site and displays it on an easy-to-read dashboard.
PerfTool

Performance Budget Builder Tool is a small tool created by Brad Frost for planning and making your own web project performance budget.
Performance Budget Builder Tool

Hookbin is a free web service that allows you to collect, parse and view HTTP requests.
Hookbin web service collect parse view HTTP requests

Online Checklists, Guides & References

Security Guide for Developers is a practical checklist for preventing security issues.
Security Guide Developers checklist preventing security issues

Built with Vue.js and persistant storage, Web Designer’s Checklist App is a simple tool for managing all of the tasks of aweb project.
Web Designers Checklist App designer news

Web-Based CSS Tools

Based on the CSS flexbox specification, Flex Layout Attribute is a useful HTML layout helper.
Flex Layout Attribute HTML layout helper based on CSS flexbox specification

CSS Stats is a web-based application that visualizes various stats about your stylesheets.
CSS Stats web-based application that visualizes various stats about your stylesheets

img2css is a super-simple tool for converting any image to pure CSS.
img2css super-simple tool converting image pure CSS

CSS vs. JS is a web-based comparison tool for selecting elements using either CSS or JavaScript.
CSS vs JS Select Elements

Pixel Art to CSS is a web-based, React.js powered, pixel art drawing tool.
Pixel Art CSS ReactJS-powered drawing web-based application

cssFilters.co is a small playground for creating custom CSS photo filters.
cssFilters.co custom CSS photo filters

You might also like to take a look at the Top 50 CSS Tools from 2015.

Responsive Web Design Tools

Resizer is a web-based viewer for testing how digital products respond to Material Design on all devices.
Resizer viewer to test how digital products respond to Material Design on all devices

embedresponsively.com is a web-based app that helps build responsive embed codes for third-party media.
embedresponsively build responsive embed codes third-party media

Responsive Image Breakpoints Generator is a handy tool from Cloudinary for generating the optimal responsive image dimensions.
Responsive Image Breakpoints Generator

Typography Tools

Type Nugget is an online typesetting tool for generating beautiful, bulletproof CSS in the browser.

Megatype is a small tool for executing typographic structure with ease.
Megatype Execute typographic structure with ease

Type Terms is an online tool for learning the basics of typographic terminology.
Type Terms learning basics typographic terminology

glyphdiff is a simple tool for comparing the differences between two fonts.
glyphdiff simple tool for comparing the differences of two fonts

Color Tools

ColorDrop is a curated collection of amazing color combinations.
ColorDrop curated collection of amazing color combinations

Palettable is a web-based app for generating beautiful color palettes.
Palettable web-based app generating beautiful color palettes

Impalette is a web-based tool that scans your images for dominant pantone colors.
Impalette web-based tool that scans your images for dominant pantone colors

Material Palette is a Material Design color palette generator.
Material Palette Material Design color palette generator

Simple Flat Colour Selector.
Simple Flat Colour Selector

Brands in Colours is a simple color reference for your projects using SASS variables.
Brands in Colours simple color reference SASS

Image Tools & Editors

Visual Center is a tool that will find the visual center of your images.
Visual Center tool find visual center images

Photopea Photo Editor is a web-based photo editor for editing Photoshop files quickly and easily.
Photopea Photo Editor web-based photoshop psd

Handy Directories for Web Designers

Sketchpacks – Sketch.app plugin registry and directory.
Sketchpacks new Sketch app plugin registry directory

PostCSS.parts – A searchable catalog of PostCSS plugins.
PostCSS.parts searchable catalog of PostCSS plugins

UIDB.io – A collection of specific UI and design examples.
UIDB.io collection of specific UI and design examples from around the web

Good Copy – Examples of email copy from some of the biggest businesses in the world.
Good Copy Email Copy Examples From Great Companies

Miscellaneous Tools

Codepad is a handy tool for organizing and sharing code snippets.

Sharingbuttons.io is small web-based tool for quickly generating social sharing buttons with a tiny performance footprint.
small web-based tool for quickly generating social sharing buttons

Grid.Guide is a small tool to help create pixel perfect grids within your designs.
grid guide tool to help you create pixel perfect grids within your designs

CreateBrief is a tiny and super-easy to use web-based tool for creating basic design briefs.
CreateBrief web-based tool for creating basic design briefs

…and finally…

Web Design in 4 Minutes.
Web Design in 4 Minutes