Category: ARTM2210 Intro to Web

I chose the website “Sim Sim Falafel”, is the website to analyze for this review. The bright colors caught my eye while I was scrolling to find a website. Once on the page, the user can immediately interact with the page. Moving the cursor, the food images change size. Going further into the website, the elements are separated with an appealing grid layout. Another interesting point, the logo moves with the user when scrolling, moving to different parts of the screen.

This particular website does not scroll left and right, only up and down. I believe this is just a small restaurant website, so it may not be necessary for them to have tabs and a number of other elements. The simple animations are clean and smooth, almost making up for the lack of other things to click and play with. 

The grid layout and  make the website easy to look through, and I like how the user can scroll, but it’s more of a snap-to effect. In a way, this one page site almost acts as seven. I do like how the sort of separate pages are a single block of color, however there are some issues with it the further down the user scrolls; I will explain in my next paragraph. I also like the typeface used for the titles on the site. It is simple and the font demands attention. The same typeface is used for the other information about the food (however I am only guessing, I cannot read the language; German?).

Alright, so there are a few improvements to make the site stronger. I can appreciate the direction the designer was going in. Bright colors made the site seem fun and exciting, and the images were high quality and cut well. The title screen is very appealing with the motion effect. The typeface and fonts are also appropriate for the content. There are a few other sections where the images and bold color are compatible, however there are a few that are difficult to read. It also seems as if the designer got lazy the further down the website goes. The bottom of the page has what seems to be a Google Map attachment. The cursor changes to a hand to drag the map, but I could not get this feature to work. Not sure if this is a bug or an operating system issue? I wished the food images were throughout the page, there were less and less the further I scrolled down. I’d also like implementing the motion effect that was at the top of the page in other spots. My expectations were set high with that title section. Also, even though this restaurant may only be a local shop, I still feel some sort of a translate button may be helpful. 

All in all, since this is a site for a small local business I believe the layout and design as a whole is acceptable. As said in The Principles of Beautiful Web Design, “There’s a strict usability angle, which focuses on functionality, the effective presentation of information, and efficiency. Then there’s the purely aesthetic perspective, which is all about the artistic value and visual appeal of the design”. I would give Sim Sim Falafel a 7/10 on usability and for aesthetics; I feel the usability is also effected by the aethetics. Changing a few of the background colors where it is hard to read the black text, such as the dark purple, would help the usability. I would also maybe change the map attachment to something the user can click rather than drag. The map would be opened in a separate tab.

The website that I chose to evaluate is milkshake. This website uses a lot of different colors throughout the site. At the top there is a banner that changes color and takes up the whole page that has the logo milkshake at the top and ‘Make a free Insta website on your phone’ with a link for get app for early access and one for a video. Along with the different colors, as you scroll through the website pictures pop up on the side of the screen to add texture. 

Since this is a single page, to navigate you have to scroll top to bottom to find the content that you are looking for. 

The design elements that make the website easy to scan are that it has a standardized appearance, has effective visual hierarchies, things are “nested” visually, and has a format text that makes scanning easy. 

I think that this website is done well because it has a lot of layers to it without being overbearing. All of the content is easy to find and the different color blocks and animation help dictate what piece of information goes where.

I am Subzero is a storefront ice cream parlor located in the United Kingdom. They have been making ice cream for over fifty years and offer over sixty flavors of ice cream. They have a single-page website for their business. In some situations, a single page website may be boring or include too much information, but surprisingly, it worked extremely well for I am Subzero’s needs. The sites’ use of color, texture, and page layout makes this a captivating and appealing design. 

When looking at the website, it is easy to see and comprehend all of the content on the page. Some design elements that contribute to the clean aesthetic are the font size, the use of negative space around the content, bold headers, hierarchy, and colors that help define buttons and important information. 

The first panel invites the user to scroll down by using a vibrant pink circle with minimal text and an arrow pointing downward. This makes it clear to the user that the website utilizes a top to bottom scroll direction. While you are scrolling, there are dividers to indicate the start of a new section of content. Intuitively, the website designer used dividers that represented scoops of ice cream. Also, instead of a harsh line for a divider, a more organic wavy line was used. In my opinion, this gave the impression of melted ice cream dripping down the screen which again, invites you to scroll further down the page. 

