ARTM2210 Intro to Web Design

Just another Intro to… site

Archive for Bi-Weekly Review

Hey I’m Art-Monthly Review 2

For the second monthly review, I examined Art Williams Page at http://heyimart.com. On his page, he made a simple and easy design choice for the users to move through the page. On his page, he has on image that he has created that takes over the whole webpage and the user has to just use the arrow keys to move from one image to another. There are only a few times where the user can click to see a different part of the page. For instance, he has a button that you can click to see more about him. When you click it, a page slides from the top and takes over the webpage. At the bottom left, there is another button you can click on that leads to a whole different site which is more of his work on one page websites. He does not have very much information on his site, so this makes it easy for the user to read. The artist also uses very little bright colors on his page. While it is mostly because his images are dull colors, he uses light and shadows to created depth throughout the page. Overall, his page is very user-friendly and simple to use.

 

Monthly Review #1: Overstock.com

For my review of an e-commerce site, I decided to choose a website that I was not particularly familiar with. Thus, I chose Overstock.com (also called “The O”) to review.

Upon first visiting the site, all visual elements were very pleasing to the eye. The homepage of Overstock consists of mainly neutral colors with pops of color (mainly red) on the Overstock logo, the “search” button (adjacent to the logo), and in two locations mentioning free shipping on orders over $50. Yellow is also thrown into the mix, designating that a sale was in progress (placed over neutral colored photos).

I was easily able to find what I was looking for – the search bar, right next to the Overstock logo. I proceeded to type in my product (a Canon 70-200 f/2.8 L lens) and pressed the bright red “search” button. The site indicated that there were 121 results for my search and laid them all out for me on a single page. The particular lens I was looking for was the first item on the list, followed by a 70-200 f/4 L. By scrolling over the picture of each item, I was able to find a blue “quick view” button that allowed me to see more details about the product, informing me about the price, quantity, and details of the product. There was also a green “add to cart” button. Obvious enough. However, I noticed there was another button that popped up when my mouse hovered over the picture of the lens… a plus sign. This was my first “don’t make me think” moment since being on the site. Unsure of what it was, I clicked it, and to my surprise the item I had my mouse hovered over was added to a “saved items” list… but not to my cart. A useful tool, but it definitely made me think. The button is not very obvious or informative to first time users.

After using the search bar, I decided to try out the navigation bar – which is fairly large. There are nine overarching categories for products, from “women” to “bedding and bath” to “worldstock,” all of which had extensive subcategories within them. It felt a little overwhelming at first, but because the labeling was so detailed I was able to easily navigate and find what I was looking for in a few short clicks (the search bar was still faster).

Overall, Overstock.com’s layout is very self-explanatory. Almost everything is clearly labeled (no odd names for the search/career button or for different options in the navigation bar). My only problem was the mysterious plus sign – helpful if you know what it’s supposed to do, but somewhat confusing if you don’t. This website definitely achieved the goal described in Steve Krug’s “Don’t Make me Think” of being effortless and easy to navigate for the average to unfamiliar web user.

BONUS review

We decided to do a restaurant website called Burger Asylum, and we did use some websites as a bases to how we had the layout of our site. The website we used that most resembles ours and that helped us the most was the Jerome Bettis Grille 36 found at http://jeromebettisgrille36.g3restaurants.com/. To start with, they have an simple yet excellent layout, because its simple to read, easy to understand, and also eye catching. They have a slide show as their home page’s background which keeps some movement to the page and keeps it fresh. Their left hand stationary sidebar is where i got the idea of a simple layout for each page. It is easy to do and creates a very easy navigation service for the user. They have use of simple colors such as yellow-gold, black, and white. They use black transparent boxes for where their information is on the right side of the screen but it is not too transparent to which it makes the reader focus too hard on the text. The use of textures throughout the jerome bettis grille does not stand out, but i would have to say that the background photos give it a sense of texture not necessarily the type of generic texture most would see on a background or menu bar, etc. Also the transparent boxes pic up some of the picture in the background which also in a sense creates a texture for the text to rest upon.
In comparing both Burger Asylum and Jerome Bettis Grille, you can begin to see similarities between the two and also some differences. Burger Asylum has the same basic layout, starting with the left hand navigation bar that stays fixed in place so that if you scroll up through the information (on the right) the navigation bar stays in place allowing the user to switch to a different page at anytime, without having to scroll up. This is a key feature that would make Burger Asylum stand out, because users would feel its simple and easy. Also the transparent information boxes on the right side of the page resemble each other with the solid color that is transparent allowing the background to show through, yet Burger Asylum has an easier interface when it comes to that. It has a simple textured background, so the text within the box is alot easier to read rather than with the images showing through on the Jerome Bettis Grille. Our site would be very effective because of the simple and pleasant color pallette that we choose to use, which was between dark reds, pale yellows and black. These colors originated from the textured backgrounds we had, because we felt it would make the overall theme flow smoothly. Finishing up our site has similarities with Jerome Bettis Grille, yet they are not the same site and i feel that Burger Asylum grasped the concepts from JB Grille and took them a little further with our ideas.

extra credit review

For the extra credit review, I looked at the website for Identity X which is a local band in Pittsburgh. Identity X’s home page is very simple, with only a large graphic of their CD cover covering most of the page with links to download or buy the CD at the bottom of the page. Above the picture is a simple navigation bar where you can choose from home, news, shows, media, band, contact, and store (the link leads outside the website) with links to their facebook, twitter, myspace, and youtube accounts in the top right corner. The navigation buttons change color as you hover over them

From the home page, the home button is a clickable link which refreshes the page. When clicking any button other than home, the layout changes completely. They added a graphics banner and a graphical sidebar, where you can enter your email to join their mailing list, listen to a song or look at their upcoming tour dates, as you click on different links the song in the sidebar player shuffles so the visitor is able to hear the music. The media page is a gallery with thumbnails of pictures lined up that enlarge when clicked. The shows page has a simple table send up that would show the tour date, time and venue but there are no tour dates. The band page is about the band, which is similar to what my group did on the home page. The contact page has booking information and another link to join the mailing list.

I liked that off of the home page of the website, the user had the option to join the mailing list at any time but I would have taken the link for the mailing list out of the contact page because two links for the same thing that literally fell right next to each other on my computer bothered me. One thing I would have changed about the site overall would the the layout, which changes after navigating out of the home page. I would have had the sidebar and banner throughout, because it was a bit overwhelming to go from a very simple layout to a more complex one. I also would have fixed the home link on the homepage so it was not clickable.

Overall, I feel out website was just as good at Identity X’s website. The pages were somewhat similar though I think our use of JQuery for the picture page versus a gallery of thumbnails works better for a band website.

Extra Credit Review Topic: Band Site

The site I chose to discuss is the band Rascal Flatts’ website. The colors on this site are very neutral. The very top of the page is a medium color gray, while the navigation bar right under this is a lighter gray. Under the navigation bar the rest of the background is black. The background for the boxes that hold the text are various grays, and the lettering various from white, black, gray, and red. The only parts of the site that are not neutral colors are the pictures of the band, and the social network links at the very top of the page. The colors, I believe work very well together, creating smooth looking site that is neat and organized. The red within the site gives a good balance of neutrals and bright colors.

