The Basics of Web Development [Tutorials]
I have a number of friends who have recently started to express an interest in web development. This inspired me to create a tutorial of how you develop a basic website, from the design phase all the way to to using advanced techniques such as JavaScript frameworks and optimisation.
This will be a multi-part tutorial over the next couple of weeks, if you haven’t already please subscribe to my feed to make sure you stay up to date. If you don’t use a feed reader you could always get the updates delivered to you via email.
Stage 1 – The Subject
Before your start to create a website you need to have a reason or a subject for the site. There are many reasons to create a website, typically it is to make money or to advertise your business. However lots of people just like to share information with the web.
Once you have decided on the subject, you need to decide on what form your site is going to be in. These typically consist of 3main types an online diary (blog), a site to advertise a given product or company and finally a web application (Gmail). Each can vary enormously with complexity, especially a web application.
Stage 2 – Design
When you have an idea of the subject and the form, it would be a good idea to mock up what sort of content you want to show. I generally do this through brainstorming ideas and layouts on a piece of paper, see opposite. Take a while to think about this stage it is a lot easier to think of an idea and successfully implement it now, rather than when the website it finished. Make sure you are covering everything you want to say, and everything you want your user to see. Don’t forget to think about whether you want to advertise on your site.
The next part of designing the site is to come up with a wireframe of your site’s layout.
Wireframes are a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. Because of this they must be completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page.
Wikipedia – Website wireframe
On top of the wireframe you can now start the design process. Using a suitable graphical program like Adobe Photoshop, Microsoft Expression or a range of open source alternatives that I have listed. You can slowly start applying your design over your wireframe, making sure you have designed all the suitable components that you listed at the sketching stage.
If you get stuck there are lots of design inspiration available to you. You can check out my scrapbook which provides sites which are interesting and designed well. Or you can browse website’s such as CSS beauty and Smashing Magazine for lots of inspiration.
Designing your website this way will minimise problems further down the line. Just like the Waterfall method successful planning leads to an easy implementation.
For the next tutorial I will cover converting your designing into a layout through the use of CSS and HTML. I will be going over the most efficient way to take blocks of images and arrange them in CSS, and provide guidelines on stopping HTML bloat.
If you thought that this first tutorial was too simple, then please stay tuned for further tutorials where I will talk more about the difficulties in server side languages, like PHP and ASP, client side interaction through JavaScript and common shortcuts.
