Web-site designing Pillars (part1)
| Category: Website Design and Development | Date: 2003-10-30 |
It is a hot opinion that "it’s the words that sell, not a design" and that "you should invest all your money into writing a good sales copy and what is left (if anything) into web-site". I can give you 99 out of 100 that authors of these claims are copywriters, web-designers usually don’t write articles. It is like asking football player what game he enjoys more: football or hockey? :0)
I don’t want to argue that statement about the importance of copywriting, on the contrary, I think that it is totally true, but under one condition – your Web-Site (WS hereafter) is already implied to make your visitors feel, at least, comfortable.
It could never be counted, how many times I closed down the browser without reading a single word, just because of the amateurish and clumsy look those WSs had.
No need to emphasize on importance of the professional WS. It is obvious, at the same time you won’t read there, that web-design is everything and that professional sales letter or text message is nothing, because it is like answering the question – what is better to have skin or heart cancer? To my mind, it is better to be totally healthy.
Business WS usually plays the role of virtual office, shop, informational dep., marketing dep. and service dep. It is a main representative and the core of your business – the final proof, the image of your company is based on.
-----What it is all about-----
The target is set – to make your WS as good as it can possibly be. Here I pointed the crucial pillars of designing a professional looking WS. You will not find there basic HTML teaching or how to use particular web-editor. The knowledge of HTML will help, but is not compulsory, as WYSIWYG (What You See Is What You Get) editors will make all HTML coding work “behind the scene” for you.
You require general understanding of what HTML is and ability to use one or several WYSIWYG web-editors, that is three hour learning process. The feeling of style and taste is also advisable; otherwise you will have to consult a designer.
The problem with design “How to..” is that WS design is 90% creative work, where is no two identical WS (unless copied), that is why there cannot be any step-by-step study, the same way there is no step-by-step study on how to paint a
masterpiece paint.
What we can teach is how to “hold a brush”, but it is you, who should paint “Mona Lisa” and become “Leonardo da Vinci”.
-----What your WS should look like?-----
+ Stylish. Consider it as an exterior and interior of your whole off-line business premises, starting from hall (main-index web-page) and ending with your personal office (“about me” web-page). It has to have its unique “feel” and style. Don’t also forget about branding features your WS represent.
+ Clear structure. Imagine a shopper who wants to make a purchase at your offline store, but in order to enter it, he has to go through warehouse, service department and all kinds of office premises. Don’t allow your web visitor feel like that shopper.
+ Harmonically allocated design elements like graphics and text. The WS is united entity and your brand. Every element on the WS is to be blend with “exterior”, no separated elements or graphics like a number of flashy banners.
+ High usability standards and complete WS optimization including clear HTML code and optimized web graphics that are similar to clear shop. The more “dirt” your web-pages contains, the more time it will take to load them, the more potential errors it may show in different browsers, and the harder it will be for Search Engine spiders to index your WS. We will discuss these issues later on. Pay also attention to broken links, as it is similar to wall behind the door of your off-line shop. Let your visitors find good resources with your help, rather than an “Error 404 Page not found”.
+ Absence of grammatical errors. It concerns grammatical correctness of textual information. The importance of correct grammar is clear, no one wants to deal with uneducated people, especially if they represent businesses.
-----What programs you will need-----
First of all you will need to equip yourself with right “armament”, that are mostly WYSISWG (What You See Is What You Get) web-editors. The download links and short description you can find below:
Macromedia Dreamveawer - http://www.macromedia.com/software/dreamweaver/ - considered to be the best WYSIWYG HTML editor. Ideal for beginners as well as professional users. Anything you can only imagine has already been included :0) 30 days trial version.
EzyPage - http://www.ezyware.com/ - very simple drag&drop web-page creator for beginners. Although it has several very interesting features build in like dropdown menu or scrolling table. Free distribution.
Stepzilla - http://www.stepzilla.com/ - the softwares motto - step by step to the web - tells everything for itself.
1st page 2000 v.2 final - http://www.evrsoft.com/products/ - very pleasant HTML editor for beginners as well as advanced webmasters. Has ability to choose the interface that will be more suitable. Available HTML cleaning option, XML converter, build in FTP-client and preview function. A lot of ready to use Javasript, VBScript, DHTML, Perl applications. The software is being distributed for free.
Hot Dog Professional -
http://sausage.com/products/index.html - three HTML editors - HotDog Junior for kids, PageWiz for beginners and Professional ver.6 for advanced users. Convenient interface with easy to access HTML functions. Includes CSS editor, checker for tag errors and many others. All three editors allow to download 30-days trial version.
CoffeCup HTML editors - http://www.coffeecup.com/software/ - another offer with several versions of softwares for beginners as well as advanced users. Pre-made JavaScript applications libraries, Flash effects, font creator, HTML code cleaner, FTP-client, and many more. Collection of web-pictures, backgrounds, icons. Available 30-days trial PRO or free version.
AceHTML 5.0 Pro - http://www.visicommedia.com/ - professional HTML editor. DHTML ? JavaScript libraries. Build in CSS editor, HTML, JavaScript, CSS checker, supports XHTML, XML, Perl and WML documents. HTML code optimizer, link checker. Available 30-days trial version.
-----PILLARS OF PROPER DESIGNING-----
TASKS DEFINING.
You next step after setting up the appropriate web-design program is to set the list of tasks your site should solve. You should answer the following questions:
1. Are your WS a sales letter or a content rich project? Depending on your answer you have or don’t have to pay attention to the structure and flexibility of navigational menu, as it may bring new challenges, as your content-rich WS will grow. Consider to reserve WS space to future informational blocks like announcements, exclusive offers, visitors voting, polls, that you may like to include sometime in future. Don’t make the page layout look too tight, as you will require redesigning the whole page just to insert a small table for visitors’ voting.
2. What kind of integrated services you are planning to use? Whether it is going to be shopping cart, discussion board, chat or separate section totally devoted to the WS newsletter, it should fit overall site layout and design. Think in prospective, as it will take several hours now, but avoid several weeks of headache in the future. Make sure that the foundation of your online empire will bear all possible additional storeys, without need of demolishing the whole “building” and strengthening the foundation.
3. What market sector your WS belongs to in general and what product/service you are going to offer in particular? If your WS is an entertainment portal, full of flash games, casino offers and reviews of upcoming PC games, it is obvious that design and layout plays extremely important role as a representative of more than 50% of all information. Be sure that boring graphics in that case would cut the roots of your WS growth. If, on the other hand, you are working at corporate business-to-business online sector (B2B), there is absolutely no need in complex graphics elements or flashy stars in the top-left corner. Online businesses always experience lack of time, therefore, they need quick answers of who you are, what you are and why are you, rather than waiting till your welcome 300Kb flash clip will load. The answer to efficient finding partners among businesses is textual and to the point information that is easy to access and that is, usually, represented in business white-gray-black color scheme.
VISUALLY FINISHED.
Anybody can do that, although the broader imagination you have, the simpler it will be. What you need is comfortable seat, paper and a pen. Put your feet on the table, close your eyes and imagine your WS.
Let me only tell you one of my favorite jokes concerning technique mentioned above.
“There was a group of foreign visitors coming to see a very prosperous and profitable company. At the end of their excursion one of the visitors asked their guide: You know, your company is really perfect, with the best technology I’ve ever seen, everybody is working very hard, but, tell me, who is that man in the biggest room on the top floor doing nothing but relaxing on the soft armchair with his feet crossed on the table, sipping Cola and listening to music? Oh, that man came up with the idea last year, that earned us $1.000.000, and, as far as I remember, during that time he was also sipping Cola with his feet on the table.”
So follow this man and dont allow anybody disturb you during this work!
Dont make any mistakes about it. You may be surprised, but it is the most challenging and crucial part of your WS creation. The brighter efforts you put into your paper, the more beneficial result you will get. No need for degree in painting, just basic elements on paper as a background of your future WS building, the rest in mind.
Don’t be afraid to experiment! It’s a pleasant time spending anyway. Remember – all great works of all times are considered to be masterpieces, only because they, firstly, perfectly reflect the depth of their creators’ souls and, secondly, they are unique in their nature. There is no masterpiece based on well-known standards. They are good in, let’s say, decreasing production costs, but they are not welcomed in the art creation process, which the design surely is.
On the other hand, you should always keep in mind that the experiment ends exactly when the web-surfer disappointment starts.
ELEMENTS.
The key point, while visualizing your full color WS, is to decide what and where will you place 3 basic elements:
1. Header.
2. Navigational menu.
3. Space for main text.
The following list represents possible WS elements that you consider to have as a result of previously conducted “Task Defining”. Designer should also reserve a proper place and harmonically blend them with the rest of WS elements:
1. Banner ads;
2. Menu mirror at the bottom;
3. Additional text for news column, announcements, testimonials etc.;
4. Email forms, visitor polls, questionnaire etc.;
5. Any other items you consider to include.
It must be stressed that all the main elements of the WS as well as any other WS items, which should be added at your sole discretion ought to be put in mind while visualizing, and therefore written down on paper to be sure there is no forgotten element left behind. If it occurs at the next stage you will have to start from the very beginning as there is no way to move further. So dont quadruple your work with your own hands. Make sure you have put every “present” into the box you want to receive on Christmas. ;0)
WS STRUCTURE AND LAYOUT
Draw the scheme of your WS structure. How you are planning to arrange, link and create logically relations between sections or stand alone web-pages. It is easy to navigate four-page sales letter WS, but everything changes when we are exploring 100 spontaneously linked WS. It is easier to get out of Sahara desert rather than to find what you need.
Your navigational structure could be linear or functional. There are unlimited number of variations, just pay close attention and follow one simple rule: “The more difficult for you to write a WS structure, the more difficult it will be for potential user to navigate it!”
It doesn’t depend on number of web pages rather then logical sequence and connection of different parts or sections of your site.
COLORS
I’ve also read numerous times, that Headlines is what the visitor sees first, when comes to your site. Wrong! The first thing a surfer sees on the WS, while it loads, is the color and, sometimes, design appearance. Don’t underestimate the importance of color influence. With the help of color play you can easily create a feeling of excitement or grief even before s/he will see the first letter of your Headline.
One note should be also mentioned: try, if possible, to avoid main colors – green, red, yellow, blue. They are very Day-Glo and very annoying while using them in the company Logo sometimes considered to be enticing.
Don’t use “aggressive” color scheme, make it to be "polite" to your customers perception. By doing so, you dont, at least, make your visitor be irritated. Just experiment with hues and brightness and you will get the color you need. Follow this rule if you are not intend to sell clown noses in the circus tent. :0)
Text color is also ought to match the background color. Please, avoid red text on green color, dark blue on black etc.
(to be continued)
copyright 2002 Pavel Lenshin
About the Author
Pavel Lenshin is a publisher and webdesigner, who offers
+ Powerful package on how to run Private Info Business
+ Free subscription to the unique NET Business Magazine
+ Free Optimization Report of your Website
info@infoalchemist.com
http://www.InfoAlchemist.com
I don’t want to argue that statement about the importance of copywriting, on the contrary, I think that it is totally true, but under one condition – your Web-Site (WS hereafter) is already implied to make your visitors feel, at least, comfortable.
It could never be counted, how many times I closed down the browser without reading a single word, just because of the amateurish and clumsy look those WSs had.
No need to emphasize on importance of the professional WS. It is obvious, at the same time you won’t read there, that web-design is everything and that professional sales letter or text message is nothing, because it is like answering the question – what is better to have skin or heart cancer? To my mind, it is better to be totally healthy.
Business WS usually plays the role of virtual office, shop, informational dep., marketing dep. and service dep. It is a main representative and the core of your business – the final proof, the image of your company is based on.
-----What it is all about-----
The target is set – to make your WS as good as it can possibly be. Here I pointed the crucial pillars of designing a professional looking WS. You will not find there basic HTML teaching or how to use particular web-editor. The knowledge of HTML will help, but is not compulsory, as WYSIWYG (What You See Is What You Get) editors will make all HTML coding work “behind the scene” for you.
You require general understanding of what HTML is and ability to use one or several WYSIWYG web-editors, that is three hour learning process. The feeling of style and taste is also advisable; otherwise you will have to consult a designer.
The problem with design “How to..” is that WS design is 90% creative work, where is no two identical WS (unless copied), that is why there cannot be any step-by-step study, the same way there is no step-by-step study on how to paint a
masterpiece paint.
What we can teach is how to “hold a brush”, but it is you, who should paint “Mona Lisa” and become “Leonardo da Vinci”.
-----What your WS should look like?-----
+ Stylish. Consider it as an exterior and interior of your whole off-line business premises, starting from hall (main-index web-page) and ending with your personal office (“about me” web-page). It has to have its unique “feel” and style. Don’t also forget about branding features your WS represent.
+ Clear structure. Imagine a shopper who wants to make a purchase at your offline store, but in order to enter it, he has to go through warehouse, service department and all kinds of office premises. Don’t allow your web visitor feel like that shopper.
+ Harmonically allocated design elements like graphics and text. The WS is united entity and your brand. Every element on the WS is to be blend with “exterior”, no separated elements or graphics like a number of flashy banners.
+ High usability standards and complete WS optimization including clear HTML code and optimized web graphics that are similar to clear shop. The more “dirt” your web-pages contains, the more time it will take to load them, the more potential errors it may show in different browsers, and the harder it will be for Search Engine spiders to index your WS. We will discuss these issues later on. Pay also attention to broken links, as it is similar to wall behind the door of your off-line shop. Let your visitors find good resources with your help, rather than an “Error 404 Page not found”.
+ Absence of grammatical errors. It concerns grammatical correctness of textual information. The importance of correct grammar is clear, no one wants to deal with uneducated people, especially if they represent businesses.
-----What programs you will need-----
First of all you will need to equip yourself with right “armament”, that are mostly WYSISWG (What You See Is What You Get) web-editors. The download links and short description you can find below:
Macromedia Dreamveawer - http://www.macromedia.com/software/dreamweaver/ - considered to be the best WYSIWYG HTML editor. Ideal for beginners as well as professional users. Anything you can only imagine has already been included :0) 30 days trial version.
EzyPage - http://www.ezyware.com/ - very simple drag&drop web-page creator for beginners. Although it has several very interesting features build in like dropdown menu or scrolling table. Free distribution.
Stepzilla - http://www.stepzilla.com/ - the softwares motto - step by step to the web - tells everything for itself.
1st page 2000 v.2 final - http://www.evrsoft.com/products/ - very pleasant HTML editor for beginners as well as advanced webmasters. Has ability to choose the interface that will be more suitable. Available HTML cleaning option, XML converter, build in FTP-client and preview function. A lot of ready to use Javasript, VBScript, DHTML, Perl applications. The software is being distributed for free.
Hot Dog Professional -
http://sausage.com/products/index.html - three HTML editors - HotDog Junior for kids, PageWiz for beginners and Professional ver.6 for advanced users. Convenient interface with easy to access HTML functions. Includes CSS editor, checker for tag errors and many others. All three editors allow to download 30-days trial version.
CoffeCup HTML editors - http://www.coffeecup.com/software/ - another offer with several versions of softwares for beginners as well as advanced users. Pre-made JavaScript applications libraries, Flash effects, font creator, HTML code cleaner, FTP-client, and many more. Collection of web-pictures, backgrounds, icons. Available 30-days trial PRO or free version.
AceHTML 5.0 Pro - http://www.visicommedia.com/ - professional HTML editor. DHTML ? JavaScript libraries. Build in CSS editor, HTML, JavaScript, CSS checker, supports XHTML, XML, Perl and WML documents. HTML code optimizer, link checker. Available 30-days trial version.
-----PILLARS OF PROPER DESIGNING-----
TASKS DEFINING.
You next step after setting up the appropriate web-design program is to set the list of tasks your site should solve. You should answer the following questions:
1. Are your WS a sales letter or a content rich project? Depending on your answer you have or don’t have to pay attention to the structure and flexibility of navigational menu, as it may bring new challenges, as your content-rich WS will grow. Consider to reserve WS space to future informational blocks like announcements, exclusive offers, visitors voting, polls, that you may like to include sometime in future. Don’t make the page layout look too tight, as you will require redesigning the whole page just to insert a small table for visitors’ voting.
2. What kind of integrated services you are planning to use? Whether it is going to be shopping cart, discussion board, chat or separate section totally devoted to the WS newsletter, it should fit overall site layout and design. Think in prospective, as it will take several hours now, but avoid several weeks of headache in the future. Make sure that the foundation of your online empire will bear all possible additional storeys, without need of demolishing the whole “building” and strengthening the foundation.
3. What market sector your WS belongs to in general and what product/service you are going to offer in particular? If your WS is an entertainment portal, full of flash games, casino offers and reviews of upcoming PC games, it is obvious that design and layout plays extremely important role as a representative of more than 50% of all information. Be sure that boring graphics in that case would cut the roots of your WS growth. If, on the other hand, you are working at corporate business-to-business online sector (B2B), there is absolutely no need in complex graphics elements or flashy stars in the top-left corner. Online businesses always experience lack of time, therefore, they need quick answers of who you are, what you are and why are you, rather than waiting till your welcome 300Kb flash clip will load. The answer to efficient finding partners among businesses is textual and to the point information that is easy to access and that is, usually, represented in business white-gray-black color scheme.
VISUALLY FINISHED.
Anybody can do that, although the broader imagination you have, the simpler it will be. What you need is comfortable seat, paper and a pen. Put your feet on the table, close your eyes and imagine your WS.
Let me only tell you one of my favorite jokes concerning technique mentioned above.
“There was a group of foreign visitors coming to see a very prosperous and profitable company. At the end of their excursion one of the visitors asked their guide: You know, your company is really perfect, with the best technology I’ve ever seen, everybody is working very hard, but, tell me, who is that man in the biggest room on the top floor doing nothing but relaxing on the soft armchair with his feet crossed on the table, sipping Cola and listening to music? Oh, that man came up with the idea last year, that earned us $1.000.000, and, as far as I remember, during that time he was also sipping Cola with his feet on the table.”
So follow this man and dont allow anybody disturb you during this work!
Dont make any mistakes about it. You may be surprised, but it is the most challenging and crucial part of your WS creation. The brighter efforts you put into your paper, the more beneficial result you will get. No need for degree in painting, just basic elements on paper as a background of your future WS building, the rest in mind.
Don’t be afraid to experiment! It’s a pleasant time spending anyway. Remember – all great works of all times are considered to be masterpieces, only because they, firstly, perfectly reflect the depth of their creators’ souls and, secondly, they are unique in their nature. There is no masterpiece based on well-known standards. They are good in, let’s say, decreasing production costs, but they are not welcomed in the art creation process, which the design surely is.
On the other hand, you should always keep in mind that the experiment ends exactly when the web-surfer disappointment starts.
ELEMENTS.
The key point, while visualizing your full color WS, is to decide what and where will you place 3 basic elements:
1. Header.
2. Navigational menu.
3. Space for main text.
The following list represents possible WS elements that you consider to have as a result of previously conducted “Task Defining”. Designer should also reserve a proper place and harmonically blend them with the rest of WS elements:
1. Banner ads;
2. Menu mirror at the bottom;
3. Additional text for news column, announcements, testimonials etc.;
4. Email forms, visitor polls, questionnaire etc.;
5. Any other items you consider to include.
It must be stressed that all the main elements of the WS as well as any other WS items, which should be added at your sole discretion ought to be put in mind while visualizing, and therefore written down on paper to be sure there is no forgotten element left behind. If it occurs at the next stage you will have to start from the very beginning as there is no way to move further. So dont quadruple your work with your own hands. Make sure you have put every “present” into the box you want to receive on Christmas. ;0)
WS STRUCTURE AND LAYOUT
Draw the scheme of your WS structure. How you are planning to arrange, link and create logically relations between sections or stand alone web-pages. It is easy to navigate four-page sales letter WS, but everything changes when we are exploring 100 spontaneously linked WS. It is easier to get out of Sahara desert rather than to find what you need.
Your navigational structure could be linear or functional. There are unlimited number of variations, just pay close attention and follow one simple rule: “The more difficult for you to write a WS structure, the more difficult it will be for potential user to navigate it!”
It doesn’t depend on number of web pages rather then logical sequence and connection of different parts or sections of your site.
COLORS
I’ve also read numerous times, that Headlines is what the visitor sees first, when comes to your site. Wrong! The first thing a surfer sees on the WS, while it loads, is the color and, sometimes, design appearance. Don’t underestimate the importance of color influence. With the help of color play you can easily create a feeling of excitement or grief even before s/he will see the first letter of your Headline.
One note should be also mentioned: try, if possible, to avoid main colors – green, red, yellow, blue. They are very Day-Glo and very annoying while using them in the company Logo sometimes considered to be enticing.
Don’t use “aggressive” color scheme, make it to be "polite" to your customers perception. By doing so, you dont, at least, make your visitor be irritated. Just experiment with hues and brightness and you will get the color you need. Follow this rule if you are not intend to sell clown noses in the circus tent. :0)
Text color is also ought to match the background color. Please, avoid red text on green color, dark blue on black etc.
(to be continued)
copyright 2002 Pavel Lenshin
About the Author
Pavel Lenshin is a publisher and webdesigner, who offers
+ Powerful package on how to run Private Info Business
+ Free subscription to the unique NET Business Magazine
+ Free Optimization Report of your Website
info@infoalchemist.com
http://www.InfoAlchemist.com
Copyright © 2005-2006 Powered by Custom PHP Programming