Author: ShelbyMengel

I chose to compare my final website Doblé Dragon with the website for the restaurant: Ellen’s Stardust which is located in New York City.  I chose to compare these websites because they both are restaurants that focus on the experience of being there.  Doblé Dragon is geared towards an alternative younger group of people.  It has quite a dark theme and could be considered “goth” in its style.  Ellen’s Stardust is a family restaurant that is popular for the performances the staff do because they are all people working while trying to find a job on Broadway.

Beginning with Ellen’s Stardust, the homepage is set up in a very simple manner, the nav bar is located on the left side of the screen and there are several photos covering the home page.  The photos depict the different activities that occur at the restaurant.  It is somewhat confusing because little blurbs of information pop up when the cursor moves over the image making you think it’s clickable.  The nav bar is set up in an easy manner.  The different links to the pages are clear leaving zero hesitation when clicking on a page.  The gallery page doesn’t link to anything so I don’t know if there is something wrong with the website at the moment but that’s the only page not working.  Everything else is set up in a clean manner.  When moving through the pages, there is a good mixture of images and type.  There isn’t a lot of type making it very easy to take in the information.  Images are used a lot to help assist the reader take in information.   Their use of type stays consistent throughout the website except for the menu.  But every other page uses the same font and font size to differentiate between headings and blocks of information.  Every page has the navigation bar on the left which contains links to all of the pages of the website while also including the logo and links to their social media pages.  The website is predominately white, allowing the images to bring color to the website.  This website overall is created in a clean manner that makes it very easy to use.

Comparing Doblé Dragon’s website, the homepage is also created in a very simple manner.  The only items contained are the logo, hours, nav bar, and location with google maps.  The nav bar is set up in three different pages with a sub navigation on the menu page.  When reading the nav bar, the page titled “our people” could possibly be slightly confusing because it doesn’t have a clearly named title.  The style overall is very consistent with limited images and spaced out type.  We kept the information light on the website as to not overwhelm the user.  When clicking the menu, there is a sub navigation menu that breaks up the menu into the different types of food or drinks.  This was done to make it very easy for people to find what they are looking for.  Both of these websites have very simple designs with few different pages.  They both have limited text use to make it easier to read as well.

While both restaurants focus on the experience that will happen when you visit it, Doblé Dragon focuses more on the people who work at the restaurant.  In addition, the Doblé Dragon website has a strong style to it that matches what the atmosphere would feel like when at the restaurant.  Ellen’s Stardust says that it has a retro style within the restaurant itself but has very little to represent that in the website.  I believe that is a major draw back because if the viewer isn’t captured by the appearance of the website they might not be interested enough to read about it.  So not giving a feeling of your restaurant in the appearance of the website can make people click away if they feel they don’t have the time to find out if it would be a restaurant that interests them.

I chose to compare the websites created for No. 9 Park and Six Penn Kitchen.  They will be compared on their layout, balance, unity, and click ability.  When looking at the homepages for both websites, Six Penn Kitchen is much easier to read and understand.  No. 9 Park is very text heavy on its homepage and a couple other pages making it slightly overwhelming to search for information.  In addition to the text heavy pages, the lack of emphasis between different parts of the page make it extremely confusing on what the viewer should read next.

Six Penn Kitchen was laid out in a very clean manner, allowing the user to reach their destination in no more than three clicks.  Each page listed in the global navigation bar is very clear and understandable.  The user to sure to find the information they are looking for when using this site.  Emphasis is used very successfully within this site, especially in the menu.  They focused on ensuring their menu was easy to understand.  They have clear color distinctions that create a hierarchy of information.  The most important information, or the headers are a bright green that stand out boldly from the background.  Next in order falls the subheadings, often the name of the food, in white that also stands out from the background and from the green headings.  Last, Six Penn Kitchen made their descriptions of the foods a light tint of grey allowing it be read but not overwhelm the user with information.  Their layout throughout the website is centered which could be varied up occasionally to create more visual excitement but it makes it very easy to use because the user knows what to expect.  The global navigation located at the top of the screen assures the user that they can easily return to the home screen or visit another major topic of the site without having to search randomly around the site.  As Steve Krug explains, “Web navigation compensates for this missing sense of place by embodying the site’s hierarchy, creating a sense of ‘there.’”  The navigation is the basis of this website, making it extremely easy to use.

No.9 Park is less understandable.  Steve Krug talks about killing happy talk in websites because it takes up space.  He explains, “Unlike good promotional copy, it conveys no useful information, and it focuses on saying how great we are, as opposed to explaining what makes us great.”  No.9 Park uses happy talk right on their homepage, making it feel very crowded.  They attempted to get the user’s attention with the small paragraph of happy talk along with moving images of the food, and different drinks they specialize in.  But it all feels very overwhelming for a homepage.  They attempted to create a hierarchy by changing the color of text but they needed to incorporate that more into the page itself instead of only using it in the navigation bar.  The number of clicks needed to achieve finding information varies.  It is somewhat confusing arriving at the full menu and some of the pages were given vague titles, leaving the user unsure of what they are about to look at.  On all the pages, there is a lot of information; but not a lot of useful information.  Especially in the process of trying to find the menu, the user has to sift through paragraphs of information because the sub-navigation links to the menu don’t stand out.  Every page is laid out the same, with the global navigation bar on the left and all of the information justified to the right.  The most confusing part is the location of the sub-navigation bar as it seems to disappear in the pages.