However, I found some of the more subtle features of the site the most interesting. The navigation bar is black but fades in opacity, which makes the bar less of a distraction while scrolling through the page and also leaves the page looking more friendly because it is not a harsh line. Also contributing to the friendliness of the site is the colors. There are many fun, bright colors on the page, making the page look vibrant and young. To balance out the flat colors, a texture that appears to represent sprinkles is used throughout. 

Overall, the website is very easy for users to navigate because of the clean and innovative position of the content. While using bright colors and subtle animations, the site maintains a professional feel overall. The colors and textures are brilliantly balanced throughout, which makes for a lovely overall experience. 

Reference

Welcome to the Magical World of Subzero Ice Cream. (n.d.). Retrieved June 29, 2019, from https://iamsubzero.com/

Walmart is a department store and has a wide variety of products to choose from. Because it is the largest retailer in the world, you may think that the website would look crowded and give too many options when it comes to looking for a specific product. However, this was not the case. Walmart.com has a simple and sleek look to the site and it was very easy to find the product that you need.

When looking at the site’s homepage, it is easy to see where you need to go. The search bar attracted my attention mainly because of its pure white color against the dark blue title bar but also because it is centered at the top of the page.

I decided to search for a water filter that purifies tap water, but I simply searched “water filter.” When I searched without picking a department the exact brand and product that I wanted came up with a large picture advertisement that spanned the page. On this ad was an arrow directing me to click on an icon. On the left-hand side, I could still refine my search if I needed to. After clicking on the icon, it took me to a specific page that only showed that brand’s water filter, with pictures and descriptions of different color options to choose from.

I selected the “Lake Blue” filter that was listed as the second product on the list. The next page very clearly showed more pictures, the price, and an ‘add to cart’ button. The button’s dark blue color stood out against the bright white background.

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 can be searched for and refined to find the perfect product. 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.

References

Carbonara, Peter. “Walmart, Amazon Top World’s Largest Retail Companies.” Forbes, Forbes Magazine, 6 June 2018, www.forbes.com/sites/petercarbonara/2018/06/06/worlds-largest-retail-companies-2018/#591d8de213e6.

In comparison to other shopping platforms, I would have to say Amazon the most user friendly. The large, white search bar is easily seen at the top of the screen over a dark navy background. If the contrast in colors is not enough, the magnifying glass that is the universal symbol for ‘search’ is seen beside the bar in orange and navy. Typically, the user can easily find the good needed with ease in less than a minute by just searching what is wanted. I searched “bluetooth apple mouse”.  Normally, it is not necessary to pick a department to search, but searches can be refined – in my case, by selecting “Computer Mice”, “Computer Keyboards & Mouse Combos”, and so on. Not only is the search process simple and easy to understand, Amazon is also visually appealing. I believe being visually appealing aides in customer usability.

If I was unsure of what brand I was looking for and only searched “bluetooth mouse”, other products show up that are not Apple products. On the left hand side, Amazon shows all brands of bluetooth mice. I can then check the sub head “Brands” and select “Apple”. There are many other categories to search with to cater toward what is most important to the customer, including searching only for “Prime” items (Free shipping for the customers who pay a monthly fee), “Average Customer Review”, “Color”, and even specific categories that only apply to the item that is being searched. In my case, these specific categories include “PC Mouse Feature”, Mouse Interface”, and so on.

Users with low experience with websites can easily navigate Amazon. Items are placed in departments and have keywords attached to them are created with common sense.

References

Krug, S. (2014). Dont make me think!: Web & Mobile Usability – Revisited(3rd ed.). Retrieved June 15, 2019.

