Category: ARTM2210 Intro to Web

I have chosen the restaurant Eleven’s website (Elevenck.com). Their layout is simple, clean and uncluttered. I only have two complaints: The navigation bar gets a little weird when the window is resized, and the layout for the photo gallery is inconvenient which I will get into more detail later. Navigation overall is easy for the user; very clear and self explanatory. The color of the site is easy on the eyes; the minimal, neutral color scheme includes compatible colors. As Chapter 2 in The Principles of Beautiful Web Design describes the color orange is used to psychologically induce an energetic feeling in the onlooker, I feel it is definitely doing the job here. It is light and fun, even tho darker tones are used. Texture is seen at the top and the bottom of every page of the website. It’s just the right amount and the texture is not too busy.

Being honest I’m a bit concerned about how my website will stand out. I definitely encountered some difficulties with JQuery effects on images. However, I feel the overall design is similar. There is a minimal color scheme with compatible colors, good quality photos of food and of other featured artwork. The navigational bars seem to be the same, so I feel better in not missing anything imperative. 

In particular, my restaurant page encourages interaction outside of the website; on social media. The photo gallery on Eleven.com has a nice large slide show, but then has extremely large images in one single row continuing down the page. Personally, I do not find this attractive. Other than that detail, I feel the actual concept of the Pittsburgh themes restaurant is what will put it apart from an upscale place like Eleven.

Competitor’s site: https://rmu.andrewyames.com/artm2210-intro-to-web-design/artm2210-intro-to-web-design-assignments/artm2210-review-4/

            I researched the website for the “Church Brew Works” which is a popular restaurant in Lawrenceville. The Church Brew Works is somewhat of a fusion restaurant as it combines the architecture of a church from the 1800’s with the dinner choices of many different cultures as well as a variety of alcoholic beverages. The website appears to utilize “hierarchical architecture” as you are greeted with a series of tabs on the left side of the screen. “Brews and Menus” are listed first as they are the most likely to be what users are looking for. Clicking the “brews” button will open a window asking the user if they are 21 or older which is always hilarious to see. Unlike the “brews” section, the “menu” button opens a pdf of the restaurant’s current menu rather than a list of choices. The site uses a very attractive combination of blue and yellow as well as some stained glass artwork. A series of still photos featuring the establishment’s interior and exterior alternate while you browse the homepage. One flaw of having the clean and colorful composition of the site is that some of the still photos look very blurry and out of focus when positioned next to the crisp and clean artwork.

            I would say that The Church Brew Works website is very similar to my groups website in several ways. Both of the sites have links to social media and are divided by tags such as “Menu, beverages, history, etc. While our site has the user navigate using buttons at the top of the webpage, the church brew works navigation occurs with buttons placed on the left of the screen. Our site also tries to convey a stronger sense of class or “expensive taste”. While the church brew works is NOT cheap, their website implies a stronger sense of culture and family rather than elegance and prestige. While the sites are visibly different upon first inspection, they are very similar in regards to layout.

The two websites that I chose to compare are the Six Penn Kitchen website and the No. 9 Park website. The website for the Six Penn Kitchen seems to be balanced better than the website for No. 9 Park. Everything is evenly balanced in a defined area, centered on the page. No. 9 Park’s website does not seem as balanced as Six Penn Kitchen because you cannot get a feel of the whole website. The overall look is organized, with pictures dividing the page, but you do not get a sense of symmetry from scrolling through. 

I think the Six Penn Kitchen site has a better sense of unity than the No. 9 Park site. Six Penn Kitchen’s site is aesthetically pleasing with the colors playing off each other nicely. The color of the text coordinates with the pictures that they chose to use, which makes the overall look nice. No. 9 Park has a nice sense of unity by carrying the same look throughout the site. 

The main emphasis on Six Penn Kitchen’s site is where it says “After 12 great years, we will be closing our doors on February 17.” This part draws the most attention because it is at the top of the page with the message in a bold font. The areas on No. 9 Park’s site that has the most emphasis is the areas where it has pictures filling up the page. Each picture has a header summarizing the information below it. 

The layout of Six Penn Kitchen is very simple, but looks good as a whole. This contrasts the No. 9 Park layout due to it being a fancier layout. The layout is more spread out and interactive, but also simple and easy to use. 

Both websites use Krug’s first important thing by being easy to use without getting frustrated. They are also both self-evident, don’t make you think, and helps you find information in a timely manner. The only difference between the two is that you do not have a back button on the Six Penn Kitchen site since the rest of the site is not accessible, but the back button works on the No. 9 Park site. 

