Ever gone onto a website and thought, “Hmm, something is off.”?
Maybe the category you’re looking for isn’t where you thought it might be, so you’re having a hard time finding exactly what you’re looking for?
This intuition proves you don’t need to be an expert to know what good design is. Chances are, you already know.
But what about great design? The imperceptible difference between good and great design is why Amazon is one of the most easy-to-use websites out there. But can you describe why it’s so user-friendly? It’s not just good, it’s fantastic — and that’s not a coincidence.
Why Design Matters
Attention is precious and limited. The average customer or user gives a website 8 seconds of attention, or less. Great design captures as much attention as possible and eliminates the possibility of a quick exit. So what makes up great design?
Here’s a non-exhaustive breakdown on:
• Invisible details
• Typography
• Visual Hierarchy
1. Invisible Details
Great design is often great because of behind-the-scenes, invisible work. Two examples of these are alignment and consistency.
What is Alignment?
Alignment is what makes your page visually appealing and easy to read. It forms relationships between different parts of your design. This ultimately creates a cohesive user experience.
What needs alignment?
• Plain text
• Images within text
• Videos
What is Consistency?
Consistency makes navigating your website and apps easy. It allows your user to transfer knowledge of one platform to another. This builds familiarity and trust, and evokes a positive emotional response. Think about how shifting from Amazon’s website to their app is a no-brainer.
What elements need consistency?
• Placement
• Styling
• Type choices
• Layout
What about inconsistency?
When done well, inconsistency draws the user’s eye to a specific design element and increases usability. In layman’s terms, it makes what needs to be obvious, obvious. Think “get in touch” or “contact us now” buttons that need to stand out.
2. Typography
Typography is arranging letters and text in a way that is clear, legible, and pleasing to the eye. There are 8 essential typographic design elements.
Fonts and type faces
Fonts are the weight, width, and style of a typeface. A typeface is a design style of many characters of varying sizes and weights.
Contrast
Contrast helps you emphasize specific ideas or messages. It makes your text attention-grabbing and more impactful.
Consistency
Sticking to the same font style helps readability and keeps your interactive elements clean.
White space
Is the space around text or graphics. A really good use of this ensures the interface is uncluttered and the text is readable. This is usually in the forms of margins or areas with no text or graphics.
Alignment
Keep track of the standards in your location. If most people read from left to right in your area, align your text for their reading style.
Color
Elevates your interface when used correctly. A stand-out color emphasizes the text and conveys the tone of your message.
Hierarchy
Is vital in typography and visuals. It creates a clear distinction between the messages you want to be read first and the rest of the message.
The designer’s role in typography aligns the relationship between the look of the text and what it says. The right type choice will bring the text to life and impact how users digest the message. This impacts their decisions and how they perceive your brand.
3. Visual Hierarchy
Visual hierarchy is how information is laid out for the user. It arranges elements to show the order of importance, influence user perception, and guide them to desired actions.
It makes your website make sense.
Hierarchy is present in our everyday lives. Think about how you label your emails or organize your apps. You categorize them in a way that makes sense to you.
Your users need the same thing from you when they visit your website.
Do they know, intuitively, where to find information they are looking for? Here are a few things to keep in mind:
Rather than have your users recall where something is, make it easy for them to scan your website and find what they’re looking for. Use hierarchy to reinforce or break reading patterns to highlight a focal point, such as a call to action.
Understand your user’s priorities
Guide your users with ranked information. It doesn’t make sense to emphasize everything on one screen.
Remember the purpose of each page/screen
Use a customer journey map to keep sight of what is important. This can help you determine the order of importance per screen, and what you can leave out.
What’s next?
All of us intuitively know what great design is. The challenge is finding a designer who can tailor a design to our needs.
Here at Snappymob we understand our users and take great pride in usable, empathy-led design. If you’re on the fence about building an app or website, get in touch with us here. We’ll figure it out together.