The textures on the site are not very noticeable. The top of the page with the medium color gray has a spectacle texture, with extremely small white dots. The navigation bar is a solid gray with no texture. The black background has a vertical line texture that is also not very noticeable. The lines in between the black are a very light gray.  The boxes that contain the information on each page do not have a texture either. They are a solid color, varying in different shades of gray.

The navigation is very easy to follow. The navigation bar is at the top of the website with the various links to each page. When navigating to the various pages there are other links that the user could click to either, buy tickets for a show, buy the band’s music, write comments, enter an e-mail address, and much more. Also, the band’s name at the top of the site is a link back to the home page. No matter what page you are on, the navigation bar is at the top of each page, and so is the name of the band.

This site is very effective at guiding the user through the website. The navigation bar is easily located at the top of the page, and each link connects you to the different pages. Once on a different page, the user can scroll down to read what is on the page. The user, however, must scroll back to the top to click on a link on the navigation bar. I believe this site is very easy to navigate through, and anyone would be able to understand how to use this site.

This site is somewhat similar to the design my group chose for our final project. The navigation bar is at the top of the site right under the name of the band. The design for our website has the same set-up, we have the name of the band at the top with the navigation bar right underneath. Also, we included photos, videos, music, and a tour date tab just as the Rascal Flatts band has done. The site also includes the slide bar on the home page. My group included a slide bar on our pictures and videos page. We also made sure to put the important information in the center of the page, just as the Rascal Flatts sight has done. Our website will stand out because we have interesting graphics, exciting music that one is able to click on and listen to, and made the site simple for everyone to be able to navigate through easily.

Francescosholeinthewall.com

Francescosholeinthewall.com is a web page that employs a lean layout, a warm color palette, and appropriate imagery to convey the idea of the small, family-owned restaurant.

Its navigation system is simple without many bells and whistles and while it probably won’t win any prizes for the artistry in it, it is effective. It uses the top frame of the blackboard where the links are placed, to simulate a navigation bar. The right side of the frame hosts a number of links that take the user to read reviews about the restaurant in various external web sites.

Overall, the colors are dominated by the sienna red background – resembling the colors of a brick wall – and the grays of the blackboard in the middle. There is a hint of texture on the top of the page where an actual image of a brick wall (with a hole) containing the logo, fades into the red background.

There are many similarities between this web page and our project. They both exploit the idea of the hole and maintain a consistent layout throughout the whole web site. In our project the color palette is dominated by black and blue. The navigation is similarly simple but there are two additional elements in our project: jquery that creates the rollover effect making links clearer and the punch-out hole-shaped blue menu buttons that indicate which page of the site the user is visiting.

Extra Credit Review: “Gab ‘N Eat”

My final project, along with Justin and Milt, was a website for a small, family-owned, fictional restaurant called Hole in the Wall. To go along with this theme of hole in the wall/mom & pop style restaurants, I looked at the website for my favorite local dive: Gab ‘N Eat, in Carnegie, PA.

My first impression of the website was fairly positive. The color choices are warm and inviting, and remind me of coffee (which is perfect for a place whose primary seller is breakfast food). The gradient that flanks the page on both sides is also a nice touch, helping to break up the white of the page. The gradient also gives a sense of fluid movement, drawing the viewer’s eyes down the page.

As far as texture goes, this site does not make much use of it. Apart from the textures of the food in the various images, there really is no noticeable use of texture. As a regular at this place, I can tell you that there are a whole boatload of interesting textures that can be found within the actual restaurant (the wood grain of the tables and counter, the paneling of the walls, etc.). I feel as though the designer of the site either ignored the opportunities they had to utilize texture, or they were just too lazy to do so. Either way, the site could certainly benefit from it.

The overall simplicity of the site seemed at first very fitting to me, as Gab ‘N Eat is a very simple restaurant. There’s no fancy food on the menu, there are no reservations, and there certainly isn’t a dress code. Everything is hand made, the old school way. The place is still cash-only, in fact. This simplicity was immediately recognizable on the site. Normally, I would say that’s a good thing. In this case, however, I think the simplicity of the site is a bit of a detriment. After about 10 seconds of browsing, it becomes clear that the site has only one page. On one hand, this simplifies the viewing experience for the user: everything they need to know about the place is neatly arranged on a single page. The navigation of the page is thus reduced to a minor amount of vertical scrolling and eye movement. As much as this simplifies the navigation, I think it takes away from the site’s content. There just simply is not that much content on the page. When people go online to view a restaurant’s menu, they want instant gratification. This site has links to download Gab ‘N Eat’s menu, but no way of seeing the menu within the page. By including the menu this way, the designer is making the viewer open up another application or window just to see what they came for, and that can alienate or annoy someone.

In comparing this site to the one that Justin, Milt, & myself have created, I have to say that ours definitely stands out. Part of our plan for the design was to keep it simple, and we succeeded in doing that. The color choices are simple, we used a simple image of a textured wall for our background, and navigating the site is intuitive. I won’t claim that our site is perfect, but I am quite confident in saying that it is far beyond that of Gab ‘N Eat.

Check out Gab ‘N Eat’s website at http://www.gabneat.com/

Bonus Review

The website I have chosen is www.sweetstreet.com.  This website fits very well with our website because it features desserts.  The colors on the site are very simple and contain gradients of white to gray.  The background of the site is an off white with white boxes that have the information in them.  However, there are a few accents of orange throughout the page to highlight certain tabs.  Having very simple colors make the photos of their desserts stand out on the page.   Each photo has gray text with a faded out white background, which really emphasizes the colors in each of the items.  The food items look very rich and fresh because of the simple background.  Plus, Sweet Street Desserts puts major focus on their services, such as shopping, photos, and foodservices for restaurants. They are able to effectively do this by adding bright or dark colors to stand out against the white background.  At the bottom of the page, there are four boxes of their social networks for the company.  The colors in the social network boxes are completely different than the color pallet of the page, but they work because they are the familiar colors of each network.  Each page of the website is very consistent with the colors, except the fundraising page.  This page has a watermarked background and uses a lot of orange and brown.

There are many different textures on the Sweet Street Dessert website shown through colors.  For example, the gradient at the top of the page creates a white to gray texture from left to right.  The detail in each of the food items creates texture, as well.  Also, each section of the website is divided by boxes and lines.  These create textures because it breaks up the page and shows a clear hierarchy of information.

Next, this webpage is very easy to navigate around.  There are tabs at the top that lead to different pages.  When hovered over, each tab changes from gray to white to show customers what they are clicking on.  Furthermore, there are tabs on the side that show customers to each type of dessert they make, which include pictures.  When a customer wants to buy something, they just click the “add to cart” button, which takes them to their total and checkout.  Navigating back to the homepage is very easy because the logo in the top corner acts as a link.  Plus, when the customer clicks on the pictures within the homepage, it takes them straight to the product, along with more items similar to that product.  Overall, this site effectively shows users where to find what they are looking for.  However, there is a lot of text on each page, which can become distracting.  For example, the homepage is very busy because of the tabs at the top, side, and bottom.  They should have just put tabs in one area and just added more tabs and pictures to fill up the center.

