Joe's Blog

Well, as its draws to the end of my module and my assignment, I feel I must reflect on my experience.

It has definatly been a steep learning curve for me. I had only been briefly introduced to Dreamweaver a couple years ago and I am very new to it. However I have gained familarity with it and I would consider myself fluent with many of its functions. Obviously it is complex software and there is lots I still need to explore. Making a site about something I was interested in and passionate about helped me stay focused with the assignment. I am a big Radiohead fan and I enjoyed collecting all the lyrics and looking through all thier old albums again.

I enjoyed writing a blog alongside the website design; I thought it is the right medium to use to for the assignment, and very relevant to the fast evolving cyber world around us. I had never thought of keeping a blog so this also was a new concept to me.

I have also learnt a lot about the process a website designer must go through and what and who need to be considered. There are many elements of the webpage that must be taken into account when designing, such as the type of user and site content.

I believe the skills I have learnt will become increasing relevant to me on whichever career path I decide to take after university.

Peace out x

I found this website particually interesting. There is an article on usability and “how to annoy visitors to your website” written in a sarcastic manner. However it does draw up som very good points about how to avoid major design flaws as a begginner to website design.

http://www.thesitewizard.com/webdesign/usabilitymistakes.shtml

I have read them through and put some thought into their relevance to my site. Number 7 is about navigational usability and the importance of menu bars and nav bars. It is vital for me to utilise these tools effectively. I have given my site a consistant nav bar to ensure the user can navigate the site with ease. They also know which page they are on at any time and how to get back to the original page they were on or the homepage, without needing to hit back. This causes annoyance to many internet users including myself and is a great way to lose a consumer. If the user can always make their way back to the homepage they will begin to feel some comfort using the site and gain familiarity.

Number 4 discusses the importance of ensuring clicking a new link will not open a new internet browser window. This will frustrate any user and make the site seem amateur. I have been on many sites that do this and sometimes they seem to open new windows with me unaware of this fact, and when I go to type in the url bar, I see loads of windows open from the same website.

Number 3 is about the use of music on a homepage that plays automatically. I have come across this and it is very frustrating if you dont know where the audio is coming from/how to stop it and you already have music play on another program such as iTunes which I tend to. Also looping music has the same effect. I was considering putting a music player on my site that plays Radiohead tracks. However I decided against it, as I am not promoting Radiohead as such, instead I have created a site for people who are already fans of the band and knowing most Radiohead fans they are likely to have all of their music already. Users of the site will most likely already be aware of the band and thier works, otherwise they wouldn’t be on my site.

I found this website helpful in aiding understanding of CSS.

http://www.csszengarden.com/

It is a great example of CSS. It shows how the same text and images can be changed in so many ways using different CSS.

The idea of internet design using cascading style sheets, is to aid with consistancy of the website and save time for the designer. I created a CSS for my webpages using dreamweaver. This can be seen below.

From wikipedia-

“Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.

Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use the HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of all the original presentational HTML markup.”

Therefore, with each new page I create, all I need to do is attach my pre-made CSS to it and it will form the same style as the last one – thats the beauty of cascading style sheets! This gave my website consistancy, just as Jakob Nielson mentioned on his website.

The CSS code above says that my page will have -

Comic Sans MS Font
Font Size 16px
Colour Red
No text decoration

Pretty much anything can be added to this CSS and it will apply all the web pages that it is attached to. How fantastic is that?

This is a print screen of another one of my pages. This is the infomation page, with info on the band. It keeps to the theme of the site, with the repeated image along the left side and the blue nav bar along the top.

This print screen is an example of the lyrics pages I have created. Note the use of the album cover and the repetition along the left side. As the user scrolls down to view the lyrics – the album cover just continues to repeat.

Across the top is a selection of links to enable the user to get to the homepage and also get to the lyrics page of every other radiohead album. As you can see I have kept a similar theme to this page as with the homepage. Black text on a simple white background and the nav bar along the top.

