Web design overview for the complete beginner

Posted by admin | overview | Thursday 18 February 2010 8:10 pm

Web design for the beginner, probably something you have read before and thought you might be making some progress until it turned out to be a disappointment. This article is intended to give you some genuinely helpful information on the steps to designing a website from beginning to end, whether it’s an ecommerce website or a CMS system.

Design

Ok so first thing is first, the design. Whether you want to design a simple static site, a theme for a blog or a shopping cart skin you are going to need to work out the look and feel of the website. It should be representative of what you are offering and be a clean non cluttered accessible interface.

You can design this however you want, a storyboard on paper a doodle in paint or whatever helps you to put your idea on paper. You need to consider the purpose of your website and what you are trying to achieve. Once you have a rough design of the site it’s good to get it into some digital imaging software if you haven’t already and if you are going to add any photos from i stock (a good site for images) this would be a good time.

We use Photoshop for this, as its industry standard and good for exporting bit of images that you need for the site, you can use any suitable graphics package though. There is a trial of photoshop if that helps.

Now, here are your options, if you are looking to design a site you are probably trying to save money, alternatively you might want the site in a certain way. Either way, if you find the next step hard you can use a web design company to convert you design into a website. If not then let us continue.

Coding the web page

Once you have the design and layout sorted you need to convert that into the web page. Whether you plan to use this code on a shopping cart or a wordpress blog its certainly helpful to have a solid HTML version of your site built. We use either notepad (manually coding each line) or dreamweaver which has a graphical interface for those of you who are total HTML newbie’s. Again you can download a 30 day trial of dreamweaver to get you started so just follow the link. As a worst case scenario, you could use the image you created, import it to dream weaver and use hot spots to link to different pages. This is a poor way to make a website but for some people it is fit for purpose. Realisticly you should manually code all of the images and text separately but if you re indeed a beginner, you can drop images into dreamweavers graphical interface and line everything up as you would in a word document.

Once you have the design in the program, you can save this page and add and edit the text for each of the other pages of the site, saving a separate HTML page for each required page on your website.

Uploading the site

Once you have a site you are happy with, you just need to upload it to a hosting account. These are available for a low cost or alternatively you can get a free web hosting account from a provider such as ICwebpeople.co.uk ( handy for one click installs like wordpress etc). What is a hosting account? This is simply where your website will live, instead of living on your computer, it needs to live on a server where the whole world can access it. Normally your hosting provider will give you the details need to upload your site, either using the provided control panel or via FTP (they will give you the details for this) Once that is done, you just need to ensure your domain is pointing at the hosting account by adjusting the DNS records and your website is now built and ready for the world.

Hopefully you have found this information helpful, it is intended to be a quick overview of the steps involved in creating a website. If you require more detailed information on any specific steps or want to know more about professional web design or search engine optimisation, please look at my other articles.