Designing a site specifically around visuals could harm its legibility. If you’re using a font that looks good but no one can read, you’re throwing the baby out with the bathwater. When we say a website should be easy to read, we’re talking about three different meanings:
Older (but not old!) people tend to think of web design in terms of desktop screens, but the truth is nowadays people do most of their browsing on mobile devices. That’s why you need to make sure your mobile site is in peak condition. Not just for your user’s sake, but for Google’s as well—the Google algorithm factors in mobile responsiveness to their search rankings. “Mobile responsiveness” refers to how well your site appears on small-screen devices. If your website is cut off on mobile devices or the images appear in the wrong places, your visitors won’t have a pleasant experience using your website. In addition to smaller screens, mobile devices also have a whole new set of design guidelines, including controls like “swipes,” so don’t assume your desktop version will translate seamlessly.
These days it’s really important to consider a mobile first approach. People tend to use mobile layouts differently than desktop versions, so how the website will perform on mobile is integral to an effective design. Focus on minimal, clean design and eliminate clutter to make it easier for users to focus on the content.
Your mobile version should be a top consideration, right from the start. But that doesn’t mean you can neglect your desktop version. Your website needs to look good no matter what device people use to look at it. Take a look at the web design above to see how Top Level designer Ink’d created variations of a design and—with some slight tweaking—makes it look good on both large and small screens. Do:
Finally, we move on to functionality: what your site can do. The conversation about functionality should always start with navigation, the backbone of any website. Everyone has their own methods for finding their way around a website. A good web design caters its navigation to its target users so that it feels intuitive—the less users have to think about it, the better. But that’s no easy feat. It starts with how the entire site is organized: what gets its own page, what gets shunted to a subpage, what is and is not featured in the main menu. Each of these questions need to be answered before the actual web design really takes off. From there, you have to design your navigation in a way that’s easy for visitors to use, just like in the example above. Do:
While the words you or your copywriter choose are extremely influential, you can also enhance their effectiveness by giving them the right look. Typography encompasses all the visuals of text, particularly fonts, but also other elements like size, text color, style (italics, bold, etc.) and the spacing between letters, words and lines. All of these impact the visual hierarchy and how your brand is perceived.
Typography can be visually appealing, but if you use distracting fonts, your reader won’t be able to focus on what you’re trying to say and can become irritated with your website. Combining bold typography with a minimalist twist is your winning ticket.
Like colors and photography, typography comes in a diverse array of styles, so pick the one that complements your brand most. To add a little sophistication to the Her Habesha web design above, Top Level designer Studio Ubique uses a striking yet classy typography for the titles. But notice how the typography changes to subtle, modern sans-serifs for the product titles below the pictures to achieve a balance. Do:
Although optional, if you do choose to use real-life photography in your web design, make sure you do it right. Effective, meaningful photography can further your business goals, but poor-quality photos hold you back.
With photography there has to be a connection between branding and concept. Photography can create contrast, attract attention or even draw your eyes to the next section of the page.
Using photography in web design follows many of the same guidelines for good photography in general. A stunning photo hung in an art gallery can be just as stunning on a website, but the mood, style and topics have to coincide. Just look at the tantalizing photograph in Top Level designer JPSDesign’s web design above. Those blueberries would look delicious anywhere, but it’s particularly effective on a grocer’s website. Do:
Now that you’re familiar with the concepts of good composition, let’s talk about the specifics of that composition. We’ll start with color, a powerful tool for any designer. For one thing, every color has a different emotional connotation. If your brand identity is passionate and energetic, an exhilarating red would fit better than a tranquil blue. Aside from choosing the best colors to represent your brand, you also need to use them well, like contrasting colors off each other to establish visual hierarchy.
To use color effectively in web design you have to understand how colors are formed and how they relate to each other. Harmony and balance are the keys to success.
Just look at how Top Level designer Desinly uses orange in the web design for Oil Sands Masterclass above. First, orange is a smart choice because it’s often associated with the heavy operation equipment the company deals with. On top of that, they pair the orange beautifully with a black background to make it stand out more. They also use the same color consistently as a highlight for keywords and buttons, plus they even integrate it into the background photography. Do:
If using a technical term like “negative space” didn’t phase you, what do you think of “visual hierarchy”? It refers to using different visual elements like size or placement to influence which elements your user sees first, second or last. Featuring a big, bold title at the top of the webpage and tiny legal information at the bottom is a good example of using visual hierarchy to prioritize certain elements over others. Web design isn’t just about what you add to your website, but how you add it. Take CTA buttons; it’s not enough that they’re simply there; skilled designers place them deliberately and give them bold colors to stand out and suggestive text to encourage clicks. Elements like size, color, placement and negative space can all increase engagement—or decrease it. The Shearline homepage example above prioritizes three elements: the title, the image of the product and the call to action. Everything else—the navigation menu, the logo, the explanatory text—all seem secondary. This was a conscious choice from the designer, enacted through a smart use of size, color and placement. Review this chart from Orbit Media Studios to learn how to attract or repel attention. It’s an oversimplification of a complex topic, but it works well for understanding the bare basics. Do:
How are you going to fill all that space you created after clearing out the clutter? Might we suggest filling it with nothing? Negative space (a.k.a. white space) is the technical term in visual arts for areas in an image that do not attract attention. Typically, these are empty or blank, like a cloudless sky or a monochrome wall. Although boring on its own, when used artistically, negative space can complement and enhance the main subject, improve legibility and make the image easier to “take in.”
My mantra is: simple is always better. It draws attention to what’s important for the user almost instantly. Also, simple is attractive.
In the Streamflow example by Top Level designer Hitron, the tagline and CTA take the main focus, not because they’re flashy or garish, but because of all the negative space around them. This landing screen makes it easier for the user to understand what the company does and where on the site to go next. They include gorgeous imagery of the clouds, too, but in a beautiful, minimalistic way—a clever composition with plenty of strategic negative space. Do:
First, let’s address one of the most common beginner mistakes in web design: a cluttered screen. Most people have a list of everything they want on their website, and without knowing any better, they just throw it all on screen—and on the same page. Basically, every element you add to your web design waters down all the others. If you include too many distracting elements, your user doesn’t know where to look and you lose a coherent experience. By contrast, if you only include the necessary elements, those elements are more potent since they don’t have to share center stage.
More white space means less clutter and that’s what really matters in a minimalist, clean web design.
See how the home screen in the Intenz example by Top Level designer Slaviana features nothing but the essentials: navigation menu, logo, tagline, main call-to-action (CTA) and some sparse imagery for atmosphere and to show off the product. They feature other information of course, but present it later so their screens are never too crowded. It’s the visual equivalent of pacing. For a web design to be effective, it needs to be streamlined—there must be a clear path or paths for the user to follow. There are many different ways to achieve this (some explained below), but the first step is always to create space for high-priority elements by removing low-priority ones. Do:
If you want to keep a check on your website it is recommended to go for this plugin for your web design. It will allow you to connect with Google Analytics directly from where you can see how users visit your website and use it. It will keep you updated about your website activity and you can also add new features according to the requirement of your users.