Monday, June 14, 2010

Client Website Experiance

Introduction
My client website was for Freelance Civil Services, a Brisbane civil engineering company. The website ended up looking quite different to the initial mockups, but in my opinion the changes were for the greater good. (The different versions are viewable on my blog)

Initial ideas/mockups
Before I met with my client I did some investigating... I looked at a number of other civil engineering website to see what kind of style they all follow. After this I did a mockup of what I thought the FCS website should look like. Once I had an idea and did a mockup I met with my client. He put forward his ideas and what he wanted, which luckily was very similar to my own. There were a few ideas we worked on until we were both happy with the design. in terms of layout, colour and the overall theme.

We decided to have a grunge looking site to represent the construction part of the company. Colours such as red black and yellow were used to give a construction type theme. It was all done in such a way to also look very modern, and tidy.

Once the mockup was looking finished I began constructing the website in Dream Weaver. Due to the complex design this part ended up taking longer and was harder than I initially expected. I had a few problems with div sizes and floating divs, and also compatibility in different browsers. Although after some work I managed to resolve all these issues. Once the skeleton of the page was complete, I began to enter the content. It was here when I realised the website needed some small alterations, as the content would not all fit evenly etc. although this was just a matter of working it through until the site looked good... by altering font sizes, heading sizes and image sizes.

Finalisation of the website.

After all the content was added and the website was looking good I began to do further browser compatibility testing. One thing I had a problem here was the font size changing from Mozilla FireFox and IE. This was something I did not manage to solve and would like to figure out in the near future. Although this problem was annoying it did not ruin the site or make anything shift around etc. Other than that, the site was fully functional in every major browser.

What I have learnt from this experience.

One of the major things i learnt when doing this assignment was to back up files. I had an issue with my USB drive that resulted in me having to redo a large amount of my work. Another aspect of the construction of this website that i would like to change would be the planning/mockups. Next time I design a website i will think more clearly about whether it will be easy to construct, and if the effects I'm going for will be worth the effort when constructing the site in Dream Weaver. Other than these issues I found this assignment to be a good experience and I have learnt a lot, from running into problems and having to solve them myself, it is a good way of learning and building problem solving skills when it comes to web design. I am excited to make another client website to see how my second attempt goes, and see if i can improve my faults.

Monday, May 10, 2010

client website original


original mockup of client website, before changing client...

basekit design 1

basekit design 1

another version of the client website


another version of the client website

mock up for client website


mock up for client website

Monday, April 26, 2010

client website - story board

Index/welcome page - links
- home - news - staff - projects - contact

Client website - Questionaire

1. What kinda of style do you want for your website? classy? professional? fun?
2. What colours do you want?
3. Do you have a logo? if not do you have any ideas for a logo?
4. Are there any website that you like?
5. What do you NOT like about certain websites.
6. What is your budget
7. Is there a specific deadline?
8. Do you want your website to be interactive... such as audio, video, animations?
9. How much content do you wish to have on your website, do you want a large amount of links with lots of information, or would you prefer a more "straight to the point website".
10. When the website is complete, do you wish to be able to update content yourself?
11. How many mockups do you wish to see?

Monday, April 12, 2010

Test

1.What is a dreamweaver template? A website document with editable areas that have been controlled by the website author.

2.What are the advantages of using templates?Allows users with little knowledge of webdesign to edit a website. It is also a quick way to update multiple pages at once.

3.What is an editable region? A section on the template that the user can edit. How is it set up? Insert > template objects > editable region

4.What is a repeating region? A section of the document that is set up so that the template user can add or delete copies of the editable region such as a table with repeating rows. How is it set up? Insert> template objects> repeating region then select templates > new repeating region.

5. What is an optional region? A section of the website/template that holds text or image, the template user has the control to either show or hide the region.

Wednesday, March 17, 2010

Monday, February 22, 2010

Em

What does EM mean?

Ems are a relative measurement, meaning that the actual point size varies.
One em is equal to the default font size. So suppose a Web browser's default font size is 14 pixels tall. In that case, 1 em would mean 14 pixels tall, 2 ems would be twice that (28 pixels), and 1.5 ems would be 21 pixels.
The advantage of ems is that they allow your Web visitors to control the size of onscreen text. If it's too small, they can increase the base font size. (In Internet Explorer, you make this adjustment by choosing an option from the View Text Size menu [View Make Text Bigger on Safari on the Mac].) Any text measured in ems then changes according to the Web browser's new setting.

Monday, February 15, 2010

Useful links

http://www.dafont.com/
www.sxc.hu
www.csszengarden.com

Websites I like

This Jim Carrey website is designed very well.
http://www.jimcarrey.com/

This site shows you how in depth flash can be with coding etc...
http://www.liquidjourney.com/

Two flash logos i'm working on

Two uncompleted logo designs.






Monday, February 8, 2010

Bad website designs

Here are links to two horrible websites.

Monday, February 1, 2010

First portfolio mockup


First portfolio mockup