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!

Markup structure and stuff.

(Note: The main reason why I'm posting this now rather than back in week 3 is the fact that this and several other blog posts were half written as drafts at the time. I blame mostly myself, I think I got a bit too caught up with carving...)

Ok in this weeks class we learned a bit more about html amongst other things, and how to mark up a design.

One of the basic concepts was about nesting: Basically because tags work with brackets, you can put multiple tags within one line of code so that they all work together.


After we got a quick tutorial through that we moved onto marking up a simple dance website Philippa had made for us to use. How nice. Here's what the original looks like.

Turns out marking up the design was a good introduction into just how technical web design can get. Lots of meddling with code, but it's satisfying to get it right.

I also integrated a Twitter feed into my blog, turns out a lot of social media sites will provide code for a plugin that you can put into your blog. This is pretty easy to do, and I'm glad that they provide this service.
I haven't really given twitter much of a proper use yet, but I can see it's usefulness for sure.


Stay tuned!

HTML, Social media and how the web works

As a kid I can remember mucking around on the Internet one day and finding the source code of a website. It was a weird experience to see the inner workings of a website, as it was a massive wall of multicoloured text with thousands of unintelligible characters. And now I'm here to give you a very basic introduction as to how it all works.

HTML stands for HyperText Markup Language, and my impression of it so far is that it seems to be the skeleton of websites. Really it makes up the basic layout of a website and once you get your head around it, it's not that hard to understand. (You just have to remember all those tags...)

Html works by using tags within angle brackets. A simple example is making a piece of text bold. You take your text, and enclose it like so:

                   Apricot -(our text we wish to change)

+

                <b> </b> -(the bold tag we need)

=

Apricot

You might have come across this simple tag if you've participated in a discussion forum before, as they allow you to use some tags like this.

To expand on it further, here's a really simple example from w3schools.com.

<!DOCTYPE html> 
<html> 
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

And you'll end up with something like this:

My First Heading

My first paragraph.



Now that's all out of the way, here's a some links to some of the social media sites that I use:
Twitter: https://twitter.com/LordOfApricots
Deviantart:  http://apricotproductions.deviantart.com/ (occupied with mostly old 'artwork' I'm afraid) 

References: 
www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
- date of retrieval: 14/09/2013

Blogs. Websites. Ones I like, ones I don't like.

Part of our assignment was to post some examples of our favourite blogs and websites, I'm going to take this a step further and post all the crappy websites and blogs that I don't like as well.

Good

http://howardlyon.com/blog/home/ - A blog with great content and a website that compliments the quality of the content.

http://www.lovelaneny.com/index.php - This is a well designed website for fancy pants high end real estate in New York, in fact it's so high end that when I got curious and decided to look the cost of some of these places, I'm pretty sure my eyes started to bleed. 

Personally I think the whole theme is a little sappy but the smooth animations, crisp photos and good layouts work well. I'm pretty sure it works for their perceived target market too. 

http://www.threadless.com/ - Modern, simple design is featured here with copious amounts of hipster tattoos, pop culture references and those god awful glasses that everyone seems to wear these days. 

Bad

Note: a lot of these blogs have brilliant content, but really poor web design.

http://anthonyvanarsdale.blogspot.co.nz/ - the problem here isn't so much bad web design as it is a lack of design. It seems like the artist doesn't really care about the layout and design behind his blog. That's not necessarily a bad thing, at the end of the day it's about his art and that's all that matters. But I'm sure a bit of effort put into the design of the blog will compliment his artwork a lot better.

http://www.marknewmansculpture.com/ - This guy is an amazing sculptor, I'm quite familiar with his work but Papyrus fonts and blue and red contrasting colours just don't work together. And everything's so damn small!

http://www.russianswords.com/Stalingrad-sword.htm - This one is pretty self explanatory, cyan and neon green...

The History of ..THE INTERNET...

Big topic. One that will be hard to fully explain in a blog post.
So many people in this world access it today, and it's very easy to take it for granted.

I guess the question is, how did we get from this;

To this?

Well let's find out...

(This blog post will cover the formation and early days of the Internet.)

First off, we need to make a distinction between the Internet and the World Wide Web.
The Internet is a globally connected system of computers that serve their user's needs.
The World Wide Web is the service that runs on the Internet and holds all the resources that we access.
Got it? Good.

So how did the Internet come into this world? Well, it all started way back in the 1950's when the first computers were being pushed to their full potential. It had its humble beginnings with a simple message that was sent from the University of California to the Stanford Research Institute.

They were using an early version of something similar to the Internet called ARPANet, which was introduced around about 1970. It was a connected network of university and research computers. More and more institutes joined and saw the potential of this network. Eventually as other networks were being founded in various countries around the globe, they started to become increasingly interconnected.

In the 70s through to the 90s, things like e-mail, pc modems, spam, domain names and most of the basic ingredients of the Internet were invented during this time.

Then the World Wide Web was born.
The first proposal for a collective storage system for links, pictures and text came from Tim Berners-Lee in 1990, which was also the year that the first commercial internet service provider was launched. After that, the Internet started to become more and more accessible to the average user, with things like easy to use web browsers being implemented. Through the mid 90's to the beginning of the new millennium, things such as webmail, file sharing, better access, Google and Wikipedia were invented.

So I guess that's a fair blurb on how the early internet came to be. Currently we're dealing with internet privacy issues as our lives become increasingly interconnected with the internet amongst other things, so the future is definitely going to be interesting...





Image credits:

1 - http://photos.myjoyonline.com/photos/news/201211/370895532_532414.jpg

2 - http://www.joeydevilla.com/2010/07/10/bacon-space-kitty/

The Generic Welcome Page

Hello people, this will be my blog for the Web Media 1 course that I am currently taking.

Through this blog I'll posting the topics required by my project brief, and anything else that I find interesting that relates to art and web design.

Stay tuned.