Seven Primary Web Design Guidelines
- David Puffenberger
- Web/Graphic Design
The user interface goes a long way in delivering great user experience.
If you’ve researched Web design or Web development lately, you probably have heard of UX/UI design. But what does that mean? Well, the UI stands for User Interface and you’re using one right now to access this article. Both your OS and browser have UI’s, so you can search, navigate and perform actions on your devices. Likewise, every Website and app have menus, and some have additional usability aspects such as search, shopping carts, checkouts, and other special things.
UX, or "User Experience," is defining how end-users will interact with the Website or app. This includes navigation, page layouts, structure, load times and more.
But not all Web designers approach this the same way. At Advent Media, we have learned from our years in the Web industry (50 years in AV), and have developed some basic guidelines. But before we get to those you need to understand that…
In our opinion, great user experiences don’t focus on flashy trends...they focus on usability.
How many times have you visited a Website and struggled to find the menu, let alone what you’re looking for? Or had to wait more than 10 seconds for the silly page to load its flashy animations? If you’ve experienced that, you’re not alone. Official research has stated that if a visitor cannot find what they’re looking for within 10 seconds, they will leave the site/page. So, as UI/UX designers, it is our goal to make sure that the pages load quickly and the information or tools the end-users are looking for are not hidden.
So, with that in mind, let’s jump in.
Our Seven Primary Web Design Guidelines
Guideline #1: Don’t lump everyone into the mobile mold!
A lot of designers like to take a “Mobile First” approach, they design the mobile version of the site or app for a phone or tablet and totally ignore those still using laptops or desktops. Our designers prefer to work the other way, starting with the desktop version first but with mobile in mind. This allows us to deliver a consistent UI across the different devices without any compromises.
Guideline #2: Make navigation clear and simple.
Again, different designers have different ways of laying out navigation. But after visiting and researching some of the internet’s most visited search, shopping, informational and corporate sites (including those of Fortune 500 companies), we’ve found that the most common standard is to place the navigation at the top of the page. Inside the navigation bar, the logo is always aligned to the left with the menu either inline or aligned to the right. On mobile devices, the logo is in the center with the touch friendly main menu hidden behind the industry standard “hamburger” button staying on the left. If the site has a store or search capabilities, the shopping cart, search or sign in buttons are always aligned to the right, regardless of desktop or mobile.
These are standards that top companies who have spent a ton of time and money in usability research have implemented and chances are, your visitors have most likely interacted with one or more of their sites and are familiar with the UI. So, why try to reinvent the wheel when we know what works?
Guideline #3: Your content and keywords matter in design.
This may come as a surprise to some, but Web Design and Search Engine Optimization (SEO) have a lot of things in common! When designing the UI, its best for the designers to know beforehand what the overall topics, content and therefore keywords of each page is going to be. This allows the designers to create page layouts to present your message in a creative way and maximize the SEO opportunities*.
Also, it’s a good idea to research what terms people are using to find products, services, or other organizations like yours. Then you can adjust your content to potentially be found under the topics your visitors are searching for.
Guideline #4: Keep your content clear and concise.
Contrary to what some SEO gurus may tell you, verbosity is not your friend. Sometimes you need to go into detail and that’s ok. But the primary goal is to gain the visitors interest and call them to action. Having a ton of text or keywords on the page doesn’t always do that. Large stats, headlines, pictures and videos can help but only if its consistent with the content of the page and doesn’t overwhelm.
Remember, you got them to your site, don’t turn them away with gibberish or needless eye-candy. You can always link to a blog article like this one to elaborate.
Guideline #5: Stay focused.
If you have a dedicated page for a product, service or even a blog article, keep the content focused around that topic. This is a key element to having those pages ranked and potentially displayed in searches. If your page is supposed to be promoting a particular product or service but much of the content is unrelated, your visitors will probably find it misleading and it won’t rank well in the search engines.
Now, this doesn’t mean you need to have a page for every little bit of content. You can have sections on the page that focus on different pieces but are still related the overall page topic. If you do need to mention another topic, try to do so briefly then link the text or image off to the page that details it.
Guideline #6: Adhering to standards doesn’t mean “cookie-cutter”.
The best part about having standards to follow is that you know they work; but putting usability first doesn’t mean we pigeon hole everyone into the same templated mold. It’s just forming the fundamental framework for us designers to work our magic. Each page design and layout can be totally unique, but we want to keep common elements, such as the header and footer, consistent and in line with standards.
Guideline #7: Understand the need for Speed & Security.
The design is only half the battle. Today, people have short attention spans but are also concerned about their privacy and security. Therefore, the CMS (Content Management System) and the hosting environment become important elements. Your site needs to load quickly (between 1-4 seconds). That is accomplished by "minifying" code and images and using a Content Distribution Network (CDN) to cache content on servers closer to your users. Security starts by using a CMS that is not subject to attack (see this). A security certificate is mandataory these days, as most browsers will flash a "Not Secure" warning if one is lacking. A basic certificate uses the HTTPS protocol, and advanced "Extended Validation" certificates show users that your site is legitimate. Also, any associated user accounts for the CMS or hosting should have obtuse usernames and strong passwords (16+ characters) with two-factor authentication (if available).
These are the primary Web Design guidelines that we adhere to and want you to be aware of. There are lots more, but you’ll only be able to discover those if you decide to have us work on your project.
At Advent Media, Inc., our goal is to deliver high quality, intuitive Web design and development services for your unique project that meet or exceed your goals.
Discover our Web Design Services