How I went about creating my website, what I learnt, what worked, what I like and what I used to achieve the task.
First things first, I needed to log into the UC computer system. I had forgotten my password and after having numerous attempts to log in I finally gave into the reality of resetting my password. With my password reset I could now look at Kafuffle and the unit outline.
I logged my web design and production learning’s and web site progress in my diary, only realising later that I needed to blog these progressions in my blog. I have used the information from my diary to update my blog.
I had a look at the suggested blogging sites and decided to go with blogger. I have used blogger once before and found the service to be clear and easy to use. I set my blog up using one of the default themes provided, named my BlogSpot Selwyn’s Place, not the most original but I thought it was fitting for the unit.
My first task was the design reference (identify five web designs that together represent the aesthetic that you wish to explore in your website design). I browsed the web and found some interesting sites of which all had lots on information and demonstrated excellent points that were all very similar. Some of the sites are listed below:
· http://www.useit.com/ (listed in unit outline)
· http://www.webdesignerwall.com/ (listed in unit outline)
· http://www.wowwebdesigns.com/designs/arts_and_literature/ This site I found listed the top 25 web designs as well as categorised web sites with interesting design, good information on good and bad web design. I found the site to be interesting for site ideas and concepts.
· http://www.siteideas.net/sites.htm Good information on design.
· http://www.angelfire.com/super/badwebs/ (Check this site out “OMG”) While the site has heaps of things going at once, it is hard to locate information and has very annoying music. The site does demonstrate some excellent points in a bad way.
Some examples of these are:
o Easy to use navigation structure, this keeps the user interested and helps avoid frustration for the user;
o Difficult to read text, type of font and font size have a big impact on readability;
o Use of backgrounds for text, once again makes the site easy to read and understand;
o Animated pictures constantly moving, distracts the user;
o Advertisements and pop ups, dominate web site message and purpose;
o Poor spelling and grammar. Makes site look cheap and amateur; and
o Page flow.
From my research I learnt what I wanted to pursue in my website design. I also learnt what I didn’t won’t to do in my website. I felt that when designing my web site it was important to strike a balance between usability and aesthetic appeal.
The main points I want to pursue are:
· Clear website purpose and intention;
· Website simplicity and ease of use;
· Clear and easy to read text;
· Clear navigation bar;
· Aesthetic appeal;
· Home link on every page;
· Consistency; and
· A website that anyone can use.
The main bad points to avoid in my design:
· All text in bold;
· Lots of text colour;
· More than 3 fonts;
· Text is all centred; and
· Animated gifs.
After working out the main characteristics that I wanted to use in my website I spent some time browsing websites keeping in mind what I had researched plus looking for ideas, things that look good to me.
For my website design I first sketched out ideas for the layout I would use including page layout, pictures and colour scheme. I then used Photoshop and created my first draft of my website layout and design.

Some of the problems that I had with the wed design were getting the correct dimensions for the text section (body) so that it would fit in the middle of the page, I found that Google and You Tube had some excellent tutorials for this. Other issues that came later in the process were saving the file in the correct file type and maintaining the quality. In this process I finalised my web site concept in Photoshop.
The next stage I found challenging in getting the website draft into Dreamweaver. The main issue I had was getting the Dreamweaver draft to look the same as the Photoshop draft; I found this to be time consuming. The coding of the site was difficult and I used different methods to get my CSS to work. I found that You Tube had step by step instructions, Using Google (CSS cheat sheet) was also helpful, such as Delicious.com, addedbytes.com this combined with looking at other websites coding and a lot of trial and error to achieve the results that I wanted.
Some sites I used to help complete my assignment (not including help sites provided by ucweb.kafuffle.com.au):
General:
· http://www.google.com/.
· http://www.youtube.com/
Coding:
· http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
· http://webdeveloper.econsultant.com/css-cheat-sheets/
· http://www.dreamweavercoldfusion.com/dreamweaverscript.html
· http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
· http://www.youtube.com/watch?v=gsUUQvP1di4&feature=PlayList&p=C90C7FBF949B0491&playnext=1&playnext_from=PL&index=8 · http://lesliefranke.com/files/reference/csscheatsheet.html
Dreamweaver tutorials for coding:
· http://www.youtube.com/watch?v=d9KDMgGM5jk&feature=PlayList&p=A8E39239E2F1C072&index=1
· http://www.youtube.com/watch?v=cUQKxsOTsX8&feature=PlayList&p=A8E39239E2F1C072&index=0
· http://www.youtube.com/watch?v=ikMC7Ju49HY&feature=PlayList&p=A8E39239E2F1C072&index=2
· http://www.youtube.com/watch?v=zJGj9PPcDyQ&feature=PlayList&p=A8E39239E2F1C072&index=3
· http://www.youtube.com/watch?v=R1kwqYORn40&feature=PlayList&p=A8E39239E2F1C072&index=4
· http://www.youtube.com/watch?v=COUMUqbzeMA&feature=PlayList&p=A8E39239E2F1C072&index=5
· http://www.youtube.com/watch?v=ye3UELvY34Y&feature=PlayList&p=A8E39239E2F1C072&index=6
Web colours
· http://download.oracle.com/docs/cd/E12825_01/epm.111/eashelp/frameset.htm?setcolor.htm
· http://www.webpageaddons.com/webmastertool/java-script-color-picker.htm
Web publishing
· http://www.hostmonster.com/
· http://www.wikihow.com/Publish-a-Web-Site
I found using Google ‘how to’ and You Tube ‘how to’ to be most helpful in this assignment.
My CIMF website address: http://u3005357.tellmeplace.com/
