Back to Basics: Design Principles for Crafting a Stellar Site

test-test-test

A decade ago, many internet users impatiently checked out Smashing Magazine to read the latest web design articles. Lots of actual web designers found their passion for website creation through these posts. It was a time when the principles of web design determined a productive debate amongst designers—both beginners and experts.

Nowadays, there are significantly fewer discussions about design principles. Is the passion for good design dead? I believe that designers, bloggers, and developers don’t have any more time for these discussions.

We have access to so many website builders, site templates, content management systems (CMS), and other tools to create websites. In this abundance of alternatives, we’re creating more and more sites, but we’re ignoring their design.

I believe that everyone needs a refresher on web design fundamentals from time to time. Check out these ideas!

Simplicity in Is Design

simplicity-design

Are you tired of countless blog posts highlighting the sexiness of simplicity? It’s totally understandable, but the harsh reality is that 99% of sites are more or less burdened with useless elements. Website owners want to help users by providing as much data as possible in as little space as possible. However, they need to find the sweet spot because too much data annoys viewers. Web design is part science, part art!

Unlike ten years ago, when smartphones were used by only a small percentage of the population, there are now more mobile users than desktop users. In this context, simplicity is even more important. A simple layout loads faster and doesn’t annoy users.

Simplicity goes hand in hand with loading speed, and these days, a fast loading site is mandatory. Don’t forget Steve Jobs’ theory—design isn’t how it looks but how it works.

Check each item on your site. Is it unnecessary? If so, delete it. Is it somewhat necessary? If so, delete it. Is it necessary? If so, delete it! Is it extremely necessary? If so, keep it!

Don’t Make Users Think

Steve Krug wrote a book with this title back in 2000, and designers highly appreciated it. Krug’s insights are valid even now, almost two decades later—a good web designer doesn’t make users think. And this idea isn’t offensive to users.

People have an attention span shorter than that of a goldfish! The average human’s attention span was 12 seconds in 2002 and only eight seconds in 2012. Today, you probably have less than eight seconds to convince users about your site’s usefulness.

Chances are that a simple layout won’t make users think, but there are many other aspects to take into account. Start with a layer that is scannable—users scan, not read. Make sure that your slogan and tagline are easy to notice. People should know where they’ve landed and the purpose of the web page from the first second.

The site’s architecture should allow users to navigate from home page to any other page in fewer than three clicks. Any additional clicks will raise questions; the more questions a user has, the lower the quality the website appears to be.

Visual Hierarchy

visual-hierarchy

Not everything on a web page is equally important. Let people know what your strongest message is by taking advantage of visual hierarchy. That’s why the call-to-action button should be big, bold, and placed in a spot to immediately catch the eye.

Visual hierarchy is achieved with placement, size, and color. Design the layout while keeping in mind that people usually scan a webpage in an “F” or “Z” pattern. Also, bigger web page elements are associated with more important roles. It makes sense to have a big tagline, doesn’t it? Finally, colors also shape the visual hierarchy, which is why a good call-to-action button is in powerful contrast with the background.

Gestalt Design Laws

Gestalt psychology aims to determine the laws of human perception in an apparently chaotic world. There are a few laws that help designers to craft more user-friendly designs.

  • Law of Proximity

According to this law, objects that are close together are perceived as a unified group. Apply this law to designing a good navigational menu, for example. Users won’t perceive the menu as a whole if its items aren’t grouped accordingly, and that will considerably hurt the user experience. Group together all the menu items, and strive for symmetry and similarity to realize an aesthetic element.

  • Law of Similarity

            This law states that similar objects tend to be perceived as a unified group. Like the previous law, I recommend designing similar menu items.

  • Law of Symmetry

            Objects that are symmetrical to one another are perceived as a unified group. People prefer symmetry to asymmetry, so aim for symmetry into your layout design.

  • Law of Continuity

According to this law, the human brain tends to unify the objects that are close to one another in a linear path. Check out this article to learn how the law of continuity works in art. Keep this law in mind when designing layouts that contain irregular shapes and curved lines.

There are a few more Gestalt laws that have a smaller influence on design work. Don’t ignore human psychology when designing websites.

Colors Speak

colors-speak-design-principles

Playing with colors is nice, but it’s a risky game! Website builders such as Wix, Gutenberg editor, and other WordPress page builders empower users to change the entire color scheme of a site in a snap. It’s certainly a great feature, but at the same time, it could negatively impact the website’s design. A successful site is user-centered, so the color scheme should be comfortable for users and not the favorite choice of the website manager.

Choosing the proper color scheme isn’t simple. As a rule of thumb, more than four colors are too many, but it depends on the site’s purpose and complexity. Colors should complement the images and help transmit a united message. Finally, don’t ever forget about the various meaning of colors across the globe. Luckily for us, there are tons of web apps aimed at helping you get inspired and choose the proper color schemes.

Readability

On average, one in every two readers of this post is reading it on a handheld device. The screen sizes and the operating systems are different, but the content is the same. The font type and size should adapt to each device to provide the best reading environment. Needless to say, people will leave your site if your content isn’t readable, and a poor font choice could ruin a good website. Test every font choice before implementing it on your site.

Test, Test, Test

Not only has technology changed since the last decade, but so has the manner of creating and maintaining a site. A website was just an online presence ten years ago, but today it’s part of a business or the business itself. People judge your services based on your site. Consequently, a site is no longer a static instance—it’s a living entity. Site owners partner with designers and work perpetually to improve their sites.

Testing isn’t a web design principle but a part of the process of creating and improving a website.

Wrapping Up

            WordPress, Bootstrap, and Wix empower users with limitless power to create a website without coding. They’re wonderful, but inexperienced users could be tempted to craft websites in line with their preferences and not based on good web design principles.

            The above tips only scratch the surface, but they’re a useful recap of basic ideas. Did I miss an important tip? Please leave a comment with your insights; we are eagerly awaiting your contribution.

Leave a Reply

Your email address will not be published.