I’ve been a big fan of Zappos.com and their culture and work environment for awhile. So I chose this site to look at from the standpoint of usability. When you type in “sandals” it populates with a lot of different types of sandals to choose from. I noticed that if you choose one of the choices, it is defaulted to show you women’s shoes first. I picked of pair of shoes and then got different options as far as color and size before adding to cart. Once added, Zappos.com requires you to sign in. I get why they’re doing this, they want my information to get me hooked into their marketing. However, I want the option to just purchase as a guest and move on to the purchase process. Everything else in the checkout process is pretty much as I would expect and didn’t cause me any heartache to complete the purchase. The other thing I noticed about the site is that they limit the amount of hovers that they use. Even the horizontal menu across the top requires a click to bring up the next window. This seems like an extra step from what I’m used to in online store experiences. Overall, the site is aesthetically pleasing. I would say that the assumption that I’m looking for women’s shoes makes sense but is an annoying one as a man looking for shoes.

Whether it’s a business or a restaurant, there is going to be competition, and every industry needs to be able to stand out from its competitors to succeed. In terms of restaurants, there are many different ways for them to stand out. It could be providing only the best quality meals, creating a one of a kind experience, or even just giving providing customers someplace with a unique and wholesome atmosphere. The point is that every successful restaurant has something to make it stand out in the crowd. This goes beyond just the restaurant itself and into how they market themselves. A website for a restaurant also needs to be able to communicate to the viewer what they might expect before even going there.  

One restaurant that I look at as a possible competitor for my own would be the Square Cafe located in South Braddock Ave. in Pittsburgh, PA. Square Cafe is a small cafe that specializes in breakfast and lunch. They enjoy using their restaurant to help show off the artworks of local artists with a style that is simple and well organized. As such, their own website is just as simple, as well as being quick and easy to navigate. For anyone first visiting the website, the overall style is what sets it apart from its competitors. The homepage is presented in a standard display with a header at the top that is present on all pages, a brief summary with images telling about the cafe, and additional information at the bottom. The design of not just the homepage but the entire restaurant is shown with a bright, flowing, colors. The whole website is displayed with a colorful backyard picket fence and blue sky that I would imagine is inspired by Van Gogh. The colors and style give off a fun, welcoming experience that the cafe wants to provide to its guests.  From there, the menu is the third option in the header. It is quick and easy to find, and the layout is a simple display that shows off their seasonal menu and the drink menu. Both the website and its menus are visually fluid and smooth, providing a stylized version of the artwork they display to the overall design. I feel that the impression they’re trying to make is a fun, inviting atmosphere for anyone new or old.

The restaurant that my group and I created is called EYEPOP, it is a breakfast dinner/cafe with an overall theme that draws inspiration from the pop art movement. The website we’ve created greatly reflects this inspiration, with an overall display, designs, and colors drawn from different artists and their artworks. The layout is simple but eye catching, all while being easy to navigate. From the homepage, there is a single display in the style of pop art by Andy Warhol. Each individual panel leads to another page of the site. Each page is unique and has a style influenced by various artists. The menu is a simple click away from any page, from the header at the top of each page but the homepage where it is the first option displayed. With a more distinct theme to tie both the restaurant and website together, I feel our website has a little more to offer compared to Square Cafe’s. While Square Cafe’s design & layout provide a unique identity, in its entirety, it seems like multiple ideas just arbitrarily put together. With my group’s restaurant, I feel our website has a better unifying theme and overall concept. While Square Cafe shows off local artists in their restaurant, they would have to update their website to match the current display of the restaurant. This in turn results in more work overall for them. Whereas, EYEPOP is influenced definitely by the pop-art movement, it allows for enough influence from various artists and styles when it comes to designing the website, without being too limiting or restricting. Of course I don’t believe out website by any means perfect, and if anything I’d say we might have “too much of a good thing”. While each page provides various information along with graphics and drastic color palettes, it might be a little too chaotic for someone first visiting the website. However, aside from the little things, I’m proud of the site my group and I have created.
It’s not until you begin to create your own site that you start to understand how much thought, time, and effort is put into creating something as “simple” as a website. Both Square Cafe and EYEPOP are great websites that compliment their restaurant. Square Cafe isn’t only good competitor for our website, but it is also a good source of inspiration for EYEPOP. They both strongly serve the purpose of providing a early look at what each restaurant has to offer in terms of food, design, layout, and atmosphere. It never hurts to study the work of others for the chance to discover a new perspective, understanding, or idea that can help you develop your own creations.

