What makes a web design proposal great

Top 10 Web Design Tips for the Perfect Website

Web design is a complicated design discipline that can take a lifetime to master. And as if that weren't bad enough, it's an area that evolves every second as technology advances. For this reason, web design tips are essential to becoming a web design professional or creating your own website that has it all.

Web design is something that pretty much everyone at the executive level of a company has to deal with, but only design professionals really understand. If you want a great web design, you need to learn the basics so that you can communicate what you want. Even if you hire an expert to design your site, you still need some background information so you can tell a talented web designer from a mediocre one and explain what to do.

We know how hard it is for non-designers to understand this whole web design thing, so we've created this handy guide to walk you through the basics. Here are the ten best web design tips you need to know (plus some useful dos and don'ts), divided into three categories:Composition, aesthetics and functionality. Whether you hire a designer or do it yourself, pay attention to these ten fundamentals for your final web design.

content

composition
1. Tidy up
2. Use enough white space
3. Guide your user's gaze through visual hierarchy
aesthetics
4. Choose your colors carefully
5. Don't be stingy on photography
6. Optimize the typography to build your brand
Functionality
7. Optimize the navigation
8. Prefer mobile devices
9. Make it easy to read
10. Tell your designer what you want

composition

1. Clean up

First, let's talk about the most common beginner web design mistake: a messy screen. Most people have a list of all the things they want on their website and because they don't know any better, they just toss it all on the screen - and on the same page.

Basically, every element you add to your web design dilutes all of the others. If you have too many distracting elements, your user will not know where to look and you will no longer provide a cohesive experience. In return, if you add only the necessary elements, those elements will be more effective as they do not have to divide attention.

More white space means less clutter and that's what really counts in a minimalist, clean web design.

Take a look at how the Intenz home screen by Top Level Designer Slaviana only shows what is necessary: ​​navigation menu, logo, slogan, call-to-action and a few sparse pictures for the atmosphere and to show the product. You have other information, of course, but present it later so that your pages are never too cluttered. It's the visual equivalent of pacing.

In order for a web design to be effective, it needs to be streamlined - there needs to be a clear path or paths for the user to follow. There are many different ways of doing this (some are explained below), but the first step is always to make room for high priority items by removing those with lower priority.

do:

  • Cut off the fat.Check your designs for the essentials. If an item doesn't add to the overall experience or improve it, remove it. If an element can survive on another side as well, move it there.
  • Limit pullout menus.Pullout menus (drop-downs, fold-outs, etc.) are a great way to reduce clutter. If possible, try to limit these hidden menus to seven items.

Don’t:

  • Use sidebars.New visitors are unlikely to use them. Also, if all of your options don't fit into your main navigation menu, you'll need to simplify your navigation structure anyway (see below).
  • Use slider.The movements and new images in a slider are distracting and weaken your control over what your user sees. It's better to show only your best pictures, all the time.

2. Use enough white space

How are you going to fill the whole room after you've cleaned up? May we suggest not filling it with anything?

In the visual arts, negative space (aka white space) is the technical term for areas in an image thatnoAttract attention. Usually these are empty or white, like a cloudless sky or a colorless wall. Although boring when it stands on its own, negative space can complement and enhance the main theme when used artistically, making it easier to read and making the image easier to "take in".

My mantra is: Simple is always better. It draws attention to what is important to the user almost immediately. Plus, it's just attractive.

At Streamflow from top level designer Hitron, the subtitles and CTA are the main focus. Not because they're flashy or intrusive, but because of the negative space around them. This landing screen makes it easier for the user to understand what the company is doing and where to go next on the page. You also have stunning images of clouds, but in a beautiful, minimalist way - a clever composition with loads of cleverly used negative space.

Do:

  • Enclose your most important elements with negative space. The more negative space there is around something, the more attention it receives.
  • Avoid boring layouts with secondary images.Other aesthetic elements such as color or typography (see below) can visually fill the gap if there is a lot of negative space.