Six Penn Kitchen is much better at catching one’s attention than No. 9 Park.  The simple layout and sparse use of text make it extremely easy on the eye.  The navigation is much simpler than the navigation used in No. 9 Park.  It simply takes a lot less thinking to use the Six Penn Kitchen website than the No. 9 Park website.

For the one page website review I chose www.jordancole.com which was on www.onepagelove.com.  This was a portfolio created by freelance artist Jordan Cole.  Upon entering the site, you simply see an image of a magazine page flipping.  It is assumed that this is some of his work.  Right at the first page there is the main image, a drop down menu on the side, arrows pointing in all four directions of the screen, and Jordan Cole’s name on the top and bottom of the screen.  You can only physically scroll up and down even though there are arrows pointing in all four directions.  You can’t scroll right to left.  You must click on the arrows with your mouse to move the screen horizontally.  By moving the screen, it moves to more of his work that has been shown in magazines.  As you move down the website it breaks into a different color with a different main image.  I am assuming that it is organized by each different project he created.  So when you scroll to a new ‘page’ it is a different project that he created.  If there are arrows pointing to the left and right, then there are more images of the project either on a different media device or different point of view.  Throughout the website his name is placed at the top and bottom of each page continuously reminding you who created the work while being a page break as the colors change between pages.

Overall the design of the website is minimal.  There is simply a colored background with the image of the project in front of it.  Everything has a clean and simple look because his designs themselves often have the texture in them.  Most of his designs tie in nature in some manner giving them texture.  This texture contrasts with the clean technology and colored backgrounds.  The only details other than the images themselves are the occasional use of shadows with the images.  As explained in The Principles of Beautiful Web Design, “Light and shadow establish visual contrast, and help to create the illusion of three-dimensional depth with two-dimensional media, such as pencil on paper or pixels on your computer screen.”  For example, he uses shadows to create the idea that these mediums in which his projects are on are sitting on a table or are located in front of a background.  Allowing these subtle shadows into his images makes them more realistic to the viewer.  He’s used it to show the width of magazine as well as the size of a computer against a table.  Using these shadows also helps show the different sizes he designs for specifically in media.  Showing the different forms of technology that art can be displayed on (phones, laptops, tablets, desktops) the shadows help create a more realistic and visual size difference.

The colors that Jordan Cole used within his website were a mix of warm and cool colors.  He used colors to spark creativity and action which follow with his constant outdoors theme.  He took into account the colors within his designs and the color he chose for the background.  For example, If the image of his work had primarily cool colors within it, he would use a warm colored background to create contrast.  The different colors helped to break up the webpage into smaller pages to represent the idea of looking at a new project.  Also, the colors had a very similar tone allowing the transition between them easy for the eye.

Overall the site is well made.  The navigation might take a second to think about it but after the user realizes they have to click on the arrows to move screens it is extremely easy to use.  The different forms of navigation located on the webpage are very large making them easy to find.  The organization can be a little confusing because I feel the user would someone question why Jordan Cole laid out the webpage the way he did.  I still am not entirely sure if each individual panel is a new project or if they connect in some manner.  So that could be more clear so the user understands what was a complete project.  I believe that using his name as a page break was very smart as it continues to remind the user of the artist while easily covering the transition from one block color to another.  He uses contrast intelligently throughout the webpage, especially on the about me and contact pages because he loses all color except his personal photo and everything is black and white.  Contrast is definitely the element he relied on heavily for his entire webpage and I think it was used well.  Overall the website is eye-catching and easy to follow along.

I chose to review Target for their usability when checking out an item.  When opening the Target website, there is a clean layout using largely photos with minimal type to describe the products they are advertising.  The home screen displays the current sale along with new merchandise that just came to the store.  They break up the site easily, giving the user options such as: “categories, deals, search, my account, and cart.”  Since these are most likely the most used functions on an ecommerce website, it prevents the user from having to think much about what they are doing.  I chose to search for a “Sony a5000” camera simply using the search bar and easily clicked on the item to read about it. I then easily clicked the “add to cart” button as it was the only large red button on the screen, drawing the user’s attention to it.  When clicking “add to cart,” a menu popped up, notifying the user there was an item added to the cart along with other suggested purchases that are similar to the item placed within the cart.  The whole process, without having to think took roughly three minutes.  Even when I go back and simply search “Sony,” allowing a larger amount of items to come up as results, it is extremely simple to scroll through the page and find the item I am looking for.  This is due to the fact that they have a very simple website and the only details that draw your attention is the photo of the item and the large red “add to cart” button because they are both displayed on an empty white background.  Target leaves multiple options for drop down menus in order to specify the search but they don’t overwhelm the user because of the slim type used as well as their small size on the side of the screen.  They also give the option to collapse the drop down menus in order to make them more compact creating less distractions.  Within the shopping cart itself, they continue with the theme of using large red buttons to guide the user’s next action.  In this instance the button states, “I’m ready to check out.”  Their constant use of red and white, with black for type, stays consistent with their logo as well as makes it simple to find items the user wants on the Target website.