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.