CSS - Build (Final Assignment)

For our final project in WDP, we had to take our original design and turn it into a completed website using CSS and HTML.

My website has been hosted by using my ISP's web hosting facilities.

http://users.tpg.com.au/j4ck//index.html

I tested my website using Mozilla Firefox, as specified, and every page has been validated with the W3C Validation Service and passes.

Please note, that depending on your screen size and resolution, the website may shift. If you have a large screen resolution the scroll bars on the side may not be needed and therefore shift the layout slightly.

I'd like to remind you of my original design, and compare it to what I actually achieved. Below you will find a screen shot from what I submitted in the design phase.


The next image shows my completed website with the use of CSS, running live in Firefox (zoomed out to capture more of the website).


The live website looks very similar to what I had originally designed, but looks more professional and clean. Very happy with my efforts in this regard. I didn't have to compromise any of the design layout ideas I originally had, and was able to implement them using CSS. I changed a few minor things which you can read about below:

• Resized the content font
  
• Removed the textured background and replaced it with a solid colour due to tiling problems
  
• Implemented an actual working flash slideshow
• Changed the outer glow rollover to an underline rollover using CSS
• Added a link to download the ticket prices as a document on the Tickets page
  

It has been an interesting journey through the different phases. Having already studied web design in the past, I didn't think I'd learn too much. However, I was wrong. My CSS skills have improved, and I have a better understanding on how to apply CSS to a HTML page.

Thank you to Ben and Geoff for their efforts in this unit.

HTML - Build

For this assignment, we were asked to take the content from our researched site and turn it into a basic HTML website.

Mine has been hosted by using my ISP's web hosting facilities.

http://users.tpg.com.au/j4ck//index.html

I'd first like to mention it looks best when viewed in Internet Explorer 6. This University does not have Chrome or IE8 so I tested everything in IE6. Firefox does some strange things to basic HTML pages. Every page has been tested with the W3C Validation Service and passes.

Following from the research and design phases, my website is based on The Great Southern Blues & Rockabilly Festival.

I tried to make my website as functional as possible and made sure it includes all of the trunk test elements and required elements as specified by the unit outline.

Pleased with the results and I'm looking forward to making it look aesthetically pleasing by using some CSS =)

Homepage Design - Great Southern Blues and Rockabilly Festival

As you can see above, I have redesigned the homepage for the Great Southern Blues and Rockabilly Festival. Click to see the full size image. I have used a simple colour scheme, mostly involving a series of blue/white/black shades. I chose this because it's a "blues" festival, so the colours tie in with the theme. They are aesthetically pleasing and easy on the eyes. The text is easy to read due to it contrasting with the blue background and font I've selected.

I made sure I included all relevant Trunk Test elements (on the homepage) such as a search bar, local page indicators, you-are-here indicators (rollovers in the navigation bar) and a Page ID (in the banner). In terms of design patterns I used a subtle pattern overlay effect on the background, boarders around content boxes, a picture slide-show and a news feed for displaying mini articles and site updates.

I decided to include a few photos from the original website to give the site a more festival-esque feel, and also to add some different colours to be unique from the site's colour scheme.

Overall I'm happy with my design and look forward to coding it up.

Week 3 (Part 2) - Design Patterns

This part is all about design patterns within websites. Design patterns are all about solving design problems within your website. Some examples of this could be; navigation, backgrounds, comments, forms and so on. I'm going to pick some patterns that will be useful to me when I design my website.

Articles can have many uses from being a news feed to driving the main content of your site. There are many different approaches to displaying articles; some simple, some complex. I personally like simple and easy to read article links. A large bold title and date/time of article are key features to a solid article list. I will be trying to incorporate an article list for the front page to serve as a news feed.


Backgrounds are an essential part of every website. From stock one tone colours t o extravagant patterns and designs. I personally like to keep things simple with a few colours and a texture overlay. Backgrounds are going to be behind all of your content so it's important to consider that before you invest hours and hours into creation.


Boarders are very useful for breaking up content within your pages. You can use them to outline important features and also to set the flow of your site. When it comes to boarders I make sure they contrast with the colour scheme and try to keep them simple. A good technique to to try a transparent boarder. This can be seen below.


The Log In form is needed if you want to have any membership/community aspects in your website. You can take a few approaches to incorporate this. One idea is to have a separate section just dedicated to members. This means having a link in your navigation to a login page. Another idea is to have a global login (you can log into the community at any given time and thus unlocking user features; such as the right to comment or rate objects). The second option is rather hard to implement, so I would opt for the first solution. You can see a good example of a global login below.


