Why Code Counts

Code:
HTML and CSS are NOT programming. They identify and describe components of documents. (X)HTML is used to describe Content, and CSS how it looks.

Important skills for websites:

• CSS
• HTML
• Layout
• Typography
• Flash
• Colour

You must get your pages to display well in all browsers. Internet Explorer has bad CSS rendering. It is best to have small files for quicker downloads.

Semantic HTML= web standard- HTML tags.
e.g. for the most important heading, use a h1 tag.
improves search, adjustable for brail readers etc.

Code=

• better results
• flexibility
• efficiency
• availability
• adaptability
• longevity
• better design
  

Organisation and Influences

I really like the design of Nick Jones’ Folio (narrow design) the way the tabs scroll down the side of the page. I think this is really original and different to many other websites I’ve seen, and I really like the feel of the site and the navigation. It’s so simply laid out because to the left of the tab bar is his background, and to the right of it is the content which changes depending on which tab you click. The way he has done it, is animated, which im not sure that I could do, but if I cant I could just have it flat instead of moving up and down, and just have the tab being highlighted as you go to click it.

I’ve decided how I’m going to arrange the content of the Stonefest website. The welcome page will contain the welcome paragraph, the Facebook link, the line-up and times. I’ll have a sign-up box at the top right corner of each page so you can sign up to the mailing list and get updates. I noticed on the welcome page, content is repeated quite a bit just to fill in the spaces in the two columns, so I’ll get rid of the Stonefest poster that’s on the front page, the map, the extra ticket info and the mailing list. On the second tab link I’ll have artists- their pictures and also links to all their websites so you can really check out what they’re like. In the next tab I’ll have ticket info and a sub page with “essential information” that’s under the ticket info on the original site. On the next tab will be history with another sub page of the article on the original site. The next tab will be contact info followed by a map on the next tab. This map will be a google map that has a file download so you can see it in a bigger image. The next tab will be a search tab followed by a music player from last FM that will have music from the artists appearing at Stonefest.

Ive also had quite a lot of influences on the feel of the site i.e the design aspects. I had an idea of using flowers growing up the sides of the content, a mosh pit, flickering lights, a sun, butterflies, birds and day time type things.. also had an idea for the silhouette of people to be cut out in bits, or a little bit distorted, because when the lights flash you don’t see everything so clearly. Not sure if I’ve made all this too complex and time consuming. I might see if I can just do something simple like the teacher did in the tute.. she just used a plain textured background from CG TEXTURES with a photo of a violin off to the side. I want the stonefest site to be colourful and exciting though because that’s what it’s all about. I got some ideas from playground weekender and good vibes but I’m taking my time to work out what sort of pictures im using for the background. I’m thinking lots of bright colours and silhouettes.

Design Reference Assignment

7 Characteristics:
I have incorporated Steve Krug's Trunk Test into my 7 characteristics.

1. What Site is this/ Logo: Each of these websites have a logo either at the top of the page, or off to the side. This is one of Steve Krugg's Characteristics to a good website. You should always know what site you're on. This is a good functional attribute of the website, and also a good visual aspect to identify and brand the site.
   
2. Major Sections/ Layout: Each of these sites have a header, navigation bar, content and information, links, flash files (motion) and colours/ design features that help to brand/ identify the site.
   
3. Options/ Navigation: The sites all have a navigation bar to take you to other sections of the site. I particularly like "narrow designs" navigation bar, because it goes down the centre of the page and scrolls up and down. this could be something i could be influenced by for my site. For the music sites, they have links to things such as Bands, Shows, Pictures, Tickets and Contact info. Some also have History and Welcome etc.
   
4. What Page am I on/ Content: You can tell which page you're on by the links you click. It's quite useful when sites share the same background, but the content changes when you click a tab. It's great because its fresh, clean and not over-the-top. You know where you are and how to get back. These sites all share the same background. The content is the most important part of the site, so it needs to be clear, easily accessible and so on. These sites all convey these aspects quite well.
   
5. Colours/ Design aspect: A visual/aesthetic characteristic shared by all these sites is the use of colour. They all have some form of bright colour integrated into them for excitement. I've noticed they all have blue which i immediately connect with stonefest. This reminds me of sky and daytime.
   