The Six Penn Kitchen is more effective than the other one at drawing my attention because everything is in one area, it’s clean and simple, and the colors grabbed my attention. 

Since Bravo Franco and Six Penn Kitchen no longer exist, I took the last option provided: No. 9 Park, and Burgatory. Both sites have the information centered in the window. Text and images are also separated with space between the two. The sites also have a balance of color, with complementing colors and a consistent theme. Keeping the same theme throughout all the pages keep the sense of unity. Both websites do not crowd their pages. This layout makes the websites easy for the viewer to navigate. Things are clear and so are the link to navigate to other pages. 

Both website’s headings are designed well and follow what is described on page 50 of Krug’s book: Enough space is allowed between them and the heading is closer to the content it is about rather than the content above. Theres is a definite hierarchy, letting the reader know what is most important to look at. They also don’t have too much text, overwhelming the viewers. As previously stated, there is a good balance between images and text.

Burgatory definitely grabs my attention more than No. 9 Park. I believe it is mostly because of the color contrast. It is meant to pop and catch attention. No. 9 Park looks good, but is more subdued with the colors. This restaurant is more upscale than Burgatory, therefore it makes sense the feel of the website should mirror the vibe of the venue.

I observed the websites of “Six Penn Kitchen” and “No. 9 Park” for the purpose of this review. While both of these websites serve as homepages for restaurants, they could not be more different in my opinion.  First I shall review the layout of both the sites as well as recall my experience navigating them. “No.9 Park” has a much more professional look to their website.  Due to the nature of their food choices (more expensive than average meals) they have opted for a more developed site to give a classier feel. It uses a neutral light grey background to enable the viewer to observe the site with little eye strain. It also uses a scrolling parallax effect which appears to be common for restaurants attempting to appear luxurious.  I think the organization is great and is a great example of Krug’s “scene from a mall” example from the text. As soon as you open this website you are greeted with the beginning of their menu. This eliminates any useless searching to find what most users are observing the site for in the first place. 

            Six Penn Kitchen however, couldn’t be anymore different than No.9 Park’s website. When I opened the website for Six Penn Kitchen I thought I had made a mistake as It didn’t appear to be a finished or completely developed website. The first thing I naturally did was find somewhere to click as the site’s only visible information is a sentence announcing the establishment’s closing date. It appears that all of the “clickable” areas do not have any effect on the webpage. In the bottom there are squares of different colors that may at one time housed the different food offerings at the restaurant. Krug stated in the text that in his opinion whenever you visit a website you are first likely to be looking for something which will lead you to “ask” or “browse” first. Upon realizing that this first homepage gave me little to no information about this restaurant, I did in fact look for anywhere on the page that I could find information. The only thing that can be learned from this webpage is that they are closing on February 17^th, and that they serve steak and one other dish judging from the only visible pictures of food. 

Since the introduction of technology into the everyday lives of the average person, information has been even easier to spread and find. It is more important now than ever before to have social media or a website, especially as a business. Consumers are online round-the-clock and can find out about your company in a single click. While websites used to contain only text, nowadays there are endless possibilities for layouts and design. As examples, I explored the websites of two local restaurants, Burgatory and No. 9 Park, to see how they compare. 

Burgatory is a popular local food chain that is known for its “helluva burgers” and “heavenly shakes.” They pride themselves on their all-natural ingredients and huge portions. Burgatory has multiple locations in the Pittsburgh area, including the PPG Paints Arena, Heinz Field, and Cranberry Township. Burgatory was established in 2011, and their website reflects the modern feel.

When you first land on the Burgatory homepage, you are met with a simple and intuitive design. At the very top of the page, the red ‘B” that is their logo sits centered on a very dark brown navigation bar. Under the logo, there are links to the menu, locations, merchandise, and careers. Below this, there is a slideshow of colorful photos that convey the customers, food, and employees of the company in a positive, tasteful light. When looking at the site’s homepage, it is easy to see where you need to go. The items on the navigation bar attracted my attention mainly because of its light gray color against the dark title bar but also because it is centered at the top of the page, and the slideshow is large, not leaving too much else to look at.

Burgatory’s website uses many design principles, such as balance, unity, emphasis, and layout. The layout and color choices across design elements on the page give it a sense of unity. The webpage seems laid back and relaxed with the choice of typography and wording. There is also a good contrast in the dark navigation bar and the stark white-gray color of the background and text. It is clear as to what words are hyperlinks because they are either underlined or change color when you glide your cursor over them. 