Our website, Just Desserts leads customers around the site with ease.  Our tabs are on the side of the site, which light up when the curser is hovered over them.  There is not a lot of text on the pages, so there are no issues finding products or information.  There are many pictures that explain our company better, and make the site more interesting. The color pallet we used were a combination of pinks and whites.  These colors create a fun and laid-back look to our site.  These colors make our site stand out against other companies, such as Sweet Street Desserts because the colors are more eye popping, but still create a clean look throughout the pages.  Plus, our photos have a consistent blurred background to create unity among them and make the items look richer.  Our textures are created through gradients of pink to white and the detail within the photos.  Overall, Just Dessert’s website stands out against other websites because of the color pallet, textures, and how efficiently we guide customers through our site.

Restaurant Web Page Review

Since we are working on the restaurant web page for our multi-page project with Brian and Justin I took a look at several restaurant websites. Many impressed me in a positive way among which I can mention http://www.nuevo-aurich.de/ and www.burgatorybar.com. Both esthetically interesting, stylish, but also functional. Burgatory has a simple and slender layout on the main page that uses plenty of texture and a harmonious color palette. With CSS and jquery, it gives the user access to the burger and drinks menu, displaying animated links that appear when mouseovering. The menu pages, both for food and drinks are consistent visually and stylistically similar to the main page. The navigation system is fast,original, and fun, it also uses jquery and CSS elements and has a very intuitive feel.

Nuevo-aurich is a more traditional web page, it uses javascript and photography in a very efficient way, a vibrant palette of warm colors. Background texture reinforces the sense of warmth. The navigation menu is at the middle-bottom of the main page and usually leads to submenus that use photos of pieces of paper/calendar as links. Those reveal the lists of food and drinks. Unity and balance are the main features of this web site s well as the clean layout.

Monthly Review 3 by Latiyfa Whitehead

 

 

 

For the purpose of this paper, I chose the burger chains McDonalds and Wendy’s. Both websites have a good sense of balance, unity, emphasis and layout. However, I think that McDonald’s has the better grasp of these tools.

 

Wendy’s web pages have a pretty good sense of balance. Most of the information doesn’t set the page off balance by putting too much on information on one side. On the “Our Menu” page for example, the image of the onions and lettuce is balanced out by the menu on the left and the quote on the right. The same is done lower on the page where the food items balance each other out into a horizontal axis.

 

Or on their Wendy’s Ads page which manages a symmetrical balance by separating the different videos into sections. The three smaller videos on the side are used to keep the page from being overpowered by the larger video on the right.

 

However, Wendy’s pages do seem bit off balance at times. Their Wendy’s Kids Meal page for instance has a large image that overwhelms the page while the menu is smaller and seems to be pushed to the side. Perhaps if they had made the larger image a little smaller and moved it more to the center they could have achieved and asymmetrical balance.

 

McDonald’s web pages meanwhile have strong balance. Most of their pages have the design of the page separated into neat segments with information on one side which is balanced on the other by information on the other.  Sometimes this is asymmetrical like the Training and Education subpage which sets the text on the left and images higher and on the right. The images keep the page from being too heavy on one side, like a scale that is offered equal weight to keep it from toppling over.

 

Both websites have strong unity. With McDonalds there is a consistent use of white in the background that ties the pages together. Also, there are splashes of red and yellow here and there that of course comes from the logo’s famous colors. The McDonalds website also uses consistent fonts. The font at the head of the page almost always uses the same font style and indeed the same color. The text in the body uses the same font for most of the pages as well. Alignment is a big part of the unity of the website.  As mentioned before, the font is placed at eye level in the same spot. The text is placed directly underneath. And for most of the pages, an image is placed in the same spot. These things act as separate pieces that when viewed, pulls the website together as a whole.

 

The Wendy’s website is much the same way. The navigational bar at the top of the page is a dark red color. Each page has dark red in the page somewhere, whether it be the text, or a colored box. Visually, this pulls the page together. While not all the pages look the same you can see recurring patterns where the text and the images a kept in the same place to create repetition On the Careers page, the images are kept to the right, and the text on the left. Even when you click on the subpages, this pattern is kept the same. Also most of the pages keep the same font in the same color, a dark red as stated before. These little tricks keep the pages whole rather than loosely joined.

 

When it comes to emphasis, both websites have a strong grasp of it. McDonald’s frequently utilizes a white background with an image over top that automatically pulls your eyes to it. Or it places the title of the page right at eye level in white against a darker background or image.  This really emphasizes the point of whatever page your on. McDonald’s also has an interesting bit of emphasis on the navigation bar that sends you to the different pages. The most important pages are in white and planted at the top. The less important pages are in a muted pink and at the bottom of the navigation.

 

Wendy’s has a navigation bar as well. The bar at the top of each page leads you to different parts of the website. If you hover your mouse over them, a drop down menu appears. Unfortunately the text in the drop down menu is a muted orange against dark red, which is no where near as eye catching as McDonald’s navigation bar.

 

Also Wendy’s uses motion for emphasis. The homepage for example, has a slideshow that moves back and forth periodically. This pulls in the viewer since the human eye is automatically attracted to motion. This tactic can also be seen on the “Quality of our Recipe” page and the “Wendy’s Ads” page which has a video that plays automatically, and pulls in your interest.

 

On the career page, there are three human figures. If you hover your mouse over them they move and a sign appears in their hands which leads you to important parts of the website. McDonald’s uses little movement, except for their promotions page. So I would say that Wendy’s does a better job of emphasis, and catching the viewers’ eye but only by a little bit.

 

When it comes to layout, McDonald’s had a clean-cut layout. Most of the webpages consisted of an image with an image underneath, or over it. This makes it simple to navigate through.

 

For example, the home page consists of an image, large text to explain what it is and a few gimmicks at the bottom.

 

Wendy’s on the other hand had a lot more going on. There are moving images and text boxes on different parts of the page. Unfortunately this makes the webpages a bit busy and less straight forward. Also while McDonalds puts its most important text at eye level, Wendy’s tends to place it to the side or below eye level. This makes it harder to tell what’s the most important part of the page.

 

On Wendy’s Our Menu page for instance the actual menu is off to the side and the textbox for it is smaller than a quote from Dave Thomas. In the middle is a picture of onions and lettuce, which doesn’t really tell us what’s on the menu. And pictures of the actual items on the menu are on the bottom of the page rather than on the top where they would be easier to see.  So in this case, McDonald’s has the better layout.

 

So I would say that while both websites have a strong use of balance, unity, emphasis and layout McDonald’s has a stronger grasp of these principles.

Monthly Review

For the final website project my group is still undecided. Though, one of our ideas stemmed from a burger restaurant website, so I decided to compare Burgatory and Red Robin’s sites.

I think Burgatory’s site is well balanced in the sense that each page is laid out in a similar fashion. Things are very centered and bold, making it easy to read and navigate. The neutral color palette and grungy textures give the site a more urban/trendy feel, perhaps reflecting the type of customer they are looking for. The site does a good job of being eye-catching without being cheesy, which is the problem I had with the Red Robin web page. Though Red Robin’s site was very clean and professional its bright bold colors and ads reminded me more of a fast food joint rather than a real restaurant. Even though it was easy to navigate I found it not as aesthetically pleasing as Burgatory’s. Also  their site was very standard looking while Burgatory’s changed things up with pop up menus and simplistic designs.

