WDB provides top quality vector graphics for designers all around the world
Premium membership provides you with DIRECT download links with no wait time (like rapidshare) and access to Premium Vector Graphics with commercial use rights.
Join over 21.000+ subscribers that are enjoying free vector graphics.
With a title like this you probably expect answers to a lot of secrets here, right?
Well, I don’t know if there really are any secrets left in this business. However, I’ll do my best to show you quite a lot of stuff that is very useful to know if you are designing/creating a website, professionally as well as for fun.
Well, this can be summed up in two things “Thought and planning”…
(Now repeat that at least three times per day as you meditate for the next six months…)
That actually isn’t all a joke you know. To actually sit down and think, plan, see the plan break from the thoughts, rethink, replan and see that it is working saves you a huge amount of time in the long run.
There are of course many ways to design a website, as many good ways as there are bad ways to do it… I guess that’s no news to you ;-) As I don’t have the time, nor the inclination to dwell on the bad ways here, we’ll take a look on the good ways. So, what’s a good way then?
What you certainly know, just as I do, is that there are rules and guidelines published “en masse” on the net and in books. Some by well known names, some by not so known persons. The interesting thing here is that many of these guidelines give very specific advice on what to do, and what not to do. Does “keep load time under 6 seconds” sound familiar, or, “make sure everything can be read by anyone regardless of their equipment”…. Agreed that this is the whole truth, and nothing but the truth? No? Well, didn’t think so…
(That said, the above doesn’t have to be wrong, it all depends on yours, or the clients objectives and requirements)
This is not what I will do here… I will instead try to provide a foundation of knowledge that you can apply on the site you are building, for your visitors.
So, what kind of info do I need to create great websites then?
First of all, you have to decide if the site is for fun, or if it will be a professional website. By professional I mean a site that will be used with some kind of business aspect. Either a site built for money, or a site built to make money. If it’s a professional site these things I’m going through here are next to crucial, if it’s a “for fun” site, do whatever feels right.
Either way, I’d say you need basic knowledge of a couple of things. These are a good start:
Now, hold on a sec here! Why do I need all that to make a great website? I’ve got friends that just make a site and it’s superb right away!
Ok, I hear you. Let me try to explain:
First, everyone has the right to create any site they want, with whatever design they want for themselves.
But, what you will find in here, is a normal way to approach the designing of websites in a professional, logical and businesslike fashion. It’s the real deal, not “Follow the dots and you’ll have a cool website” to show your friends…
Whether you are doing a simple ten page site or a large complicated dynamic database-driven 1000-page site, it’s an added value to you if you know why certain things will work or not, agreed? Granted, faults are a lot easier to fix on a small site, but on a large one… You might have to go all the way back to the drawingboard to fix even small problems.
I don’t even want to use “good” or “bad” in the design-context, there is working and non-working designs period! Meaning that something can be beautiful, technically superior and generally awesome, but it’s not working because you were trying to get someone to read 6000 words placed in the beautifully designed bottom left corner…
My thoughts on learning the basics first comes mainly from playing the guitar and writing songs. Sure, you can create good songs, licks and riffs without formal training, now and then… But if you don’t know anything beyond that, you have big problems once you start to recognize everything you do since you’ve done it all before. It’s the same with all sorts of design.
What I’m trying to say is that if you are aware of how a visitor looks at a page “physically”, why the eyes hooks on certain stuff, placement, color relationship, movement, how you read text, how to emphasize important areas, on the page, in the texts and so on. Then you have a knowledge for free that you would have to learn by experience otherwise, probably not even knowing that you are learning it, just “this works, this don’t work”.
The main thing is that once you know this, it allows you both to break the rules and actually semi-know how the users will react, and you will apply it by the rules when it’s needed, maybe not knowingly, but it’ll be there.
These basic principles, once forgotten, will always be with you, whether you think of it or not.
I could right off name a couple of people that really know this stuff, just take a look in the review-sections at the Asylum and here at the gurusnetwork. Some people do have an uncanny knack of finding the sore spots of sites, plus they have the ability to explain and point in the right direction. These people know what they know, and why it works, otherwise explaining and recommending would be very hard.
Then there are others that look at a site and right off can say “change A to B, then put C in the middle and it’ll work”, and they will probably be right… But as you ask them why it worked, not all can really answer that Q.
This does not make them worse designers, absolutely not!
This is the really interesting group, their knowledge comes from experience and talent, the two most valuable assets we have. Couple their ability with knowing the guidelines and take away their “guessing”, then they have knowledge, talent and experience… This is where we all would like to be, right :-)
I’ll do my very best in the following pages to provide an overview of things that can help you get there, to combine your talent with a professional approach to designing and creating websites.
Lets start analyzing what we want to do.
Let’s take a look at some things you should know before opening notepad/photoshop or your favorite site-creation-tool. This might sound like some really stupid questions, but:
1 – Why is the site being built? – Purpose
2 – Do you know who will be interested in that content? – Target group
3 – Do you know what content to present on the site? – Content
4 – Do you know how to reach the users? – Marketing
5 – Do you know how the site should work? – Requirements
When you think of it, how many sites have you seen that were no more than a nice looking interface on the first page, a cool subnavigation on the other pages, but almost no content what so ever? I’ve seen a lot. How many repeat visitors or clients will these sites get?
It all depends on why you are creating the site (the purpose).
Let’s do this: We will use a theme for these texts:
You are an aspiring webdesigner who wants work (and who doesn’t recognize him/herself here) ;), thus you have decided that you need a website to promote your business, and to show your great work in order to get clients. A promotion site called LOGO.COM.
Now we have a purpose for the site.
With this decided, we can start asking the questions listed in the beginning of this page in order to get a list of things we need to do to make this site work. To find the right content for our promotion site we have to put ourselves in the shoes of the Target group since they are the ones that are supposed to read/use the site.
So, who is the Target group then? Why, your potential clients of course!
These are the ones you need to satisfy to get their business.
So, as a potential client for a webdesign-project, I’d like to see the following things on a webdesigners site as I shop around:
(Remember, these are my opinions and only examples, it will be different for you!)
Now as we know the purpose, Target group and the content, we can start planning for Marketing, ie, how to reach the Target group.
Marketing is a series of decisions that you need to take based on a number of questions
around the Target group of your choice plus actions that needs to be done.
Some pretty basic questions to ask are these:
|Main Question||Sub Questions||Action needed for site|
|Where will the Target group search for a site of this kind?||Search engines?||- Plan to register on those you feel is most important.
– Plan for meta-tagging your pages accordingly.
|–”–||Magazines /newspapers?||- Plan on advertising in some form.|
|–”–||Word of mouth?||- Tricky, plan for spreading info to people in the Target groups business.|
|Affiliates?||Which ones?||- Can be hard if you are in a competitive field.
Try to find related sites that don’t compete directly.
Example, try to find out which printing firms that do jobs for your Target group and see if they are interested in some form of cooperation.
|Other?||Recommend this designer/page||- If you can get clients or known sites to add a “recommend this” button/link to your company it might help you.
Might not be that easy if you are new though.
Expand on these questions as you see fit, the goal is to answer the questions and to know what actions those answers lead to.Now we have some kind of answers on the following things: Purpose, Content, Target group, Marketing.
This is a very interesting and important part and essentially boils down to these points:
The reason behind this part is that you need to incorporate it into your plans before you start to design/code. Otherwise dear ‘ole Murphy will surley impose his law on you (if something can go wrong it will) some time in the future.
Let’s put the plans for our promotion site to paper.
As you have noticed, we havn’t started to code or do any visual design yet.
The first step for any team is to write down the objectives with the site, this is done in two different versions.
The intention of this document is to set down the requirements for what the site should accomplish for the owner and the business.
It can be structured somewhat like this:
Describe the purpose of the site.
Describe the Target group for the site.
Describe the content of the site.
Describe the marketing of the site.
Describe the budget (in time or money) for the site.
Describe the maintenance plan of the site.
There can be a lot more in this document, esp if you are doing this for a paying client. The client has probably (or should have) done parts of this already, if not you should definitely recommend that you do this together to get a clear view of what the site should do for the clients business.
Even if you do the site for fun, for yourself, put some time into this part anyway. It really helps you focus on what it actually is that you are creating, and more important, why!
Now, you can do this in depth, or scratch the surface, you choose according to your needs. Just make sure that you and anyone else involved understands the meaning of the document. A smart choice is to take the time once, create a template document in word that holds all the headers. Then you can start a new document for each site you do and fill it as you see is needed. Even a line “No action required.” under a heading tells you later on that you took a desicion. Also, if a client wants to know how structured you are while working… Just show them all the documentation you have on the design/production process for all your sites. If you start to work professionally for a larger firm, this practice will be very valuable for you.
:-) nice words, right… ;-)
Well, this is the really boring/tedious (insert favorite word for what you don’t want to do here…) part. A requirement specification can be just about how thick and detailed as you can possibly imagine, and then some… Just to give you an idea on the depth you can reach here, check out this template. Now, you don’t have to go that deep if you don’t have the need for all the parts.
Below is an example of the headlines I try to use in all commercial development projects where I have a say in “how to run it”.
As you see I put a lot of emphasis on the requirements, and so should you… There is a reason behind this.
Mainly for the same reasons described above on the business description, but more important, you know exactly what your requirements are to fulfill the business plan and the functionality. Plus, you have something to test against, if it’s a requirement, you should test it to make sure it’s met.
Ok, this example is big, that’s because it’s written to handle everything from a simple site to a full-blown 3-4 tier web application. You simply use what you need in there. The good thing is that you are forced to make a desicion on all the points, “Not applicable” is an excellent answer on all the object and data analisys if you are building something without heavy logic and database-storage.
Now, all of this is filled in and we now know the answers to the following question:
Now for the things that usually are closer to our creative hearts… The knowledge that makes it easier to make a beautiful, attractive and functional one-of-a-kind site for our client :-)
Onwards to the next step. How does a person view and a webpage – Eyetracking, what is it, how does it work, and what can we do about it?
Let’s use our eyes.
When you design a site you have basically two choices, make the visitor focus on the design, or on the content, this choice should be based on what you said in your business- and requirement-documents. No matter what you choose, you should be aware of how a visitor actually views your site.
Eyetracking is simply put a method used to record how a persons eyes move when they are watching something. In this context this means that the persons eyes movement are observed and recorded as they are exposed to different sorts of webpages. This way you can see how the page is observed, where the eyes stop and focus, where they just browse over portions of the page and so on.
This is done on a lot of subjects with a chosen set of websites and often combined with different kinds of useability tests. The results are then put together and a base for statistics are created.
One way of getting an idea of how it works in everyday life, is to open a book and start to read, now stop. Where did you begin?
Yup, top left corner (that beeing true if you are in the western world, those parts of the world where they read from right to left will not be covered here…). Now why should you expect anything different from your visitors? They will, if you don’t attract their attention, without knowing it start in the top left corner. Now where do they go next? Back to the book (you, not the visitors…). The next thing you do if you havn’t read the book before is to quickly browse the page. This you do diagonally, from top left to bottom right, then bottom right back up to center It’s not until after these two actions that you actually start to read the text, like this:
How the eye scans a webpage
What we actually are doing on the first browse, is to identify the elements on the page. Now, studies show that nearly 80% hooks on text elements, not graphics which is quite interesting to a webdesigner…
If we apply this knowledge of how the first browse of a webpage works, we can use it in two ways. Either we follow this scanning pattern and place our elements on the page accordingly to the initial eye scan and our own priority of the elements. This ordinarily results in this:
A very traditional design structure
Now, where have we seen this pattern before… Exciting right? ;-) Maybe not, but it’s definitely a working design structure and well suited for structuring a lot of content. Just take a look at any news-site and you’ll see. It is also very useable for two reasons, the elements flow naturally and it is familiar to the user, simply because they recognise it and knows how to use it.
Of course you can change this if you want. One factor that you should consider is how you want to prioritize the elements on the page, if you for instance want to place less focus on the navigation, you can place it on the right of the content.
You should be a bit careful with this though, it works fine if you have a clean design where the elements stand out by themselves. If the design is busy, with a lot of similar elements it might not work as well.
Well, we can use this knowledge on eyetracking and take it a step further.
Ask yourself this: What attracts my eyes as I watch a site for the first time? I place a sure bet here and state that there is three things that catches your eye, Text, movement and color-contrasts.
Another opinion? Fine, place it in the corner over there, I’m the one talking here… ;-) Just kidding, there is a lot of theories on this, and you can use an absurd amount of time reading, and reading, and reading without designing one single page.
What can we do to break the pattern then if we don’t want to make the text blink? If we have gotten so far as to getting the visitor aware that there actually is text on the page, and that we want them to read it, we must now show them what to read…
Otherwise they will read the text the same way as they browsed the page, a quick scan to identify the elements of the text. If you can’t break that browse pattern in the text block, the visitor will probably miss up to 50% of the content, maybe even more. Again, studies show that users hook on informative headlines and read the text only if they find the headline interesting.
Browsing a text and missing 50% of it
Usually we work with contrasts or something else that breaks the natural pattern of the eyes to help the visitor se what we feel is important. Contrast can be achieved in several ways. Most often, it is done by using contrasting colors. That, however, is not a very good idea to use in blocks of text.
Three things are very important here.
<h1></h1> to <h6></h6> works wonders to catch the reader’s eyes, use them as intended. <h1> is for the most important text and <h6> is for the least important text. This also helps the visitors with disabilities since their “webreaders” can read the headings as intended.
As you see in these texts I try to use the <p> and </p> tags a lot. This is because they create “air” above and below the paragraphs. This makes it a lot easier to take in the texts if it’s used correctly. Give the reader’s eyes room to breathe once in a while ;-).
Once inside a paragraph we can use emphasized text <em></em>, bold text <strong></strong>, to create focus points for the eye to catch on. Used effectively, these small tags can really help your visitor focus on the important parts of the texts, not to mention that they help the vision-impaired to “hear” your site since these tags can be interpreted by the web-reading program.
Unfortunately, studies show that users rarley read more than 75% of the content, even when they are reading actively (an interesting article for example) on the web. This makes it very important to “help” them focus on the important things you want to say.
Let’s take this unformatted selling text as an example:
…this way our company Logo.com offer you unlimited knowledge and expertice from our highly trained employees. Our people will devote 110% attention to your project and will help you run it accordingly to all established project-models, guaranteeing both success to your project as well as lifelong prosperity and wealth beyond your dreams to you. Please call 555-667788 or contact us via e-mail at firstname.lastname@example.org We look forward to hearing from you.
Now what’s the message in that text? What about this;
Now, let’s work a bit on the formatting… The very same text:
…this way our company Logo.com offers you unlimited knowledge and expertice from our highly trained employees. Our people will devote 110% attention to your project and will help you run it accordingly to all established project-models, guaranteeing both success to your project as well as lifelong prosperity and wealth beyond your dreams to you.
Please call 555-667788 or contact us via e-mail at email@example.com
We look forward to hearing from you.
Does the message come across better now?
Granted, this is a bit extreme, but you get the idea. Be careful though and don’t overdo it as I did above, it’ll only make you sound like tv-shopping, and we don’t want that, do we ;). A tip is to combine the formatting with careful phrasing, aiming to place the keywords in the natural line of reading. This part is easier to do in print where you don’t have “fluid” text, but it’s well worth some extra thought when you write your content.
Another thing to think of is the width of your texts. The thing most designers are moving towards is liquid design. If that’s a new term, think about it as a site that lets text and other elements reposition on the page as you resize the browser. These things can for example be made in tables with a mix of fixed and percentage width, or a pure css-based design. The common thing is that they usually let the content flow dynamically to fill the “content area”. This can be a very good thing if used with a thought behind it, as all good things there is a downside as well if used without thought.
I’m back to the good ‘ole readability…
What’s easiest, to read a text with a width of appr a single page in a regular pocket book, or a text that stretches almost to infinity from right to left? The one not so wide, right?
How wide is too wide then? Well, there is a suggestion based on a formula that has been in use for a long time in various situations.
“The golden mean” or “Fi” The exact formula is: “Fi = (SQR(5)-1)/2″ this is appr 0.618 or in short 5/8.
What does this have to do with webdesign??? If we apply this to a webpage and divide it into 8′ths, there will be 4 points at 5/8 from the edges. These are the natural focus points for the eye on a blank page.
The green points are the natural focus-points based on the Goldenmean, the light blue is the absolute center point of the page.If we keep texts inside these corners in a “normal” resolution we will get texts that are appr 400px wide. This usually makes for easy reading without making the eyes tired.
This is very important! If you go through all these points regarding text and eye-catchers, please, please check your texts for spelling as well as for grammatical errors. There is nothing that can bring a professional site down as fast as lousy spelling and improper use of grammar. It’s simply not professional, not at all. If you are unsure on your own spelling and grammar, seek help from someone who has experience from writing. Believe me, it’s worth it.
Now, what do we have so far? Let’s summarize it:
We also have a grasp on how the visitors eye scans a webpage and how that works with placement of elements on the page (design structure) as well as an idea on how to treat the content to make the visitors hook onto the parts that we feel is important.
Great, now we know a lot, there’s something missing here though… Yup, colors! How do they work and how can I use them?
Onwards then to the beautiful land of color :)
Let’s refresh our memory, remember this beautiful and inspiring design we have so far for our promotion site? This is what we are going to work with to do some examples on using colors in design.
The elements on this page is placed based on the natural flow of the eye as it sees the page for the first time. Why am I following the natural flow of the eyes in the placement of the elements? This is based on two reasons, first I want to give the user a layout that he/she is used to and this layout is very common and easy to navigate. Second, I consider the logo most important since I want to imprint the logo in the visitor’s memory (this is one very small part of a complex technique called branding), next I want them to find the navigation so they can quickly find what’s on the site, then the actual message, the content.
Now, let’s add some colors to this, just as an example on how we can use contrast to create focus points on the page.
What part of this stands out from the rest? The main textarea.
Another example? Navigation maybe… and the logo…
You get the idea, contrast works to emphasize elements on your page. Now, to get further on this, we really need some more information on how colors work together. I really recommend that you take a brief foray here: http://www.webwhirlers.com/colors/
to read up from someone that knows this aspect of the web really well.
http://www.webwhirlers.com/colors/ site also provides you with a quite useful wizard, you input one hexcode and you get a selection of colors that are calculated to harmonize with your base color. This is how it turned out when I input “9999CC” which is the blue color in the example above.
This blue color will also be the primary color for the coming examples.
Why? I’ve choosen blue for a reason, blue often gives the visitor an impression of seriousness, dependability and professionality, all good things for a promotion site like ours.
|Tint and shade||#bfbfff|
Wow… there is a lot to choose from in this selection… What must we consider when we choose from a selection like this? First and foremost, these colors are not the only colors you are allowed to use! They are calculated from the base color you start with. Feel free to use other variations than those you get from the wizard, what you get is however very useful as a starting point.
Before anything else you should consider this: “- If the site should exist, it should be useable, if it is useable, you can make it beautiful, but not before -“. This ties together very well with the use of colors to improve useability and to make the site more attractive at the same time. When you choose colors to go with your base color you should think about where on the site you will use them. Ideally every spot of color should have some kind of purpose connected to visual useability. One important thing to consider is patterns…
The human eye always searches for patterns, it may be geometrical patterns or color patterns or structural patterns. Even if there is none to find the brain tries to create a pattern.
Let’s help the poor visitors brain a bit and create some patterns for it to find. What is a pattern then? A pattern is in its simplest form this: What looks alike belongs together, and what is grouped together belongs together…
Take a look at this example for the navigation section:
A navigation section for the site.
You can quite clearly see that this is two different kinds of buttons since the form is similar, but the color shade is different. You have a pattern in form, and a similarity in color for the brain to work with.
The next part in our promotion site is to reserve some space for related information, or links. This is part of the content, but we want to separate it a bit from the content to help the eye see that it’s connected but still different. These two parts need to provide a nice, mild contrast to the texts to preserve readability. I’ve chosen white as the background color for the main content texts. White works just about everywhere without creating disturbing clashes with other colors. For the reference area I choose a color from the “Saturation variations”, slightly lighter than the lightest grey provided. This is because I want this section to separate itself a bit from the main content section, yet it should retain a close similarity with the content section because it’s closely related to the content. Remember; “What looks alike belongs together and what’s grouped together belongs together.”
For the texts I choose black for the main texts and a split complementary green for the main heading. This gives good readability, plus the green heading offers extra contrast for the eye to hook on. For the reference info I choose a brown color, also from the split complementary colors, for the links, the same color as the internal/external sections. This gives a decent contrast at the same time as it clearly separates the info links from the other material on the site.
Here are two examples, one with a section for internal reference info and links, and one for external reference info and links. Can you see the similarity with the navigation above?
One thing left, the top section or the “header”.
Since we want to imprint the logo and a slogan into the visitors memory, we need to make it stand out from the main colors of the site. Remember that contrast is a powerful tool to make things stand out? Yet again I don’t want it to scream to the visitor. Here is the beautiful header I made one just for you ;-) (this is just so we have something to work with here).
A header to remember… ;-)
It’s not a very beautiful header, but the logo color picks up on the color used for the main headings in the texts, thus creating a visual similarity that helps the visitors connect the logo with the descriptive and catching headings in the text and the slogan picks up on both the colors and the placement of the reference section.Let’s put the pieces together. As you can see the elements are still placed in the natural flow of the eyes, this since my priorities for each element matches the natural flow of the eye. Then I’ve used contrasting colors to emphasize the placement and to create patterns for the brain to connect the different elements correctly.
This is how it turned out:
A first simple play with colors
Now you may or may not like this color combination, however, this example shows how you can use colors in a controlled fashion to make different elements stand out from each other, and to connect different elements. The navigation area and text area are separated from the rest of the areas of the site. The logo uses a color that contrasts nicely from the primary color.Why am I working so much with “split complementary” color to create contrasts? If you read up on webwhirlers ZOX explains it very well:“The complementary colours are contrasting and stands out against each other. Often it is a good idea to use a complementary colour as the highlight color”, and: “Using split complementary colours can give you a design with a high degree of contrast, yet still not as extreme as a real complementary color. It also results in greater harmony than the use of the direct complementary”. This just happens to be what I’m after here, a cool professional impression that doesn’t scream at the visitor.
What this design desperatley needs now, is well crafted graphics to make it beautiful… That’s someting I’ll leave up to you.
This principle can also be used to influence how the eyes flow over a page, if you want to place the navigation or the logo in a place that is not in the natural flow, you can use contrasting colors to attract the eye to that spot. The best way to work with this is to experiment, keeping in mind what you are doing, and what effect you want to get out of it.
Remember though, this is by no means easy, my guess is that more often than not this can make a page look wierd, on the other hand, if all the elements work toghether, it just might work perfectly. After all, we all have seen these great sites that seem to break every rule in the book ;-)
The next part on colors is a quick tip on what to do if you are redesigning and have an obligation to the client to keep a certain colorscheme. The first thing I do is to sample the site to find the colors that are used today. One quick and dirty way of doing tis is to take a screenshot, paste it into PhotoShop, select Save for web, and no loss gif (but don’t save it, it’s the pallette we are after). Then take a screenshot of that, cut out the pallette and there it is… All the colors that are in use on the site (all 256 that is). Next step is to select primary and seconday colors from this selection, which ones is depending on the client’s requirements. Feed these colors into the color wizard and take it from there to get a selection to work with. Play along these lines and aim to find a color combination that is restful for the eyes, yet has good readability for texts. Once you find one combination that works, use that as a base for all main texts, use another variation of that color, similar but with more contrast for headings and finally a different but not eye-jarring color for links.
As you see by now, the use of colors, patterns and placement of elements is a science in itself and quite impossible to cover completly in a tutorial like this. Just take a look at this link for deeper information on patterns:
This is an interesting article on websafe colors and how they work: http://hotwired.lycos.com/webmonkey/00/37/index2a.html?tw=design
Here are three links to examples on how font-sizes and colors work on different backgrounds:
Hopefully this part have given you enough info on the basics to get an understanding on how colors, patterns and placement goes together to be able to use it in your next design.
Now, onwards then to a completely different topic, structuring a site, its content and what kind of coding should I use to make my design into a real site.
Well, I have a pretty strong thing about structure, esp when it comes to finding content of any kind that I need.
Imagine this: You drop into a site that has all the right search criteria, it’s an inviting frontpage that seems to cover coding navigation, designing websites, doing graphics, superb! So you dive in, looking for smart navigation solutions. You find a lead article some where inside the site, under web design that seems right, read a bit on it, and what’s that, a link in the middle of the text that seems like it will give you more info, great! Click, now where are you, in the middle of another article, discussing a navigation system, cool, read on, wait, this doesn’t seem like the same navigation system… nope, they are talking about the graphics in the navigation of a clients site, I must have ended up in the portfolio section, ok… Take a look at the sites own navigation, is there a section on navigation, nope… There is prices, portfolio, logos, web sites and the good ole’ about, hm, now what?
Do you see my point? There is a reason for structuring content and presenting that structure for the visitor. If you have a a large site with a lot of content in a lot of areas you should definitely take a good look on what content you have and how you are going to structure it.
To better understand the need for a well defined target group and to structure the content for that group we’ll use this example, a normal conversation.
As you start up a conversation with someone you know, you are aware of a lot of the “baggage” (experience) that this peron carries around with him. This baggage acts like a filter that interprets what you say, matches the perceived message with the receiver’s experiences/knowledge to finally land in the brain as a message adjusted to a form that the reciever can relate to and work with. This means that what you say/mean, isn’t nessecarily what the reciever actually hears. This works the other way as well, what you say and hear, is filtered by your knowledge and experience, thus altering incoming and outgoing messages according to your “baggage”. Leaving things “unsaid” can work if your “baggage” and the recievers are very similar, but not if your backgrounds differ a lot. Knowledge of the recievers “baggage” allows you to adjust your message in a way that ensures that it is recieved close to the way you want it to be recieved.
If you don’t know the recipient, your need for a very clear message is much larger since you don’t really know how it will be interpreted by the recipient. This is why a conversation between two persons that have no prior relationship usually start out with a series of information exchanges in order to find out what they have in common, this way you gather information about each other that helps you to get your messages across the way you want. In a normal conversation this goes automatically, plus you have the ability to adjust your message based on the recipients response, both visual and aural, thus learning how to make yourself understood the way you want. Now imagine doing all this without being able to ask questions, or not even being able to see or hear your recipients responses…
Welcome to the web!
The secret here is to adapt your message to a group of people that share a common baggage, your Target group. Once you decide who you are reaching out to, find out as much as possible about that group in order to speak a language this group understands and can relate to.
The message “Buy your website from us because…” to a decision maker of a corporation has to be formulated quite differently from the same message sent to a technichan at the IT-department. This is because the decision maker most likely has an economical background and his experience tells him that what ever he buys has to give a return on the investment within a certain time. This is one part of his baggage that you will have to adapt your message to. The technician on the other hand, will probably base his decision on other factors, things such as your technical skills, your knowledge of their technical enviroment, your ability to deliver working solutions and support on time and so on.
Marketing on the other hand, will be looking for your marketingskills, track record of similar projects, things that can help the corporation sell their own products/services in a better way. Finance will be looking for your financial stability to establish if you can be considered a long term and trustworthy service supplier.
One big problem for you here is the fact that your site might be found by anyone of these recipients and passed on to another for their opinion. This means that you need to cater for all of them in one way or another. Obviously you can’t use the same message to convince all of these that they should choose you instead of another firm. Starting to see why content is really important here ;-)
Based on this, one of your best bets is to take this into consideration as you structure your content for navigation. Create different areas within the same section that holds the information needed for each one involved in the desicion process. Make these areas really easy to find! If you name the section and areas in a logical way, all the different prospects within your target group can find the information they need to base a desicion on. If the information fills their needs, the chance of them giving you a fair shot at the contract is a lot bigger than if they only find part of what they need.
A good place to start is the skills and services section of our webdesigner promotion site.
So, this one, “Services” will probably run down to something like this:
The next one?
Well, Portfolio is one… Same approach and the same headings!:
It does work, right? Now, Prices…
Tools of the trade?
Now this is starting to look very similar to something… yup, you got it, navigation!
This is exactly what navigation really is about, present a structured way of accessing the content the visitor wants. No more, no less. To make it easier to find this kind of connection between content, you can organize all your content (as postit-notes) on a wall, as a site-map.
This will give you a good hint on the structure of the site based on the actual content.
Once you have shown the visitor the correct content you should structure that cantent as well. This can be done very effectively by using headlines in a thought out fashion. This is often called “outlining”. The simplest way is to make sure the headlines in your content tells a story by themselves. Quite simply, if you read only the headlines on the page you should see what the page as well as waht each paragraph is about. This gives the visitor a fast and exellent overview on what’s on the page. This really increases the will to actually read the content on your page.
When it comes to the whole sites structure there are seven basic structures to choose from:
|Linear||These tutorials here on GN are perfect examples of linear site structure. A linear approach is most often usen when something needs to be read in a special sequence, for example instructions of some kind.||Remember to always give the visitor links forward and back at least one step as well as to the beginning.|
|Hierarchical||This is the most common structure on the web. Think of it as a tree upside down. You have one access point, the root-page, this then branches out in different main branches that in turn have smaller branches. Remember that being common isn’t always the same as being the best. This way you can force a visitor through a lot of clicks to get to the next place.||Strive to always give the visitor a way to see where he is in relation to the root page, this helps to navigate the site.|
|Network||A network structure is very special, it’s not flat, and it’s not hierarchical. All the pages are grouped and linked to another only based on the site owners whishes. Every network structure is different, thus very hard to exemplify or explain to a visitor.||Very important here is to think about how you group and link things, it’s very easy to lead the visitor into a dead-end page with no back link.|
|Matrix||A matrix structure can be exemplified by an Excel spreadsheet. You have reference points at the top and at the side, where the points meet you place content or links. Sites that use one horizontal navigation for main areas and a changing vertical navigation for each area are using a variation of the matrix structure. This is also useful for navigating lots of small bits of content, research material for example.||Strive to always give the visitor a way to see where he is in relation to the current area/section/cathegory as well as the root.|
|Paralel||Paralel structure is quite simply where you present different kind of information at the same time. The most common example is the use of pop-up windows. To find useful examples of this today is quite hard. The common misuse of this today is to open windows to present meaningless information or advertising. Useful Paralel structure is when you surf and open a link in a new window to keep the old content visible, in a search engine for example. Good use is also to open external links from your site in a new window to keep the users on your site.||Use this only if you have a practical use for it, meaning that is should add something to the visitors experience. Normally a visitor wants to keep control over his surfing.|
|Zoom||Zoom, or Spatial structure is a way to let the visitor dive deeper to get more detailed information of a subject. Thumbnail pictures that are linked to a fullsize image is one example, a linked word in text that leads to deeper information is another, a multilevel DHTML-menu is yet another. This is very common on the web.||This might not be very useful for a whole site unless it is very specialized. However as part of a site, a gallery, news-snippets or similar, it can be practically indispensible.|
Now, which one is right for our promotion site?
Let’s go back to the page example we created earlier and take a look…
In this page we are actually using a combination of different structures.
On the left the menu is built using a “Layer”-structure” to create a “Spatial”-structure.
The content-area uses “Paralel” structure to present two different kinds of content at the same time.
This gives us one nice practical effect, we could in fact create the whole site from one template if we store the content in a database and use some serverside scripting to decide when what content should be shown.
In short, you don’t have to restrict yourself to one kind of structure for the site. You can (and probably should) use different types of structure for different sections of your site.
As you see, this part is also a very dense topic that I have touched the main areas of. Structure is important, to you and to your visitors. The clearer you are to them, the more use will they get out of your site and they are more apt to return as any satisfied customer.
As we have touched content structuring and the effect on the the navigation it’s probably time to present an overview of what kind of stuff we can use to create the actual site, all that coding…
Coding is a very, very big topic to cover (just as most of the things I’ve covered so far) so I’ll keep it very basic, what different sorts of coding are there, and when do I use them?
I’ll also give you some tips on how to get the skills you need for your projects.
The web is absolutely full of all kinds of Acronyms and abbrevations so let’s list some:
So, what are these acronyms, and better yet, what are they for?
For a complete listing of the acronyms above and their meaning: Click Me
Did you read all of that? :-)
It’s not really necessary if you know it already, or don’t feel the need for it right now. It’s a lot of info, but it’s still just scratching the surface.
Basically, you can use code in three different ways:
It all depends on what you want to be able to do! If you just want to write a diary for yourself, or create a family album and place it on the web, all you really need is some kind of simple “I will write the html for you” editor, heck, you could even do it with MS Word (shudder)…
However, since you have gotten this far in a tutorial of this kind, both you and I know that Word won’t get you very far. So, the one thing you absolutely need to know by heart is HTML. Yes, I mean really know it, preferrably so well that you can write a whole site in HTML on paper.
This takes me to the part on the clients and projects and how to get the skills you need.
This is even simpler… They do not know what to demand other than the functionality they need.
A lot of times they will point you to a site they have seen and say “That menu is cool, I want one of those on the site” or “I want the customers to be able to order our products from our backend system, plus they should get a bill from our finance system automatically”, then it’s totally up to you do decide what’s best for the task..
This is the reason it might be a great idea with some specialisation. That way you can have a superb graphical designer, a client-guru and a serverside god on your side to cover all kinds of client ideas.
This also gives you the ability to work on more than one project at the same time, in an organized fashion.
In the beginning of a company startup it’s really hard to employ people and land projects that pay enough for more than one person. One thing to consider is to try to find other one-person companies that have the skill that you lack. That way you can buy or trade bits of each others projects between each other.
This is also common practice in larger companies when the sales people land a project that you don’t have the resources to manage. You temporarily hire talent for the tasks you can’t handle. If you have an established relation with another local firm it’s easy to calculate the extra cost for the coding you can’t do yourself and add that to the cost estimate of the project.
This part is one that have been asked countless times. What should I charge, and how long should it take… Sorry to dissapoint you here, but there are no clear cut magic answers to this.
Your best tool in these “guesstimates” can be found on page 2 and 3 in this tutorial. Yes, it’s the planning and the business-/requirement-specifications I’m talking about. If you use these documents, and have some experience in the skill-areas you offer, you have a better than fair chance of getting a cost and time estimate correct. Every thing you have to do are in these documents if you have done it correctly, and if it’s your 4th or 5th documented project you’ll also have the answers to your earlier estimates to compare with.
While some of these parts go outside “design” in the traditional sense and goes into project management, they are very important when it comes to producing designs of all kinds. However good and talented you may be, you will not be able to handle all types of coding situations for all your clients at the same time. To master all and every one of the Acronyms listed above deeply enough to be able to offer a full-service company based on one person is simply not realistic.
Based on this, I strongly recommend that you take a good look at what skills you are best at. Then decide what areas you yourself can add to your main skills. Then, if you find that you lack some skill that your clients will ask for, look for someone to team up with.
The next part will take us straight back to the core of site design, some pointers on engines .
Before I write anything else here, you should know that this part is a full time occupation to keep up with, the way search engines work change all the time as the quest for rank provides different kinds of methods to gain a place or two through, let’s say, “creative use” of tricks and spamming.
This means that things you find here might work today, but not tomorrow, but hey, that’s part of the charm, right ;-) Ok, lets dive in then:
The very first thing you should do is to make it possible for a search engines tools to find your site (pretty logical, right ;). This is best done by registering your site by hand. Sure, there is a lot of auto submitters available, but they cannot give an accurate enough registering on all the search engines they say. Let’s put it this way: To keep their promises, the provider of product A that offers auto submit to 4.000 search engines has to research these 4000 submit forms at least once a month to see if the process has changed. 4000 divided with 30 equals 134 checks per day, that sums it up to 16.75 submit forms per hour. And these programs/services are free… When do these people eat and sleep?
Ok, once you have submitted your site, what happens next?
Sometime in the not so close future (yes, it will take time) the search engine will send a little program to your site to do some checking, these programs are called Spiders or Robots. What they do is essentially to check the content of your site against a set of rules they have and report the result back to the “mother ship” that compares the result with what’s in their database. Depending on what the spider finds, your site is ranked. Exacly how the ranking system works is pretty closely held info by the search engines. This is to avoid abuse of the rules as much as possible.
So what are the spiders looking for? What do you need to provide to get a decent rank?
This is not an easy question to answer, the absolutely best advice is to first of all play by their rules, you will be punished/banned/thrown out/demoted in ranks sooner or later if you try to trick them, remember that. Information on what the search engines spiders will frown upon can usually be found somewhere around the site submission form of the search engine. this information will probably be different for each search engine, so I’m afraid you’ll have to go after it yourself in the search engines you plan to use.
However, there is some stuff we can work with to our advantage:
Things to be careful with is:
Metatags are the tags you find at the top of your code, usually below <html> and <title>.
Common ones are:
How to use these? Well, it’s not that hard :-) The name tells the spider what to expect, the content tells the spider what to “read”, in the examples above you can use them some thing like this:
As you fill these meta tags, try your best to make it fit with the content of your site, yup, spiders will most probably compare the content of the metatags with the actual text of the page, meaning that once again, splash pages are no good even if you fill them up with metatags, there is usually no content to compare with on a splash. A big no-no is “adult words” and profanity that can make a spider to stop and leave, these are called “stop words”.
This takes me to the text and the use of correct html, the more structure there is the better, use <h1><h2><h3> to tell the spiders in what order to prioritize your content, don’t create graphics of all your headings and make sure the texts comes close to the top of the code for spiders to “read”. They might carry a parameter that says “on first visit read only the 75 first lines” if there is no content there, you are up the proverbial creek without a paddle, they might not even come back since there was nothing to remember… Many engines try to ignore peripheral HTML blocks, especially if they’re heavy on links, and head straight for the center. It’s not too difficult for them to do. They simply look for the largest title (within <h> tags) on the page and assume that whatever follows that is the most important text area.
There should not be an image connected to the content that exists without a descriptive alt-text! How will a robot know where your beautiful image based navigation will lead if you don’t have alt tags? The robot cannot read images. This is not only important to the robots, it’s a big deal when it comes to accessability for the same reason. A webreader is actually based on a robot that reads the page out loud.
Filenames and directories are read and used as a parameter as well, if your structure looks like this:
You won’t get any points compared to:
If you want to make life easier for a spider to find what you think is important, you can use a robots.txt file. This is placed in the root of the site and is used to tell a spider what to exclude in their indexing, an example can look like this:
In this case you’ve told all spiders to ignore the folders “images”, “cgi-bin”, “status” and all html files named “bookmarks…something”. This saves time for the spider and allows it to use the time on the stuff that counts. A lot more info can be found at http://www.robotstxt.org/wc/robots.html
Some hate them, some love them, spiders however, are machines and they don’t feel a thing about them… They treat the actual frameset page as any other first page they find, subsequently they look for the same stuff as they expect on a singular page. We humans however tend to place our content on the page that the visitor actually sees, which in this case isn’t the frameset page… Solution: Place the metatags in the head of the frameset page, use the <noframe> tag to enclose content that relates to the meatatags. This way the spider has a chance to understand what it actually is seeing.
Database driven pages, these are hard for a spider to work with. Let’s ponder a bit on what a dynamic page is. I’ll state this, in most cases a dynamic page is a script on the server that can be reached through a filename, to the filename you can add parameters that tells the script what to deliver to the browser, (query-strings) they look like this:” page.php?id=1&language=eng” this page does not exist yet, as the script recieves the parameters “id” and “language” it knows that it should create html code for a page based on content with id “1″ and language “eng”.
How would a spider understand this? The simple answer is that in general spiders can’t manage this. They request pages with incomplete URLs missing query string elements, the server sends back a request for more information to complete the URL, which the spider can’t understand, and in worst case, the request turns into a dangerous loop. Usually these kind of pages are simply ignored by spiders. You basically have two options to handle this, you can use a mix between static and dynamic pages which leaves something for the spiders to work on, or you can code a solution for this on the server. This part is largely untested by me, and better left to a more extensive tutorial on the subject.
Now, as you’ve done it all above, now your site will soar to the top of the ranks in a week or two, right?
Sorry to burst your bubble, as I started with saying “this part is a full time occupation to keep up with” I did not only mean the tech stuff… Unfortunately this goes for getting onto the lists and staying there as well. You might need to resubmit a couple of times as you see your site disappear, it’s probably a check on whether you are serious or not. All in all it can take up to 6 months to a year to get full effect out of active search engine strategy. In this strategy updating content is important! An active site that fills all the criteria for the search is more intersting both to visitors and search enginens compared to a correct but 3 month old site. As all nice things in the cupboard content goes stale.
This is how deep I’m going into the world of search engines, this stuff really deservers a full scale tutorial by itself, we’ll see, it might turn up later. Until then, you can drop in http://www.searchenginewatch.com/ to get a lot more info.
Now, we know a lot of the basic stuff by now behind a design process, let’s take a quick look at the design tools.
This is dangerous ground I’m walking on here… This section is almost as hot to the touch as the browser and platform war that rages on the net, but what the heck, let’s touch it anyways :-)
As you know a lot by now it’s about time for the question, can I do the actual site now… please… Of course you can, pick out the best design tool and get started, what? You want to know what’s the best design tool is? Ok, don’t blame me, you asked…
The best design tool is not PhotoShop or Gimp for graphics, it’s not Notepad or VI for code… It’s you and your knowledge, experience and will that does the design, not program A or B! Almost any graphics program can be used as a good tool to make graphics for a webpage, or Dreamweaver, Notepad, Homesite, HTML_Beauty, even Front Page can do it! It’s your knowledge about the tool that makes it work.
Granted, there are differences between programs, of course some are better than others, but the basic thing to remember, it’s not the tool that makes the site, it’s you.
That said, I’m going to stick with the tools of the trade that I have encounterd for coding here.
There are basically three different sorts of editors that you use for coding basic websites today, its the bare bones texteditor that offers nothing else than the ability to handwrite every single character on your page. Example #1 is probably Notepad.
The next step is the editors that assume you are going to write the main portion of the code yourself, but they want to offer you functionality that you may or may not want to use, examples of this is color coding, project management, ftp, shortcuts to common tags and so on. Examples in this section is mr.Max HTML_Beauty, Allaires Homesite, Microsofts Interdev, CoffeCup and many many more.
Then you have the third section that people seem to either hate or love, the WYSIWYG editors (WhatYouSeeIsWhatYouGet). These do most of the coding for you, quite similar to word or any other wordprocessor.
What are the main pros and cons with these types of editors then?
You can probably fill in a lot more here depending on your preferences, but this is my general view on this.
Pretty much all sorts with all editors… That’s stretching it, I know. If you are creating a site that uses a database and lots of serverside code you will be limited by most wysiwyg editors. Some can do it, in a way, but not in all languages by far.
A dedicated code editor will allow you full freedom to code whatever language you please, to test/preview it you will probably need some extra components. For serverside stuff you need a webserver configured to run the language you are coding in, perhaps a database as well. The same goes for a plain texteditor, there are no limits built in in that one.
As for additional tools what ever way you choose above, a must is the three/four major browsers to use for a testbed. Microsoft Explorer 4, 5, 5.5 or 6 (That’s what average Joe will use to see your site) Netscape 4.x to see what happens in an older non standard browser (a lot of companies still holds this on policy reasons), Netscape 6.x or Mozilla for the Microsoft haters and AOL users out there, and finally Opera 5 or 6 to complete the list of major browsers.
Take it as a regular practice to test in all of these browsers, even if you target just one of them. You should be aware of how your site looks in each and every one, because it will be different, trust me… Personally I also try to test in Netscape 3, just to see what happens, but that’s me.
Is there a “best” tool? No, there are tools that are more or less suitable for the task you are about to perform, as simple as that. What you will use is up to you, what is important is that you know your tool, what it’s good at, and what it’s bad at. combine that with you knowing exactly what you are going to do, and how, it will be hard to fail.
So, should we try to sum it up? I’ll end of with a general view on how a site can work and feel, including some examples.
In my opinion there are only three types of sites on the web! My reasoning here is based on the thesis that you either want to share knowledge in the form of textual information or, you want to show your skills in other areas than in form of the written word. In this I won’t put any value on whether one is better than the other, it’s simply two different messages that you need to pass along to the visitor in the best possible way.
The content (texts) is without a doubt the most important thing if you want the site to keep visitors.
To get the content across, you need structure! Well written texts are simply not enough. I’ve said it before, and I’ll say it again, structure, work with it, it really is your friend :-)
As you find the content-structure good, surf the big successful content/tutorial-sites and draw from their experience for visual layout. I think you might find that impressive design isn’t very important in those sites, their priority lies in clear concise presentation of valuable information. Check www.devshed.com , www.webmonkey.com , www.htmlgoodies.com , www.php.net and sites like that for examples.
Cool designs attracts first time visitors and give a “wow” feeling, it doesn’t by itself attract repeat visitors to a great degree.
What you might want to think about here is that, while you want to show off all your skills and in general “WOW” the visitor, you don’t want to steamroll right over them! Give them a chance to breath between experiences. Yup, I’m back at structuring your content :-) In this case your content is the demonstration of your skills.
An example, you don’t want to show your beautiful photoshop work using your coolest DHTML-script that slides the images all over the screen. What’s the visitor going to be dazzled by, the images or the coding skills?
Organize it for the visitor, and yes, this is one area that you will be appreciated for “thinking for the visitor”…
One nice example here is of course www.ozones.com that no one should miss… There are lots of them out there, but I won’t mention any more here since “dazzling” is such a subjective thing that my opinion really only matters to me.
Cool design + lots of content can be great OR absolutely disastrous… Great if the design doesn’t distract from the purpose of the content. Example, if you go to www.teamphotoshop.com or www.gurusnetwork.com and click into a tutorial, you’ll see that once you are “inside” the tut, there’s very few flashy design-elements to distract from the tutorial, there are short, easy to read texts, clear illustrations and it’s served with a nice mild contrast for the eyes.
If the designers had used the same design as on the frontpage, you would have distracting links, buttons, layers that would have been “in the way” for the purpose of the page. Those things belong on a front page where you want to give access in a nice/cool way to contentareas.
Boring design + content might work, it’s ok as long as the content isn’t design related (tutorials and stuff) but intended to be a quick reference library (just take a look at www.google.com), the last thing you want in a library is bells ‘n whistles going off everywhere while you’re trying to read… But it the design is boring and the content isn’t “good” enough you won’t keep your visitors.
I can’t see one answer that’s “best”, the hard (and important) thing is to:
Personally I think that content wins over design in 98% of the cases. But that’s me. Steve here at the GN put the companionship between design and content in words in a way that I can’t get close to: “ideally the two should be inextricably interwoven like threads in a fabric – the whole garment falls apart without one or the other“
As you have gone through this process and all the work resulted in a promotion site for the new web-design company. How do you release it, well, follow your marketing plan that you made in the first pages (you did make one, didn’t you…). That’s rude, I know, but it’s intentional, If you follow this process and touch the different steps, you will know what to do next… And that is the last point, the workplan, the process of a complete planned and thought through design.
Ok, to sum it up, we have now covered these points in different depth through the tutorial:
And that’s it for this time, thank you for your time spent reading this, I hope you found it useful.
Written by DmS from www.dmsproject.com
All the free vectors from WDB - Garcya.us downloaded as a regular member are available for personal use only!