Design Practice: Web Design

For this part of the module I had to create a 5 page website for the enterprise company 'straight cuts' with any subpages if needed. To start with I laid out some really rough thumbnails to get an idea of what the site might look like.

I chose the design that I wanted and moved into illustrator to recreate what I would want it to look like in the end. This is what I came up with as a final design that I would be really happy with:

Obviously I did realise that it would be really difficult to create it 100% exactly like this image, but it is a good way to get the representation and the idea of what I want before actually trying to make it in HTML. I then went straight into Dreamweaver and started using tables and images to build up the website in a basic way. I used a mixture of HTML for the main coding, CSS for specific classes like headings, titles or even just areas of width and Javascript for the rollover buttons.
Once I had the one page done, I made it into a template so that I could make new pages that look exactly the same.
Below you can see the editable regions that I made to stop everything from being able to be edited and messed up.

This is what the above layout looks like in the web browser:

After this I started working with each of the pages in succession to make them look appropriate to the company and to the brief. Below you can see the development of the 'Designs' page.

I also wanted to create a 'Checkout' page which would have editable form in them. Forms are like the bits in websites where a user can enter text, for example in a search bar or in filling out details for payments as in this example. I figured out how to put in the forms, but they stuck to a specific size that wasn't really changeable and it ruined the rest of the layout of the page, so I had to change this idea and just use a screenshot of another webpage's checkout to represent what it could look like and where it would go on my page