Playa Bowls sells açaí bowls and a variety of healthy shakes. If there is one thing that stands out about their website, it is their use of animation. There is a bar that automatically scrolls right after a certain period of time and gifs are used with some of the pictures of the bowls. If you click on their staff page, each person’s picture has a stop-motion element to it which shows their personality and it is entertaining to watch. 

Their layout of text is centered while there are a balance of graphics on both sides of the page. The text is not only centered in the navigation bar but within each paragraph of text. This is a subtle layout feature I noticed but it goes a long way of keeping the website consistent. To break up different sections, they either use a straight line or wavy line. This balance of straight and wavy adds character to the page while still breaking up the information effectively. The overall layout of the website is simple but they make it stand out by their use of color and textured elements.

The colors for their website are very saturated. This color palette is appropriate because they are selling a variety of fruits which have those strong colors. It makes sense to highlight those colors. Three consistent colors they use throughout their site is sky blue, dark grey and white. The sky blue they use is very saturated. One thing they do to break it up is to add texture. The texture is similar to a watercolor look with different spot illustrations used throughout. The texture breaks up the solid colors and keeps the page interesting as you scroll. If there is one more thing that makes this website stand out, it is the navigation system.

One thing that stands out is their standard header and footer. The header stays at the top of the screen which is helpful while scrolling. When you reach the bottom of the screen, the footer appears which has all the categories in the navigation bar, the logo and other detailed information. There is no lag time on the scroll which is nice for the user to feel like they are in control. I am not confused if a word or button is clickable because whenever I hover over it, it changes color or the opacity goes down. Lastly, If I click on a link that takes me to another site, I am still able to get back to their site by the “BACK TO WEBSITE” button they offer.

The Playa Bowls website compared to our website will have a similar style in terms of colors and pictures. Our website will not stand out by the use of navigation or animation but by the colors and product itself. By taking our own photos, we took advantage of making the ingredients of our product stand out. Our logo colors are consistent with the overall site which makes it pleasing to look at along with consistent. Overall, our website has a simple layout that will go a long in users searching for what they need.

After searching the web for a website that looked similar to my fusion restaurant website, I stumbled upon www.eggslut.com. The restaurant basically incorporates eggs with any type of meal. The layout was basically one column, it always featured a photo before any content appeared and in between each section. The color theme is yellow and white, which makes sense because egg-white, yolk-yellow. Navigation was very easy and had everything at the top menu bar. I think they made it easy for users to scroll through the content. Like I said previously, everything was basically one column and had more content as you kept scrolling.

Mine and eggsluts websites were fairly similar. The navigation bar & logo were pretty much in the same place except I feel like I had more items in the nav bar and two drop downs. Their pictures were always at the top of the site and in between each section, but mine took up the entire page.

My website will probably stand out more because you don’t have to scroll to get the content you’re looking for. I think the photos of the food in the background give my site less white space and by looking at the food, it would persuade a person to come to the restaurant- or in my case a food truck. I also think that since they do not have their gallery, faqs, quality & taste, customer service, gallery or online orders in the nav bar its annoying for people to have to scroll.

For this review I decided to review the Ihop’s website. My fashion restaurant serves breakfast food just like Ihop. When deciding on pricing I used Ihop the help decide on prices. Ihop’s website is very easily navigated. On their homepage you can easily either click on one of the tabs on the menu bar or you can scroll through the site and click on something. It had plenty of pictures and popping colors to catch the eye as well. One thing I noticed at the top near the menu bar the location closest to you shows up. I thought this was pretty cool because instantly you can know where the nearest one closet to you is. You can also click on it to get more information about it and directions. When on the website it is very easy for the user to know where they need to go to figure out whatever they were looking for when coming to this site. When my group designed our webpage we looked at Ihop’s to try to get an idea of what we needed to do. Our homepage is definitely different than theirs. On our homepage you don’t scroll up and down as much. We nine squares that when you click on them it navigates you to where you need to go. Then we have a tool bar that can help bring you elsewhere. Also Ihop has a pretty general background with coloring popping in the text and pictures. Our website all around is colorful and popping. Each of the nine pages has their own assigned colors but have the same general theme to help keep the website consistent but also different.

