ARTM2210 Intro to Web Design

Just another Intro to… site

Archive for Spring 2012 Section A

Sports site 2 us open

Sports site review 2

I found the US open tennis site through a search, it was rated one of the best sports sites for 2010.  After looking at it and using it i can see why it is good.  There is a good amount of information however it is all clearly layout and organized.  There is a lot of information but it seem to fit well in a nice clean style that is clean, there is also nice good use of photos in the background and main page.  News is quick and easy to find through the moving gallery on the main page.

Sports site post 1

Sport site review 1 Pittsburgh Penguins

This site is well run and has a lot of feathers for the user to us such as flash video of game highlights and locker room media.   One thing i do not like about the Pittsburgh Penguins site is that it seem busy and has a lot of information to go through.  Also the ads are all of the place, it takes away from its potential clean look.   It should be noted that all NHL sites seem to follow a set of guidelines for basic design features.  Although from that the sites can be further customized.

Bi-Weekly Review 7

http://www.nineonninepgh.com/index.html

Nine on Nine is a European-style restaurant located on Penn Avenue in Pittsburgh, Pennsylvania. The website is very modern and sleek. Simple whites and grays are used, with an orange added in to certain links as well as the logo through the site. It is overall very simplistic, yet stylish and complex at the same time. The horizontal navigation at the top contains links to “home”, “about us”, “menus”, “event planning”, “news and events”, and “reservations”. The contact information is on the bottom right corner of the container. There are images on each page, in the center and to the right that are uniform throughout. The high tech aspect and cleanliness of the website give the visitor the idea that the restaurant is very cutting edge and fancy.

Final Review: Jam Base

JamBase is a music base website that has features including artists, shows, articles, photos, festivals etc. This website has valuable resources for users looking for information about the music event. One of the first things a viewer may notice is that the advertisements and show-finders pick up their location and display the concerts closet to them. For example, the website says Pittsburgh Pa currently. This is an easy way to capture the audiences attention because they see something relating to them.
The navigational of the site is set up with a navigation bar across the top. These options include artsist, shows, articles, photos, contests, forums, and festivals. Once the visitors click on a new link, there is no breadcrumbing to show you how to get back. The home page is disorganized because there is too much information crowding the site. There are boxes including show finder, newswire, contests, and advertisement over-filling the page. The layout would benefit from more space in between the entire site.
The overall design on the site feels dated. The color scheme is a monotone gray with small accents of blue and orange. The accents are not noticeable enough bring up the overall grey tone of the page. The page is reminiscent of an old Microsoft Window color scheme. Some boxes are rounded while others are not. The website does not feel modern enough.
Specifically looking at the festival page the color scheme changes to a green. This does not match the color scheme on the home page. There is a feature festival section that includes jquery of the picture that visitors can click on. The rest of the festivals are listed in list that continues multiple pages. Visitors are given the option the search for a festival which would make it easier.
Overall jambase.com is a valid website when looking for music information about live concerts.. The website looks to be design by a web designer with out any graphic knowledge. The layout, color scheme, and overall unity need to be improved.

Home v3

Daouda’s Final Bi-weekly review

 

For our final project, my group and I are working on a website for the RMU basketball team. Thus, I decided to analyze a college basketball team for my final review. Having spent more than 8 years in the DMV area (DC Maryland Virginia) I decided to pick the Maryland “Terps” basketball team. The website color scheme is mainly black, red, yellow and white, referring to the university colors. The background is an extreme close up of the flag on basketball arena the floor. The main navigational tools are on top, they have drop down menus, at the bottom of those there are more navigational tools. The homepage is really crowded with information and ad. The homepage is really crowded with information and ad, it make it hard to navigates, it I would be more efficient if there were less noise on the homepage

Nakama

http://eatatnakama.com/pittsburgh/

Nakama is a japanese steakhouse and sushi restaurant. It offers some of the best hibachi around Pittsburgh, and is the first choice for most Pittsburghers who love hibachi. The home page has a large picture of the restaurant, and a menu on the left with the primary navigation. The background has a grainy wood texture. On the top left is navigation for the restaurant locations, as well as social networking links. The company’s logo is watermarked over the image of the restaurant. The “Menu” page offers external links to each of their menus. The site is very user-friendly, while keeping a sleek look throughout and giving the impression that it is indeed a high class restaurant. Most asian cuisine restaurants are sometimes hard to read because they get lost in translation, but this is not the case with Nakama since it is American owned.

P.F. Chang’s

P.F. Chang’s is a popular and affordable chain of Chinese Restaurants.  The P.F. Chang’s website attempts to evoke a feeling of the far east with a use of rich texture and color that makes the viewer feel wealthy and warm.

An immediate flaw noticeable on the website is an abrupt ending to the bottom of the page, at least when viewed on Google Chrome.  There is a bar at the bottom of the page with a red fabric texture that is very interesting but it stops and the rest of the page is simply filled with a burgundy color.  This is an easy oversite but a company as large and well funded as this should be able to afford to ensure such small flaws do not interfere.

The website otherwise is quite elegant.  The colors are rich and warm and the use of burgundy and tan give the impression of Chinese design qualities.  The navigation on the website is simple and straight forward but doesn’t really lead the viewer to any particular areas of the site but instead lets the visitor wander around.  It would be useful to have a situation in which there is at least a little bit of bread crumbing that gets the viewer to the intended material.

Overall the P.F. Chang’s website is elegant and has a strong Chinese feeling but it is plagued by a few small, but annoying bugs.  The bottom of the page issue and the lack of any bread crumbing makes the viewer feel a little lost and like one is viewing a less then professional website.