Don’t:

  • Highlight the wrong item.Enclose only the most important elements with negative space. For example, if your goal is conversions, enclose your email address or CTA in negative space - not your logo or offer.
  • Use overloaded backgrounds.By definition, backgrounds should largely go unnoticed. If your background doesn't have enough negative space, it will detract from your main elements.

3. Guide your user's gaze through visual hierarchy

If a technical term like “negative space” doesn't throw you off track, what about “visual hierarchy”? It refers to using different visual elements like size or placement to influence which elements your user sees first, second or last. A big, bold title at the top of a website and tiny legal information at the end are a great example of using visual hierarchy to make certain items preferable to others.

Web design is not just about what you add on your page, it ishowyou add it. Take the CTA buttons: it's not enough that they're just there. Experienced designers place them consciously, giving them bold colors to stand out and suggestive text to encourage clicks. Elements like size, color, placement, and negative space can increase - or decrease - engagement.

The Shearline homepage above prefers three elements: the title, the product image, and the call-to-action. Everything else - the navigation menu, the logo, the explanatory text - seem secondary. This was a conscious decision by the designer, implemented through clever use of size, color, and placement.

Check out this chart from Orbit Media Studios to learn how to attract or deflect attention. It's a simplification of a complex topic, but works well for understanding bare-bones.

Do:

  • Design for clarity.Most users don't read every word on a page. You don't even see everything on one page. Design for this behavior by making your top priorities hard to ignore.
  • Try several alternatives.Since the visual hierarchy can get complicated, trying sometimes works best. Create a few different versions ("mockups") and show them to other people for other opinions.

Don’t:

  • Use competing elements.Visual hierarchy is about order: first this, then that. Graduate how much attention each of your essential elements receives so that your user's gaze follows a clear path.
  • Exaggerate.Making elements too big or too much color contrast can have the opposite effect. Only use as many attention-grabbing tactics as necessary - nothing more.

aesthetics

4. Choose your colors carefully

Now that you are familiar with the principles of good composition, let's talk about the specifics of this composition. We start with color, a powerful tool for any designer.

First of all, each color has a different emotional connotation. If your brand identity is passionate and energetic, a stimulating red would go better than a calm blue. In addition to choosing the right colors for your brand, you also need to apply them correctly, for example using colors that stand out from each other to create a visual hierarchy.

To use color effectively in web design, you need to understand how colors are formed and how they relate to each other. Harmony and balance are the keys to success.

Just take a look at how top level designer uses Desinly in web design for Oil Sands Masterclass Orange. First off, orange is a wise choice because it is often associated with the heavy machinery the company is dealing with. In addition, they combine the orange wonderfully with a black background, so that it stands out even more. You also use the same color throughout as a highlight for keywords and buttons and even include it in the background photo.

Do:

  • Create a color hierarchy. Use a single color for your main element (primary), highlights (secondary) and other, less important elements (background).
  • Stick to uniform motifs.Once you've established a color palette, stick with it. Keep your primary, secondary, and background colors consistent across your page.

Don’t:

  • Choose your personal favorite colors.The effects of color have a proven impact on marketing. Do some research on color theory and don't waste a crucial branding opportunity.
  • Inharmonious colors.Choosing colors logically is not enough; they must also work well together. Purple and red may both represent your brand well, but the effect is lost if they are not harmonious and result in an ugly design.

5. Don't be stingy on photography

While optional, if you choose to use real photography in your web design, do it right. Effective, meaningful photography can advance your business goal. Poor quality photos, on the other hand, can slow it down.

In photography, there has to be a connection between branding and concept. Photography can create contrast, grab attention, or even draw attention to the next section.

Using photography in a web design follows many of the same guidelines as good photography in general. A fantastic photo in an art gallery can be just as amazing on a website, but the mood, style and themes have to match. Check out the tantalizing photo in the web design by Top Level Designer JPSDesign above. These blueberries would look yummy anywhere, but they're especially potent on the grocer's side.