Overall, the usability of this website is easy for users with minimal experience with websites or the internet. Everything you could possibly want to look for is connected to a link in the navigation bar. At no point did I dwell on or think “Where should I begin”. I just instinctively knew where to click next. Its minimal color scheme and layout make the experience easy on the eye and mind.

No. 9 Park is an upscale restaurant that serves French and Italian entrees and European wines. While this restaurant only has one location, it is in an elegant townhouse in Boston’s historic Beacon Hill. The restaurant prides itself on its intilmate setting and refined cuisine. 

No. 9 Park’s website is in many ways similar to Burgatory’s. The site also features a dark brown navigation bar with a large photo beneath it. The navigation bar features similar elements, with the logo in the top left corner, and the menu and other links listed beside it. The text for both the logo and the hyperlinks appear to be light cream or white in color. The picture features the storefront location in Boston’s Beacon Hill. Like Burgatory, the site is easy to navigate because of its simple design. 

No. 9 Park’s website also utilizes design principles, such as balance, unity, emphasis, and layout. The layout and color choices across all of the internal pages and links have a sense of unity. Emphasis is put on the fine dining options with professional photos spread throughout the site of their divine courses. They also allow the user to navigate the website through distinctive buttons on the right side of the page. This leads to a more direct navigation of the site, landing the user on the proper panel, overall enhancing the user experience. 

In Steve Krug’s book Don’t Make Me Think, he addresses five things that are necessary for a user to enjoy and understand the look and content of a site. These things are:

1. Creating a clear visual hierarchy

2. Taking advantage of naming and graphic conventions

3. Breaking pages into sections

4. Making links look clickable

5. Minimizing noise

Both of these websites do a very good job at addressing these needs. In regards to heirarchy, Burgatory definitely takes the crown. Its use of bold typography and graphics is very different from the delicate and light design of No. 9 Park’s. I believe they also do a great job in dividing the page into clear sections. Burgatory mainly does this through dashed lines and bold lettering, whereas No. 9 Park uses photographs as dividers. Both websites use underlining to define what is a hyperlink throughout the body of their sites, but must not feel it neccessary in the navigation bar. It works well in their favor and leaves behind a clean and simple design.

Overall, both Burgatory’s and No. 9 Park’s websites look very professional but are very different in terms of the overall style. Burgatory’s style is more casual and bold, and No. 9 Park’s leans toward a more polished and simple aesthetic. Personally, I am more drawn to the unique style and typography that Burgatory utilizes. Regardless of whichever restaurant website you choose, you are sure to enjoy your experience.

References

Burgatory. (n.d.). Retrieved July 22, 2019, from https://burgatorybar.com/

No. 9 Park. (n.d.). Retrieved July 22, 2019, from http://www.no9park.com/#intro

While reading the book and comparing between the No. 9 Park and HugeDomains.com there is a huge difference in catching people attention the HugeDomains.com uses loud colors and attention grabbers like words in all capitals. There is so much going on it makes you confused of what to click and what is the right place for it like the book mentioned it’s easier for the consumer if they knew where to click and navigate through the store or website. On the other hand the No. 9 Park uses mostly pictures of the restaurant and uses simple navigation. The menu bar create unity and feeling like everything is holding together. The pictures create balance as you are scrolling and your eyes know where they should be looking because of it. HugeDomains.com is the opposite, everything on the page has an equal weight and is competing for attention. the No. 9 Park has a simplicity that for me personally draws my attention. I’m not anxious like i am looking at the other site. Everything is organized in a way that makes sense and i took my time and knew where to go. HugeDomains.com it forces you to click things for example BUY NOW! or Start Payment Plan. They are using this as a confusion tactic to make me click something now knowing what it is.

Link: https://compass.works/

            I found “Compass” while browsing many sites featured on onepagelove.com. Compass is a service that helps users improve their own webpages. When a user submits their webpage to Compass, they will then receive a short and concise video from one of the staff members. This video will attempt to tell the user what they believe works well, or does not work so well with their current website. I think this formula is very user-friendly. The one-page layout allows the viewer to easily comprehend what this webpage’s purpose is and also how to use it. The webpage uses black and yellow text as well as graphics that do not seem distracting or hard to read. The webpage has the viewer scroll down to learn more about Compass’s features and background information. When viewers first visit the site they are greeted with a short video of the founder “Stephen” explaining what exactly the webpage’s purpose is. The longer you scroll down the more information you will find. This includes how the reviews work, why they are helpful, and eventually pricing and purchasing options.

            I think this webpage is designed very well. I have never heard of paying a company to review your product only so you can improve. Within seconds I was able to understand what this webpage was for and how to operate it. It conveniently places all the answers to commonly asked questions at the top of the webpage and places the more intricate information towards the bottom. It uses a series of simple to comprehend notes that contain small graphics. This site is a great example of how a one-page site can serve as a clear and concise method of delivering information.