The Sewickley Hotel-Brock Switzer

The Sewickley Hotel is a tavern style restaurant in Sewickley, PA.  The restaurant features a variety of food for breakfast, lunch and dinner from many different nationalities.  Much of this website links a user to pages outside of the website itself.  For example, the “directions” link takes a visitor directly to google maps with the address of the restaurant typed in.  Another example is the menus which take the user to a PDF file with the menus that can be saved and/or printed.  This feature is both convenient and at the same time distracting and makes navigating quite difficult.  When visitors to the site are forced to leave it with several links and then press back to get into the site again it is easy to get distracted and lose interest in the content on the main site.  A simple fix would be to have the menu actually present on the site but provide patrons the option to go to a printable PDF version at their leisure.  The map could follow a similar solution in which the “directions” link on the page takes a visitor to an actual page on the site with information as to the restaurants location but also has a link on the page that the user can click on to bring up the adress in google maps.

Another problem this website faces is that the content and links are very small and do not expand to fit the size of any window.  The size makes it somewhat difficult to read and makes it feel less complete and professional.  Simply repeating the background and expanding the content area slightly would make the site feel more open and free as well as give off a sense of completion and professionalism.

One very positive aspect of this webpage is the color pallet.  It feels very rich and deep with reds and oranges.  The homepage text mentions the “warm and cozy” atmosphere that the restaurant offers and the color pallet helps add to that sense of warmth and friendly environments.

Last Bi-Weekly Review – Alex Antonacci

Live nation is a website that sells concert tickets to people around the world. Starting at the top the first thing the user will see when they visit is a large search bar where they can input any artist, show or venue and Live Nation will narrow down the results to make finding what they want easier. So before the site goer even decides to scroll down they can already find what they want in the fastest amount of time with this search bar. Most websites hide their search bar in the a small area on the menu at the right, but Live Nation takes full advantage of its capabilities. Its horizontal menu can take the user to all shows, watch videos, fan photos, venues, VIP, merchandise, sign in and my cart. Underneath the menu is Live Nation’s featured section, which holds four upcoming events that constantly switch to show equal importance. The user even has the option to scroll faster by clicking one on the squares in the bottom right hand corner of the picture.

To the right of the slideshow is a list of the top selling events in the area that the user lives in. This display temps the visitor to click on one of their favorite bands on the list to see if they could make the concert since everyone else is going.

Below that is the on sale and the on sale soon section so the user will know when they are able to buy tickets or if they still have some time.  Below the slide show also provides a temptation showing the visitor that if they sign in and make an account, Live Nation will provide them with concert recommendations.

The website keeps it simple and only uses three colors: red black and white.  The text is also simplistic with the exception of the logo where the “I” in Live Nation looks like the figure of a concert goer. The search menu, which continues on every page in the same place, has a dark background picture of a large most pit. Below the menu is a similar picture except that this one is less noticeable put in black and white and distorted so the user can only the the outline of the people.

Live Nation’s layout is an organized grid helping the user every step of the way. It holds a great set up even if the user docent make an account, but if they later decide to Live Nation makes personal recommendations and then makes the site uniquely form to each visitor.

 

Review of the restaurant, China Gourmet – http://www.chinagourmetnj.com/

Since I reviewed a French gourmet restaurant previously, I thought it was best to evaluate a Chinese gourmet eatery.  Also, since Delicieux is up, live, and running, it was nice to visually compare each of the sites side by side in comparison.  So, here is my final and last review of the, China Gourmet:

Located in West Orange, NJ, the China Gourmet goes that extra mile on design and interaction.  A few positives that the website has is its layout, jquery, and online ordering feature.  One distinct flaw that the website unfortunately has its overuse of various fonts.

POSITIVES

Layout – The boxy design is organized, yet, well controlled.  With everything maintained inside the main red box, it gives the website consistency, as well as organization.  It also gives the viewer a chance to thoroughly enjoy the artistic details that surround the main box, including the Chinese dragons, chopsticks, glowing lantern, and textured backgrounds.

Jquery – The entire website contains a ton of jquery.  From the loading page, to the navigation buttons, to the content, jquery plays a huge role in this site.  It honestly pushes the envelope.  For example, whenever the viewer clicks on the “About Us” page, whatever content was inside the main box disappears, and then the new content slides down from top to bottom transitionally.  This feature is visually appealing, while pushing the limits.  It is almost as if the web designer went as far as he/she could go without it being annoying or burdensome.

Online Ordering – This restaurant contains something different compared to the other sites that have been reviewed.  They feature an online ordering system.  When clicking on the “Online Order” tab, the site directs you to some information, where you can then click on a link to place your order.  When redirected, the site gives the viewer prices of all their dishes with an “add to cart” button, where your total will begin to add up.  This feature is something very unique, which gives the restaurant the opportunity to stay within the current technological times.

NEGATIVES

Font – As far as fonts, there are simply too many going on at once.  For example, the main title, located at the very top of the page.  This font is very artsy and appropriate, however the glow makes it extremely hard to read.  Also, when going through the site in its entirety (through sub-sites and main-sites), the number of fonts turned out to be somewhere around seven.  Seven different fonts are a bit extreme and overpowering.  The site would be visually more successful with around two or three.

Bosco’s Guitar ~ AFI Short Film

Bosco’s Guitar


