How to Build an Attractive Website? Best Practices

Visitors to your website will make a pretty quick decisions regarding how they feel about the aesthetics of your home page. In fact, it’s usually your best shot to make a good impression on a first time visitor. If that visitor deems that you haven’t taken the time to come up with an attractive and functional layout, then they aren’t likely to stick around for your content.

The idea is that once someone has their eyes on your page, they should be immediately drawn in and excited about seeing more of what your site has to offer.

While that alone isn’t enough to win them over, it might be enough to get them to spend some time getting to know your site and browsing through your content, which can eventually lead to sales, faithful readers, subscribers and ad-click conversions.

So we need to ask the question: What should a website’s look and feel do for a visitor, and what kind of reaction or thought response are we looking for?

The three primary goals would include the following:

1. We want our user to have a comfortable grid with which to browse our content — Everything that isn’t content-related should serve to make the user more comfortable with reading or engaging with the actual information on the site.

If the user has to contend with distracting or confusing colors and patterns, or an interface that’s hard to navigate, they’re going to have a difficult time getting comfortable while making use of the information on the site.

2. The user should assume the site’s professionalism — Once someone sees your website, you want them to immediately assume that due to the layout and overall presentation, your site is reliable and professional.

One might think that you can’t accomplish this quite so quickly, but it happens sooner than you think. Before the user takes note of even a single sentence of your content, they’re making a judgment call about the professionalism of your organization based on the appearance of your web page.

It might not be a fair assessment either way, but you’d be better off to have it working in your favor.

3. The user should find the website instantly appealing — Every web designer should take into account that people visiting any given webpage are at best staring at a 20 inch monitor, and these days, probably something much smaller. All that means, is that any appeal your website might afford that user will happen right away, without much consideration.

Your website’s presentation and design should do its best to make your page appealing right away, without requiring that the user “gives you a second chance” by having to browse through more of your site to decide whether or not they even want to be there.

You don’t want to have the benefit of the doubt; instead you want to avoid doubt entirely.

Using Established Conventions

Accomplishing this for your website’s visitors involves careful consideration, but thankfully, there are some conventions for website design that we can tap into. Understanding these conventions ahead of time can help you at least set up the framework for your design. Once that’s in place, there’s still plenty of room for your creative energy and artistic ideas.

So let’s take a look at some of the more broad principles of good website design to see if we can determine exactly what it is that makes a website attractive.

Creating the Grid

By “grid” I’m referring to the structural framework that shows up both behind and around the content we have on our web pages.

The grid can be thought of as the platform that we use to showcase our content, being made up of the header, footer, body, background and sidebars.

Since we’re trying to make certain that visitors are made more comfortable by that grid, these are the qualities that we should pursue while designing each component.

1. Minimalism

As far as trends in web design are concerned, minimalism is becoming more and more popular, especially with greater emphasis being put by Google on websites being able to deliver valuable and unique content.

Since content is the focus, presentation and aesthetics are by default taking a little bit of a back seat. That doesn’t mean they should be ignored, but rather they should fill the role of showcasing your content.

The best way to achieve this is by a minimalist design pattern, which will usually employ a simple color scheme, an easy-to-navigate layout and textures that are soft on the eyes.

We’ll get into the specifics of these in a bit.

Layout

If you want to adhere to a minimalist design then you’ll need to start with your layout. A lot of how you have your website’s components arranged will depend on what type of site you’re creating. However we can still take each component and come up with some reliable and consistent best practices.

• Header — Your header should be small with text buttons linking to your site’s other pages. Color should contrast well and distinguish itself from the rest of the page.
• Body — The body should be large to avoid compressing your page’s content too much. A white (or very lightly colored) background is usually a must.
• Sidebars — Two sidebars are fine, but if you can get away with one, you’ll be better off. Color should be a bit darker than the body to make sure the content is what’s mostly noticeable.
• Footer — Footers can either be small and simple or bigger with a lot of links. If you go the bigger route, try to have three uniform columns in your footer with certain types of links in each one.

Once you have all the pieces in place you’ll want to start thinking about some of the specifics and how to “dress up” your layout. This will primarily concern your color scheme and the patterns you use.

2. Professional Color Scheme

Choosing your colors can be tricky and for most people, the issue is in fighting off the temptation to incorporate too much color as opposed to not enough. This is particularly true for people who will incorporate a lot of media into their sites.

Remember, pictures and video will provide a lot of color to any web page, so if you’re planning on incorporating those things, you don’t need to compensate with your layout’s colors.

As a general rule of thumb, black, white and shades of gray, tan or blue are all your friend when it comes to color.

Your goal is to develop a professional looking color scheme that fits well together and doesn’t jump at the user too much. You want a visitor to your site to be able to settle into the colors and land easy.

Those are your overall marching orders when dealing with color, but we can also delve into some of the specifics for each area.

• Font — Your website’s default font should always be fairly dark, but doesn’t necessarily have to be black. Black usually works, but sometimes a soft, charcoal gray can be easier on the eyes while still being very readable. Just think about the Kindle reading interface.
• Background — Your background needs to highlight your text, and it does so by basically staying out of the way. A white background is a safe bet, and if you go with a darker tint, make sure it doesn’t hide your text.
• Other Divs — If you have extra divs for boxes within the body or the sidebar, they should have a darker border and match up as much as possible with the color scheme of the sidebar itself.
• Buttons — The best way to do buttons is with simple text links. If you want to do a hovering background color you can, but keep these as simple as possible.

Splashes of color in the form of small icons, text or borders are great for adding some flavor to your site. Just don’t use them as the primary focus of any large areas. If you use color sparingly throughout your site, it will be more appealing to the eyes and will count for more.

3. Subtle Patterns

Once you have color established there might be a few areas where you would rather use a texture instead of just straight color. The most typical place is on your background or in your footer or header.

Where you choose to use texture is up to you, but what’s important according to today’s web design trends is to make sure that any patterns you use are subtle.

Subtlepatterns.com has a huge collection of free textures that you can use for your website, and it’s no coincidence that just about all of them are either white, gray or black. Like we’ve already established, anything fancier can be too loud and obnoxious. A soft gray pattern will have a much more settling effect on the eyes and will make your site a more welcoming place to spend time and absorb information.

Keep in mind that your patterns need to play nice with your colors and won’t necessarily do so just because you’ve done a good job of choosing from grays and blacks.

You’ll still need to do some tweaking to make sure everything looks right when it’s all together on the same page.

Wrapping Up

A website’s beauty might be subjective in some cases, but in general, a funny-looking or poorly designed page will look the same to just about everybody.

Don’t lose potential customers or loyal readers just because you didn’t take the time to make your website appealing and attractive to a wider audience. Once you’ve laid the groundwork, it will be much easier to maintain a modern and appealing scheme.

While your website’s attractiveness is not the end all, an aesthetically pleasing page will at least guarantee that you aren’t losing visitors because of a distasteful appearance.

Put the work in and then hope for the best.

Post image courtesy of Eddie Lobanovskiy