Blog

Check out the Neoreef blog for the latest industry insights and guides.

HELP! I just can't get my content to look good! Part 3

In the final part of the series, we discuss general design concepts and give you some rules to follow to ensure your content looks great, is consistent throughout the site, and retains a clean, professional feel.

So, You've mastered the text editor, you've overcome it's quirks and are more comfortable with some of the more advanced tools available to you but your content still doesn't look very "professional."  The big problem most of our clients have with content is that they simply don't know the various guidelines that have developed over the years to give your site a clean, consistent look.  Today I'm going to go over some of the various pitfalls that can befall you and how to avoid them.

Start with an idea.

When designing the content of a page, it is often helpful to decide in advance what elements on the page are going to be most important down the the least important elements on the page. We can then order the content on our page according to what we want the users eye to first be drawn to.  Although we can use color and images to draw the users eye to sections of the page, it is easier (and simpler,) to arrange our content in what is known as the F pattern.

Studies have show that when an end user views a web page that the normal viewing pattern is not reading each line from top to bottom; Instead, users scan down the page in what has become known as the F pattern, named for the general shape you can see above.  The image above is what is known as a "Heat Map."  Specialized hardware scans test users eyes as they view a page to map where they are looking at the screen. 

So what does this image tell us?  The most important areas of the page are the top left hand corner of the content.  Notice I said content and not page.  Statistically, visitors to your site will immediately scan down to where the content begins. 

You may have also noticed that as you go farther down the page, the hot areas taper off.  What this shows is that users don't necessarily read your content;  they scan down the page looking for the information that interests them.  What can we take from this?  It's pretty simple.  Keep your pages short and sweet, and place the most important information on that page at the top left. 

That also means that unless your content is something along the lines of a Blog post or a news article, the stuff at the bottom is most likely not going to be read.

So, Lets make this a rule. 

 


Stick to your color pallet- Stick to your Fonts.

When the theme was designed for your website, a color pallet was created and a family of fonts were selected.  This is to ensure that the colors and fonts used throughout the site are consistent.  Below I am going to show you two examples of the same content

Example 1 - The Wrong Way.

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"


 

Example 2 - The Right Way

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

 

The first example, while colorful - looks unprofessional and is glaring to the eyes.  It is important to remember that your website is often the first time a potential client experiences your business.  Make sure your first impression is a good one.  Remember, simple is almost always better.  Don't try to "Pretty Up" your content.  Keep it simple, pleasant and consistant.  You should never use more than two fonts - one of which is the font used in your logo.  You should also only use colored text for headings or hyperlinks. 


In the text editor there is a drop down "Style" box that is preset with specific text styles based on your theme.  Stick to those and your text will look slick and professional.

So second rule?

Rule #2.  Keep it simple.  Don't over use colors and fonts.  Stick to one or two colors and fonts throughout the content on your site

 

Images, Images, Images.

Scenario:  You've got images on your page, and they just don't look right.  Furthermore, your page takes FOREVER to download.  On top of that, your images all look jagged after you resized them in the editor.  They looked fine before, and you took them with a High Definition Camera!  What the heck!!!

Ok, heres what happened.

When an image is displayed in a web-browser 2 things happen.  First, the web browser downloads the original image from your website. Second, the browser then either stretches the image or squishes the image to fit into the dimensions you set for the image.  This results in the image becoming  pixelated (also known as "the jaggies".) 

This is pretty easy to fix. You should always make the image the size you wish it to appear on the website before your upload it.  Image editor programs such as Adobe Fireworks®, Adobe Photoshop®, and Gimp® let you resize the images and save them with very little degradation in quality.  However, these programs have the disadvantage of being either expensive, complicated and time consuming to use, or all of the above.  Thats where www.picresize.com comes in.  It's a free service where you can upload an image, choose the dimensions, apply a couple of cool effects, and then download a compressed and optimized version of your image.  Upload that image back to your website and your good to go! 

So I guess we are ready for rule 3.

Rule #3.  Always, always, always resize your images to the size you want them to be on your webpage before you upload them to your site.

 

Know when it's ok to break the rules.

Just like in life, sometimes you have to be able to break the rules.  For example, a design based on Typography will use different font sizes, colors and text in place of images to create the graphical pieces of the page.

Replacing the graphic elements of the page with different types of text can create a distinct look that sets you apart from your competitiors.  However, an image based site should minimize typography and a Typography based site should minimize images.  You never want to overwhelm your visitors. 

You may also have a Kids website.  Mixing fonts and bright colors on a kids website is more acceptable (kids tastes aren't going to be as refined as an adults.  Always tailor your content to your target audience.)  

Large images are more acceptable if they are opening up in a photo gallery. 

Conclusion

Using these guidlines will help you keep your site looking great.  As you gain experience you will know when it is ok to start bending and breaking the guidelines. 

If you are still skittish about adding your content we do offer a new service called Rollover Hours where you can have our trained designers handle your content for you at a heavily discounted rate.  Call our sales staff to find out more.

Call toll-free 1-888-636-7333 in the US
Call local 208-629-2921 in Idaho

 

Comments (0)
No comments yet, login to post a comment.

Powerful Tools, Unlimited Support

Neoreef addresses the two biggest issues with websites: lack of control and lack of support. We enable easy control of your website, while a dedicated support team provides you with training, mentorship, and specialized skills.

Start Your Project Today