The website for the AFI Thesis short film, Bosco’s Guitar is a simple, yet effective page that accurately informs visitors about the short film, who is involved, and how they can help. The opening page shows a list of the links, features a promotional image, and has the title of the short film at the top in a childish font. This website has many positive and negative aspects to it, and perhaps it is best to discuss the websites weaknesses first.

One obvious problem is that the page was not designed for different browsers. The page is not centered and does not move when the website is expanded to a larger browser size. A plain, white background is revealed when the browser is enlarged. They should have either designed the page to resize with the browser or implement a better design where the image blends into the background. Another major issue is the resolution of the photos. Many of them are very low and the image looks slightly blurry as a result. That is a common sense issue they should have been resolved before the site ever went online. The site could also use some aspects of advanced web design. There is virtually no use of jquery or any interactivity outside of hovering over links. The design could implement more layering with opacities and gradients to make the page feel more three dimensional and sophisticated. In addition, it would be nice to see a trailer on the home page (or any page) since it is a site for a short film, and also it would be a nice touch to add a section for screening venues.

What the site lacks in sophistication, in makes up for in simplicity and ease of navigation. Every one of the sections of the page is clearly identified and the entire site can be navigated in a matter of seconds. Each page has the same navigation bar located on it, even though its location changes from the home page. Visitors can quickly find out what the film is about, that it’s created through AFI, who’s involved, who inspired the project, and how visitor’s can help contribute. The section where the site excels is the section dedicated to the crew. The page features links to each member and what their role in the production was. On their individual page, there is a brief bio, a picture, and a quote from them about the project. Aesthetically, one nice aspect of the page is the consistent grayish-purple and yellow color scheme used throughout the site giving it a unique rustic and impoverished look. Overall, the website for Bosco’s Guitar is a great example of both what to do right and what should be done better for a short film website. The simplicity of the site is great and makes it an effortless browsing experience, but the site simply needs to be taken a few steps further by adding some more pages with trailers and screening times and also some added depth in terms of aesthetic appeal.

~Written By John Marshall

 

 

Bi-Weekly Review

For my final bi-weekly review, I have reviewed the website http://www.psychologytoday.com/collections/201201/why-we-dream. This site really relates to our final project and has a good take on what dreams are really about.  http://www.psychologytoday.com/collections/201201/why-we-dream really goes in-depth of what to think about when people are asleep. With the images and links to other websites this site really captures our philosophy on what we want to portray to the viewers with our website. We are going for an overall good and simple layout of a short film for our website.  This website has a lot going on. With all the images, links and ads on this particular site, it makes it a very detailed website.  The simple background and simple text on the page really make the page come alive and draws the viewer into the site. Coming across this site was difficult because most sites really do not have websites on dreams and reality.  There is simplicity and I really think that this makes the site worth the time of interest. I believe that there is way to many ads on this page.  It draws your attention away from the site and doesn’t represent the site very well at all!! After clicking the links they take you away fromt http://www.psychologytoday.com/collections/201201/why-we-dream and take you to a different perspective on the author of the image and they tell you how they feel about dreams.  It takes you to an article which in this case can be a good thing, but a bad thing at the same time.  Lengthy articles can really draw the audience away from the site.  With the simple images, text and layout. http://www.psychologytoday.com/collections/201201/why-we-dream  really takes you in detail about what dreams are really about and what to expect form them. From a layout perspective it really needs more color, different style fonts and more detail. There is way to much going on in this website for a viewer to be interested for more than 30 seconds. http://www.psychologytoday.com/collections/201201/why-we-dream gets the point across, but it can use more work to really make an impression with the viewers.

Bi-Weekly 7

For my bi-weekly review, I  continue to look at different movie sites to help set up our site.  The gallery is set up differently on the HUNGER GAMES and TITANIC sites. The Hunger Games has one picture at a time and it takes up the whole screen. Also the same thing goes along with the Titanic site. It catches the viewer eyes and helps them to go through the site and look at all the pictures. The viewers are always interested in learning more about the actors and what happens in the movies and pictures give them idea what to expect.

Multipage Blog

For this biweekly blog on restaurant websites I have chosen, http://www.burgatorybar.com/, because it is one of my favorite restaurants. It is a simple site that is mainly aimed at showing the menu items to the customer. The opening page features a picture of their burger with a mini text box containing the restaurant’s mission statement. The links to the other pages are located in a box in the upper right corner as well as links to their social networking in the bottom right corner. There are five selections in the upper box; hungry, our spots, lets chat, our gear and happenings. The links all take you to an identical background page with the information varying depending upon the link. The information is mainly presented in text boxes.

Overall I think it is an all right site. It is nothing that is out of the ordinary which is not much of a worry for Burgatory. The restaurant really speaks for itself and I feel their webpage should be used mainly to highlight upcoming news and information about the growing chain.

Bi-Weekly Review 6- Music Festival Junkies

Our website deals with a summer music festival series listing, comparing, and contrasting a few different music festivals based on cost, distance, and music genres. The site Music Festival Junkies lists nearly all the music festivals in Europe, The United States, and Canada in chronological order on the home page. This list is surrounded by various blogs, tweets, articles, and band line-ups. There is a bar with drop down menus beneath their very simple banner that offers further categorizing. Navigating with this bar one can find lists of the top 10 Mega festivals, camping festivals, unique festivals, and Canadian festivals under one tab. Then going to the right it has links to lists of United States Music festivals, European music festivals (sub menu of UK festivals), Canadian festivals, then has news on lineups and scenes, and finally the MFJ 50, a list of fifty of the festivals they most recommend. If one clicks through any list to a music festival it offers a brief dossier when and where the festival is, how much it costs, whether or not there is camping, give a list of the lineup and a short description of the atmosphere that one would encounter there and a link to the official site. On the right side there is a filter which expands to show different categories of festivals then one can click to expand the desired attribute to filter by, month, genre, or location then one chooses the category from the expanded stipulations, and the site offers a list of possible matches to the filter. Aesthetically the site doesn’t use anything flashy focusing more on bare bones easy navigation for the user. Overall the functionality of the site is great and offers an abundance of information on each festival, the methods that the site uses to lead people to the desired festival are swift and effective and the aesthetics don’t distract the user from the links that they should use.

