Integration for the Nation


Web Design from ScratchWeb Design from Scratch






Using Photoshop

Tutorial 9Tutorial 9

Graphic DesignTypography Accessibility & Usability XHTML & CSS Web 2 Web Integration

So where do you begin? Where do I start if I want to actually build a website?

Well I've compiled some useful resources which will get you on your way. One of the most inspiring and useful is the one at the top of the list on the right. It provides a clear pathway on how you go about designing your website right from the get-go.

It give a comprehensive list of things you should, as a web designer, consider. Try not to get overwhelmed though - it's full-on alright!

You will need the following:

            • A decent graphics editing application like Photoshop
            • An industry standard web editing application like Dreamweaver
            • A smattering of ideas
            • Oodles of creativity
            • Massive amounts of designs
            • And a clear idea on how all of this gets put together

So how do we piece it all together?

Sexy DesignIf you've already been through each of the other floors of the nightclub you should probably have a feeling and understanding about the following (if you don't you need to go back and recap!):

the images you are going to use for your website
the font types you may be considering
the web standards which govern accessibility and usability
the markup available
the massive impact that using Cascading Style Sheets have and their capabilities
the terminology surrounding Web 2.0 and current design fashions


So what do we do now? What do we need to do to put all of these aspects and theories together? Well here I go...

Wireframes, say what?

Wireframes checklist

I know, you are probably chomping at the bit wanting to get going and use the applications. But first you need to have a little patience! It's easy to get carried away and want to go straight to the computer to get things started, but hold the front page - you need to get this all down on paper FIRST. I've done it myself and been too eager to 'build' some website only to find out that I didn't do the planning very well. The problem is that if you race in you are likely to waste valuable time so first my friends, you need to Wireframe.

Yes you can buy an already made template for you web content but where's the creativity in that! You should be considering developing your own skills so that you can create something which is unique and persoanl to you.

Firstly you need to plan what the website is about:


  • What are its primary and secondary goals?
  • Will you need to create the content?
  • Will you need to create a brand identity?
  • What colour palette will be used for the website?
  • What type of layout will you adopt?
  • Is there a mood or overall theme? i.e. if you are designing for children it might be very different to designing for an adult market.

Why not take a look at the 'Wire Frame your Site' article from SitePoint just to get you started. You could also take a look at the 'Web Site Wireframes' webpage which also provides some useful examples in pdf files.





Dreamweaver it is

Dreamweaver Logo


My preferred application for web integration is Adobe Dreamweaver, which is one of the industry standard applications for generating web-based media. It's a powerful package and no mistake so let's see what it is capable of. Well a whole lot really.

Ask yourself the following questions...

Why platform do you use - Windows, Mac, Unix, Linux or another?

Are you a professional web designer, developer or a student just getting started?

WYSIWYG - what you see is what you get! it allows you to preview the webpage, just as your audience would see it. Do you think it's what you would/could use?

You should be designing web-standard compliant sites - one trick to this is using Cascading Style Sheets - do you want to embed/attach them to your designs?

Obviously purchasing a web editor will cost you money, just like any other piece of software - do you have access to one?

Invariably you will also need an image editing application - do have access to one of these?

There could be more questions but them is all I think you need! Realistically Dreamweaver will provide you with all your webpage creation techniques and is priced at around £240 for a standard licence. If you wanted to include other applications such as Photoshop, Flash, Illustrator and others you would need the Adobe Creative Suite 4 which retails at around £1100.




Interface and navigation design

Web Design Issues


You might want to take a look at some common issues surrounding interface (or web) design as we know and understand it today. There is also a section on navigational elements which you should try to adhere to.

Look forward to seeing you back here soon - if you have any questions just let me know.














browser testing

Different Browsers


Yes, I know - it's a drag testing anything but the simple truth is 'ya gotta'! As any web designer will know, testing your interface designs is a massive and complicated area which can give many headaches. With the hundreds, if not thousands, of browsers out there, nobody can possibly test on all of them. As we all know Internet Explorer (yuk, this is definitely my least-favourite browser of them all!) still has the lion’s share of clients, with others like Safari, Mozilla Firefox, Opera, Konqueror and Google Chrome also competing.

From a design perspective I always try to test any completed design on as many of these browsers as possible but it is time-consuming work. I have recently found this free resource from Browsershots which could take some of the sting out of the testing phase. You simply enter your web address and it generates a screenshot of your website over a potential 50 individual browsers and across 4 platforms. It is generally pretty quick although you may need to queue for a few minutes. You can then look at the individual screenshots or download them to your machine. It covers all of the main browsers and some which are not so well known (well I hadn't heard of some of them). 

I found it to be really quick and it showed me one flaw in one of my designs that I hadn't spotted previously! Unfortunately it doesn't tell you how to fix your coding issues but I know that I will be using this a lot in the future.