I decided to use the last web comp for my home page. However I didnt like the black and white contrast as much soI went for a more simplistic look. I think it works very well with the ‘cutout’ pictures of the band along hte bottom and the large blank background. This combines with Radiohead’s image – no commercial, simplistic, and intelligent.

As you can see I have inserted a much needed navigation bar along the top of the page. I decided to use 5 tabs on the nav bar that cover all of the website.

Home – News – Lyrics – Info – Contact

This emcompasses all my webpages including the lyrics pages. Which can be accesses via the drop down menu when the lyrics tab is scrolled over.

I have been using the words of Jakob Neilson to aid me in my design and some of my webpage-related choices. His personal website is below. http://www.useit.com/

I found this article on the human brain, memory and webpages particually interesting. It discusses the idea that website designers need to take into account the length of short term memory when designing. It is generally believed that short term memory can hold 7 pieces of information, and these are lost around 20-30 seconds. Infomation must be rehearsed to be moved into the long term memory. An example of this concept put to work can be seen on most webpages nowadays. If you click on a link, it changes colour – this is to remind you, that you have already viewed this page. Therefore you do not have to store it in your LTM, as the page indicates this for you.

Another website which is very helpful is Web Style Guide.

I found this article on website navigation very relevant to me and my website development -

http://webstyleguide.com/wsg3/4-interface-design/2-navigation.html

It discusses the importance of “breadcrumbing” on big web sites with many pages. It also explains that web sites can give the user too many choices and therefore overwhelm them, leaving them confused about the page. I have taken this into account with my site, and as the user will notice, my page is very simple and minimal. This also ties into Radiohead image and style nicely.

I have been progressing with the development of my website. I am using the software, Adobe Dreamweaver CS4. I downloaded a demo of it in order to use the software. I am obviously reluctant to pay the full price for the software.

I have been playing around with  dreamweaver and gaining familiarity with it. I have had some minor difficulties in using it, as it is new to me. However I have been using the internet effectively to aid my learning of this new software (youtube tutorials etc.)

In the image above you can see a print screen of Dreamweaver. Along the top are all the individual webpages Im currently designing.

These are my 3 website template ideas, I have finally managed to upload them.

They are all very different designs and I have tryed to make them simplistic and striking. I like the blue theme of the first one and the “slap-dash” style of the Thom Yorke image on the right; and particually the pose he is holding I find very interesting. It seems a bit empty but the space in the centre is for the main content of the webpage.

I like the use of the large image on the second one. The oversized image leaves little room for other components, but I think it works well. The alternativaty of the design combines with radiohead’s image/style – it has a very indie feel to it. The use of black and white is interesting too.

The third design has a good use of contrasting colours with the black and white background. I like the cut out pictures of the band along the bottom, with them all showing different facial expressions

My next few blogs, I will discuss the different aspects of my first assignment on interface design. I hope to show my progression and the reasoning behind each of the choices I will make.

I have choosen to design a website on one of my favourite music artists. An unofficial fansite of Radiohead. It was a toss up between Velvet Underground and Radiohead, but I chose the Oxford outfit because I have been listening to them a lot recently and they are still together unlike VU, so I will have more updates to post on the site when I get to that stage.

To begin with I researched other radiohead fansites.

greenplastic.com

http://www.ateaseweb.com/

There were more than I had expected, but of course Radiohead are such a massive band with a huge cult following, in all four corners of the globe. In fact, a Google search for the term “radiohead fan site” brought about 355,000 results.

I must take into account their style of music, image and attitudes. In particular Thom Yorke (lead singer) is a strong environmentalist.

My audience is obviously fans of the band, most specifically English speaking ones. I noticed that the fansite greenplastic.com is done by an American and therefore the news post contains infomation that is more relevant to fans living in America (eg news of Thoms recent solo gigs in LA). My site will be better catered for the English fan. Therefore my audience is English fans.

My site will contain-

A news post about what the band are doing musically and as solo artists, and any gigs they are playing.

A discography, showing all the bands albums/covers/lyrics.

A section containing information about the band and how they have progressed over the years.

Also, a few articles on how the albums have influenced my life and my review and thoughts about the album/song