Thursday, June 4, 2009

Web Design Assignments

Both projects (Blog theme and Website) are completed and can be located via these links:

Blog Theme:
http://www.skounzdesign.blogspot.com/
Website:
http://www.blockparty.webs.com/

Here are all the requirements for my website and where they are located:

* One Link to page Fragment- Index and History page.
* 6 external links- There are six links located on my Line up page, one on every
page down the bottom to Lexington music (trinity bar does not have a website) and links are also located throughout the text in my pages.
* One file download- On my Streams page between both YouTube videos.
* Search field input- On my Index Page.
* One Image- There are six .swf file on the Line up page and one .jpg on my
Tickest page.
* Google map- The google map can be found on my Details sub-page
* YouTube clip- Found on my Streams page

The website only works in Firefox as per the assesment criteria specified, although throughout the holidays I intend to get it work on internet explorer.

Wednesday, June 3, 2009

Week 15

During this week I have found a free web serving site that will host my site. I have also looked at further enhancing my personal blog. This course has been very beneficial as it has forced me not just to make a site in Photoshop, slice it and just import it into Dreamweaver, but to sit and code everything. This has greatly improved my HTML and CSS skills more than I ever thought.

Week 14

After watching the week 13 lecture to design a blog theme I have created my personal styled blog. Throughout the term constantly using HTML and CSS I now have the confidence to look at the code of my blog and edit it. As a precaution I have created a new blog which this one will link to. This was done as a precaution as I know that I could stuff something up and destroy my blog.

This lecture was also very useful to help further understand how a blog works and how to personalise it. After playing around I have enjoyed creating my blog and once this course is done I wish to edit and continue further enhancing my blog.

Week 13- Blog Theme

I have pretty much have finished my website and all the links, content and criteria that were listed in the unit outline were checked off. The only problem that I’m facing at the moment is importing my flash content into the site. As .swf file automatically place themselves on top of all HTML and CSS content the links were underneath the .swf files and meant that they couldn’t be pressed. This took a long time in research to find the code to stop this from happening, but after talking to the tutor in my class she helped me work out how to send the .swf file behind the CSS.

Week 12- Web 2.0

During the tutorials this week I asked the teacher about the few problems that I was having in marking up my page. This was very helpful as I learnt different types of code. I also searched for online tutorials to aid me which also proved to be beneficial.

In the lecture this week we learnt about web2.0. We learnt that web2.0 was a transfer from static content to user generated content such as, blogs, Facebook, twitter etc. This lecture helped me to understand how the web is changing and moving towards the future.

Week 11

In week 11 I completed all of the flash elements and all the written articles/content needed for my site to be put together. Putting my site together was an uphill struggle at first as all the code was new to me. After the first page was completed, coding started to not only become easier but all of the code names to what script creates what outcomes were also further understood. I started to understand how to put everything together and understand how it would look without always having to preview it. Since the layout of my site was different to the teachers in his tutorial had to modify my CSS and HTML. With this I came into some complications of trying to script what I didn’t know.

Week 10

During week 10 I started working heavily on putting my site together. Finding all the content was a struggle as my music event ‘Block Party’ is no longer being hosted in Canberra and pretty much all the sites that were created have been removed. Still after a bit of research and magazine reviews and past half destroyed websites of the event I was able to create a more functional and hopefully better presented site. During week 10 I also started to create the flash elements that I would use in my site. The flash work will be used in my line-up page for the users to scroll over the artist and their name would appear. I am also hoping that these .swf files will be my links to external sites (i.e. the artists ‘MySpace page).

Week 8 & 9- Term Break

During the Term break I had a lot of spare time to further enhance the design of my website. I also read through the Web Design book to further enhance my knowledge of CSS and HTML. I also re watched the week 7 online lecture as it helped to give a visual aid to mark-up and design my site.

Week 7- The Presentation Layer

Watching this week’s video lecture has helped me to rethink the layout and style of my design. It is now longer than in my proposal image, the names of the links have changed and I have created a sub-links page. This video has helped me to understand the outcomes of using HTML and CSS and the process taken to apply it to my website.

During the tutorial this week I showed the tutor my work so far and his opinion. So far everything is going as planned and hopefully I will be able to start marking up my site during the two week break.

Saturday, April 25, 2009

Week 6- Web Publishing

This week we learnt about Web Publishing, how it works and how we can do it. First of to publish our website we need ‘Web Hosting’ and a ‘Domain Name’. Web hosting is some where to put your files (upload your website) so when users type in the url (domain name) people can view your site. To put the file onto the web you need an FTP (file transfer protocol) and through the lecture we learnt how to do that.

During this week we worked on our websites and had the teacher give us advice. I have chosen to do my website on Block Party, a local event that happens yearly where all the top DJ’s from around Australia come to the Trinity bar and play tunes all day in car park.

Week 5- Information Architecture

Information Architecture was the topic of this week’s lecture. This term was coined by Richard Saul Wurman 1976. One term that describes Information Architecture is a combination of organisation, labelling, and navigation schemes within an information system.
Wurman’s lists 5 Organisation of Content:

