Basic Web Site Design: How To Start Designing Your First Blog Or Web Site

Sponsored Links

If you are ready to start designing the "look" of your first web site or blog here are my specific recommendations on how to move in this direction. What I am going to tell you is not a collection of tips collected here and there and assembled again for you here. What I am going to suggest you is a radical, no-frills approach to web site design that I have developed over my own experience as a professional web publisher and as a strategic communication adviser for many online brands.

Photo credit: Vladislav Gansovski

Designing for the web requires as a fundamental assumption the understanding that accessing information on a computer screen or on a mobile device is a completely different experience for the user than the one of reading a newspaper, magazine or book or from the one of watching a typical TV set. If you keep using the same assumptions for designing the interface to your valuable content as if you had a print magazine or a television program to direct, you are only going to waste tons of money and time.

Stop now.

Here, designed on order for the novice guys at Wix.com, but just as well for any web novice out there, my basic web site design recommendations.

 

Basic Web Site Design

Let me give you some unorthodox advice. There is plenty of web design books, sites, tutorials and even videos on the topic that I think I would not be able to add too much value to what is already out there.

But if you let me, I think I can provide you with some basic, beginner's suggestions, that not only complement what you may already know, but may make you look at the process of web design from a completely different perspective.

1) Site Design Strategy

Be Simple - Have Focus

To design your web site think first about what content you are going to have.

Well yes, when it comes to web design things should really be guided by the architecture of your content. That is, your site should be designed around the type of content, and experience you want your users to have on your site.

When a reader comes to your site, she either comes because she has searched for something on Google and has found your site, or she has come because someone has told her that there is something interesting to see or to do at your site. Yes, she may also have found your link on another site or social media venue where someone recommended to visit your site.

In any one of these cases whoever is coming to your site is coming with some expectation about what to find. Depending on what your site is easily found for on major search engines or on what type of links on your site other people recommend, people will come to your site expecting to find something interesting and valuable on that topic.

Your first goal should be then, when you start designing your site to provide that very thing.

How?

By focusing the key content areas on your pages to provide the reader a valuable experience she is going to remember.

So, do not place a ton of different elements on a page with the goal of finding in this way one or two that will match your reader's expectations. Focus on a thing and provide everything you have that is relevant to complement it next to it. The rest keep quiet, separate.

 

2) Design Style - Don't Be Nice - Be Analytical

Another essential key rule to design a web site that feels and looks professional is to avoid going after the "nice" idea. What do I mean? Everyone has his own idea of what looks nice, but unless you are a pro designer my advice is to actively steer away from trying to achieve that "nice" feeling. It's simply the wrong goal. See everyone's got a different kind of nice in his head, and again, unless you have spent time learning what are the key strategic elements to make things look nice, you are just going to make a site that pleases only yourself.

So, what you should really go after is not "looking nice" but after being

a) focused, and being

b) legible.

These should be your highest goals.

See, if you can provide clear focus to what your site is about you are already a step ahead of a ton of other people. Go to a few friends sites you know and see if you can tell right away what the site is about. It's a carnival of things, all screaming for attention and each one pulling you in a different direction. What is that good for?

Simplify, go after the essence, give your readers a few good valuable things. They'll price them much more than having a site with a hundred different things on it. It will look more elegant, more valuable, just by adopting this simple approach.

Focus is also the ability to be "seen" by major search engines as a site that covers a very specific topic, making it more relevant inside search results when people are in search of that very information. To achieve this you need to spell out clearly and in text, such content focus and to address it in a consistent and systematic way, by writing and publishing valuable content on a steady basis.

Legibility for a web site is like the transmission reach for a radio station. If the signal is low, disturbed, sometimes to weak or covered up by an adjacent station, I may leave the station rapidly, even if the content is what I was looking for. Same for the web. If a web site is too slow to load or worse, too hard to read and navigate through, I may as well move on to one that offers a clean, well organized layout, large text and titles, relevant visuals and an intuitive navigation scheme. Wouldn't you?

 

3) Page Types

To develop a basic web site, you need essentially to design two types of pages: the home page and the internal page. Yes you may want to have further custom page design for special sections, but my suggestion is to focus at the beginning on only those two basic page types. By doing so, you greatly simplify your task and you focus on making these as effective as possible.

Some basic suggestions:

Home page - this is your front door, your dress, business card, door plate, mailbox, CV and portfolio rolled into one. This is you, or the company you represent write for. It should not look like an electronic brochure. It should be sharp, direct, informative, and having information components that are complementary and relevant to each other. No fancy graphics, colored backgrounds, or special visual acrobatics are needed to make this an effective page. Focus on communicating clearly what the site is about and on having valuable information components that support that theme.

Individual page - this is your typical "inside" page on your web site or blog. Truth is, nowadays every page on a web site, is a bit like the home page, since most visitors who will arrive on your site will land and leave directly on one of your individual pages without even ever seeing your "home". Knowing this you should organize also the content of your individual article pages to lead to complementary and relevant content sections, while providing the reader with all of the basic key identity and navigation components you have also served on the home (masthead, basic navigation links). So the key advice here is to have a functional and informative masthead (see below), to give enough space to your main content as to make it very legible, and to leverage the extended footer area to provide access to other relevant and complementary information to the one presented in that specific page.

In each page what are the key elements you need to worry about?

 

4) Page Components

a) Masthead
The masthead is the topmost part of your web page. Your flag, brand identity and content focus should all be clearly defined here. Refrain from making this band too high or too decorative. Stay within 100 vertical pixels if you can. Keep in mind your main goal: to let your reader know in the smallest amount of time possible what your site is about and why they should keep reading. - keep cool - inform