Bi-Weekly Review

For my bi-weekly review, I looked at different movie website to get an idea for the final project.  By looking at different sites, I got an idea on how to set up our: the color, the layout, the texture, the font, and the structure on how the reviewer can navigate page to page. The website for the HUNGER GAMES and TITANIC helped out a lot because it attracts a lot of people to the site and the information they have will satisfy them.  The websites let the reviewer know what is happening.

Borderline Films

Borderline Films

Borderline films is a New York based production company created by three NYU graduates, Antonio Campos, Sean Durkin, and Josh Mund. They produce music videos, commercials, short films, and feature films. The companies website features examples of their work, short biographies on each of the directors, an about us page, a news page, a twitter link, and a contact page. In terms of navigation, the site is excellent due to its simplicity. It is effortless to get to each section of the site and explore the entire site in less than a minute. Nothing is distracting or confusing on the entire site, and every component serves a purpose. Overall, it has a very clear visual hierarchy, and requires little to no thought to navigate. However, aesthetically, the page is very plain and needs some improvement.

The website seems like it could be template. It is effect and simple, but it does not stand out at all. The website could definitely use a texture or some form of a gradient in the background. Also, some other effects such as shadows and blurring elements would be nice to make the site more three-dimensional. The color palette is very dull with different shades of grey and accented colors, red and green. It does not feel like the company has a branded identity through their website. They need to develop a defining color palette and font face to brand themselves. With the plain background, simple font face, and boring palette, the experience of browsing the site is not memorable. The site does feature a sleek use of j-query and rollover effects on pictures and videos. When a link is clicked, the items on the new page cross dissolve onto the page one element at the time. When linked videos and pictures are rolled over, they slowly increase their brightness. These subtle effects make the page a more interactive experience, and without them the site would be extremely basic. The website is successful because users can watch their videos and learn more about their company by using a simple, yet effect navigation system, but the overall page needs to be taken a step further aesthetically to give their company an online identity.

~Written by John Marshall

 

Bi-weekly review 6

For my sixth bi-weekly review, I decided to look at a computer giant, Apple (www.Apple.com). The apple web site is very simple and elegant at the same time. It has a bright white color with a shiny texture to it as a background and picture of an ipad with a hand actually using it as the central and only picture. The font they use is grey in color; the main navigational tools are at the very top of the page and are set on a dark grey box. They both have a chromatic texture to them also. Whenever you scroll over the buttons, they get highlighted in dark grey. At the bottom of the page there are videos and different links.

Pollstar

Pollstar is a website dedicated to concert listings around the world. Its horizontal menu can take the user to their personal account, concertwire, photos, reviews, hotstar and store. Underneath the menu is a thick search bar where the consumer may type in an artist, band, venue or city when searching for a possible event to attend. Under the find an event rectangle is an eye catching scroll bar, which is constantly moving to the left with average ticket prices.

Below that is Pollstar’s featured section which holds four upcoming events which constantly switch to show equal importance and display a paragraph of text matched with a headline and photograph. From the the user can scroll down more to find recent listings, concertwire, site activity, latest photos, recent hotstars and most viewed.

The website does not use an overload of colors, instead they keep it cool with tones of blue and black and white. The text is also simplistic with the exception of the logo and the company catch phrase “The Concert Hotwire” which is in a handwritten font.

Pollstar’s layout is evenly distributed in an organized grid. They make the website easy for the patron to find what they want to find within it in a timely fashion.

 

 

 

Bi Weekly Review

For my review my group is doing a film website about a short film that one of our group members are working on. This short film is about dreams and reality. How they correspond and make life difficult and not as easy as people think. I have reviewed the website dreams.com.  dreams.com is a very different site compared to the typical website in todays world. dreams.com has lots of variety and links to how dreams work. It is very understandable to what dreams.com is trying to get across to the viewer.  The colors of the text and links really stand out. They are a bright blue and the links are on the side of the page and at the top of the page. With all the detail and links the front page really has not to much going on.  To navigate more and find information out, you have to click on the links and further they take you to a different page with more information about dreams and how you can learn more. When you click the links they take you to a numerous sites and really has nothing to do with dreams.com  Dreams.com is a guideline for dreams and it gives you basic information and makes you look into the links to gain more information.  Besides the links are really not that helpful.  Dreams.com has a good layout and eye catching color to grab the viewers attention when they enter the site.  Also the image that is used on the front page is well placed and creates a flow and makes dreams.com come to life.  Dreams.com isn’t the best site, but with the images, links and color and can hold its own and make the point across to the viewer.

Vans Warped Tour Website