https://milkshake.app/

The front page of the website is a dynamic webpage where the colors are constantly changing. Most of the front-page colors are active colors such as red, orange, and yellow. These colors give an energy to the website and motivate users to explore the content. The heading title (milkshake) is presented in a smooth font with a reverse text color based on each background color. However, the dynamic front page has also some dark colors which I think is a drawback in this web design because the color change from bright to dark does not provide constant mood to users. To navigate through the website, users can scroll down to browse the content of the website or a user can click on a side menu from the corner to choose what content to browse. In addition, this website design is implementing changing color schemes to provide richness and character to the content.

The second page of the website is showing some design samples that the website has to offer. These samples are automatically changing every three seconds. However, the motion of these samples is annoying because they move fast. The samples are represented in a geometric shape with smooth rounded edges. The third page of the website has a light-yellow background with a red title text and a dark navy subheading. This page allows users to interact with the content where a user can click on a right or a left arrow to browse the sample designs. The last two pages are also using light color backgrounds which match the scheme of other pages.

In general, I like the simplicity of this design. It is easy to browse this website because it has less texting which makes it easier to scan. I also like the rounded buttons that change colors when hovering the mouse over them. The only drawback I think is the use of dark background in the front interactive page. I would suggest using only light and active color to maintain consistency.

The website that I chose from onepagelove.com is called Vespillo-lefilm.com. The sites title page starts out as very dark and mysterious. The background is a gradient black with silver lettering to make the lettering stand out. Also, there is a wooden coffin in the center of the page to make it stand out. The site in the very beginning is attention grabbing and mysterious. The mystery of the color and the smoky texture on the page makes you want to scroll. The scroll pattern seems to be floating, making it easy to scroll through. The scrolling is mostly up and down, except for a few panels. Some of the panels do scroll sideways, but they do flow really well. 

            The flow of the page is one of my favorite parts of the website. One-page websites can be stale when one scrolls up and down, but this site has both to make it interesting. There are some sketches in the website as well, and that gives a texture of viewing the sketches on paper. The site also has some 3-D qualities as well, as if you are in the website itself. It’s a really well-done website and is attention getting. 

Shopping at Amazon.com is simple because the website interface design is user friendly. There is a wide rectangle box to search millions of products with one click. The searching box helps customers finding the desired product by providing auto suggestion phrases. At the upper left corner, there is a list button that opens a list of categories. These categories are the main divisions of the products available on the website. Each division is divided into smaller categories to make it accessible for users to find their desired products. In addition, the main webpage of Amazon consists of other elements such as ‘Deal of the Day’, customized recommendations, and other advertisements.

I find the shopping experience at Amazon.com to be fun and straight forward. There is less typing required to find what I need which is more convenient to me. After finding what I need, there is enough information about the product including reviews, seller, estimated delivery time, price, description, and similar products. After all, it is only a few clicks to add the product to the cart and find out the exact cost and delivery details. Because I already have an account with Amazon, the checking out process is really simple where my address and payment details are already saved. In fact, there is a button in any product page called “Buy Now with 1 Click”. This button can be customized to automatically charge a payment method and ship to an address associated with the button. It accelerates the checking out process for users to save even more time.

In conclusion, I think that Amazon.com is accessible and usable to different users. The interface uses simple words and more graphics to provide more usability to elders and non-educated users. It requires less thinking and more common sense to place an order on Amazon.com.

Website=”Sweetwater”https://www.sweetwater.com/?mrkgcl=28&mrkgadid=3230723992&rkg_id=0&campaigntype=paidsearch&campaign=*Sweetwater%20-%20Branded&adgroup=Sweetwater%20-%20Exact&keyword=sweetwater&placement=google&adpos=1t1&creative=219897786869&device=c&matchtype=e&network=g&gclid=EAIaIQobChMI2ay5hMmE4wIV0MDACh38XQ2AEAAYASAAEgKBr_D_BwE