Navigation is another critical part to any website. Navigation is how users can access content and other pages within your website, so it's important to make it easy to use and uncomplicated. I personally like horizontally aligned navigation with drop down menus. This allows the designer to fit as many links in as possible and allow for a much wider variety of content and pages. A good example of this can be seen below.


Tables are a great way of displaying data and information within your pages. Tables can easily be made in HTML/CSS, but the advanced designer can really soup them up and make them look amazing. Tables work extremely well if you're designing a website that is heavy on information. Examples could include an Internet Service Provider or any kind of eCommerce website. I plan to use tables in my design to help display festival information and timetables.

Week 3 (Part 1) - Design Aesthetics

For this week we have two tasks and I'll look at the first one here.

This part is about doing research into design styles and aesthetics that both appeal to what I'd like to incorporate into my website and designs that I personally think look impressive. For my research I've looked into the website CSSelite.

The first category that I'd like to include in my design is a very clean looking website.

Mighty Dream is a web design studio by American web designer, Eric Grossnickle. The site looks incredible. It's a very clean and smooth looking website and the colour scheme works. It's easy on the eyes, and it's layout makes navigating simple. These are design elements I want to apply to my website; clean looks, easy navigation and an attractive colour scheme. Mighty Dream has all of these elements and more. Excellent design.


Secondly, I'd like to incorporate a strong colour scheme. Harmony within colours is very important and is something I'd like to learn more about.

answerJam is an interesting website. It's an anonymous community set up for users to share secrets, confessions, vents and dreams. But it's not the content of the website that I'm interested in. The colours that the designer has used work extremely well. The majority of the colours used are blue and white. They contrast together to make reading and browsing the website smooth and pleasing. Simple design and using minimal colours is something that I've always considered important, and is a factor I will be thinking about when I design my website.




Lastly I want to incorporate an overall unique design aspect and aesthetic approach. This means thinking outside the box of traditional website design. Turning images and pictures into functionality.

Take Kulturbanause for example, a German web design portfolio by Jonas Hellwig. He's developed a waterfall/mountain scenery and turned it into a website. This type of website design really impresses me. The website flows well and is easy to use. Normally I think that if someone has put huge amounts of work into the design stage, the usability might be compromised. However this is not the case with Kulturbanause. Even though I might not yet have the skills to produce something anywhere near this level, I'm still going to consider unique design aspects when it comes time to produce my website.

Now on to Part 2: Patterns.

Week 2 - The Trunk Test

So for week 2 we were asked to perform the "Trunk Test" on 3 websites. I decided to Google some random words and choose websites that way. I Googled "guitar", "golf" and "cheese" and ended up with the websites below.

The Guitar Brothers website failed the Trunk Test with only 3/6 elements. I was able to locate the site ID, sections and local navigation. However it was missing a proper page name, search feature and a YAH (You Are Here) indicator. I amended this by underlining the current page in the navigation bar, extending the page name to include the current website and also added a search link in the main navigation.

Guitar Brothers website with 3 highlighted elements.

Guitar Brothers website with added elements.

Next I looked at the Golf Australia website. This website also failed because, like the previous website, it only had 3/6 elements. It has a site ID, sections and local navigation but lacks a search feature, YAH indicators and a page title. So I added the missing elements to improve the page.

Golf Australia website with 3 highlighted elements.

Golf Australia website with added elements.

Lastly I looked at the Milawa Cheese Company website. This website did the best out of the 3 I had chosen, but still failed the test with 4/6 elements. It has a site ID, sections and local navigation and a basic page title but was missing YAH indicators and a search feature. This site was the easiest to fix as I just had to add the two missing features. I would also suggest that they change their background as that brown isn't very appealing.

Milawa Cheese Company website with 4 highlighted elements.

Milawa Cheese Company website with added elements.

It's interesting to note that no website that I viewed passed the test. Websites such as Youtube, Wikipedia and Google passed easily. The most common elements to leave out were the search element and then You Are Here indicators.

Week 1 - Introduction

So here's my WDP blog.

I'm Jack.

I've done a fair bit of web design and programming here at UC and other institutions. Also bits and pieces of photography and graphic design. However I'm an IT student, not a design student. But I've always loved design work and practices.

Anyways.

The festival that I've chosen is The Great Southern Blues & Rockabilly Festival. You can find the link to it below.

http://www.bluesfestival.tv/

That's all for now.