Do:

  • Use real people.Pictures of people tend to involve users more - especially pictures of your real team or real customers.
  • Create the right mood.Photography comes in an almost infinite number of styles, so use the ones that best reflect what your side is up to. If you want a happy website, use pictures of smiling people.

Don’t:

  • Use obvious stock photography.The key word here is “obvious”. Stock photos can be beneficial, but only if the user does not notice that they are stock photos.
  • Use low resolution.This is the age of high definition, so low resolution photos make brands look old and unsuccessful. Bonus tip: Compress the images to reduce the file size.

6. Optimize the typography to build your brand

Even if the words you or your copywriter choose are already extremely influential, you can make them even more effective by giving them the right look.

Typography includes all visual parts of text, especially the fonts, but also other elements such as size, text color, style (italic, bold etc.) and the spacing between letters, words and lines. All of these elements influence the visual hierarchy and how your brand is perceived.

Typography can be visually appealing, but if you use distracting fonts your reader will be unable to focus on what you want to say and be confused by your website. Strong typography in combination with a minimalist twist is your winning ticket.

Like colors and photography, typography comes in a wide variety of styles, so choose the one that best complements your brand. In order to add a little sophistication to the web design for Her Habesha, the top level designer studio Ubique uses an impressive yet elegant typography for the headings. Also, take a look at how the typography for the product titles below the images changes to subtle, modern sans-serif font to strike a balance.

Do:

  • Use web fonts.For all the variety of fonts, remember to stick to the verified "web-safe fonts" that can be viewed on most devices and computer screens. Here's how to spot them.
  • Study the different types.Do you know what a serif is? Typography is extremely nuanced, so study the 5 types of fonts so you understand what it is about.

Don’t:

  • Use too many flashy fonts.Flamboyant, attention-grabbing fonts can work well for titles or stand-alone words, but are too distracting if used excessively.
  • Use the same typography for everything.As in the Her Habesha example, typography works best when it's balanced. Use different sets for headers, sub-headers and body text - and stick to these sets throughout the entire page.

Functionality

7. Optimize the navigation

Finally we come 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 way of finding their way around a website. A good web design orients its navigation to its users so that it feels intuitive. The less users have to think about it, the better.

It's not an easy task. It starts with how the entire page is designed: what gets its own page, what is pushed onto a subpage and what is shown in the main menu and what is not. Each of these questions must be answered before the actual web design can really start.

Then you need to design your navigation so that visitors can easily use it, just like in the example above.

Do:

  • Find a balance for the amount of option. You want to give your users tons of options, but you don't want to overwhelm them. Organize your page categories to meet these conflicting goals.
  • Build navigation around real user data.When buying shoes online, some users search under “clothing” and others under “accessories”. Different user groups have different preferences; Build your navigation in such a way that, according to the data, it fits the way your customers think. You can do a few user tests if you're unsure.

Don’t:

  • Experiment with unusual formats.While experimenting in healthy doses can produce some new and great ideas, it is not recommended for something as important as navigation. So that your users don't have to think too much, stick to the practices that users already understand: navigation menu in the top header, logo with a link to the homepage, search bar with a magnifying glass symbol, etc.

8. Prefer mobile devices

Older (but notold!)People tend to think of desktop screens when it comes to web design, but the truth is that most of the time people are browsing on their mobile devices these days.Therefore, you need to make sure that your mobile site is in perfect working order. Not only for your users, but also for Google. The Google algorithm includes the mobile capability of a page in the search results.

"Mobile Capability" refers to how well your site appears on devices with small screens. If your website is clipped on mobile or the images appear in the wrong places, your visitors will not have a pleasant experience using your website. In addition to smaller screens, mobile devices also have entirely new design guidelines, including controls like “swipe,” so don't expect your desktop version to stream seamlessly.

Nowadays it is really important to take care of the mobile devices first. People tend to use mobile layouts differently than desktop versions. Hence, how the website works on a mobile device is important for effective design. Focus on minimalist, clean design and remove any clutter so users can focus more easily on the content.

