SINGLE PAGE WEB SITES

Do you know which page style best benefits your web site? Have u ever considered a single page web site, or has a multi page site been the only thing t can be one of the most interesting and cool web sites that you can find.

For this blog I will be comparing “Team Geek” http://www.teamgeek.co.za/#whob and “Every Last Drop” http://everylastdrop.co.uk. These web sites both use the single page concept very differently. They each have a unique approach that best reflects their individual message.

EVERY LAST DROP

 FIRST SIGHT

When I first visited “Every Last Drop” (http://everylastdrop.co.uk.) my first impression was that it looked interesting. I was surprised that I did not see a navigation bar and I thought maybe the image was the homepage and but then I after I saw the sign that said scroll down I thought umm maybe the navigation bar is a little further down the page. When I fist started to scroll down I was wondering why the page wasn’t going down then I was chocked when I saw the illustrations begin to move.

 

NAVIGATION | SCROLLING

“Every Last Drop” does not have an average navigation bar like other web sites do.  Instead of getting different tabs with options of what information you want to read out or go directly to, you get the option of scrolling down.

You have two different ways of scrolling through the page; you could do it manually at your own pace like any other web site with your mouse. When you choose to use your mouse to scroll at your own speed you can get rough the site a lot faster while still getting the bits of information scattered trough out because even when u have the option if speeding trough it you still don’t miss any information because you want to see the transitions as you go further down the page. Or you can use their scrolling system, which consists of this little arrow at the bottom right side of the page. Once you click it the page will start to move on it’s on and take pauses where information can be found. If you choose to use the arrow while the page is still moving the arrow disappears.

INFORMATION

The information found in this site is in small portions and it is very well distributed trough the single page web site. It not only contributes to the story being told by the illustration but it gives valuable information at the same time.

Most of us would do anything to get out of a boring presentation about why we need to conserve water, and if you are or have a child they are bound to get restless or bored and not pay attention to the information being given to them. But what this web site does is that it delivers the same information in a fun interactive way that doesn’t make you feel like you are getting a lecture and it is perfect for both adults and children alike.

Because the information is also being given to you in small portions rather than large paragraphs or pages of context it again makes it easier to not only retain the attention but to really take in.

ILLUSTRATIONS

As humans we tend to be visual people, especially as a child. When we see something at work rather than just being given facts we feel a more personal connection.

Most websites consist of imagery and small batches of information like “Every Last Drop”, but what is really interesting about this web site in comparison to others is that instead of getting just plain images or static illustrations that depicts the different information, you get this interactive experience as you get to see the daily life of this character that has been created just for us.

DESIGN

The design of this web site is a cleaver one. I think the use of the same color scheme through the entire website was a smart idea. It makes everything look unified and allows a better transition from one part of the story to the next.

The pink, brownish color used trough me off at first. It seemed weird but maybe its supposed to represent the unclean water?

The section at the very bottom of the page could use some revision. While the information trough the site is thoughtfully placed and flows as the illustrations change and the story unfolds, then you reach the end and it seems like it doesn’t quite belong. While before everything was proportionate to each other we now have very disproportional. The adds are all over the place.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      TEAM GEEK

FIRST SIGHT

When I first visited “Team Geek” (http://www.teamgeek.co.za/#whob) my first impression was that it looked very symmetrical and that it didn’t really look like anything out of the ordinary. Just seemed like a normal web site, like any other.

NAVIGATION

“Team Geek” like other websites has its navigation bar at the top, with different sections u can go to. One thing that is cool is that rather than just having the words on the navigation, you have the icons, which once you move your mouse over them it changes from the icon to the name that was given to that section. It makes it more fun and really interesting, this is also something not to many web sites do.

 IMAGES

In this web site we can find both illustrations and photography. The illustrations are simple but well made, and add to this sense of this web site revolving around technology. Then you can also find photography when you get to mean the team. I think it’s a good thing that they used photography rather than an illustration for the team introduction because this makes it more person, it is easier for people to feel a connection and therefore will be more like to visit the site again or use their business.

INFORMATION

This web site is not very big in information. There are some small acts here and there, but no large body of content which in this case is a good thing because on line people don’t like reading to much at once and keeping information in small amounts like that helps keep the visitors attention.

DESIGN

It uses clean simple lines and sans serif typeface that goes well with the content. The colors choices are very light and are used consistently trough the entire site that keeps everything consistent.

One of the best features of this website is that when you move the mouse over the icons found at the navigation bar, a new color box slides in from top to bottom and you can read what that tab is about. This also happens with other icon trough the site only rather than the new box coming from the top it moves in from the bottom up.

The photographs of the team members use a similar solution, although instead of a color box sliding in with information about them, the photograph morphs from a series shot to a funny one. This helps add a nice fun environment to the web site.

 

MILEY CYRUS

FIRST SIGHT

When I first visited the web site for Miley Cyrus I was surprised at how it looked. It is a mess, nothing really looks like it was placed with thought and it is just everywhere. Although I know that this was purposely designed it still does not look that good.

NAVIGATION

The navigation bar is very hard to find at first because the name place is below the navigation bar and it is just floating text, with images all around. When you more the mouse over it you get a white color box but when u go into a new tab it does not tell u anywhere, which tab u, are on and the white box that was in the navigation bar disappears.

In the news page there is a little bear that has a word bubble saying 1 of 2 and then when u hover over the bear the curser turns into a pointing hand which I so you know to click on the bear to go to next page.

IMAGES

There are lots of images found placed all over the page. Some are cutouts, others are whole, and are accompanied by stick on that where added. There is some animation found but it’s very few.

INFORMATION

Information is found very lightly trough the website. There are only tree tabs found, including the home page so information is very limited.

The home page includes the nameplate, a section to add to the mailing list, which is barely visible, and a section to the left, which says, “BUY! BUY! BUY!” which does change colors when you go over it, but there is no other info. Both news and tours seem to have the same information and it is very limited. There is really not a lot to look at.

DESIGN

I’m sure that there was some thought process when this web page was designed but it feels like someone just trough a bunch of photographs on the page with some simple type and called it a day. Everything is all over the place and is distracting, overwhelming and makes me feel a little claustrophobic.

There is so much stuff every where that even some of the cool little things like the teddy bear that leads to the second page of the news gets lots because everything is so crowded and stuff is so hard to locate.

HOW WOULD A ONE PAGE DESIGN BENEFIT YOU?

I think that a one page design would benefit Miley Cyrus because she wants something different out of the norm, which explains why hers looks all over the place right now, but a one page design is also something that is not often used. She also does not have that much information in her site and so a single page web site would help get things organized just as well as a multi page site.

WHO DID IT BETTER

I think that both “Every Last Drop” and “Team Geek” web site utilize the “single page” concept very well; they just do it in very different ways.

“Team Geek” utilizes a more traditional single page concept. It has a navigation bar like any other web site and even thought each section relates to the other.

“Every Last Drop” utilizes a less traditional single page concept. The web site as a whole, tells a story. Its like watching an animated movie but slower.

THE NUANCES OF UX with NICK FLINCK

Before I go on to tell you all about my day and this amazing speaker that we got the opportunity to listen to I would just like to apologize for the awful low res photographs in this blog post.

Ok now that that’s covered; I first found out about this even during my Web Design class from our professor Blake. As soon as I saw the flyer that he handed out I was thinking what a great opportunity this would be, and I was not mistaken.

AIGA JACKSONVILLE PRESENTS

The event name: Let’s Gets DIGITAL THE NUANCES OF UX
With: NICK FINCK
Date: NOVEMBER 7TH, 2013
Time: 6PM
Location: EVERBANK CENTER

SPONSORED BY: MODIS
AS WELL AS CHARACTER COUNTS! AND IGNITE

On a normal week we have class until almost 6:00 P.M., and since this event started at 6:00 P.M. we went straight from class to the event. Since time was to tight Evita, Stormy and I decided that it would be best to go to our normal classes dressed for the event later at night.

Because downtown is a little tricky to drive in I decided to follow Evita and Stormy and aside from a little traffic caused by the fair being in town we made our way rather smoothly.

THE EVENT

The event was held at Everbank Center, which was very elegant as always. We then proceeded to the second floor where we signed in. There where a couple of people already present including our wonderful professor Blake.

After the sign in table, there was a table where you could ask information on how to join AIGA, as well as some t-shirts. After that there was a beverage table, with water, soda drinks, beer and wine.

Further down closer to a seating area there was a food table with cheeses, chips, humus, nuts, brownies among other things which where all created by Conscious eats Character counts.

This program allows ex-felons an opportunity to better themselves. They also do catering for party’s or events other than those hosted by AIGA. The woman that was representing them that night said something that I’m sure touched everyone present that night. One of the chefs had said to her, that he had already been able to buy his kids Christmas presents, something he was never able to do before, since he was always scrambling to be able to afford any present.” These are people that want a second chance and they deserve one. I highly recommend them! These chefs make some of the most delicious food that I have ever tasted. It is truly amazing.

We grabbed some of that delicious food and went to sit. It was a large group of us and we were all conversing and just enjoying the food.

Design in Toyland is coming up soon and we get the opportunity to make toy out of a child’s drawing.The toy that you produce will be shown at The Museum. You can sign up at designersintoyland.org

There was a speaker from Folio present and he just wanted to thank everyone for reading Folio. As well as ask us to continue supporting and reading Folio.

Mathew won a social media award

. He has worked for companies like Adobe, Intel, and opra.com.

I bet your wondering when am I going to get to talking about the speaker!? Well the wait is over!

Presenting:
The Nuances of Ux
Presented by Nick Finck
November 7, 2013

Finck currently works for Amazon AWS as the Senior manager of user experience.
Personal Site: Nickflinck.com
Nickname: Notable UX toreador
Twitter: #UX nuances

Overview (by Fink, just thought it would be easier to read that the photograph)

• Details
• Simplification
• Processes
• Research
• Our Job

User Interface (UI) is experience we hope someone has. It is about type, buttons, grids, design, etc. It does not involve being there in person.

User Experience (UX) is about the actually experience. It is the act of being there yourself, live, doing it.

Ever hear, Devil is in the details? Well this applies here very well, attention to every little thing is key in design. Every little detail counts. If you begin taking things away and continue to do so then it is not design, but on the other hand if you add to much then it just become confusing and makes no sense.

I found out the coolest thing about Pinterest that night. If you have ever visited Pinterest will probably noticed that there are some gray boxes in the back images. Well what Pinterest does is that this back boxes are derived based on darkest color of image that will be shown.

Pinterest if a pretty interesting site, but what if you need a factual report, some charts and wheels maybe? Usually charts are viewed as boring and predictable but the mint app which is a wheel is anything but boring. This wheel spins and as it does the information around it changes according to the position it is stopped in. Some may have thought this to be crazy but someone thought differently and now u have this fun, interesting way of viewing information, that spins.

The Paper app is another that people said just shouldn’t get done. You cant have a 3D paper on the screen it will be weird but its actually fun and looks very cool.

When the CNN Money app was designed in the wireframes the three gray column on the right where meant as the other pages that would come out one at a time when tapped on. Because the engineer did not know this he built the app as he saw it in the wire frames and when tapped on one right and other just shows up with no transition. The designer then had to go back and create some Tween frames –storyboard frames– in order to show the engineer how the other information was supposed to move and show up. In the end result you can see a transition. It starts out fast and slowly comes to a stop. You can do a single, double or triple tap. Watching normal people interact with the tap in the research help them figure out how long it should take for the other parts to come in, how long will it take someone to try the double tap or triple tap.

Now the CNN app is a little different. The same team worked on it but in this case instead of tapping it involved the tilting motion of the phone and iPad. They had to make sure that the sensor for the content to change was not to sensitive or not sensitive enough. Also instead of just having the page magically completely change and leaving people wondering where the information moved to, what they did is that they made each individual box of content move and tilt and pivot to its new location on the screen giving the user some relevance of where things where originally and where they ended.

Ever make a shopping list and then completely forget about it? Well with this new app Target will soon be coming out with you don’t have to worry anymore. In the app you can make your shopping list right in your phone and when ever you happen to be near a store the app will let you know you are near a Target and you can choose if you would like to stop at that time or at a later time. Once you actually go into the store the app navigates you through the fastest route in the store showing you a path with all the items on the list on the way, and then you can checkout from your own phone. No more time waiting in line.

Nova which is a weather report is not very accurate. It takes its snow information from sky resorts, and of course they would exaggerate about the amount of snow at their resorts to get more people. Nova gets its measure of snowfall on different increments. You might get 6”, then 20”, and then 6”. This is due to the snow that gets accumulated on the tree tops and then falls when it gets to be a lot.

The best snow app shows above not only looks good but it also shows good data with specific details – it has different number sizes to show different things. This is an app that  people have and used.

Rams calls simplicity to its purest form. But simplicity and adding details are not mutually exclusive.

Showtime navigation is apple and oranges navigation. It doesn’t make sense or tend to the user needs.

We need to be careful when making a design not to over simplify so much so that we don’t know what the hell great design look at, but also need to be careful not to use to much. If you are not paying attention to the design used then that’s also bad and then you have to get back to square one. If you don’t think everything through then it comes to bite you in the ass and can sets back your entire project.

The wife had to make sure to continue building because if she stopped building then would get haunted. So she would tell the contractor to build and because there was no design plan there were staircase going into the ceiling, windows on the floor that you can look at the cement below.

Imagine if Disney was built the same way it would be a nightmare! With all the screaming children and all the people, it would be pure chaos.

Instead of thinking about selling something we should think of how does better people sell experience not feature.

Research 1^st hand by experience users houses and look to see where they struggle. They don’t stop them, need to let them figure out and see how long takes them to figure out problem they know they have.

To do research for the Kinect 800 houses 4 countries to see how people who have never used it before would interact with it. They would start by sending a letter for approval, they would receive a box and were told to just pretend Christmas present. A lot people couldn’t get the box open because they couldn’t find the hatch that would open it. One guy when they told him to open it the way he normally would a box took a 6” knife to it. This lead to the design on the box being altered so that the opening was more obvious.
To make the Kinect work you do the crazy American wave with hands waving fanatically in the air but in countries like china they do not do this so that was something else that needed to be addressed. As well as other instructions which needed to be made more obvious.

Coffee machines are complicated. Who knew something that should be so simple is so hard to figure out. So what better way to know what each button is for than to write it with a sharpie in the coffee maker itself. And does anyone know why there is a coffee cup with bacon coming out the top? Well that’s what the instruction manual is for.

Service blueprint shows how the user experiences with a product.

All diff fields but all related. Below you can see kids with dyslexia using an app that was designed to help them learn how to live with dyslexia and read better.

Pope announcement in 2005 involved all this people there just taking everything in and being in the moment but in 2013 no it’s not candles that you see, they are phones and iPads. This shows what a big impact screen design has in the world.

User experience is subjective. For example if there is an app which tells you which route has less traffic, then everyone would take the route with less traffic and so it would cause there to be traffic and so you would have a crappy day and then you would hate the app.

One most endangered animals on planet the cheetah. And with this technical overwhelming world we could be next. We need to think about what we design and how it will impact other people

As designer it’s our job to push back with our boss. Why!? To help bettering the word.
We are living in a technology tsunami. We have a lot of information coming at us, constantly.

We are no longer experiencing the world, we need to stop this way of thinking, sell something simple that has through and helps someone make things easier.

What we create has impact on people even if just one company. Our job is to create world we want to live in trough design.

Design has that big a role in our lives and society. We need to stop fighting with each other and create a better tomorrow.

Contact

• Personal site: NickFinck.com
• Email: nickfink@gmail.com
• Twitter: @nick

Recommended books

Design can change the world!

WE CAN CHANGE THE WORLD

Authors Websites

 www.janegreen.com

 

 

When you first see the website you will find Jane Green’s photograph to the left, under it you get “The Latest From Jane’s Blog.

In the middle you will find an advertisement of her next book. Right under that you have reviewer quotes, which are constantly changing.

LEFT NAVIGATION

The website consists of two different navigations, one vertically located to the left and the second horizontally at the top right.

The navigation bar to the left consists of the following sections;
About Jane, a brief overview about Jane and her work.
Books, here you can find a short synopsis of the book as well as the book cover for both the American and England versions.
Press Room, you can find a list of blogs with links to it.
Interviews, all the interviews of Jane Green, including videos.
For Writers, she gives advice to future writers, tips, agents and writer blocks.
Recipes, you can find recipes on appetizers, meat, fish, vegetable including vegan, and sweet stuff. Maybe the reason for this is for when you have a get together or a book club, but I am still a little confused as to why this is part of the website since she does not write cookbooks.
Contact, you can leave comments/messages, you can send your email to be included in Jane’s mailing list for exclusive offers, sneak previews and the latest news, another link to her personal and official fan Facebook page, and Twitter. Contact information on her representative, Requests for Speaking Engagements, Requests for Press and Interviewing Opportunities, Book Clubs/Reading Groups, and Autographed Book Plate.

ABOUT JANE

In the About Jane section of the website we get a brief overview of Jane’s work and life, along with a small picture at the top right side with the text surrounding it. The body text is broken up into smaller paragraphs which makes reading larger information easier. The title is written in a cursive typeface that is very different from the body text and adds contrast to the page which it highly needs, since there isn’t much contrast.

BOOKS

In the Books section of the website you can find a short synopsis of the book as well as the book cover for both the American and England versions. Again we see the same body text broken into paragraphs and the cursive typeface for the headline. The addition of both the US and UK book covers was a good addition this way people know what they are looking for rather than looking for a book cover that they would not find in their country if the one displayed is for a different country.

PRESS ROOM

In the Press Room, you can find a list of blogs with links to it. But I am confused as if this blogs consist of bloggers that have in some way talked about Jane and her books, or are they just blogs of aspiring authors. And why do only the top three get an image? Is it because they are the best, or it is because they deal with a different topic that is more important?

INTERVIEWS

In the Interviews, all the interviews of Jane Green, including videos. As you can see the typeface used for this section is a sans serif unlike the rest which have an elegant cursive for anything that is not body text, so why is this page not the same as the others? I think it need to be the same as the rest so that the entire website feels coherent and flows nicely from one place to the next.

FOR WRITERS

In the For Writers, she gives advice to future writers, tips, agents and writer blocks. The design in this part is a little better. We have the body text broken up into sections using questions each with its own subheading. This not only helps break up the information but it also makes reading the information a lot more comfortable.

RECIPES

In the Recipes, you can find recipes on appetizers, meat, fish, vegetable including vegan, and sweet stuff. Maybe the reason for this is for when you have a get together or a book club, but I am still a little confused as to why this is part of the website since she does not write cookbooks. Here like in the For Writers page you have subtitles but the typeface used for the title and the subtitle are both the same and they are also the same font size. There needs to be some hierarchy added because right now is applied.

CONTACT

In the Contact, you can leave comments/messages, you can send your email to be included in Jane’s mailing list for exclusive offers, sneak previews and the latest news, another link to her personal and official fan Facebook page, and Twitter. Contact information on her representative, Requests for Speaking Engagements, Requests for Press and Interviewing Opportunities, Book Clubs/Reading Groups, and Autographed Book Plate.

TOP NAVIGATION

The navigation bar at the top consists of the following sections;
Home
Blog, where you can read Jane’s blogs.
Calendar, here you can find information regarding different events.
Twitter, you are connected to Jane’s Twitter.
Facebook, you are connected to Jane’s Facebook.

BLOG

In the Blog, where you can read Jane’s blogs. Here you get all the blogs one after the other. On the top we can see the blog title, followed by the date, and then title, location, link, and a description.  In some cases after the description we see and address and ticket prices included. You don’t read the blog itself until you click on the link. At the bottom you can leave a comment or like it via Facebook and Twitter. The hierarchy in this case was use but it can be further pushed with some graphics, or maybe even different typefaces to give a different visual appeal to the page.

CALENDAR

In the Calendar, here you can find information regarding different events. As you can see we get an actual diagram of the calendar, but all the events are written on the bottom in a list form. Although I am not saying its bad to have the events on a list because the amount of information would not fit into the boxes or it would be extremely hard to read but I expect to see something on the calendar above, even if its just the number on a certain date that is bigger so that i will want to scroll down and so find out what is the event that day. As of now when I see the calendar completely empty my reaction is that it is either not working or that there is nothing at all that month,

TWITER

Jane Green’s Twitter.

FACEBOOK

Jane Green’s Facebook

INFORMATION AND ORGANIZATION

The content of the book is very well organized but I believe that it could use better design.

IMPORTANT IN THE HOME PAGE

I believe the most important part of the home page aside from the authors photograph is the advertisement of her next book. You find information of when the book will be released in the US and UK, as well as the option to buy the book along with a short sentence giving u an insight on the books synopsis.

DESIGN

The design on the site is not completely hopeless but it definitely needs some revision. I think it needs some hierarchy on the inner pages, and it could use a different typeface that is more readable for the headings or it needs to be made larger, so that it becomes more readable.

Corinne Demas like Jane Green also writes fiction stories.
http://www.corinnedemas.com

INFORMATION AND ORGANIZATION

As you can see Demas website consists of a lot of information each with its own tab.

WRITING FOR ADULTS

First we have For Adults, which has a heading of  Writing for Adults. It then has five links, Books, Short Stories, Commentary, Poetry and Plays.

BOOKS

Under the tabs you get a little overview on how many books the author has written and published, followed by articles related to writing. Directly after we have a series of books they include the cover and book title and publication right next to it. The way in which the books are displayed it not bad but they could used maybe a border or something to add more contrast to the page. The typeface being use could be changed for a different one that would better suit the page as well as bring in more contrast and hierarchy to the design.

SHORT STORIES

The Short Stories link takes u to a list of short story names but aside from a handful they have no link to read online and have no information as to where to guy them. It seems a little pointless to tell me about all this short stories and not give any information on where to find it. The page definitely need some contrast and hierarchy and a different choice of typeface.

COMMENTARY

The Commentary link take you to Commentary, Essays, and Letters, where you can find a list of articles and other writings that deal with writing, reviews, among other things. I am not sure of the articles found here really relate to the Demas books specifically or if they deal with writing. They do include a link which is a good thing so if one catches ones attention they will be able to better explore it.

POETRY

In the Poetry link like the Short Stories link takes u to a list of poems but they also have no links or any information on where to find them.

PLAYS

In the Plays link you get to the plays that Im not sure if they will be coming out or have already appeared. Also the content does not even show in the window properly, which looks like a last minute addition that was not done properly.

FOR KIDS

We again have a little short bio of Demas and right after we have novels with the book cover, title, and publisher.

EVENTS

Centered list of events, there are some photographs after the list for some events. The centered text looks very tacky and its very difficult to read the information about upcoming events when it is presented like that.

IN THE NEWS

BIO

Finally we have made it to the authors bio, but we have been reading small versions of her bio throughout out previous tabs. I think they need to fix it so there is only one bio not three different ones in different pages.

BIBLIOGRAPHY

The bibliography is pretty long. I only included part in the screenshot. Im not sure if it is to list all of her books or different books. But since this website is meant for one specific author why have a list of so many others?

CONTACT

Again we have the centered text which makes it very difficult to read the information.

IMPORTANT ON THE HOME PAGE

The most important part of the home page is the information located directly after the navigation bar. I think this is important because it shows that there are books for all ages, from adults to children and it also advertises the new ones, which could increase sales specially for the fans that cant wait for a new book to come out.

 

Another author that also writes in the same genre, as Jane Green is Kathryn Stockett.
http://kathrynstockett.com.

BOOK

One of the coolest features of this site is that when you go into the book tab you can not only read the entire synopsis of the book but you can see all of the different book covers made for it by moving the little dot right to left which will make the books cover you want to see come closer into view.

BIBLIOGRAPHY

Here we can read a small bio about the author. She keeps it sweet, simple, and to the point.

EVENTS

READING GROUPS

In the reading groups you can see a variety of questions that you can use in order to form your own reading group and get the talking flowing. You can follow, it or use it as a starting point for the conversation and analyzing of the book.

PRAISE AND REVIEWS

Here you can see the many different praises and reviews that this book/author have received. There are links available for the videos, I just wish it was the same for the articles.

MAILING LIST

CONTACT

IMPORTANT ON HOME PAGE

The most important part of the home page is the photograph of the book with the quote above because this entire site is dedicated to this one book, and not only does it promote the book it also promotes the movie that was made about it by Dreamworks.

PUBLISHER: BROADWAY BOOKS

http://www.broadwaybooks.net

DIFFERENCES

One of the main differences between a publishers website and tht of an author is that a publisher website includes many different books of different authors. It also have information about many different people, and staff members.

IMPORTANT ON THE HOME PAGE

The most important element in the home page is the section where you can find the contact information. I had a hard time arriving at this conclusion because there is so much going on the home page. It is very overwhelming when you first visit the site because there is so much fighting for your attention. I decided the contact information is the most important. Although it is found at the bottom of the page so it should not be places so low.

 

OTHER CITES

 

http://www.awwwards.com

http://floatpasadena.com

http://www.cssdesignawards.com

 

Budweiser vs. Miller High Life

Budweiser 

http://www.budweiser.com/en/us/all/all/

Verification

When you first visit the Budweiser website the very first thing that we see before we even make it to the main site is an age verifier in order to prove that you are of drinking age otherwise you cant enter the website. This is a good thing it keeps underage kids from looking up information on different flavors of alcohol that they should not even be thinking about.

To input your date of birth to enter the website they have three rows. The first has the names of the months, followed by the days and then the years. Because all the years don’t fit into only one line you have left and right arrows to see other years. I think this is an interesting approach that’s interacting and considering that this is the only content on that page it should be as interesting as possible.

 

Graphics

The background consists of an image of some cold Budweiser beer bottles and a few

ice cubes on the bottom, along with a graphic, which also mimics their beer bottle covers. It is very appealing look since the bottle look ice cold which is when beer is at its best and it also catches your attention but doesn’t take it away completely from the content. On the background you can see that some water droplets where added and I think that was a nice touch since it adds to that feeling of a nice ice cold beer.

 

Color

The entire color skim revolves around the beers logo and beer bottle sticker cover, it is different colors of red, with white and “gold” colored type, with the red being the dominant color used and “gold” being used lightly. The one element that stands out a lot would be the button “Verify with facebook”.

Every other color seems to be a different shade of red except for that button. I think that the limited color pallet was a good choice because picking more would probably be distracting and it wouldn’t have the same appealing effect that it currently has.

 

Main Page

Congratulations! You have made it to the main page of the Budweiser website, you are old enough to drink alcohol! I hope you didn’t just lie to get in.

 

Top 

   

At the very top of the main page you will find the Budweiser logo (top picture to the left), and the day and date (top picture to the right). The logo is always present but its a good thing that it was added. I really like that the day and date are included at the top left of the page. I also think the san-serif was a good option it goes well with the sporty atmosphere that the website promotes.

 

Navigation

Then we continue down and we have the navigation bar. When you are on a specific tab it will change color from white to yellow which is almost like a “gold”. This is a good thing because this way you know which department you are on.

 

Information

All the information is set up into this blocks with large images and a top caption.  Although this is an interesting way to get attention and have people look further but it can look a bit crowded and it is very hard to read the top captions that are written in black against black.

One of the interesting things on the website is that when ever you hover over a picture, a square with information you get this drop down quote relating to what u are looking at. It has an opacity on it so u are able to read the quote clearly and still be able to see the image on the background instead of it being just this solid color.

 

Grid Structure

The grid structure for the Budweiser website is pretty basic, since it consists of mainly boxes. The icons before the text descriptions are all aligned to each other horizontally and vertically as well as the text in there. Although the grid used here is pretty subtle the page can seem overwhelming and it is in need of some negative space, a little breathing room.

 

 

 

 

Miller High Life 

http://www.millerhighlife.com

Verification

When you first visit the Miller High Life website like with the Budweiser website the very first thing that we see before we even make it to the main site is an age verifier in order to prove that you are of drinking age otherwise you cant enter the website.

To input your date of birth to enter the website you have the basic three little squares where you can type in the numbers that make up your birthday. Although this is something that is used quite a lot I think in the case of this website since the only purpose of that page is too allow entrance with the birth date and it does not have that much more content a more playful or more interesting approach would have been more appropriate as well as visually appealing.

 

Graphics

The background consists of a solid “gold” like color. To the right you can find a photograph of two beer bottles, the regular beer and the light right behind it. Then to the top right you can find the miller high life logo. At the moment with just a solid color background it looks very plain and it could use some graphic to give it more life, make it look more appealing. The photographs of the beer bottles just standing there to the side helps a little but I think there could be a better was to treatment for them.

As for the slogan to ask for age verification it is long and I do not want to read it, a better approach would be something short and simple and then later elaborate with a caption or subhead.

 

Color 

The entire color skim revolves around the beer logo and beer bottle sticker cover, it is different colors of red, with white and “gold” colored type, with “gold” being the dominant color used and red being used lightly. Like with the Budweiser website this one too uses a limited color pallet and even though I still think that having a limit on the colors is a good thing, this verification page could use some better graphics or a texture background.

 

Main Page

Congratulations…again! You have made it to the main page of the Miller High Life website. I hope you didn’t just lie…again…to get in.

When you get into the main cite the very center has the quote “THIS IS THE HIGH LIFE” with the logo and a very long explanation. I like this because it was a lot of negative space and it gives the eye time to rest but I like that by using this it doesn’t immediately bombard us with information.

 

Top 

At the very top of the main page you will find the logo followed directly by the navigation bar. The logo is always present but its a good thing that it was added.

 

Navigation

At the top of the page directly following the logo we can find the navigation bar. It looks just like any other but the thing that is different and that I think it’s really cool is that depending on which tab u are on, not only does the text gets larger but you get this two little caps. One represent the regular beer and the other is for the light. I think is this one of the most interesting aspects of the website.

Apart from the navigation bar at the top you have this links on the left side of the page that give u more information on the partnership between Miller High Life and Motor Hardly Davidson and “Give a Veteran a Ticket to the High Life.”

 

 

 

 

 

 

 

Grid Structure

The grid structure for Miller High Life seems a lot more complex yet the page is much more simple. Because the figures in this page are not really grounded they need a lot more unseen structure (a more complex grid) but I think that it is working well. Everything seems to align with one thing or the other and the negative space around the page is welcomed.

Typography and the Web

Typography for the web Versus Typography for print

Setting type for print and for web:
When you are setting type for print you are working with a very constricted space, meaning that you have a set length and with that will not be changing. When setting type for the web we use relative measures rather than exact measures because “the web is a flexible medium.” (There are many size screens and different resolutions for each, so if we use an exact measure then it will not look the same everywhere, or you may not be able to see it at all in some cases.)
When one is setting type for the web it is very important to keep in mind things like CSS which was alter the look of your typeface or can be use to store the entire font-family. You can control everything from the typeface hierarchy to the size, to the weight. It is important to watch for is word-spacing and letter-spacing. You want to make sure that it is not to small or no one will be able to read the context of a page.
Layout is not just for images or artwork it is also very important to consider when it comes to typography! You want the line length to be specific in accordance to the typeface you choose since some maybe allow longer/shorter line lengths than others.
“How font size and line height work in web browsers. Font size is measured from the top of a capital letter (S) to the bottom of descending characters (y. Half the line height extends both up and down from the centerline of the text.”
You want a typeface that is legible and readable that is very important. “Serifs are said to help the flow of letterforms, binding cohesive words together, aiding the eye across the text and making reading easier. Sometimes, however, they can complicate a typeface, causing the reader fatigue and therefore actually hindering readability.”

 
Restrictions on setting type for the web:
When choosing a typeface for the web you should pick one that is compatible with most computer and browsers, as well as have a list of backup typefaces that the browser can use in case that your first choice is not available. You should not set type for the web in color since people are likely to think that it will be a link instead of part of the text.

 

Benefits of using @font-face and web fonts:

The benefit of using @font-face is that it allows you to use custom fonts for the web. ” To ensure support across all browsers, define both ‘ttf’ and ‘eot’ src properties and set a fallback font, if the browser doesn’t support that style or the font is unavailable due to (God forbid!) CDN outage or any other calamity.”

The benefit of using web fonts is that they are more likely to be in other computers or browser’s and therefore the page will probably open without the browser having to choose from one of the alternative typefaces.
“The Google fonts is a huge storehouse of usable fonts. Even more, it automatically handles stylesheet generation with browser specific properties (such as the ‘eot’ requirement for IE9). Using it is also simple, just add a @include rule with the URL of the CSS generator, along with the desired font and style (if any) specified in it’s parameters.”
There are also other sites that you can visit in which you can find typefaces that you can use.

 

Vogue http://www.vogue.com/ 

Why did I select this website:

I choose vogue for one of my websites that shows good typographic usage because I love their main typeface. I think the serif with the extreme variation id thin and thick strokes catches ones attention. In a way it is a very bold typeface since the thin strokes are so difficult to see and the thick ones pop so much.

The typeface is also successfully used with a thin sans-serif, and even with its extreme thin strokes it still holds its ground and they work well together.

The design used on the page to group categories mimics the style of the main typeface. Makes the page look more thought out and uniformed.

The typefaces on the body text consist of bold and normal sans-serifs which work well since they mimic the main typeface used for all the titles.

 

Whoa Nelly Catering http://www.whoanellycatering.com/

Why did I select this website:

I choose this website for its use of typography because I think it uses a bold typeface for its main points that catches ones attention right again and looks interesting since it consist of outlines with no fill.

It also uses a more round typeface for key points, sentences. I think this work well because foods are more curvy and not so stiff.

I really like that they frame the “featured menus” into boxes that makes me think back to the main typeface used. As well as using the second main typeface for each item.

Sources used:
http://webtypography.net/toc/
http://www.pearsonified.com/2011/12/golden-ratio-typography.php
http://www.vanseodesign.com/css/em-px/
http://www.awwwards.com/websites/typography/
http://webdesign.tutsplus.com/articles/typography-articles/the-anatomy-of-web-typography/
http://www.codeproject.com/Tips/605568/Using-font-face-to-use-custom-fonts-in-web-pages

GameFAQs

Whether you are a gamer or a new at it like myself and would like to keep track of new games, new information and reviews, there is no better place than gamefaqs.com.

In this site no matter if you are looking for information on a specific gaming system or simply looking for a specific game you can find it all.  If you are a serious gamer yourself you can simply sign up, log in and give feedback to others, rate games or just simply express your opinion of whether the game is good or it just stinks.  But for those of you that might not trust just anybody and want a more professional review of your game you can find critic reviews as well.

If you are like me and have no idea what it is that you are looking for, what games are out there or simply do not have a game in mind they can help with that too.

In the main page you can find a list of the more popular games as well as the more wanted facts, and not only do you get the game names but you are also given the game system which they go with, this way if you are looking for a PC game you wont end up reading information about a PS3.

Another cool feature of this website is that if you know u like one game specifically, but you have no clue what other games might be like that one, or if you would even like other games and you are afraid to get a game that you will never play, when you search for that game on the left side of the screen you will get a list of games that you might like and then you can see what other people who have played it before think of it.

If reviews aren’t enough or just simply are not what you are looking for, you can also find a variety of videos.

I consider the design of this website successful. Everything is easy to read and find. It is very well-organized and main subjects are easy to find. There is alignment being used by having the main context of the page on the larger column with other details that someone might also find helpful to the smaller column on the left. Repetition promotes the new game Diablo III which is now in stores.
The intended audience for this site are gamers. The design and content cater to this audience because everything you find is about a game whether it is top games, new releases, facts, reviews, links or game play videos.
Even tho I am not a hardcore gamer I found this site very successful in informing me about new and old games and seeing what people who have played them think of them and if they would be a game that I would enjoy.
I think what makes this site successful is that it has a variety of context and imagery, so it is not just videos or pictures of one game but of all of them and if more information is found about this game on a different site, they give a link for you.
There is not really much that I dislike about the site but what I would probably improve is the blue color of the background or of the text. It just becomes a lot of the same color and a bit monotone. I think being that it is a gaming website some cool graphics could be used.