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!

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?!

This project was a little harder for me than the other ones. It took me a while to come up with ideas for how to set it up. I'm happy with it for the most part. I wanted my contents page to be different than most magazines but still work. I like the layout but I could have added more text information. My cover came together pretty well. I wanted it to look like a legit magazine cover and I'm not sure if I succeeded. I didn't put a big title on my article which I should have done... don't exactly know why I didn't realize that because on my first draft of the magazine I had done that?! Anyway, overall I'm pretty happy! Let me know what you think! Thanks!

FINAL!! So happy to be done with it! I really liked doing it though and learning so much more about photoshop! The type on the left is a little big and i put the spine title the wrong way but all in all.. super happy with it! :)

I didn't really like how my first one turned out so I went to the cemetery to take some more pictures and put an actual book down and put it together the way I wanted instead of trying to photoshop in a million different things. I got some really good pictures from that shoot and put it in the layout of front and back cover instead of trying to design 2 separate ones. This picture is the one I decided to work with!

BOOK COVER!! I decided to make a cover for The Book Thief by Markus Zusak. My initial idea was to have a big bonfire type thing burning a bunch of books and a little girl running away with one of them but that kinda gives away more of the story than I wanted. I then had the idea of doing a scene from a graveyard. soo... this is my first attempt at that..

Final pictograms!! Lots of frustration and time.. but I think they turned out pretty well! The far left is a little top heavy but I don't know exactly how to fix that. Other than that .. I'm happy with them!