Both pages do a good job of representing hierarchy and unity, though in different ways. Burgatory has a floating menu on the right side of the screen that drops down to give menu options and cohesive color palette. Red Robin’s menu is stationary at the top of the screen and the only change it makes is by highlighting your current page and uses a bright, bold array of colors. Though different, both sites place a large and effective emphasis on their product: burgers. Each page is filled with beautiful burgers, wonderfully photographed. And although neither one has a search bar I don’t think it is necessary for this type of website. I believe the navigation is simple enough that no quick search is needed. In all I think these sites layouts, and simplicity make them nice to look, informative, and easy to use.

Restaurant Reviews

 Burgatory:

 Everything on Burgatory is really well balanced. The first thing you notice when going to their homepage is the huge burger with the pitchfork right in the middle, which is balanced by text and a few images on either side. The emphasis is definitely on the burger, since that’s what they are really known for. Everything feels unified through the usage of different blues, reds, and greens which helps to tie it all together. The layout is simple, and easy. When navigating over the burger a “menu” option comes up which leads you to the main page of their burgers. Everything is brown and red on this page which relates back to meat, and all of the other menu options are easy to find through the right-side navigation panel. Using Krug’s five most important things he stresses about it, it is simple, easy to navigate, you don’t ask yourself how to find anything.

Five Guys:

My first impression of five guys website is that it wasn’t really that interesting visually. But it does relate back to the décor in the restaurants so that does work out. Navigating the site was really easy and straight foward, but I would have made the text at the top saying “home, menu, etc” a little bigger just to draw a little more attention to it. It is well balanced with everything centered and divided “white, gray, then white”I really liked the polaroid type slideshow that is on the left hand side, I thought that was interesting. I think the emphasis on this page is the name, Five Guys, since that is the thing that stands out the most.Everything is unified through red, gray and white themed which are the restauraunts colors.

I think I like Burgatory’s website more, it is more interesting visually and makes me want to explore it a little more because I think it uses the design elements a lot better than it Five Guys did, and better too.

Monthly Review 2

Site: http://www.stumbleupon.com/su/809ZDk/:Vq9UNp.G:DaCTP$pW/inception-explained.com/

Monthly Review 2

For this month’s review, I found a really neat site on StumbleUpon that uses the same concept as what we were assigned for our folklore project. It is a scrolling webpage that visually explains (with light narration) the plot of the movie Inception.

It first, is a great concept because Inception could be a hard plot to follow for some people and this site explains it in a very basic way, with very basic shapes, colors, and movements. This keeps it as simple as it can be so that even the dumbest person who saw the movie could understand it after looking at this site. Or if someone did not see it, they would easily grasp the plot.

The first interesting thing is a very small constantly running clock in the upper right hand corner. Time is a very key element of the film and the further down the characters go in the dream state, the slower time passes and the clock in the corner of the web page also slows down as the plot explanation reaches further dream states. Clever.

As the page scrolls down further we are introduced to the characters represented by simple circles at the bottom of the screen, with the name of the character written inside. Each has a different hue and saturation so that no two are alike. As each character is emphasized at certain plot points of the film, as you scroll, that character’s circle raises itself slightly above the others to show the viewer who is in focus, along with saying it in the type.

As we enter various dream states, the circle of whoever’s dream it is becomes smaller and raises up to the middle of the page with lines connecting it to all the other circles to tell us which characters are together. Also the light background echoes where their dream is: street, hotel, hospital, and limbo (raw subconscious). Great composition and it’s very well organized so that everything has its own space and it isn’t hard to see any object.

The overall presentation is really solid. Objects’ sizes change and move around constantly, The colors work well together and the shapes and images are simple enough so that we still know what they are without being overly complicated. The flow is also nicely done; even though the page scrolls to reveal more of the story in that way, there is also movement by objects on the page so we don’t just scroll down static images, which would be duller. Also, the type is never in the same spot engaging the viewer’s eye. Overall there is a lot of movement between the characters, text, and scrolling making it a very fun and nicely designed web page, despite that it gives me a headache to imagine how much code went into it.

 

 

Food Chain Website Comparison

Review 3: Comparing Food Chain Websites

 

Brian, Milt, and I are creating a restaurant site so I took a look at the websites for Wendy’s and and In-N-Out Burger because Wendy’s my favorite fast food joint in Pittsburgh and In-N-Out is supposedly the best on the West Coast which is where I’m moving in a couple months.

Wendy’s home page is balanced well; background image of food with info centered in the middle. I have a real problem with its tabs though. A couple are links to other pages and a couple open completely new tabs with the pages and I think that’s a lack of Unity. Either they should all open new tabs or they should all stay in the same tab. This ties in to Krug’s 4th “Thing” about knowing what constitutes a link. Because all of the labels look the same but perform different actions, I’m not sure if I click on anything else if I will open a new tab or not, which I don’t want to because it is inconvenient

The site’s areas are pretty well defined as per Thing 3, and the visual hierarchy is there, usually placing food first in the center then having advertising on the sides or bottom, so I would say emphasis is acceptable. I’m iffy about the layout though. There are a lot of links in the center of the frame, but you still have to scroll down to see menu items and other important info. I guess I would say the layout idea is good, but what they put in each area of the layout is not.

They did manage to minimize noise on most pages, opting for a simple plain color background instead of trying to shove images of food in your face.

I like In-N-Out Burger’s Layout from the start. Nearly everything is in the browser and you don’t have to scroll to find anything, all links are presented in the space provided. This really makes me feel good about the accessibility as opposed to Wendy’s where I’m scrolling around looking for certain things. Also to note, INO doesn’t open new tabs when you click on links which helps the uniformity of the site, making it easier to navigate.

I don’t know why I like this but INO has a separate scroll bar in the center of the frame so if they have a lot of info, you can scroll down what they have without scrolling down the actual web page. I guess it’s easier to keep track of where I am and what I’m looking at because even though I am scrolling info, most of the web page is staying the same so I’m more focused on what I’m seeing. The layout of their site is much stronger than Wendy’s.

INO also has much less noise. I didn’t think Wendy’s site had much until I saw how little INO has; they show their products, foundations, and info etc but advertising is kept to a minimum freeing up space. Wendy’s has little links to sign up for gift cards, or the Veteran’s Advantage Program and now that I look back at it, there is too much info on their site that could be organized better.

The visual hierarchy of INO is very easy to grasp because whatever you need to see, you click it and it goes to the center. For example, with their burgers, they have listed so that whichever burger you put the cursor on appears in front and you can rotate them around in a circle like a carousel to see each. I’d equate it to choosing a video game character or a car in a racing game. INO’s History page is neat because it’s a scrolling page like our Folklore project so that you can scroll through the company history in a box in the center of the frame, while the edges remain constant so you can read all of that while you are still technically on the same web window width which, again, is something I enjoy.

Overall, INO is a much cleaner site than Wendy’s. Their Organization is better, as is their Layout, Balance, and Unity. Wendy’s also has much more noise and its too-large web pages make navigation undesirable. I can safely say I would be more inclined to eat at INO Burger than Wendy’s just after comparing websites.

 

Band Websites

Katie Withrow

Band Websites

 