EscaLa Restaurant & Bar

I chose escalaktown.com for this review. It is a Korean/Colombian Fusion Restaurant in L.A.

The Home page has a smooth and clean yet fun feel to it. The white background paired with the fun photographs and their interesting logo makes for a interesting homepage. My only complaint would be the amount of text. They have a lot of about information mixed with other info. I feel that it could be separated into another tab. Their menu page is clean and easy to read, but they use white text over top of their photographs of white plates making it hard to read. Their events page is a simple calendar, but flipping through it you do not see any events. If there are no regular events scheduled maybe it would be best to just delete that page and add an about. Overall it is easy to navigate and provided a fun and easy user experience.

Compared to our website it is very different. Ours uses dark colors and large simple photographs. Our photographs are taken up close to provide a textured feel to them. We tried only to contain text that was important for people to know and all of our pages are used and deemed necessary. Our menus are split into pages by category, whereas the other was all one long page.

Overall I think that if we were in the same area they could be considered a competition fusion restaurant, but only if they also had a food truck. Our websites do not have a lot in common but they both work in their own way.

For this final review I chose to review Rock & Brew’s website in comparison to my group’s website. The overall aesthetic of the website is very similar to my groups website. On the Rock & Brews website, they have a lot of black and red throughout the website. They have a banner across the top of the website that has lots of rock and roll bands posters. The fonts they have chosen to use are bold and bulky looking, but fit the aesthetic very well. The overall layout of the website is very pleasing to the eye, and keeps the user interested in seeing what else the website has to offer.

The navigation of the website is pretty standard in the sense of having a toolbar on the top. On the toolbar they have Foods & Brews, About Us, Shop, Promotions, and Franchising. When you mouse over the Foods & Brews and the About Us tabs, there are several more smaller options that appear below the main tab to navigate you to specific parts of that tab. All the font on their page is very easy to read and easy to navigate. They as well on top of the toolbar have a search box to find locations closest to the user. All the tabs that they have on the website are very straightforward and easy to access and use.

My groups website Black Diamond compared to the Rock & Brew is similar, yet far different. The Rock & Brew website has a feeling that I’d like for my groups website to have a little more of, positive space. I feel like, when people think rock n roll, they think of posters everywhere, black and red, grungy looking things, and I feel as though my groups website is little too clean cut to be a rock n roll based website. Rock & Brew has more of an edgy look while still being professional, and my groups is far too professional. We took this a bit too serious and didn’t have enough fun with it like we could have. Our website does stand out though, from our promotions page. We have pictures of real people enjoying themselves out on nights out (all of which are my friends and family who allowed me to use their pictures).
Overall, the Rock & Brew website is very easy to navigate, has a nice on brand layout, fitting color scheme, and was very aesthetically pleasing. rockandbrews.com gives a typical rock n roll experience, and Black Diamond gives an edgy feeling while also keeping things simple and sweet.

The restaurant that would be a competitor for my restaurant is Cold Stone Creamery. The layout is simple with one line with different categories of what they offer. The color is different shades of white and red plus they have a few graphics to grab your attention. They use their logo on either side of each page and it gives the page a new dimension plus texture. Each on their tab has sub-tabs to make navigation easier and more simple. I think they have to many sub-tabs because users may be annoyed having to go through so many tabs just to get to what you want. They do a lot of online order and delivery but my website is more eye catching and is more simple in categories.

