We get a lot of question asking us what should be on my website. What layout should my website be? What should I put on my website…. So if you’re a small business looking to design (redesign) and develop a website?
Here are the must know website design tips you should know before designing and developing your website.
Use One Column Instead of Multi-Column Layout
When a user arrives at your article pages, chances are you have done enough right things to spark their interested to want to learn more from your articles. So, don’t mess it up by adding anything that would distract them from the article itself.
Use a single column layout instead of multi-column for your content pages. Think of it like a movie theater, the dim lights, the perfectly shaped room, the surround sound, and the center big screen all designed to keep your full attention on the movie.
Create Effective Visual Hierarchies
People don’t actually read everything you write on your website, that’s why I use headlines for important points.
They glance and scan the pages for something that they’re interested in. Just think about the last time you picked up a newspaper, magazine, or if you’re under 25 Facebook, forums, or blogs. Chances are you did not read them systemically from beginning to end. Instead, you scan for a headline that sparked your interest.
Creating a visual hierarchy on your pages is a process of organizing contents that are similar together and in relation to another group of content. Contents that are the most important should also be the most prominent, largest, biggest, and distinctive element on the page.
A good way to understand visual hierarchies is by looking the front page of any newspaper. The name of the newspaper usually has the biggest headline on the paper and almost always on the top. Following the name of the most prominent piece of news for a day usually takes up most of the front page with the second largest headline sometimes even the largest headline. Final- ly the rest of the page is filled with the less important news.
User Shorter Paragraphs
Have you ever been to a web page where there I just a long blob of text, and you thought to yourself “no way you’re going to read this whole thing? “ Nobody likes to read a long paragraph of text. Make your paragraphs shorter, or simply find a way to break a long para- graph into 2 shorter paragraphs.
Use Highlights For Key Terms
Remember that people are always scanning your content for key terms they’re interested. User bold, or a different color to emphasize important key terms that you want your users to remember. Only highly key terms, high- lighting too much text will only make this technique less effective.
Use Fonts that People Can Read Easily
There are literally thousands and thousands of fonts available to be used for your website. But just because they’re available it doesn’t mean you sure use them. Generally speaking, most Sans Serif type fonts are great for contents.
Most of the handwriting fonts such as Pinyon Script, or any other funky fonts like the “Sacramento” should not be used unless you have a damn good reason for using it period. In my opinion, these fonts should only be used as headlines to deliver a point or to catch attention.
More correctly use awesome relevant images. Tabloids, Magazines, and Newspapers have used images to for decades to capture our attention. These companies will pay thousands of dollars for great images because it helps to sell their magazines and newspaper. Use awesome images on your pages, they will often determine to either the user stays and read the rest of the page or not.
Use Photographs of Real People
Awesome relevant images are great, but what are even better are real photos. Real photos are any photos that are not staged or purchased from stock image sites.
People simply ignores stock images.
I’m sure you have been to a website where there is a picture of a girl, guy, or sometimes a team of people dressed in professionally looking at you with a smile and a thumbs up? And something in your body tells you that there is something wrong with this picture, it doesn’t feel real.
Using stock photos often brings an emotionless, disingenuous feeling to your user. Tests have shown an increase of 45% to conversion just by changing the stock photo to a real photo of the company crew. People like to deal with real people, who they can trust, so don’t start on the wrong foot.
Use Black Font and White Background
Read ability, read ability, read ability, and read ability. Some designers love to use colors, and I don’t blame them. I like using colors myself, but something is better left alone. Black font and white background is the best choice if you want your users to read your content.
There are many other colors that work well together such as white font and black background, or white font and grey background. But black font and white background are the easiest on your eyes for long reading. This is why I’ve yet to see a red page book or newspaper.
Use White Spaces
This one can be tricky. In design, whitespaces are not necessarily white. Whitespaces can be any spaces that draw attention to a focal point. If you take a picture of your friend, the fade blurry background would be considered whitespace and your friend would be the focal point.
Whitespaces in design go beyond just drawing out attentions in photos or images. It applies to everything even down spacing in-between sentence and paragraphs. As I’m writing this, Microsoft Office is adding whitespaces in between my sentences to make it more readable and easier on your eyes.
Use Success Stories
We all want to work with experts that are proven to deliver results. Most people don’t want to take a risk to try your service or product out. They want to know if you have solved a similar problem they have before.
Use success stories or testimonials on your websites to show your users that they’re not the first one. You have worked with many others just like them and solved similar problems.
Use Credibility Seals
Creditability seals are those badges you see on some companies’ sites that say: “As Seen On Fox”, “Google Partner”, “Accredited Business by BBB”, “Norton Secured”, etc… They’re kind of like boy scouts badges (Mer- it Badges). These seals serve a very similar purpose as success stories or testimonials, to increase trust.
Make Your Navigation Intuitive
People don’t like to browse your website, just like people don’t actually like to surf the channels just for the fun. When you’re channel surfing on your TV, you’re looking for something that you want to watch or catch your attention, and if you don’t find anything you’ll simply turn the TV off.
For example, the browsing experience for a shopper arriving at Amazon to purchase a new flashlight should be something like this: Homepage ⇢ Shop by Department ⇢ Tools & Home Improvement ⇢ Power & Hand Tools ⇢ Flash Lights ⇢ Bingo ⇢ Make the Purchase ⇢ Relax and Watch something on YouTube.
Don’t make your users browse or have to look really hard to find what they want because they will simply get fed up and leave your website.
Use Call To Actions
Whenever you want your users to take a certain action, it’s best to tell them to do so. Don’t just assume that you’ll users will know what you want them to do. And don’t use buttons that say “click here”, instead explicitly tell your user what you want them to do for ex: “Subscribe to My Newsletters”.
If you every want your users to “click” your link your links don’t use the words “Click Here”. In my opinion, the idea of using “click here” or “here” for your links is outdated. Back in early 1990 it probably made a lot more sense.
Use Encapsulation To Draw Attention
Encapsulation is the idea of using borders, shadows, or contrasting background to pull attention to a certain element on the page. Tabloids use encapsulation extensively, especially on their front page. Whenever you see celebrate scandal image on the front page of tabloids (which is all the time) you will usually see mini zoom in pictures that are encapsulated with a white border.
Use Contrast Colors
Remember when I emphasize on using black text on white background or vs verse? There are always exceptions to the rule, well sort of…
First, for part of your article such as blog post or pages with a lot of text, it is almost always a good idea to just stick to black and white as it is the easiest on the eyes of your users. But if you get bored and wants to add a little bit more color to your website just remember …
Contrasting colors draw attention and they really bring out the element that is contrasted with the background color. Many marketers like to use contrasting colors for their “call to action” buttons to increase click rate. That said, it isn’t guaranteed that contracted colors will always work and will work for your website, so always test it out yourself.
Keep Your Forms Short
This is probably by far the biggest mistake that a lot of small and medium sized business makes when developing their websites.
We all hate to fill out the long form to get our passport, but we do it anyway because we want our passport. Unfortunately, this is most likely not true for your business, product, or services. Unless you know your users desperately want your product or services, don’t make them fill out long and impossible forms; chances are they will just leave your site.
If you must have really long forms on your site, then a good practice is to split them up into steps. That way the user doesn’t feel overwhelmed.
Label Your Icons
Recently many great websites adopted the use of icons to improve user interfaces. The problem comes when designers use icons that are ambiguous without labeling them. Unless you are certain that the user will know what you’re icon does it is better to label them.
Use Directional Cues
Directional cues are very powerful. Our eye tends to follow wherever a direction cue such as an arrow road sign points to. An experienced designer can use several of direction cues such as arrows to guide the user’s attention to take an action.
Use Landing Pages
Last but not least design tip we have is to use landing pages. A land- ing page is single web page designed for one single purpose in mind. The two purpose of most landing pages is either to generate new leads or direct the user through a series of a sales funnel.
Since landing pages are designed to fulfill a single purpose. They are almost always designed with no navigation, or any other element that would dis- tract the user to fulfill that purpose.
That’s all the website design and development tips for small business owners we got right now.
To get started with your small business website download the complimentary website blueprint planner below free.