The two band websites I chose were One Direction and Hot Chelle Rae. The One Direction site has a lot going on, and a lot to look at. It is well balanced, with the main information in the middle and other smaller topics on the sides or towards the bottom or top of the page.  On the very edges of the sides are different graphics, giving the website a fun and unique layout.  The graphics do work in unity with the information on the site. For example, on every page a paper clip appears to be holding together the page with the information on it.  The part of the site that stands out the most, or is emphasized the most for me, are the graphics on the sides of each individual page. This, however, takes away from what the viewer should be looking at and reading about. My eyes, no matter how interesting the article, or what was being said on a certain page, kept returning to the graphics.  The layout is similar to most band websites; there are a number of tabs that go to different parts of the page, located at the top. At the very top, before the tabs, is the name of the band, and a link to buy the band’s newest CD. Across from the tabs are a Facebook, Twitter, and YouTube tabs. In the middle of each page is the information that belongs to each tab, and towards the bottom of each page are comments from different fans.

The Hot Chelle Rae site is somewhat similar to the One Direction Site. It is not as well balanced. The top of the site, with the picture of the band, balances well with the other information given to the user, but there is not much on the sides of the information and it almost feels empty. The site does have unity, each piece of information works well with pictures and videos that are provided. The top of the site, with the picture of the band, and the band’s new album, is the most emphasized part of the website. The layout is also similar to the One Direction site. There is a picture of the band at the top of the site, with the Facebook, and Sign In, or Become a Member at the top of the picture. Below the picture are all of the tabs that allow the user to navigate to different parts of the site. The middle section is where all the information, videos, and pictures are placed that coordinate with each tab. The sides are empty, and are the color of black. At the very bottom of the page is the record label information.

These all relate to Krug’s five things to make sure the user sees and understands the site, because each page gives a hierarchy, having the band at the top, being most important, than either fans or record information at the bottom being least important. Both sites take advantage of the convention of “Buy the New Album”, or “Download Newest Music from Itunes”. The pages are also broken up, and it is clear which page belongs to which tab. The links on both of these pages are at the top right under the name or picture of the band, allowing the viewer to easily find what is clickable and what is not. Neither page has music on them unless you click the link to listen to a song or watch a video, or have what is referred to as “Busy-ness”. It is understandable what is downloadable, what is not, and how to sign up for something or not to sign up for something.

I believe the One Direction Site is more interesting to look at because there is more to it, and the pictures change each time you go to a different tab. There is more for the eye to see, and you are always looking for something new that has appeared. On the Hot Chelle Rae site, there is not much variety, and little to look at.

One Page Review: La Sabree Freelance Graphic Web Designer

One page websites are underrated. Because they are restricted to one page, a certain amount of creativeness must be used to make them both engaging and easy to use.  The website http://www.lasabree.com is a prime example of this.

The creator is named Sabrina N. Lopez. She describes herself as a graphic designer and it shows in her website.  The background is a drawing, presumably made by the creator herself, of a blank face with long flowing hair and note cards attached to the hair. She utilizes a fantastic use of colors, ranging from orange, brown, purple, red and gold. As well, there is a texture added to the website that makes it that much more interesting. It brings to mind a freshly done painting that you could reach out and touch.

The website is simple to navigate. At the top of the disembodied head there are three graphics; an exclamation mark in a speech bubble, a message in a bottle, and a light bulb. Passing the mouse over them produces text that clues you in to their purpose. If you click them, they scroll you smoothly down the page to the right destination.

To clarify, the exclamation point sends you to a short biography, the light bulb sends you to the freelance work she’s done, and the bottle sends you to the messaging and email section.

In addition, Ms. Lopez has added a floating navigation bar with the same icons. This way when you click one, you can reach the different sections from any point on the page.

It is also easy to read for the most part. Some of the text is in cursive, which makes them slightly harder to read, but they are still legible.  Her bio is to the point rather than giving the reader more information than they have patience for. Some websites make the mistake of being too verbose, but Ms. Lopez avoids this.

The section where Ms. Lopez shows off her work for her various clients is reasonably easy to understand.  There are icons for each project and although an initial glance does not tell you what it’s about, if you hover your mouse over each icon you can see which company she worked for. If you click them it takes you to a slideshow of her work for that company with a description for each one.

The last section contains a simple email and message space. There are no intrusive questions asked or excess details. It is merely a space to send an email, and a space to send a message

In conclusion, despite its minor flaws, this is a fantastic website and a prime example of the wonders that one page websites have to offer.

Review, alzheimerday2012.org

For this assignment I chose alzheimerday2012.org from onepagelove.com. It is a site dedicated to finding support for the organization Alzheimer Disease International. Its goal is to raise awareness and funds to provide care for those with Alzheimer’s or dementia.

This one page site is simple yet intriguing. The text is is condensed and centered making it’s purpose and message clear and easy to read. Although there is little texture (the bulk of the brain illustration and the line running from it) it does an excellent job of subtly drawing your eye down through the page. Also the juxtaposing colors are muted so they do not clash.
To navigate from one part of the site to another the user must simply scroll down.  One of the three color-coded buttons on the right side of the page can also be chosen to hop from one section to another. One of the most successful elements of this site is the colored hole that opens up as you glide from one section of the page to the next. It is very eye catching and a unique way to keep the user flowing down the page.

Review: “The Ordinary Life of Marco Z”

The single page website of musician Marco Z makes use of many of the major principles of design to create an inviting, and visually interesting experience for its users. The color palette used on the page is what first drew me in. In pairing the cool blue with tan, the designer creates a laid-back, casual feeling throughout the page. There is enough contrast between the background images/colors and the other images and text to be able to clearly distinguish each respectively, but there is not so much contrast that the page’s elements seem to vibrate/clash with each other. Just looking at the page makes the user feel relaxed, and that keeps them on the site longer. As far as texture goes, the designer uses a number of different things effectively. The texture of the bricks at the top of the page is very distinctive, and gives it an urban flair. As the user scrolls down, the bricks are replaced by intervals of the major colors, overlaid with a grainy texture similar to that of a corkboard/bulletin board. The other various images throughout the page are rendered in black and white, with a sketch-like quality to them. All of these textures give the page a certain air of quirkiness the further pushes the page’s inviting feel, and keeps the user engaged with the site.

The navigation of the site is fairly simple, and enables the user to easily read and interpret the information being conveyed. Everything is laid out vertically, and the color of the background switches between the page’s main colors with each new section of information. Nothing runs together, yet everything conforms to the same basic pattern and the site is quite easy to navigate as a result. The addition of the toolbar that occupies the top of the page (and remains there as the user scrolls down) gives the user the freedom to decide how they wish to navigate the site. By clicking on any of the tabs (Home, Concerts, Video, Photos, etc.), the browser jumps to the tab’s respective section of the page. The user can use this option, or can simply scroll down the page to locate the information they want.

Overall, the effective use of design principles on this page are what make it so effective. The contrast between the different elements make everything easy to read and understand, while also emphasizing the key points of information. The pattern created by the background gives the page a sense of rhythm, which helps to unify all of the different sections. The site is successful in its aim, as I am now quite interested in Marco Z’s work, and the visual strength of the page is the reason for that.

review 2

http://ideakites.com/

 