The Vans Warped Tour is a summer concert series that travels around the United States. With over 90 bands and 40 stops, this is one of the largest series in the country. All the music is based around the rock sound. The target audiences are teenagers and young adults. This website is relevant to research when building another website dealing with summer concert series.
The Vans Warped Tour website is set up in a traditional setup with links along the top of the page. This is an easy navigation technique for visitors to use. The navigation bar is crowded though as they are 11 link listed across. Once a visitor click on one of the links, they are taken to the new page. There is no bread crumbing and the navigation bar still remains on the top of the page. To return to a previous page, the visitor must use the back button provided by the Internet browser or re-click on a link up top. The right side of the page is filled with advertisements for the website to create profit.
The color scheme and illustrations of the Vans Warped Tour change every year. Currently the overall theme older styled relying on ornamentations and a muted color palette of greys. There are accent colors of red, blue and gold. Some may not find the artwork relevant to the theme of rock music and summer. The color scheme and artwork is not eye catching and has no sense of hierarchy.
Because the Vans Warped tour is aimed toward younger generation, the website has some cool extra aimed towards them. There is a specific photograph and video section that shows the excitement of previous tours. Once you click on a specific city, you are given more information about attending Warped Tour if it is your first time. There is also an online store for visitors to buy apparel. The online store was not up to date as it included the summer 2011 logo.
The Vans Warped Tour website is a summer concert website that easily displays information about the tour. Visitors can learn more, buy tickets and share their previous experiences. The color scheme changes annually but currently is a muted color palette. Overall this website is valuable to review for anyone making a summer concert series website.

Review of The French Gourmet Restaurant – “http://www.thefrenchgourmet.com/”

After careful review of The French Gourmet restaurant, the overall design is somewhat similar to the one my group and I are currently in the process of creating.  Although ours is for the fusion of both French and Chinese cuisine, the layout has aspects that greatly compares to ours.  But, enough about my website, here is my review of The French Gourmet webpage:

Located in San Diego, California, The French Gourmet goes that extra mile to “taste the delicious difference.”  Their amenities include dining, catering, a bakery, and a wine boutique.  Some positives that the website has is its color palette, font style, and navigation.  Some negatives that the website unfortunately has is some significant clutter.

POSITIVES

Color Palette – The royal blue and fire truck red accents truly add to the sandy yellow background color.  The navigation tabs are located at the top of the webpage in the royal blue color, with a white font.  The headers are all in royal blue, which make them, stand out perfectly against the white divs where the majority of the information lies.

Font Style – As far as the fonts that The French Gourmet uses, the variety seems spot on.  Using a basic serif font for the majority of the site, and combining it with the italicized script font for the site’s headers and titles, works extremely well.  The two styles compliment one another effortlessly.

Navigation – From a technical standpoint, the webpage is successful.  All the links, tabs, and sub-sites work productively.  The navigation is easy to use and follow for any age.  The drop-down tabs make it simple enough to find exactly where the viewer is going and needs to be.

NEGATIVES

Clutter – The amount of unnecessary clutter the page has is unreal.  Take the homepage for instance.  At the top of the page, there are a few things that clutter it up.  There is a font decrease/increase button, email page button, print page button, and a home page button…even when the user can click on the main logo in the middle to get back to the homepage.  The top simply looks cluttered.  They could have found better spots for the necessary tabs/buttons, because for the viewer, it is overwhelming.  There is also a ton of clutter towards the bottom of the site that can definitely be condensed.  The logos of the supporting groups do not have to necessarily be all in a line like that, or even that large.  Again, it is overwhelming.

fifth bi-weekly review

http://pulpfingers.com/
Pulpfingers has an incredible use of texture combined with a very simple color palette to create a visually pleasing site. There are about three colors used along with a fine grain texture. The navigation is the most important element of the site; it sits at the very top of the page. The most emphasis is placed on the navigation because it is unique in the size of the text and the use of lines attracts the viewer’s attention. This navigation is horizontal and located in the same position as one clicks through the different pages.

http://www.blindpigdesign.com/
Blindpigdesign.com emphasizes the navigation with the dark background and unusual flying pig icon. It is a vertical navigation bar that features a hovering talent, when one hovers over a word the dotted background appears. There is another navigation located further down the page, which consists of social media sites. These sites are represented as icons instead of actual words. This site uses a two-color scheme of white and black with a few shades of gray. The two sections are separated by the different colors; the content page has a white background and the navigation bar has a gray background.

http://www.trailerparktruck.com/
Trailerparktruck.com is an excellent example of a single page website. The navigation bar is located at the top of the page. When one word is clicked, the page scrolls to the location further down on the page. There is an option on the right for the viewer to scroll automatically to the top of the page, which allows the user to click on another word and so on. The secondary navigation is much smaller than the primary one and is tacked on the left side of the page. Again, another page uses icons for social media pages.

http://hellohellohi.com/
hellohellohi.com uses navigation in a very unique way. The main navigation is a horizontal bar settled near the top of the page. This site’s secondary navigation is different, the navigation is scattered across the second half of the page because each page is its own bubble or circle. Shape creates the distinction between the two navigations on this page.
http://www.zappos.com/
A great example of bread crumbing would be zappos.com. The main navigation is located horizontally at the top of the page, while another navigation is on the left in a column. The main navigation does not change but the vertical one does. The vertical navigation becomes more specific as the viewer clicks on a particular label. For example, one clicks on women shoes, then boots, then black, the size. The content of the page changes and there become fewer options for a person to choose from. Along with the differences of change, the two navigations are differentiated by color and shape. The main navigation, which has the most emphasis, consists of a solid blue box. In contrast the vertical navigation is blue font on the white background.

Bi-Weekly Review 5

http://freelanceswitch.com/: This site has both horizontal and vertical navigation. The main navigation is at the top (going horizontally), and is in the gray box. The secondary navigation is within the green box below the main navigation, as well as off to the right side going vertically. The green box has a slight gradient and is given some texture to create a distinction between primary and secondary navigation.

