New Brief - Online Student Handbook

Project 1 is over and since then I've been mulling over this new brief that we've been given. In a nutshell we will be designing and coding an online student handbook for the Witt Art Department, and the best website may be picked to become live for the students to use. According to the brief it's been costing them too much to maintain one themselves so they're getting us to do all the work for them. How nice. 

My task for now seems to be making concepts, mockups and organising all those forms and content. I'll also be interviewing the tutors (who are the stakeholders of this project) to get their thoughts and opinions on what needs to go into the site. Will post my concepts soon.

Reflection time!

Well I have to say this project was a pretty good introduction to web design. I learned a lot about how websites are made, and what it takes just to make a simple working website.

HTML and CSS are hard beasts to tame, but with enough persistence and revision I'm sure I'll be able to understand it.

Stay tuned for more posts relating to my major project.

Looking forward to this one.

Adding a Simple Menu and Videos

For a while we had to deal with those annoying lists on our site. You can hide them via a nice little trick, but to solve them automatically, our tutor gave us a link to a nice website where we could get some code that fixes it all for us. How nice.

http://css.maxdesign.com.au/listamatic/index.htm - Index of the massive amount of lists that you can choose from. They're all free to use as well.

http://css.maxdesign.com.au/listamatic/horizontal03.htm - This was the particular one we used.

Also, we learned how to add a video into a page via video sites like youtube and vimeo.

You need to have your html file open, and the video that you want to add to your page.

Then you find the share/embed feature on those websites, and the site will give you the code that you need. Make sure the space that your video goes into isn't too small for it, otherwise you might have problems...

Guess that's the last learning related post eh? Neat.

More CSS styling, and some Image optimization

This class was really more of a continuation of the work we did last week, we learned more CSS and how to 'slice' images from Illustrator.

Basically the slice tool is used to take a selection of an image and save it in a separate location.

We did an interesting exercise where we gave our html elements one specific id, then used the CSS file to change the colours of the webpage.

There was a lesson on how to add an about page, however I got caught a bit behind and I couldn't follow along with it. I'm going to make a concerted effort to finish my test website as much as I can though.

Interface design

Week 5 was a lesson in visual design, basically we went over a brief design process much like the one you use for pretty much any other project, and we got a little task of redesigning the example website that we had to re-code the other day. 

Here's what I've managed to code so far at the time of writing: (adjusted to fit screen of course)

There's a bit more work that needs to be done to it, I've been working through it at my own pace and learning quite a lot as I do it. Thankfully it's not required for hand in for this project!

It's also interesting going back to design again, it's something I haven't done much at all and I was quite amazed at how quickly my classmates had made their mockups while I was still trying to pick the colours...

 Anyway, I think that's all I need to say, stay tuned for the next post.

The magical world of CSS Stylesheets.

If HTML is the skeleton of the website, CSS must be all the other good bits. Terrible analogy, I know, but CSS does so much stuff that would be impossible or extremely time consuming to do in HTML code.

Basically it organizes the looks and formatting of your website.

For your stylesheet to take any effect, you have to link the two on your HTML code.

Like so:

<link href="css/mainstyles.css" rel="stylesheet" type="text/css" />

The pink text is where the link to your stylesheet goes.

It works a little differently to HTML, but it's not too different.

h1 {color:blue; font-size:12px;}

Selector       Syntax

The selector works by, well, selecting the element of the html that you want to modify.

The syntax is what you want to do to the selection.

More websites and blogs - Good, bad and downright weird.

Throughout anyone's experience on the Internet, they're bound to find some websites that they like and dislike. Often we don't really give much thought to them, we click and move on. And sometimes you'll stumble across an example of an abysmal combination of design choices so bad it will stain your mind for a long, long time.

I've kinda kept a mental list of the all the websites I like and don't like over the years, and here's some of them.

(I guess there's more good than bad here because I'm not that well versed in design yet so I tend to only remember the really bad examples.)

Here's some bad ones:
http://www.deviantart.com/
This is an unlikely choice, because it's quite popular. Deviantart is an art website aimed at mostly young amateur artists. It's here because it basically is behind the times in terms of design. This is quite surprising, considering it's supposed to be a website about ART, for crying out loud. Ironically, it's a reflection of the quality of most the work that is submitted to the site. Boring and mostly derivative. Of course, there is good art here...but you have to look hard for it. Anyway, they definitely need to update it.

http://www.stirlingprintall.com/home/index
Summary: One giant business card with an animation of a man who seems to be dribbling a basketball with his elbow in the middle of his forearm.

http://templeoftheking.com/murray.html
I don't even know how I managed to stumble across this one.

It is a web designer's hell?  I think I'll let this speak for itself.


http://www.enritec.com/
Now I gotta ask, who the hell decided to stick all the office Post Its in zero gravity? Seriously, you have to chase them down via an 'interactive display' and you don't really know which one you're going to get.


Now some of the good ones:

http://www.qotsa.com/
This is the official website for the band Queens of the Stone Age, it's been overhauled to promote their new album and it works fine. From personal observation, I think the biggest goal of web design is to make it easy and enjoyable for someone to navigate your website, and this one does it well.

Also, they had a cool marketing campaign that basically replaced the old website with a single text box on a black background, with no hints on what it was for. Visitors had no idea what to put in there until someone put their email in, and the website changed into an odd intro for their next album.

http://www.nitrome.com/
I might be a little biased here. Nitrome is a flash games website, and I used to spend a fair amount of time playing their games when I was a lot younger. Their website is ok, it's a bit crowded and oversaturated (probably due to their demographic), and they use a few too many ads. The main reason why I like it is because of their content. Every button, heading and background plus other content has been made by their pixel artists who work on the games themselves. They integrate their own characters into the site, and regularly change the 'skins' of the site.

It works well and I like it. So there.

Spotify Web Campaign

This one caught me by surprise, I've used the app for this site but I've never visited the actual website before. This is the advertising page to get you to sign up. I think the main reason why it's here is because of the massive videos that are in the background, they look really nice and I've never seen a website do that before. It's basically happy people listening to music and doing relaxing things with various colour filters, kinda lame but it looks nice. It made this jaded cynic actually sit back and watch some of it.

Look at the time. Better get movin!