A Guide for Designing a Focused Website

How do we keep our designs simple, to the point, and focused on our goals?

When creating web designs we have to first understand human nature. How do we consume online information and how is it consumed with the least resistance?

We should understand the answers to these questions before we start to implement our designs. This means that we need to truly understand what it is that we are trying to portray to our user in order to be able to design for him/her.

Note: This is not a full, all-inclusive guide. The goal of this guide is to give you a basic understanding on the importance of knowing why we do what we do. When and why does it work. How can we utilize design rules to our advantages rather than as a constraint.

Goals of this Guide

1. Understanding Design Principles.

2. Understanding our users.

3. Choosing of a goal.

4. Design based on understanding.

Once you learn to make use of these 4 goals when you are creating your user interfaces, you will see a significant change in how you design and you should see a reduction of friction from the users.

Design Principles

If you have been building websites or other user mediums, you for sure heard phrases such as:

• Make sure you have enough white-space
• Rounded corners vs Hard Corners
• Keep your design consistent
• Only implement what you really need.
• Do not use heavy gradients.

Yes, you have to know the rules, but if you don't understand why these rules are in place, then you will just implement them whenever... The better way is to understand why these rules are there so we know how to properly apply them.

To give an example: White-space is good, right? Not always, white-space is great and most of the time very important but too much white-space and you lose your focus and groupings.

So let's take these rules one by one:

White-space

• allows you to focus on the important elements, and more importantly, to actually see what matters.
• lets us group items (meaning they have an association) or make clear that items do not belong together and remove the association.

If you are interested in more detail about this, look up the Gestalt laws of grouping.

Round Corners vs Hard Corners

• Round elements have a more comfortable sitting. They do not stand out as much. If you want to be gentle on the user, that is where rounded corners are great. We want to entice the user to click that button. Hard corners, on the other hand, send a strong message. Look at me, I stick out. This can even translate into round being more friendly. While each has their use case, understanding that sharp objects are often not a pleasant experience explains why hard corners are not always the best, although they do have the ability to put things into perspective, which is great for mobile devices where users just want to get to the point.

• If you look around you, in the real world many elements are rounded, our brains are programmed to stay away from sharp edges.

• Studies indicate that it takes less cognitive effort to see rounded corners than hard square ones.
  The reason for this is that the images are recognized in 3 steps. 1) Shapes, 2) Colors and 3) Image Recognition. When you have round corners, that is detected in the first step. For square corners, it needs to get to step 3 to for it to be recognized.

Design Consistency

• When you see an image of a cat, your brain has to analyze the picture, take tons of visual pointers and use your brain's mappings to recognize what the image is based on your past visual experiences and associations. When our designs are consistent, we make it easier for users to recognize elements, know where they are, and more importantly, they will feel more at home since it is "recognized" by their brains.
• While this is not of direct benefit for your users, in the long haul, when you maintain a website, it is easier to maintain it when elements are consistent. How does it then benefit your users? You will do a better job at keeping your site up to date and usable.
• Consistent layouts allow your user to know where to look for elements such as your menu, footer, social sharing and more.

Implementing the basics

• Your website has a goal, and I am sure its goal is not to have as many options and features available. Your goal is to provide either information or a specific business goal to your user. When your users get overwhelmed, they will often quickly leave. Besides that, more functionality means more to maintain. More potential issues. More baggage.

Here's what you really need in order to give the user what he/she came for:

• Cleaner coding, when you work from a lean feature standpoint, you first build the basic, build it well and only then, based on user feedback, do you slowly start expanding your options. This ensures that you don't develop a big and heavy application full with functionality that the user doesn't need and use.

And face it, it is easier to throw away a failed project that was built as a basic implementation than something that you built with any feature you could think of.

Gradients

• Look around, have you ever seen solid colors around you? And I mean really solid. If you look carefully, you will see that everything, from your walls to your keyboard has a slight gradient. This is because of the way light falls on each object. When you have a source of light, it is not going to shine the exact same way on each part of the surface.
  We are so used to seeing slight and barely visible gradients, they make it easier on the eye and it is what we live with every day. Making our designs follow this pattern again contributes to this feeling of ease.

Implementation

The next step is to decide, as we build our designs and interfaces, what our goals are, so that we can our understanding of the design rules to better archive our goal. Our user interfaces are important, but ultimately they are our tool, not our goal. Our goal(s) should be very focused with our design and implementation built around them.

Once you have goals, understand what your users need, and understand some of the core design principles, you can start your design, confident that you will be designing the right way.

Note

While we only touched on some of the basic the rules and by no means in a comprehensive way, you should now have a new perspective of how to look at design implementation. There are many more rules and I encourage you to learn more about this.