A step-by-step guide in creating a website

The best step-by-step guide in creating a website

It has always been hard for beginners to start accomplishing their dreams, of becoming the greatest of designers without a helping hand.
 There is a controversial saying which state that “why do man kind eat food” a simply questionnaire statement, but has many branches of answers and you may try to produces few of them. As also there are lot of food out there but you choose to eat the best for good health...Talking of the best brings me to the subject of website creation tutorials. I can say without doubt that this is the best and easiest tutorials concerning step by step in creating a website.

This piece of work is for those individuals and groups of people who have the zeal and passion to create their own website or willing to learn to create an attractive website from start to finish, but have little idea no idea about how to go about or where to start from. I must confess that sometime back I was a novice and struggling everywhere to find concrete information to help me in creating my website, and it had not been easy at all. 

A lot of my inspiration for creating this site came from the zeal I had had and how passionate I wanted to create my own website.  I therefore developed this blog to share with those who are also trying to achieve their dream in website creation.


 There are many of designers and Photoshop guru's out there who have created great websites and yet a beginner finds it’s difficult to understand. I say it confidently that you are in the right channel and hopes that you will enjoy your learning process.  
As a marketer and a  writer with graphic designing background and curious in learning-I spent months  and hours in search of accurate information that will help me get to where I  wanted to be and it came to pass. And it’s increasingly important if not vital to transfer or share what I’d learnt with the world through my blog, therefore you are entreated to comment or send me feedback 

 HTML and CSS 
 As a beginner, there are few things you need to know in order to create Website design and make it interactive. HTML will be put into play because it’s so easy to understand even for graphic designers    and accurately by linking all design elements to highly efficient CSS (cascading style sheet) documents. Further more, these tutorials aren’t just for beginners or designers but anyone who   needs to start creating a website from setting up a Photoshop visual to using Dreamweaver.   

 Dreamweaver Versions 
 I will be using Dreamweaver CS5 in my tutorial, so all the screenshots have been made of CS5.  Don't let this worry you because there is very little difference between the versions    and everything I have written applies to all subsequent versions of Dreamweaver to date 

 Getting Started 
This site is designed so that you can pretty much jump to any section at any time and it will   make sense however, if you're starting completely from the beginning, it will be best to go through the Planning, Designing and Building sections in the order they are presented. The submenu under each category presents the articles 

The video tutorial will be link to each category for easy learning and understanding.
The Downloads category will present software’s and other things needed to complete your journey. There is no need to worry about anything as the software’s are free to download.
okay... let start with the planning.

website planning steps

planning a website

Website planning steps  

      Planning what to do is work half done. Yes!   

First of all you need to think about your potential audience and what you want them to do when they come to your website. Then think about what the site needs to do to help them achieve it. That is simply...

 Think about your potential audience and what you want them to do when they come to your website. Then think about what the site needs to do to help them achieve it.

Create a visual Site Map of your website and decide how the content will be grouped. Also determine what functionality the pages will have and what kind of navigation system you'll be using. Consider usability as well as design, and get your client to approve a Site Map before starting the design work

creating a site map

 

  

Designing and building a successful website always starts with solid, thoughtful planning. Consider all the elements that'll appear on a page before beginning site construction.

developing visuals

Developing a Photoshop visuals

 Deciding on how your Photoshop visuals will look

As you might have noticed, we have not gone near a computer yet. This is good. A huge mistake for any designer to make, whether they be web or graphic, is to start working on a computer straight away.
 Start with a blank piece of paper 
 When I have no real plan - just a vague notion in my mind and eye - the resulting design takes five times longer to create, and it's not as fully rounded as if I spent an hour or so with a pencil and pad creating a basic theme and structure. It much easy to work from pre-designed guidelines than it is from a loose idea in your head 

 Considering layout as well as look 
And it is not just about drawing a potential framework for the website itself - we have to consider all the potential & widgets , info panels, forms and other bits and bobs that creep into a design once construction in under way.  
Will the site be based on a one, two or three column grid? 
Or will it be a mixture of grids?
What elements will go into each column and why?
 What happens when you have a page which only has enough content to fill a single column? 
 If you use space-fillers, will they be relevant and practical? Or an abstract white space filler?
What about images? Will there be consistency across every page (with same-size pictures in predictable locations), or will images only appear where necessary?
Will there be a second tier of navigation to support the main menu? If so, how will it work?
If you have any side boxes for notes or contact details, what will they look like?
Where will they appear and why?

 As with the site map, the design is bound to evolve as you proceed with the site build - but you have to invest some time in developing a solid starting point - otherwise a mess will ensue 

Fixed Width or Expandable? 
I generally prefer websites to be fixed-width rather than fluid or expandable (unless practicality demands a fluid layout). The main reason for this is that a fixed-width page gives me more control over the design and layout. There nothing worse than a page full of text expanding in a single measure all the way across a widescreen displays. I much rather have a sensible width with margins both side - and that is how we will create our site.  
  
Once I feel I've gone as far as I can with my thumbnails and site sketches, I move to Photoshop 

Creating a site map

Decide who the site is for, why it exists and how it should work

This first step to creating a new website is probably the most important link in the design and construction chain, but it also the one most often neglected. I understand the temptation to dive straight into Photoshop and Dreamweaver to get the site up and running as quickly as possible, but it’s a temptation which I force myself to resist, because the only possible outcome is failure on many levels   creating the Sitemap

Functionality and Usability

Just like in graphic design when you need to sketch ideas for a logo or brochure, in website design you need to do the same - but also take it a little further. You have to consider functionality and usability

          Functionality 

   What is the purpose of the site?

   Is it a brochure, a learning tool or an online shop?  

   How will the buttons

   How will the menu links work?

   Where will they lead?

   What will happen when your visitors get there, and why?

           Usability

   Is the navigation system easy to find and understand?

   Do visitors have to guess what to do next, or have you made      it crystal clear?

   Is there anything appearing on the page which does not have a specific purpose?

   Is the navigation throughout the site logical and enticing?

   Is the text clear and easy to read?

After those questions have been answered, it up to the designer to move to the next step which is developing Photoshop visuals.