http://www.apple.com/finalcutpro/: The site has mainly horizontal navigation. The primary navigation is at the top, with a gray texture added for distinction purposes. The secondary navigation is below the gray navigation box, and is also horizontal.

http://macrabbit.com/: This site uses only horizontal navigation. It is very simple in that it uses small icons along with text as links. The main navigation at the top is the only navigation throughout the site. All of the icons used have a similar artistic style to them, and when they are clicked they change color and are circled.

http://www.prague-guide.fr/: This site uses vertical navigation. The links are made to look like folder tabs and are given texture for distinction. On other pages, horizontal links are used with no special added texture. When the main tabs are clicked, they change color to show which page the user is on.

http://www.polkdesign.net/: This site utilizes horizontal navigation. The main navigation is flushed left and changes from black to red when hovered/clicked. Other pages use secondary vertical navigation (flushed right).

Four out of five of these sites use horizontal navigation as their primary navigation of choice. They also tend to use vertical navigation as their secondary. Their main navigations tend to be textured, whereas the secondary is not.

Bi-Weekly Review Navigation

When looking at Hardgraft.com the first thing that you notice is the fixed aspects on the website. For Navigation the left hand side of the website contained links to the different collections and the different categories of good. Because this is a smaller website there is no level of links. For example, it does not say Cases and then list Ipad, Phone, Laptop. Because of the simplicity of this site, they do not have any breadcrumbs for shoppers to use. This site relies on the back button designed by Safari, Firefox, Google Chrome etc. They can use that to return to all products, or if they remember the title, click on the main link again. There is no back arrow link on the page.

Carnation website is an attention grabbing site that utilizes geometric shapes and vivid colors. Although viewers may gravitate towards the site because of this reason, the sites navigation programs may push them away. Carnation does include a banner on the top of the page that leads to links of other pages. The confusing part of the website is that it also scrolls down, and the scrolling is split unto different pages. This is similar to a one-page site. At this point the viewer could be confused if they are supposed to click the links, or scroll through the information to find what they are looking for. Although the website has a good site ID, it is missing noticeable sub-heading that would make the navigation easier. When looking at the actual links and arrows though, they do change colors letting the viewer know that they are clickable.

Genia agency is a foreign website that has a good use of a grid pattern. The navigation is organized well with the site ID clearly identified and the links being along the top of the page. The text and images are aligned in boxes. When scrolling over links, you can clearly identify that they are clickable as they change color, or a vector box appears. Although there is a lot of information, the organization of the website allows it to be readable. There is no bread crumbing on this website so the viewer will have to use the back button provided by the Google Chrome, Safari, etc. or reclick on the link on the top of the page.

Planet propaganda is a website with unique navigation. Although on the top right of the page Method | Work | Blog | About | are listed you initially see these choices in the middle of the page, as soon as the homepage loads. These words are placed in a triangle pattern in the center of the page. The background is a slideshow of images but the links are static. There is no option is scroll so the viewer must click on a link. By keeping the homepage simple, the viewer has less chance of getting confused. Some do use J Query with buttons to send the viewers to new information.

The navigation of Archikon is different than most websites you see today. Although the website is in a different language, the artwork and layout leaves me to believe that this is an architecture website. Instead of having a banner across the top, or left side of the page with links, Archikon places its link randomly on the home page. These links are connected to the site ID with thin white lines. It resembles a scatter map used for brain storming.There are no bread crumbs for the client to use.

http://www.hardgraft.com/#/collection/heritage
http://www.carnationgroup.com/expertise
http://www.agenciagenia.com.br/genia
http://planetpropaganda.com/
http://www.archikonconstructeurs.nl/

Navigation Use and Bread-Crumbing: Brock Switzer

SecondStory.com

Second Story is the website of a design firm located in Portland Oregon.  The webpage for this group is amazing.  The site uses a combination of traditional scrolling on the “news” page as well as x-axis jquery to continue through the information.  The sites navigation is beautifully laid out.  The viewer has a couple options.  For the first option one can simply click on the links located on the left hand side of the page and watch as the site smooth scrolls to the side to reveal the clicked on section of content.  The other option is to press arrow buttons on the right hand side to continue through the content sections.  Obviously, this is a brilliant way to guide viewers through the site to view the content in the order desired by the designers.  Someone visiting the site must move through each section of information in order to arrive at the next.  Everything is on the same page and the order never changes but the site is very easy to use and with the addition of quick links on the left a visitor to the page can get to the information that they need quickly as well, for example the “contact” page.

 

Morethan20.com

More Than 20 is a website for a husband and wife photography team in Buffalo, NY.  This website is also pretty amazing.  The site is at it’s core a one page site that uses both jquery and self-scrolling to achieve the final goal of being taken through the content.  Again, the use of jquery to scroll for the viewer allows designers to have nearly total control over how the site is viewed and in what order.  The site shifts to multiple pages once the “galleries” section is reached.  When the viewer clicks on a photo it moves to a separate page full of photos from the session indicated by the thumbnail.  Just because this is a separate page doesn’t mean that it is difficult to return to the single page sections.  The links at the top remain no matter what page is currently displayed and when clicked on return the visitor to the main sections.  The site has a reasonable and logical flow to it.  There is an illustrated logo followed by an about section, galleries, FAQs and finally a contact form.

 

DucttapeandGlitter.com

