Web design tips

Create More Space

Too much clutter can distract readers and make a site appear overly complicated. That’s one reason why phasing out sidebars is recommended. However, you should also try creating more space in general rather than trying to include as many elements as you can on a page. Again, it helps a reader focus on what’s important while giving you the opportunity to build better-looking designs. This space is typically referred to as “whitespace” or “negative space,”. However, this space doesn’t always need to be white, especially if you’re building a website that uses large images on its homepage and headers. Minimize the amount of clutter in your designs and include more space around and between elements to help guide your users through your site. Whitespace can make it clear where a reader’s attention should be focused.

Use Larger Font Sizes

Big typography isn’t a new trend or aspect of design, but it’s still a great practice to follow in 2016. This is because it has the power to grab the reader’s attention and places the focus on your content. Readability on smaller screens, such as mobile devices, has played a huge role in this trend’s rising popularity, but it also fits in nicely with the ever-popular minimalist and flat design trends. One web design tip for 2016 is to try incorporating larger font sizes in your designs, such as a minimum font size of 18 points for body text, where it makes sense. This includes any text you place in header images or even the text on a homepage when using a large, hero image. Just make sure you focus on choosing a web-friendly typeface that scales well, rather than agonizing about which size to choose.

Start Your Designs Offscreen

Do you create code and designs on the screen at a rapid rate, without a care of how things will turn out as you know you’ll edit and clean things up later on? If so, why not try a new approach in 2016. Instead of jumping right in and figuring things out as you go, why not turn to the trusty pencil and paper or use a whiteboard to plan an overall site layout offscreen first. Use this approach to get an idea of where you want specific elements to go, much like how an architect uses floor plans to plot out where windows, doors, and rooms should go. If adopting a pen and paper doesn’t appeal, there are plenty of great wireframing and prototyping web design tools out there that can help you quickly get your ideas out of your head, before you get started in your development environment.

Phase Out Sidebars

Sidebars create clutter. They were meant to improve the usability of a site by displaying additional navigational elements, such as links to recent posts and popular content. Over time, it’s fair to say they’ve been hijacked by savvy marketers looking for a way to display email optin forms and other promotional content that doesn’t always offer much to the user experience. While in theory sidebars containing links and other useful content should enhance the user experience, in reality, very few site visitors actually use them, at least according to heatmap tests conducted by ConversionXL. Therefore, compromising your site’s design in favor of a sidebar for marketing purposes may not deliver the results you desire. Try phasing sidebars out in your designs, especially if a site doesn’t really need one. Make your content the most important element on a page by using designs that force readers to focus on it. If the thought of abandoning sidebars altogether sounds a bit extreme, look for a theme that gives you the option of publishing full-width content, alongside more traditional layouts that feature an accompanying sidebar. You can do a lot with the humble WordPress sidebar and one web design tip for 2016 is to get smarter with the way you do or don’t use them.

Use Style Guides

Style guides are popular in the publishing world. They can come in the form of large books or documents that media publications follow to maintain uniform styles throughout their content. This can include everything from how states and countries are labeled to how numbers are written. Web designers can create their own style guides to ensure the sites they build have uniform styles throughout. This is especially useful for designers who collaborate with other freelancers. A well-written style guide can help keep a disparate team on the same page. The style guide Google produced for its own Material Design is a great example of a thorough, well-written style guide. If you’re looking for a more generic style guide or set of rules to apply to your work, be sure to check out our guide to the essential typography books for 2016.

Use padding control to make your interface consistent.

Use 4px between:

  • Labels and inputs.
  • Texts. Use 8px or 12px between:
  • Vertically aligned groups of buttons, icons, and other items.
  • Horizontally aligned groups of buttons, icons, texts, and other medium components. Use 16px between:
  • Horizontally aligned groups of buttons, icons, texts, and other medium components.
  • Cards (a default padding for the working space is 16px).
  • Headings. Use 20px between:
  • Buttons.
  • Headings. Use 24px between:
  • Large components.
  • Large headings.
  • Spaces with different semantic meaning. Let’s look at the differences between the cases when we use padding control, and when we don't. Do. We’ve created a simple form using a card component. As we mentioned in our previous articles, the best way to place content on a page is to use a card for it. We've placed a heading (H5) in the card’s header, added the text and the input components. We've also added two buttons in the footer, enabled the padding control, and added some paddings between the components to make our form more visually appealing. Don't. We've decided not to use padding control at all. In the result, our simple form looks very compressed.

Try to format your text according to its type.

For example, labels and captions should be formatted as inputs, headings - as headings, and so on. Also, pay attention that labels and captions are usually not as hard as the main text is, so it's better to use the Hint color for them. In all the other cases, use the Basic color unless you need to highlight the semantic meaning of the text.

Do not ignore Headers and Footers.

Use Headers when you work with headers, and Footers when you work with buttons in the form and components in the body. Do. We've selected horizontal direction, put “Add client” into the header, and the buttons – into the footer. Don't. We have not placed the content in the header and the footer deliberately. Also, our main space is vertically aligned this time. Due to this, our form looks messy.

Do not put a card into another card.

It’s better to use the “Space” element and its direction to achieve a better arrangement. Do. There, we've added a simple login form (a UI Bakery widget), plus one more space with a “Forgot password?” link inside. Don't. We've added a login form, and one more card inside it. As you can see, the login form is based on a separate card. So, if we include one card into another, the included card will be displayed like an input. It is confusing, especially if we put a “Forgot password?” link into the card inside the widget. Now, let's remove the nested card and add one more space. After that, place a “Forgot password?” link. Finally, we get a nice-looking login form without any confusing UI components.

Define direction settings for each space firstly.

For that, decide how you want to arrange all your components in the current space, vertically or horizontally. If a card is complex and has more than two spaces inside, add them, customize, and fill them in one by one.