Sweetwater is a very popular website where users can purchase musical instruments and music related products. They have a wide variety of guitars, drums, keyboards/synthesizers, and studio equipment such as microphones. The website is very user friendly as I have never had a problem finding products in the several years I’ve used the site.  To test the website’s capabilities, I entered “Jazzmaster” into the search bar. I then was pleased to see several Jazzmaster guitars organized by price and brand. Sweetwater sorts all of it’s products by brand whenever you search for something. For example, the more expensive Fender Jazzmaster guitars appeared first while Fender’s less expensive Squier Jazzmasters appeared below. 

            The website makes it very easy for first time users to find exactly what they are looking for. The top of the webpage contains five options of navigating the site. These options are: “Shop by Category”, “What’s New”, “Deals”, “News and Research”, and “Support”. Most users will be drawn naturally to the first option of “shop by category”. Hovering the cursor over the “shop by category” option will allow a secondary drop down menu to appear. The menu displays all of the types of products Sweetwater carries. One of the best features of Sweetwater is that the website has no shame in telling you that they don’t carry a product. For example, searching for “Danelectro” guitars result in a message that they do not carry Danelectro products. This can save users a lot of time instead of continually searching a website for products they do not carry. Sweetwater also allows you to search for products utilizing a variety of criteria. You can search by brand, price, body style, 6 string, 7 string, and 8+ string. This website is one of the most popular musical instrument suppliers in the U.S.A. It’s easy to use, detailed, and allows for a carefree shopping or browsing experience.  

Shop NHL is a site where you can get merchandise for any hockey team in the NHL. They mainly sell jerseys for almost everyone on each team along with player t-shirts. Along with that they also sell a large variety of other things that include:  hats, bags, and jackets. There is a bar at the top of the page where you can select the option of shop by team, jerseys, hats, more, or the option to search for something specific. The color scheme is neutral with there being a light grey bar at the top of the page and two dark grey bars below it with a white background. I clicked on the search bar at the top of the page and I searched for a Sidney Crosby jersey instead of clicking on the shop by team link and then finding the jersey on the Pittsburgh Penguins site.

When I searched for the jersey, all of the Sidney Crosby jersey options showed up immediately. At the top of the page it says how many jerseys are on that page. Along with that there is a drop down box that says top sellers to refine the search and a drop down box to pick how many things you want to see on each page. On the left, there is a vertical bar that has the options to refine the search more. It has an NHL drop down box with Pittsburgh Penguins below it, a drop down shop for box with the options of men, kids, women, and baby. There is also a department, custom shop, and a price range drop down box to pick from.

The usability of this website is easy to use for anyone that wants to get any NHL merchandise. There are multiple ways to find what you are looking for by either searching for it in the search bar or going through the shop by team option. From the time I went onto the website to the time I had the jersey in my cart it took less than a minute due to the website being easy to use and laid out perfectly.

            I researched the website Avon.com. Avon is a beauty website where people can buy makeup, clothes, etc., at great prices. The site is huge and has a lot of products for people to choose from. The site does a great job making finding products easy, even though there is a lot of products. There are even beauty tips to help those purchase their products, and there are even rewards for shoppers. Some can even become an Avon representative to sell their products outside of the website. 

The website has a white background, which is great to show off products because makeup is colorful and stands out on its own. They are trying to sell the makeup and they need a clean background in order to have the makeup look appealing. Also, the use of fonts is clear and easy to see. Some of the font is a little small because they try to fit everything on their website in one place. The title of the page does stand out without it being to flashy. The site has a very basic set up, it’s very rectilinear. Also, they have some pink colored areas on the website where they grab people’s attention. I think that there could be more pink areas on the website because there are other things that need the attention. They do well in marketing their products but there could be a bit more added to the site to have things stand out. 

I chose to analyze the Sim Sim Falafel page. My eyes are immediately drawn to the bright colors and the inherently appealing textures of the food. This is a restaurant site that does a lot to hold your attention. At the top of the page, you’re immediately drawn to the bright colors and simple food images on the page. They grow and shrink depending on the location of the cursor. The Sim Sim Falafel logo is the cursor itself on the page – it follows you as you scroll, so there’s no chance you’ll be forgetting the site that you’re on. It has a great feel as you scroll, it automatically moves to the right placement for each new section of the page using different colors to differentiate and give it more appeal. It’s simple and easy to use. Even though it’s in a foreign language, I didn’t have any problem deciphering what each of the sections contained – that’s pretty impressive. The color palette used sticks to primary and secondary colors, which is engaging and almost festive. A lot of thought was given to the physical dimensions of the site. It uses liquid width and is designed to be equally appealing regardless of the width you’re viewing it. Although there was not a lot for me to click through on the site, I thoroughly enjoyed navigating it as it was clear that all of the visual details had been thought through.