Duct tape and Glitter is yet another website for a graphic design company.  This website is simple and on multiple pages.  When a visitor first arrives at the site it is on a simple homepage with links at the top of the page as well as linked photos near the bottom of the page.  The navigation is simple and not too cluttered there are only 4 navigation options at this point.  There is some bread-crumbing on the site.  There is a large arrow pointing to the top nav bar which is in a specific order which leads the viewer to believe that is the order in which they should be viewed.  Again a logical order is used in which the work, about, blog and contact information are viewed in that order.

 

pulpfingers.com

Pulp Fingers is a group that creates apps for smart phones.  The website for Pulp Fingers has a beautiful texture.  The entire site feels like cut out construction paper.  That being said their navigation leaves something to be desired.  The site is rather simple and there are few navigation options but they are near the top of the page and somewhat difficult to see.  The link that stands out the most is the “blog” link on the right hand side of the page that stays in the same position with the site as it is scrolled.  This link is the most important feeling and seems to take away a lot of focus from the main nav.  It may be that the designers wanted the site to have an emphasis on the blog but with other important information like what apps the team is working on, it seems an oversite to make those links less important and hardly noticeable.

 

TrailerParkTruck.com

Trailer Park Truck is a website for a restaurant in California.  This site is very simple, easy to use and the navigation and bread-crumbing are spot on.  This website like many others that are nicely laid out used smooth scrolling jquery to guide the viewer through the content areas.  The site has a simple nav bar at the top that has very limited options.  Once the visitor clicks on a link the site scrolls to the section of information and from there traditional scrolling takes over.  Logically, most viewers would no doubt click the first link and then simply scroll through the rest of the sections which are intelligently laid out to give out the information needed in a precise order.  There is however always the option at the right side of the page for the viewer to return to the top and click on other links from there.  Sites like this one that use jquery links and single pages are clearly the most precise bread-crumbing sites.  A visitor almost has no options as to the order of the informations presented which gives the designers and company owners the ability to ensure the information presented is done so in a very particular way.

Five Examples of Navigation

Architect Steven Holl has a website that uses a unique form of navigation and bread crumbing. It is composed of a navigation bar on the left that is a made up of click-able boxes that take the visitor to different sections of the site, but the navigation bar never disappears. Each page has a different background so a change is noticeable, and the home page background changes every time it is refreshed. Secondary Navigation sometimes appears on the right depending on what page the user has traveled to. The navigation is traditional, but the way the whole site is available in one large box is very different. The navigation is designed to appear like an architectural sketch. Each navigation option is given a larger size in the map according to its importance on the site. The site does stand out as a result, and fits the subject matter.
Dizidesigns, a web design and graphic design company, has a traditional, but refined navigation system on its web page. The navigation at the top of the web page transports the user to the other sections of the page, but that is all there is to the website. There is no secondary navigation aside from the rollover, portfolio page that allows users to click pictures that take them to other websites that the company has designed. The pink, white, and grey color scheme is on each page, so the designers create continuity throughout their site.
Web designer Evan Eckard has a similar design to Dizidesigns, but Eckard uses a speaking, horizontal navigation bar that explains what each section is underneath its heading. For example, underneath contact it says email and phone. This allows the user to better understand where each click navigates to on the page. Eckard also is consistent with his color scheme and font choices to make the whole site feel like one piece.
The flash website, Nick AD, uses an extremely unique horizontal navigation bar that appears anywhere the user clicks, but the user must hold the click until they rollover the section they wish visit. Whenever a section is selected, the section appears on the site. Every section appears within the page, and as a result, it feels like one whole page. The only issue with this concept of navigation is that it is so different from what most users are used they may get intimidated and leave. With a little experimentation, the website does prove to be a refreshing perspective on a web page by making it a much more interactive experience.
The design company, Wards Exchange, uses a simple, vertical navigation bar that is numbered which makes the experience linear. Not only is it numbered, but also each section gets lighter in color to create a visual progression. The navigation plays off their brochure that uses a similar format. There is not other form of navigation on the page, and once a user goes through each page, they will have a clear understanding of the company. Each section is a simple page that does not take much time to read through. Consequently, the user has no reason to object to traveling the linear route because it is effortless. Like all the other sites explored, the color scheme and fonts were consistent from page to page.

 

~Written by John Marshall

Bi-Weekly Review

inBloom: A viewer that uses this site would be very pleased with the easy use of navigation.  inBloom is setup with a unique design and the color of the background really makes the page come alive. When someone clicks on a tab on the page, it wont open up a new window, which is nice. This feature makes this site easier for the r people to navigate. The color scheme is very simple and effective and easy on the the images and links around the page.  Overall, inBloom is very nice. There is always a tab to go back to the page previous page which is a big help to alot of people. Makes for the navigation to be simple and to the point.

Hello Color: This website has a very creative layout, as the title says, but it is very different than most websites. Hello ColorThere has very little stuff going on the first page which makes it easy to find where to go because of the simple introduction. This website also uses a clicking navigation bar. The one thing this site is lacking, is a better style and color scheme. The colors are very silent, which makes it easy to loose attention when browsing. The site is also just to plain and boring. Nothing is really occurring on HelloColor. Needs to have more going on to keep the viewer awake.

Apple: Apple is one of the easiest websites to use and figure out. Everything is laid out in a good area.  It’s large font on a navigation bar at the very top of the screen makes Apple sytand out to most of the different sites. Although there is a very minimal use of color, Apple still makes the site very unique. Even though color is not used that much, Apple still gets the message across to the people. Everything they design is based off a black and grey color scheme.  The only problem with the site is that when you go through tabs you have to  click on different navigation menus. Most people are used to it, so it does not really pose to much of a problem.