Your mobile version should have top priority right from the start. That doesn't mean you can neglect your desktop version. Your website needs to look good no matter what device people are using to view it. Check out the web design above to see how top level designer Ink’d created different variations of a design and made it look good - with slight tweaks - on both large and small screens.

Do:

  • Design the mobile version first.When you design the mobile version, you only work with the essentials due to the limited space on the screen. It's easier to tackle the mobile version and then add items to the desktop version, rather than designing the desktop version and then removing items.
  • Prefer devices based on user data.“Mobile devices” is an umbrella term, but different phones and tablets have different screen sizes and technical features. Refer to user data to see which devices your visitors use the most and prioritize them in the design.

Don’t:

  • Pages that contain "m."These mobile pages, with "m." In their URL, were an initial solution to responsive design before designers knew that mobile pages would become more important than desktop pages. Today they load slower and break SEO. The best option is to design a single page that works well on all relevant devices.

9. Make it easy to read

Building a page around images can damage its readability. If you use a font that looks nice but no one can read, you are throwing out the baby with the bathwater.

When we say a website needs to be readable, we're talking about three different things:

  • Well written.The text is written to fit your business goals and in a tone that appeals to your target audience.
  • Aesthetic layout.The text is presented well, preferably with plenty of space and in digestible blocks.
  • Readable. The font and size are both conducive to reading without exerting yourself or reading over and over again.

While readability depends largely on typography, you also need to consider composition and structure, and how the text interacts with other elements - not to mention the quality of the writing.

Having a great web design won't matter if no one can read your text. Top level designer akorn.creative takes this to heart. In the web design above, see how the background photo fades to black to add more contrast to the text and make it more readable.

Do:

  • Pay attention to color pairings.How well the text color interacts with the background has a major impact on legibility, especially for people who have poor eyesight or reading. Try to stick with opposing pairs (light and dark tones) and if everything goes wrong, you can still fall back on classic black and white.
  • Test design with different readers.What is readable for you does not have to be readable for everyone. Test your designs with different readers to cover all areas.

Don’t:

  • Use italic or bold fonts for your body text. Fancy fonts work well for making headers and headings more visible, but if the user has to read line by line, it's best to stick with a simple font that is easy on the eyes.
  • Insert large blocks of text.Large blocks of text intimidate readers, even outside of web design. It's best to break them up using proactive page formatting or forced paragraph breaks.

10. Tell your designer what you want

Let's say you have a big idea for a feature on your website. The better you can explain it to a designer, the more likely the final version will be the way you imagined it.

Since it is teamwork, web design not only requires technical skills, but you also have to be able to communicate. Communicating in detail what you want for your site is the most direct route to a satisfying design. After all, web designers are not mind readers.

In the example for AUSMAIDS by Top Level Designer akdcreative above, it seems as if the customer knew that he wanted a widget that allows the user to enter the number of rooms and the frequency of visits. The designer took this idea and made sure it looks good. This is the ideal collaboration between customer and designer and you can see that in the fantastic product.

Do:

  • Plan what you want in advance.Either write what you want on paper or create a wireframe. Both will help you think of everything and give your designer a good starting point.
  • Be openIt's your designer's job to make your website look the best it can, so stay open to their suggestions, even if it's different from what you expected. Chances are he knows something you don't.

Don’t:

  • Be unclear or general.Using unclear and general terms like “colorful” or “interactive” doesn't really say much. Which colors? How should users interact? Be as specific as possible - or leave it to your designer.

With these web design tips, you can do it! T

It's one thing to read these 10 web design tips, but it's quite another to apply them entirely to your own site. Areas like color theory, typography, composition, and mobility are very profound, so don't get discouraged if you don't understand everything right away. Only professional designers can really appreciate the nuances of these areas. Hiring someone who instinctively understands these basic rules of web design is usually the surest route to great design.

If you're looking for a web designer, you can use our designer search to browse our community of 1.4 million designers from around the world. You can filter your search by skill, specialization, or even the industries they specialize in.

Do you want to find the perfect designer for your web design?
Take a look at our individual designer search.