Ideakites uses various horizontal boxes that help brake the page up. They use different shades of red, blue, gray, and white with very little texture. The use of those colors all blend together very well and make for a clean looking web page. Every box has a drop shadow on the bottom. Just by adding the shadows to boxy elements gives the page depth. The boxes also help brake up the individual steps of how they make mobile apps, as the user scrolls from top to bottom. Or if the user doesn’t want to scroll a set of icons near the top-right in a red box indicates to the viewer that they can just click and skip to a step. The click-able box in one the right scrolls down the page and stays in the same place. They gave the red box rounded corners and positioned it vertically so it stands out really good. The red box makes navigating the page even easier.  I feel like if the box was any other color it really wouldn’t work because red is a color of compassion and they are showing how to do something that they seem to be passionate about. All of the text in the rectangles is easy to read. There is a big and bold title separated by a horizontal line then smaller text underneath the line explaining something. As you go from top to bottom you learn about what they do then how they do it and how to contact them. It is very simple and to the point when you read every thing. The website over all you can tell was thought out and put together very well.

Review – Single Page Website

Katie Withrow

The website, Viagon.com, is a very simple and clear website to understand. The site successfully uses color and texture. It also, is easy to navigate through the page and has good readability.

The texture on the site is almost unnoticeable; it appears to be extremely small granite. This works for the site, because if a texture was too noticeable, it may be difficult to read what is shown. Also, the texture works well with the topic of the site, which is, a digital agency to help those in business increase their business, lower their costs, and gain new customers. The texture gives a soft feel to the site, and yet the font is crisp and everything on the site has order. There is not much color on Viagon.com, but the colors used are appropriate. Besides the images on the site, the colors used include, white, an off red, different shades of black, and a shade of blue. The off red, and shade of blue, are used in the Viagon logo, and are used to highlight important topics and words on the site. The different shades of black are used as the background. At the top of the site, the picture of the Viagon office is very bright, but when you scroll down, the background is a light black, almost gray color. As you continue to scroll down, the shades of black become darker. This, I believe is used to separate the various sections of the page. The color white is the color used on most of the words on the site. The white lettering, stands out against the black backgrounds, and catches the users eye. All the colors used, I believe compliment each other and work well to enhance the website’s design.

The Viagon website provides two extremely easy ways to navigate through the page. The first way to navigate through the page is by scrolling down to the end of the page, than scrolling up to get back to the top of the page. This particular website is not very long; therefore, scrolling on this page does not take very long. The second way to navigate through this site is by clicking the tabs in the top right corner. Each tab will take the user to the corresponding section. The block with the tabs does not disappear when scrolling or clicking the tabs to go to another section. The tabs stay with the user, which is extremely helpful to go to a new section or back to the top of the page without having to scroll up or down. The “blog” tab on this page; however, navigates you away to a page that is not available due to “renovations.” In order to get back to the home page the user must click the blue hyperlink that is in a different language. Since this part of the site was in a different language, it was difficult to understand. Otherwise, the site is a great example of successful user navigation.

Some of the design elements that make the site easy to understand include, size, contrast, and balance. The size of the font is large enough to read without having to get real close to the computer. Also, when a larger font size is used, the user knows that is the topic of what the user is about to read. The smaller font indicates the description of a particular section. The contrast between the white font and black background works well with the site. The white stands out against the black and allows the user to easily see and read what is on the site. The layout of the entire site is very balanced. The text and smaller pictures throughout the Viagon site help balance the very large picture at the top of the site. Also, the pictures and text are aligned where both they complement each other and look proportional.

The Viagon site is an excellent example of layout in web design. The site is easy to navigate and understand. Although not many colors are used, the ones that are used stand out and help the site look presentable. The words and pictures are easy to read and see, and stand out against the black background. I believe the Viagon site is very successful in all aspects of design.

Single Page Review

http://www.alessandromodesti.com/

For the single page review, I chose to look at a website designed by Alessandro Modesti, which was featured on One Page Love. One of the first things that catch your attention is the design that you first see on the page which has a lot of nature influence as well as man made. The color scheme for the website is mainly blue and white, which also adds to the natural feeling of the layout. The texture of it is very simple and subtle so it’s not really overwhelming or too plain-like him using a very vibrant background full of texture versus him using just a plain blue, so I think he balanced that out very well. To navigate through the page, you scroll down with your mouse, nothing moves down with the page so it is not as interactive as some others might be. The website is easy to read and understand because even though it is only a one page layout, the sections that he divided it up as aren’t “crammed” together which makes it flow really nicely. There is also not a lot of text on the page and whatever text there is, is in a bigger font so it is more readable. I like how on the pictures on the page, when you highlight something they turn yellow which I think is a really cool and unique thing to do instead of it just being the usual hover and click and nothing happens. He also provided little button links that link to each different section-personally, I would have chosen to make the buttons have text to what they are linking to on that page instead of numbers, but that is just my preference.

Readymag.com review

by Milt Chatzimouratidis

 

The demo issue of Readymag.com uses plenty of color and sometimes texture, an original –but also very simple– navigation framework, and sophisticated animation techniques to deliver a visually stunning, result without excessive loading time.  The starting section is dominated by a stunning photograph of a stellar system and a Java animation of the words “hello web”. It uses a simple arrow to point to the second part that is strictly dedicated to demonstrating the navigation mechanism, has a textured blue background, and lacks bells and whistles. In the third section we encounter a light blue gradient background and an interesting circular animation that reveals the text. Even though this is probably one of the weakest parts visually, it is still quite efficient in capturing the user’s attention and displaying inventiveness and originality. The next step brings us to a demo about the use of audio-visual techniques and animations as aids for storytelling. Probably the most colorless step, having a light grey gradient in the background that does not steal focus from the stylish animated control button in the middle. The next part uses a Java space travel background that adds texture and dynamics to the specific section. The middle composition, captivating and stylish again, uses color, high contrast, and typeface simplicity to allude to the variety and usefulness of the tools provided. The next step is dedicated to illustrating some of them and is the first one with vertical scrolling. The layout is very tidy and color – or the lack of it – is used to emphasize and illustrate the above mentioned tools’ function. The following step has an interactive video background with CSS tag links to each one of the team members, again, no clutter, swift loading, and tidy layout.  The last step brings us contact information using a CSS color rotation class in the background and simple typefaces. The navigation throughout the whole webpage is based on the scrolling app at the bottom of the page and requires simply dragging and dropping a circle shape.

Overall a very clean and effective webpage that uses color and animation wisely and always remains focused on the message it attempts to convey. The authors promise a revolution in web publishing and looking at the finished product it certainly feels that way.

Monthly Review 2

The website http://photoshopetiquette.com/ is very interesting to look at.  The design is very simple and easy to navigate through.  The entire page just scrolls down and each section are in bold font, so it stands out against the subtitles.  Although the site is split into different sections as one scrolls down, there is unity throughout the page.  For example, the font is the same typeface throughout, but the sizes of the subheadings are smaller than the headings.  This shows visual hierarchy between the different sizes of font.  Furthermore, the colors are all the same tint.  The rule of thirds was used effectively in the website because all of the information is formatted in the middle, and there is equal negative space on either side.  Therefore, the site is very balanced.  Repetition is used a great amount throughout the page, as well.  For instance, there is a dotted line that is repeated throughout the entire site.  Also, there is emphasis on the heading for each section with the dotted line, which makes them look isolated.