b) Content
When it comes to how many text columns you need to include in your layout, limit yourself to two or three columns maximum. Use the wider one for your key content and the others for advertising or for additional content suggestions. Keep in mind that your main content column should host text lines containing no more than 10-12 words. Achieve this result by working synergistically on column width and font size. One last item: text on a web page should ALWAYS be left aligned. Justified text on a web page is like having a label next to it saying in bold capital letters: "The people behind this web site KNOW NOTHING about communication on the web". I won't go in the details of why this is the case, but you can give a look yourself at the top, most popular sites and blogs and see for yourself what choice they have made on this front.

c) Navigation
For navigation it is intended that set of links, or other visual elements that allow your site reader to access other relevant section / pages on your web site from whichever page they are on. The important thing here is not so much where to place these navigation links, but to rather organize the site in reasonable sections, which are labeled clearly and consistently. Although apparently simple this is a task on which many novice web publishers fail. Start by identifying key information pages beyond the home, such as an About page (recommended), a Contact page, as well as a set of maximum 10-12 content categories in which you will want to group your articles. Make sure the names of these categories are conjugated in a consistent way and that the labels chosen are good, self-evident descriptors of the theme selected.

d) Advertising and Other Content Elements
Place your advertising spaces in a few key places on your pages. Key positions to consider are above the masthead (see Boing Boing), below the main title, and on a side column. You can mix and combine any of these three approaches while keeping in mind the following: people, like me and you DO NOT like advertising; and by advertising we intend apparently distracting visual messages calling for attention that have nothing to do with the content and topic of your web page. This is why text based ads, like those served by Google AdSense, which are highly relevant to the content present on a web page work so well. People are looking for specific information and if you serve it to them in a way that does not appear to be distracting or irrelevant, then they may actually WANT to look at it. Organize therefore advertising information as if it was another, precious and very relevant information category. Place your ad space in strategic ways, label clearly the advertising areas as having relevant commercial product information for your readers, and avoid rich layout of colored ads fighting for attention with each other.

e) Footer
The footer has recently become a sort of strategic navigational and informational device for many a successful web site. Instead of relegating there only legal information and a copyright or Creative Commons license logo, you may want to start planning your web site page footers as a bridge that can easily take your readers from one article to other relevant and related content areas on your site. Look at ProBlogger for one great example of such use.

 

5) Colors

My personal advice is: Forget colors for now. Use images when you need them but keep your background solid white and your text in black. That will give you maximum legibility and will allow you to develop a greater sensitivity for detail when dealing with the design of information.

If you can't avoid using color, be very careful with the colors you use. Using color on the background of your web pages is going to positively decrease the legibility of your text no matter what color you set it to. Outside of reversing white and black in the background and foreground text, all other color choices require some familiarity with color theory and color matching principles. If you are not familiar with this stuff give a look to:

How to Select Perfectly Matching Color Combinations - Mini-Guide

ILU - Color Calculator

 

6) Fonts

What about fonts?

Keep two goals in mind:

a) font compatibility

b) font legibility.

These are the only two things you care about for now when it comes to fonts. What do they mean?

For compatibility, what you need to make sure is that the font you chose to use is visible also on other people computers and browsers, across a variety of computer types and operating systems. Some cool fonts or ways of displaying them maybe available only on your computer, but then when readers will go to your site they may not see the same fonts you had selected or they may see them displayed in a different way. Do a check and you can find out.

For legibility you need to select a font that makes your text look legible, not fancy or unique. You'll provide those qualities to your content by the way you will format and package it for delivery. Chose therefore a font that is not too small and restrain yourself from anything too decorative or fancy.

See also what major blogs and sites are doing when it comes to font and other design components usage: A Small Design Study Of Big Blogs

 

7) Images

Images are a tricky one. Fill up your site with images without knowing how to select and place them and you are going to do more damage than by not using them at all. Some basic advice: be consistent. Select images that reflect a common style, framing, type of color. Don't jump from wildly different styles and sizes but make an effort to create visual continuity by selecting, sizing and placing images in predictable, consistent ways.

If you use other people images give always credit to the original author and link back to his site. That will spare you lots of possible trouble.

Where to get cool images? Flickr, Google Images (watch for copyrights), StockXchange as well as a few hundred other places are the recommended destinations, but there is definitely more.

 

8) Web Templates

This above is really just some basic advice for your first web site design. How to go about implementing these principles is your next hurdle. My personal, strong recommendation is to steer clear of coding HTML. Unless that is your professional role do not design your site by coding it yourself with tools like Dreamweaver, FrontPage or any other web editor you are secretly hoping to use soon. That is the old way of doing web sites. There is too much tech know-how to know for you to do a good job on this if you do it by hand this way.

The new way is to use a pre-designed web template that you can customize and adapt to your needs. Web page templates are not excessively expensive and there are a lot of sources to choose from. Look for specifications that indicate that the code is "valid" and XHTML-W3C compliant, this indicates that the code behind your selected template is solidly built and will guarantee that your web site will look consistently across different browser, screen sizes and operating systems.

Just like for personal wear, there is no need to go the tailor-made way, when there are tons of great designs already available out there and that you can easily adjust and customize to your needs. Some of you may still need some tech assistance from someone who knows how to manage and edit these templates, but overall this is a much better and more reliable road than any other one if you are about to design your first web site.

More to come on this topic. Stay tuned.

 

Originally written by Robin Good for Master New Media and first published on July 29th 2008 as "Basic Web Site Design: How To Start Designing Your First Blog Or Web Site"