6. Illustrations/ Design aspect: All the sites have illustrations either as the background or in different sections of the site. These illustrations add some visual interest and excitement. They have bright colours and add to the feel of the site.
   
7. Simplicity/ Design aspect: Simplicity is the key to a good website. Easy to read, comprehend and navigate. The fact these sites have the navigation bar and share the same background makes them easy to use. they're not too cluttered like previous sites i have seen where the information is scattered everywhere and there are lots of columns and sidebars etc.
   

BIG DAY OUT

FLASH GAMING SUMMIT

GOOD VIBES

PLAYGROUND WEEKENDER

NARROW DESIGNS

Week 3 Change

I've decided to switch from Wordpress to Blogger, because blogger has easily editable html, so this will be of use when I need to do the blog theme project.

Some tips for the web design draft:

• Take a screenshot of text from another website and compare sizes with your design draft to see if you're on the right track with your text size
• to add height to the design draft, add space to the canvas size in photoshop and merge it down so its one layer.

Web Tute Week 3:

Some websites useful for the website:

• delicious
• Textures
• Pictures
• more pictures
• safe fonts to use

Tips:

• Set up a grid in your design draft so the website is ordered and makes sense. This will also make it neat and clean.
• Use some Photoshop brushes if you like or vector images
• The background colour and type colour should have contrast so its easy to read
  
• Music Player?

I am Now continuing to search more websites for the Design Reference Project which is due on monday.

Some sites I have been thinking about are:

• Flash Gaming Summit
• Hey Josh- Blog
• playground weekender
• Good vibes
• Narrow Design
  

So, from the first tute, i now know how to make a screenshot of a whole page or a selection on a mac.

Whole Page: Apple + Shift+ 3
Selection: Apple + Shift + 4

I also know how to make a design draft ( which is due in week 5) on Photoshop.
File > New> Preset web > 1024 x 768 > 72 resolution > rgb colour
To create a centred area in the middle, (770 pixels) use the selection tool and choose fixed size for style, width 127 pixels, then click on the screen so the selection comes up. This is the size you use of either side of the centre. Drag out a guide on each side. The Middle is the centred area.
If you wish to create a 3 column text in the middle, just do 770 divided by 3

To save for web and devices in photoshop > file > save for web & devices > 2up > jpeg > quality 60

This week I have also done some research of websites for my design reference and have some ideas for the stonefest site. I will Post soon.

I just wanted to say how good I thought the online lecture was!! it was great because you can pause it whenever you like to write notes down and its just so convenient and time saving. It was also really great how there were examples shown about what was being talked about. It also made me think about all the aspects that should be on a web site, because i'd never really thought about that before because i was used to it all being handed to me. Steve Krug's Trunk test was quite useful, because i now know all the elements that make a good website and should be included. You should be able to tell these things when you're on any page:

- What site is this
- what page am i on
- what are the major sections of this site
- what are my options at this level
- where am i in the scheme of things
- how can i search

so, good navigation should include=
- site id
- page name
-sections
-navigation
-you are here indicator
-search

For the assignment, the 5 reference sites should include all these things, and also have conventions most relevant to the aims of the stonefest website.

The main needs of the audience for the site are:

It's for students, so should be aesthetically pleasing to gain their interest, and it also should include info about whats on each day, the artists playing there and how to get tickets.

so now i will have a look around for sites that i like the look of (i am part of the target audience), have the characteristics of the trunk test, good navigation, and are in the same field as stonefest- so other music festivals. I also need to consider my own image making abilities- lots of websites have flash videos on them- which i dont really know how to do....

This is the first blog post I've ever done.

It's going to be really exciting and challenging to learn web design, because at the moment I have absolutely no idea how to do anthyhing- but it'll be great to learn. I've read the first 3 chapters in the text book so far.. and it looks like it'll be good for beginners. I've chosen to use wordpress for my blog because it looks easy to add images, video, music etc to.. which is what the main idea of this blog is..

I've decided to choose Stonefest for my website because I think it will be a fun thing to do myself- I'm only just learning how to make websites- so as a learning project I'd like to do something that appeals to me, so it'll be more fun and I'll be more motivated and encouraged to do it.

So now I will start researching the 5 websites that I want to use for the first project, and that I'll use as influences for my new Stonefest website!!