Next, the colors of the Photoshop Etiquette page flow very well and go together effectively.  When the page is first open, the first section is very monochromatic, but as one scrolls down through the website, the colors begin to change into a triadic color scheme.  The first part of the page that is seen when the site is open is different blues and white.  The color blue makes the reader feel at ease, while as if the designer would have made the first page red, the user would have felt alarmed or cautioned.  Moreover, the white title on the first section of the page is the dominant color and shows power against the subtitle in light blue underneath it.  The background color changes from light to dark and back to light throughout the page, which is a subtle texture.  This effectively gives the site depth as the reader scrolls through it.  In addition, when the background switches color, the text changes color.  The changing colors helps make each section isolated from the others.

Not only are the colors helping make the page successful, the recognizable shapes before each section show the reader what they will be looking at next.  For example, the picture before the images section is a picture of the icon for pictures.  There are icons on the left side of each subsection to read the information for that section, along with a twitter button below to “re-tweet” that section for others to see.

As a whole, this website works and is visually appealing.  It has a large amount of information within it, and it is not busy.  The creator keeps the design simple and uses triadic and monochromatic colors to emphasize depth and separate each section.  The familiar shapes enhance the site and preview what information will be in the sections.  The typeface is easy to read, and the format of the site is well organized.  Overall, this website efficiently follows all of the design principles in an attractive way.

Bi-Weekly Review 1: Musician’s Friend

After reading chapter 1 of “Don’t Make Me Think”, I’ve come to recognize many of the features that major eCommerce sites utilize to streamline the online shopping process. My most recent experience with this came over the weekend, when I shopped online via the site Musiciansfriend.com.

I was searching for new bass strings, specifically from the brand DR. At first glance, the site’s home page was laid-out very cleanly. Across the top of the site is the main menu, where the user can decide which department of the site they wish to visit. These options include Shop, which also has a sub menu for what type of musical gear the user wishes to shop for; Deal Center, which is full of sale/bargain-priced items; and Used Gear, which is full of previously-owned gear. The top menu also has tabs for Videos, where users can watch video demos/reviews of various musical gear, and resources, where they can go to access shopping resources like buying guides and product reviews. Depending on what the user is looking for, this top menu is the start of the shopping process. Since I was looking for new bass strings, I looked under the shopping tab, and clicked on the sub-tab for “Bass”. From there, I was taken to a strictly bass page, where various categories were listed along the left side. Upon my first glance at the page, everything looked to be catered towards buying full-on bass guitars, not just the strings. After a bit of inspection on the page, I determined that I wouldn’t be finding a link to bass strings anywhere. I thought for a bit, then decided to instead look under the “Accessories” sub-tab of the main menu, since I guess strings could be considered an accessory. When I dragged the mouse over the tab, a drop-down menu appeared. Among the options in this menu, I saw “Strings”. This feature allowed me to go straight to the string section, without having to search through the accessories page. Once there, I found “Bass Guitar Strings” among the categories listed along the left side, and clicked on it. I was taken to yet another similar page, with categories along the side, and where I could narrow my product search by brand, price range, and customer rating. Knowing that I was looking for DR brand strings, I chose that option along the side and watched as the products listed dwindled down to only those made by DR. I found the specific set I wanted, clicked on the corresponding thumbnail image, and was taken to a page with the price, product descriptions, links to user reviews, and a boldly-colored red and white button that read “Add To Cart”. I clicked the button, and was taken to a page showing me the items in my cart. The page also gave me the options to “Edit Cart” or “Proceed To Checkout”. I was done shopping, so I clicked the latter option.

I won’t bore you with any more play-by-play of my use of this website (I’m quite confident that you know what goes into the checkout process, etc.). What I will do, however, is dish out my criticisms of the site. The site as a whole is a mixed bag. The front page of the site, although fairly clean and easy to navigate, is often dominated by images of current deals and specials. Call me biased, but bass-related items hardly ever make it to this section, so that entire demographic of users can feel alienated by this practice (“We’re not cool enough to see what we want on the front page, so we have to dig for it…”). Which brings me to the actual search process: it’s too complicated for the average person to use with confidence. I’ve been playing bass for almost a decade, and this wasn’t my first time ordering strings online. The natural, “not-thinking” process for me was to search for what I wanted on the page related to its instrument, and I was stumped for a moment when I was unable to find it there. If I was stumped, then someone with no experience shopping for that item likely would’ve been clueless and may have gone to another site to continue looking. This aspect of the site’s organization and search process was sub-par, but directly searching for a product with the search bar on the site’s homepage seems to work far better. Simply searching for “DR bass strings” brings the user to the page that took me nearly 2 minutes to locate.

On the whole, the site doesn’t do a great job of catering to shoppers. Somebody with a dead-set idea of what they want could make great use of the site, but someone without such concrete information such as a brand name (somebody shopping for a gift, for example) could search page after page before finding something of interest. This was my first time ordering online through this site, and the amount of time it took me to find something as simple as bass strings means it’ll be my last time as well.

Bi-weekly review 1: Zappos

I chose Zappos for my bi-weekly review. Zappos is mainly a clothing site but they also sell shoes bags accessories beuty supplies  glasses and outdoor supplies. But they leave jewelry and sporting goods off their main navigation bar for appearance. They are listed in a drop-down menu when you click the last button on the main nav-bar.

The color scheme of off-white with blue text and search bars is pleasing. They also give the option to alphabetically search by brand name which seems pretty original. The layout is simple. There are a few big important buttons that offer sales, different categories at the top and category by gender on the left. Just at the botton third of the screen they have reccommendations from your personal history. I looked for hockey hats and they guessed I was a man and gave me 6 choices besides what I wanted and there are orange “sale” tags that hang near the items if there’s a sale.

In the top right corner they show FREE shipping and their vague 1 year return policy which if you click on offers some fine print and a handy little youtube video to show you how to return items if you’re unable to read.

The more important buttons; sale, shopping cart, and search, are all a big bright orange and you can’t miss them. I dislike that the search font is italic because it seems like I am just writing the title of books like “Quebec Nordiques Hat” which I would read.

Once you find the item you need, the page has a picture of it modeled by a mannequein and dominates the page. The font color of important buttons like “add to cart” is changed from the can’t miss orange to a subdued green. I guess they think they already have you hooked and they dont need to shout anymore. To the left of the item are interesting options for item information, similar items, and also a page of info about the brand. customer reviews are very prominent below along with a column at the bottom right for recommended items.

After you select add to cart you’re directed to a page that shows your entire cart, more reccommended items and the important buttons return to the bright orange color. You’re given the option to change the quantity of your items and also to remove or add them to your favorites. The price is shown in large font.

Overall I like the layout of Zappos more than many of the other shopping sites. It’s minimalist with only few colors. The option to search by brand with a few recommended items prominently displayed makes it easy to navigate and is never jarring to look at.

Bi-Weekly Review – Newegg

Evan Phillips

Newegg.com

Being a student who is aspiring to be in the Graphic Design field, technology is a major importance. Staying up to date with upcoming programs and gadgets is a necessity. Newegg is a site that has the best of both those worlds. They are a technically savvy website with all kinds of the latest gizmos you could want.

Upon entering the site you will notice the basics. The search bar is located neatly at the top and center of the page, making it easy at first glance to be able to search right away what it is you’re looking for. The design of the site is set up in three major vertical paths. The first path down the left most side of the site is where you’ll find all the major categories the site has to offer. For example computer hardware, PC’s & Laptop’s and Electronics are the first three categories in this list to name a few. The second and third vertical paths is where you’ll find all the sites deals, along with the top rated and top viewed items recently added to the site now on sale.