For my final review, I decided to choose the website www.awlins.com.  It is the site for the A.W. Lin’s restaurant that serves a fusion of Chinese, Sushi, and Thai cuisine.  To start off, the layout of A.W. Lin’s is very typical of other restaurant sites. On the main menu page, it features a top navigation bar with their logo to the top left.  Then as you move down, there is a title area. In this area there is a static photo of food with a box of type featuring the restaurant name and also a summary of the style of food they make.  This title section is a nice touch, helping users like me who have never heard of the restaurant before, have a general knowledge of their food. It is something our site lacks currently but after seeing it I will add.  The rest of the navigation consists of slideshows and noticeable buttons to take throughout the site. The sites menus feature the consistent static photo with title at the top with a centered list of menu items. This list of items is clear and noticeable but becomes very boring when scrolling through.  This gets me to the color portion. The color pallete consists of white, brown and several shades of red. While the the red and brown have a big contrast on the white background with helps with navigation buttons, it becomes boring in a few spots throughout the site. One of the things I might add to the site would be the use of texture.  A.W. Lin’s has very little, if any use of texture in the site. With its plain white background and bars of colors the site has no texture at all through the site. I would likely add a subtle background texture to the white and also add more of a textured line to the thin rules that separate sections of the layout. The navigation of the site is very consistent of many restaurants.  The global navigation consists of menu, order now, private dining, gift cards, locations, promotions, and news. These sections I believe clearly order the content in a logical manner except for the gift cards page. The gift cards page is very small only having a line of text saying you can buy a card at the store which I believe to be unnecessary for it to have its own global navigation section.  This restaurant has many items on the menu and also seems to focus on ordering take out and delivery which makes it necessary for the full menu to be available. Therefore with all the menu items, the site broke the menu into five sections with a drop down bar on the global navigation. I think this is necessary for this site specifically because of emphasis of ordering from the phone and its large menu.  Lastly, while I believe the site can effectively guide a user through the content, I think there are a few places where the user could become confused. With the contrast of the site, the user can clearly find what is clickable and what is not, I believe there are some places on the main menu where a user can ask “Why is this button here?” Overall the site has an effective contrast use that helps with navigation, the overall design feels boring to me with its lack of texture and interesting features.  A.W. Lin’s site did point out things like a main menu title that I need to add to our fusion site, but I believe overall our fusion website will be more effective with more use of texture and photography to interest our users and make them starving for out food. Our sites navigation will also be smaller, taking bigger logical chunks of content to put on each button of the global navigation bar. This I believe will help the user navigate to the page they need to be on much more than that of A.W. Lin’s.

Lacocinitafoodtruck.com

La Cocinita Food Truck’s website utilizes a simple one column layout with an analogous color scheme. The site makes use of minimal texture, which can be seen in the dark colored ribbon at the top and bottom of the page and bars on the sides of the photos that are on the homepage. The site also has a slight depth to it as seen with the arrow buttons on the sides of the photos on the homepage that overlap the red background. La Cocinita’s site is a good example of a clean and grainy design. The color scheme ties in with the color scheme of the physical truck, which can be seen on the “Truck pics” page, very well. The use of bright red on the site as a dominant color effectively stimulates the eye and makes viewers feel that the food truck and website are exciting.

The navigation of the page effectively leads viewers to what they are looking for with ease. The utilization of a menu bar at the top of the site allows users to find what they are looking for immediately or by simply hovering over an option and finding their destination in the drop down menu that some of the options possess. Navigation is also assisted by the website using a different color to highlight what page viewers are on as a “you are here” indicator. If for some reason users are not able to find what they need from the navigation bar, there is also a search option at the very top of the website.

Overall the La Cocinita Food Truck website works well in providing the information that viewers are looking for effectively and efficiently. However, the design of the website is forgettable because of the aforementioned minimal texture.

Our World Showcase Website uses a sleek and nostalgic style with the texture background of the site and dark colors. The navigation of the World Showcase site is very similar to that of La Cocinita’s. The general layout of our websites are very similar as well; World Showcase also utilizes a one column layout. The difference between our websites and what will make it stand out compared the La Cocinita Food Truck website is the texture. Our textured background and depth through the use of the floating pages over the background create a more memorable look and experience for viewers. Both lacocinitafoodtruck.com and the World Showcase website effectively give viewers information. World Showcase’s website goes the extra step and makes it memorable.