Hopking Design: Opening the website, there was no information to be found on it. Just based on the layout, it was very nice and simple and got to the point very quickly. There is a horizontal navigation bar across at the top right.  This is really only the  The simplicity of this website makes it very easy to navigate. Although it is easy to use, that doesn’t mean its designed simple, it is well put together. Although there was no content, Hopking Design still has style and makes for an interesting website.

Playground Blues :  The first thought of this website do not really catch my eye. It has a very standard welcoming design with a message to the people on the front page. This site also uses a vertical navigation bar. It is very hard to find at first. Its located on the left hand side and very unnoticeable. Once you enter a page, there is no way to get back except using the back button on the browser. The color scheme is very bland besides the design on the front, but it works well! The only problem is that there needs to be a better use of the layout and style on the page, it is a little too basic and really has not much thought in it at all.

Blog Review – “www.webdesignledger.com”

“21 Inspiring Examples of Dark Colors in Web Design,” “15 Icon Design Photoshop Tutorials,” “30 Amusing and Funny Photo Manipulations,” “WDL Premium: Retro UI Set,” and “10 New Free Fonts for Your Designs,” from “webdesignledger.com,” all share very common similarities.  Their overall formats, layouts, navigation, and color palettes seem very comparable.

As far as the format and look of each site, all five pretty much follow the same template.  On the main site, www.webdesignledger.com, a short paragraph states what each site is about, with a small thumbnail located on the left, also with an italicized, gray, bold title.  When directed to each specific site, the title and information is justified to the left, with multiple advertisements on the right hand side.  Photos are shown throughout the page, with titles and labels explaining each graphic individually.

The navigation bar is horizontal with a gray background color, white type, very legible, and always remains at the top of the page.  There is also a good distinction in what each site is categorized in.  On each page, before the title, each category is in all caps and in red.  The red is there to stand out to let the viewer know that for instance, “21 Inspiring Examples of Dark Colors in Web Design,” is categorized in “INSPIRATION,” and “15 Icon Design Photoshop Tutorials,” is categorized in “TUTURIOLS.”

When it comes to the color palette, all five of the sites on Web Design Ledger look very alike and consistent.  They look universal with white backgrounds, the same typeface, and the same colors of type (gray for main title, black for normal text, blue for headers, and red for categories).  The cohesiveness of the sites makes Web Design Ledger come off very professionally and organized.

As far as bread crumbing, Web Design Ledger does not visually show any.  When a link is clicked, and the viewer goes back to the original page, the link does not change a color or anything.  To the viewer, the paths they take cannot be re-traced.

All in all, the five pages, “21 Inspiring Examples of Dark Colors in Web Design,” “15 Icon Design Photoshop Tutorials,” “30 Amusing and Funny Photo Manipulations,” “WDL Premium: Retro UI Set,” and “10 New Free Fonts for Your Designs,” share many commonalities, including their overall formats, layouts, navigation, and color palettes.

Bi-weekly 5 site review

http://www.begbicycles.com/

The sites primary navigation is placed at the top of the screen and is framed by parallel lines. It gives the user the option to go back to the home page or go forward to: bicycles, accessories, gallery and BEG blog. Their secondary navigation is at the bottom on the page directing the user to: how to order, contact us, small print, trade, cycle to work and press. The color and texture on this page does not change from each type of navigation and they are both horizontally placed. Instead the designer uses line and font size to suggest importance of each menu.

http://blindbarber.com/

The sites primary navigation is placed at the top of the page. It gives the user the option to go click shop, about, menu, locations, press and news. Their secondary navigation is at the bottom on the page pointing the user to newsletter, return policy, reservations, friends and contact. Both navigation menus are horizontal. To expose the importance of the primary menu the type is in a large font on top on a black and white picture of a barber. The photo’s dark texture makes the white text pop from the screen directing the user’s attention. The secondary menu is placed in a plain grey rectangle with a light grey font, not distracting the user from the rest of the page.

http://www.archikon.nl/

The sites navigation is randomly placed on the home page. It gives the user the option to click projects, contact, Archikon blog, construction and office.  Their secondary navigation is horizontally placed in the bottom right corner of the page directing the user to twitter, linkedin, feed and login. The primary navigation is on top of a large color photo. The designer uses circles as pin points and white lines to move the users eye from one option to the next. The secondary menu is in a small blue rectangle with black text. This site did not rely on trends, its unique navigation design will only intrigue the user more.

http://saltsurf.com/

The sites primary navigation is at the top right of the page horizontally placed. It gives the user the option to visit home, the concept, surfboards, online store, contact and below the salt. The secondary menu has only 4 circles horizontally placed directing the user to the available now, available in the store and blog. The primary navigation is small boxy text which uses an underline to show which option is being currently used. The bottom navigation is not even text, just circles. Clicking on them changes the photo in the background and the next option the user can click to go to a different part of the website.

http://manualcreative.com/

The primary menu is at the top on the page directing the user to projects, news, profile and contact. Each category is separated by a small line and the entire navigation system is placed horizontally. The secondary menu is set up quite similarly to saltsurf.com. This site uses circles as well to point the user to different options. This site seems to have followed the WordPress theme with a very plain template.

In conclusion these five sites do not focus heavily on color or texture to create a separation from the main to secondary navigation options. Most of the sites used large pictures to illustrate the site so most colors used were white, shades of grey, minimal blue and black. To separate importance a the menus a variety of font sizes were used, placement on the page was emphasized and circles were implemented instead of text.

Older entries »