The product I decided I would be purchasing would be a new TV. From the home page I went over to my first vertical column and dragged the mouse over Electronics. This in turn extended a box from the word Electronics, which neatly had all the different assortment of Electronics I might want to purchase. Televisions was the first option so I clicked it which took me to a similar page such as the home page, but this time along the left side were different types of TV’s I might want to purchase. I clicked on the LED TV button which took me to the page for all the LED TV’s the site had to offer. After rifling through a barrage of sizes, resolution choices and price along the left side of the page I came across the TV for me.

Adding the TV to my shopping cart was as simple as clicking a big bright orange button that said “Add To Cart”. The screen following this was a suggestive one of things I might need for my TV. Such as a wall mount, power cord or even a satellite antenna just in case I planned to take my TV onto an RV. I found this very help because if I hadn’t seen those items I probably wouldn’t have thought twice about them. Also on this same page was an extended warranty you could purchase for one to four years of the TV’s life that covered anything happening to it. This was another thing that otherwise would have just passed over my head without any thought.

Directly underneath the warranty section is “View Shopping Cart” button, clicking it takes you to your shopping cart for checkout. On the checkout page they go as far to provide you with a shipping cost calculator. I found this extremely helpful because clearly not everyone is from the same place on earth, so someone who lives closer to Newegg’s shipping head-quarters is clearly going to pay less then someone who lives maybe half way around the world. Past this you are either required to pay through “PayPal” or create an account through Newegg’s site. This was by far the worst thing the site did. Who wants to go through a whole checkout process then have to create an account? Not me. Although once you have done so you are clearly to put your payment method in and you’ll see your item in the shipping parameters you have chosen.

Newegg being a strictly Electronics based website was in my opinion not bad to navigate through. It wasn’t like going on Amazon and buying a book that for sure, but I would rather them be stricter and have more steps so you know exactly what you’re paying for. Now having said that I do feel the site could bring the steps down though a lot more. They could compact more specifics into drop boxes therefore not having so much visual clutter for the mind to wonder around the page so much. All and all the page is visual pleasing with subtle color pages on more important features, which in turn leads your mind where it needs to go before you think about it.

Bi-Weekly Review, American Eagle

This assignment to review the navigation of an online store comes at the perfect time because not only do I need pants, but it’s also Labor Day weekend, which means sales. I’ve chosen to shop American Eagle’s website.

Upon entering the site one can find options between their store and their affiliates (American Eagle Outfitters, Aerie, 77Kids, AEO Factory) at the top of the page. Below that are tabs for Men, Women, Clearance, etc. At the base of the page are your standard customer service options including shipping, returns, orders, credit cards and policies. And although I came to this site with the express purpose of purchasing pants, I am distracted by the big clickable “30% off + free shipping” in the center of page and begin exploring my options.

After digressing for a fair twenty minutes I return to the home page, click “Women,” choose “Jeans” from the easy to read side bar and am directed to an interactive catalogue of different styles. Rolling over each style with my cursor I can  scroll through all of the available fits without clicking through a thousand pages. This makes the shopping experience must easier and faster. After adding a pair to my cart the item appears at a bar at the bottom of the page so I can conveniently monitor anything I add to my cart.

Having shopped there before I knew American Eagle’s site would be easy to navigate. All the images and keywords are linked and clickable. The fonts are bold and readable, and the color palette is simplistic and clean.

In all, the American Eagle shopping experience is convenient, fun, and (this weekend) affordable.

 

Justin Yaras: Bi-Weekly Review – American Apparel

I actually recently just bought a few things from American Apparel a few weeks ago and thought it was actually fairly simple to purchase things.

The first thing that you have to do when you go to their website is to pick your country, simple enough. Then there are a number of categories that you can pick from like, Men, Women, Kids & Babies, etc. Then within those categories there are the time of garments like T-Shirts, Sweatshirts, Pants etc.

Now it’s time to pick the items you want. Just click on the item you want, color, size and then add to cart. Then go through the motions of buying whatever you want to buy.

I think they have an amazing website to buy stuff from because it’s fairly simple to use and it’s very straight forward. I also like the fact that they have a “Locate Item at a Nearby Store” where you just simply put in your zip code and it will tell you if they have that specific item at a store close to you so you can go to the store to pick it up rather than spending the extra money on shipping and tax. I wish more places had a feature like this. It might make things a lot easier and cheaper for consumers.

However I wish that that in their cart screen that they had a more visible remove button but that can easily be overlooked buy the fact that it’s so simple to purchase things from there.

Bi-weekly review: Netflix.com

It’s been a while now since I started using Netflix. Being a big fan of cinematography, I became interested in creating an account almost as I first moved to the US.  After my first visit, I have to admit, I was fairly disappointed, mainly by the structure and layout  of the whole site. It seemed chaotic and cluttered beyond belief. It certainly took some time to digest the flood of information of the first page.

As a new user, the first thing that came in mind was that I would have preferred a simple and clear interface with few, basic genres, that possibly expand to sub-genres. I’ve always found this fisrt page storm of information discouraging and confusing. At first, the search tool, which is fairly basic but efficient, became my best friend.
Much later I realized that there was a mouse over feature on the main headings — that way  I could get menus with the basic genres — and also, that I could get rid of this flood of thumbnails and improvised genres and obtain a sortable list of titles.  So, a step forward but still limited as far as customizability and ease of use.
The next feature I discovered was their personal rating system. Even after having used the website for more than two years and having rated a fair amount of titles, the rating system rarely works for me. The suggestions are usually irrelevant and based on superficial (or subjective) criteria, which automatically makes the personal ratings sytem fairly useless. On the other hand, the reviews section is useful and even though the users’ ratings are not always indicative of the quality of a title, after reading a number of reviews, normally one can form an opinion.
Overall, Netflix.com can be considered a below the average website considering the amount of “thinking” that is required for using it, especially as a new customer. Maybe it’s time to give the competition a chance.

 

 

Overstock.com by Latiyfa Whitehead

For the purpose of this review I decided to search for the Star Wars Trilogy at Overstock.com. I chose this particular website because I was unfamiliar with it and I believed it would give me a fresher, less biased perspective.

The website itself was very clean with crisp designs and boxes at the top that helped you navigate the website.  One quibble I had was that the navigation boxes were a beige color which were not as noticeable as other sections which were red or blue. For example, the search bar had a bright red button that grabbed your attention, which the designers could have used for the other navigation buttons.

Speaking of the search button, I found it convenient and easy, which made up for the navigation buttons. It didn’t force you to specify where you wanted to go like some websites do. You could type in what you wanted and it would find the items that were the closest to your search. Instead it gave you options to specify your search after you searched for your item. I assume that this is just in case you can’t find it right away. I searched for the Star Wars Trilogy and found it in seconds.

Purchasing a product was made easy by the shopping cart symbol at the top right hand corner of the page, and by the fact that you don’t need an account to purchase something. Some websites force you to create an account, which means that if you want to buy something once you have go through the tedium of signing your name, entering your personal information and making a password.  So all in all, it was an impressive website.

Older entries »