Location: The Canberra Centre website uses this form of content arrangement. The user can select a part of the map to give them their desired information.

Alphabet: Again the Canberra Centre site uses this formality to search for stores in the Centre by selecting letters of the alphabet.

Time: At the Movies website searches for movies by the date they were added. Time based organisation of content is also seen in blogs.

Category: The ITunes Music store uses categories to organises content and music into different genres ie. Rock, country.

Hierarchy: Torpedo7 uses hierarchy to organise data ie. Cheapest to most expensive, popularity etc.

Week 4- Why Code Counts

This week we learnt about code and what is meant by HTML and CSS. The understanding of this code is a necessity for web design and provides better result. HTML and CSS is at the top of the list that every web designer needs. Paying attention to code gives a site better flexibility and lowers the differences and changes of a sites appearance across different web browsers such as Firefox, Explorer, Safari etc. Clean, compact code also makes smaller files which are quicker to download. During the lecture we also learnt that having knowledge of code will help us with the concept and construction of our site. Working with code provides better results: stability, flexibility efficiency accessibility etc.

In this week’s tutorial we had a go at creating our own a small web page using only HTML script. After a few difficult spots and understanding of what we were actually typing it helped me to understand that every page needs to be marked up right to work.

Week 2- Desinging for the Web

This week we learnt how to design for the web. Having a brief look at statistic through the lecture and in the book ‘Learning for Web Design’ we can see what web browsers are most popular, screen size and what size should we considered before designing our site and file sizes for images. As we learnt that designing for web is not the same as designing for print. When designing for web what you see is pretty much what you get. Unlike print where the file sizes are massive, online content is very small and compressed.

What is important is:

*Browser Compatibility
*Monitor Resolution
*Mobile Web
*Colour
*Accessibility
*User preference
*Connection Speed

This was then further looked upon in class along with Krug’s ‘Trunk Test.’

Week 1- Intro

This week was the introduction to Web Design and Production. In this lecture we learnt what we would learn throughout the semester. We were told to create and keep a Blog to regularly inform the teachers on what we have learnt and done week to week. We also signed up to the Web Design and Production site and started to look for websites that we were interested in.

In the Tutorials we were given readings and a list of sites to look at and us for our first assignment. The readings included a brief introduction to web design, what the web was and definitions that we would come across during the course.

Sunday, April 5, 2009

Design Draft

This is a draft to what will hopefully be my final website. As you can see it is a screen shot of the home page. Im looking at adding a lot more side links and flash animations.


Saturday, March 14, 2009

Design Reference

7 Characteristics
The 7 characteristics that I have chosen reflect those of Steve Krug's trunk test.

As I have used Flash and have a general knowledge of action script I have chosen websites that incorporated aspects of flash. Obviously some of the flash websites are too advanced for me, the basic concepts and layouts are appealing and inspiring to create my own CSS/ Flash website for the next assignment.

1.Site ID/ Logo
All the sites have a logo or the name of the site on the top or top left hand of the page. As we read from left to right, top to bottom, the logo on each of these sites is the first thing we see. As Krug's says "The Site ID or logo is like the building name for a Web site." It constantly reminds us of where we are.

2.Layout
Each site includes a visually appealing header, a simple navigation bar directly under the header, links, general information about the site, Flash or graphic material, advertisement on the right hand side and a strong use of colour further identifying the user with the site.

3.Navigation
In all sites the navigation starts off simplistic, and as the user searches the site it branches out, yet the main navigation bar never leaves the top of the site, reassuring the user that they can return back if need be. There are also links to other sites for more information which I believe is a good idea and something I will use for my website to direct viewers to individual band websites, blogs, facebook pages etc.

4.Content
The content of my selected sites refers to Krug's "What page am I on?" in his trunk test. All the sites include a sub heading informing the user what page they are on. This is a great design and navigation aspect that I will incorporate into my design. The content is an important part to a website as it needs to be informative and easy to access.

5. Search
A search bar is almost a necessity to make not only the navigation of the site easier but to also help the users search for the content he or she directly want. "Search dominant" users as
Jakob Nielsen calls them will almost always type what they need into the search bar as soon as they enter a site (Steve Krug's). On all of the 5 sites I have chosen non of them incorporate a search bar which is seen as a poor design choice. As the sites are fairly big and contain a lot of content, if a search bar was implemented the users could access the desired information quicker.


6. Colour and Aesthetics
The overall colour and aesthetics of a website plays a big role in the users appeal and attraction to want to use the site. The sites that I have chosen all use a strong sense of colour and have their own unique and personalised style to them. Designing a music site for our major assignment the colour we choose plays a large part. The type of music that we are basing our sites around portray different types feelings and emotions that can be represented into different colours that the user can relate to.

7.Graphics
Flash and CSS create appeal and entertainment for the users while exploring a site. Animated roll overs and effects are becoming new trends. After Exploring many of the flash sites the biggest downfall was the loading time. Watching a pre-loading bar for 5 minutes will make any user forget about up-loading the site and just close it before they even see it. That's why the sites that I have chosen not only have a heavy use of flash and graphics they also have a reasonable uploading speed.