Thursday, September 23, 2010

Breadcrumbs Tutorial

Breadcrumbs

This tutorial will teach you how to add breadcrumbs to the top of your html page to help with navigation.

1. | (pipe)
2. > (arrow)
3. : (colon)

These are just a few of the more common breadcrumbs used in websites.
This tutorial will go through the separators in order and show you how to get that look!

1. The Pipe Separator "|"
On a mac you get this symbol by pressing "shift" and the "|" button located right below the delete button.

The code for the pipe separator looks like this:



Quick Explanation of the Code:
The name in quotations is the page that you want the link in your bread crumb to go to. The first words in quotes are the "home.html"

Next you add the word. Home. Home is the button you will click on that will take them back to the home page. Same goes for History and Production. The separators go between each set of page/name tags.

Make sure you put a space before and after each separator.

This is what your breadcrumbs should look like with the pipe separator!

2. Arrow Separators ">"

The same format goes for all of them just the actual symbol changes.



3. Colon Separators ":"



This is just a quick and simple way to get different looks for breadcrumbs on your website!

Thursday, September 2, 2010

GID Site Critique/ Project Proposal

http://www.griplimited.com/#
http://caferio.com/
http://www.smashingmagazine.com/

1. I have never really thought of looking at the websites of my favorite restaurants so I pulled up Cafe Rio's not really expecting to be impressed but the opposite happened. The site is flash and I think it is very successful. The design of the page is what initially caught my attention because it looks like the inside of the restaurant. There is also typography used in each section of the page. The page is dynamic and the posters on the wall are constantly changing. It's a fun site and holds interest.

2. The navigation is in the form of plaques or posters on the wall. On the menu page whenever you click on a topic it scribbles it out to show what page you're on. I don't know what fonts are used but there are a lot of different interesting ones. There are different places on the site that you can find information so there is a navigation page for each. The main information is played on the top half of the counter and the other information bars are displayed below.

3a. The site uses mostly local color. It mimics the inside of the actual Cafe Rio restaurant and gives the same feel. The colors are warm and comforting, probably how they want their food to be also.

b. There is a lot of texture going on from the bunch of peppers hanging on each side to the wood stand/ counter.

c. The site is dynamic and the posters change on the back wall on the home page. When you get more into the site the pages become pretty static.

d. There is no sound associated with this page. Not even any mexican music?!

f. The content on the top of the counter is bigger which gives visual hierarchy. There is a lot more explained on top than the bars of information below.

g. The home button is located at the top of the page where it generally is. But you have to scroll down to find the information you would probably be coming to the site for such as locations, menu, etc.

h. The same square shape is repeated throughout the page just in different sizes and colors. The top half of the page is divided into thirds and those are the posters/plaques that change on the home page.

4. A lot of the content on this site is visual. The purpose is to help people find out information about Cafe Rio. I think the imagery helps the delivery of the information. I don't think it's hard to get the information out of the site that you would be looking for.

5. The audience for this site would be people who like Cafe Rio or prospective customers to check it out before they go. It gives a good preview of what the actual restaurant is like and the things would find there. It communicates through the posters on the wall that tell about the restaurant and the information bars below.



I still don't know what I want to do for my first project. Still trying to decide between a person, place, or thing?!