Category: ARTM2210 Intro to Web

Review 3:

1. Pasta Too

-pastatoorestaurant.com

-Balance- everything balances nicely, I think the colors work well together

-Unity- the page fits together, I think its because everything is basically a rectangle, so it fits together nicely.

-Emphasis- on the changing photos under the navigation bar

-Layout- flows nicely as you’re scrolling down

2. How it uses Krug’s five important “things” to make sure users see and understand

1. It creates a clear visual hierarchy, the first thing you see when you look at the site is a photo of the restaurant, which changes to another photo saying its “traditional family recipes” then another “fresh ingredients for an authentic flavor”. Obviously, traditional recipes and authentic tastes are important so they’re putting them first.

2. The conventions of the we page are clear and easy to see/use. The logo is in the top left and the navigation bar is at the top with it.

3. The site has clearly defined areas

4. It also makes it obvious whats clickable (navigation bar, and “our sauce” and “careers” at the bottom.

5. There isn’t much noise, I feel like its easy to navigate through and doesn’t have any distractions.

2. DiAnoia’s Eatery

-dianoiaseatery.com

-Balance- I think the first page is balanced well

-Unity- the colors of white and blue make it feel unified

-Emphasis- I think there’s a lot of emphasis on looking at the menu

-Layout- the layout is white space on the left and a picture. Then if you click on the 3 horizontal lines to the right, the white space goes away making the page an entire picture with a floating navigation bar.

2. How it uses Krug’s five important “things” to make sure users see and understand

1. The first thing I noticed when I looked at the page was “CIAO!”, a picture of meatballs and then an option to view their menu.

2. The conventions of this page weren’t as clear to me as Pasta Too’s site Although the logo stuck out on the left side, the navigation bar was hard to find since you had to click on the 3 horizontal lines next to “check out our menu”

3. This site does not have clearly defined areas until you click on the navigation bar

4. There isn’t much to click so it does make it obvious on what’s clickable

5. There wasn’t much noise.

For this review I chose to review two local restaurants that I love, Burgatory and BJ’s Restaurant and Brewhouse. These restaurants are pretty similar, and their websites have similarities and differences. When the website pops up both have a menu bar where you can click on our parts of their websites. They also both have their names/logos somewhere near the top, if not at the top of the website. After scrolling through the website more options and accessories appear. On BJ’s website everything kind of feels organized but yet cluttered. It seems to be a lot at once every time I scroll. With Burgatory’s website it seems to be more organized and less cluttered at once. Also I noticed as I scrolled through the website was that the menu bar continued to go down the website which you. Each website definitely had it’s own look, color scheme, and design to it. Both restaurants definitely emphasis their food and that they are a restaurant. Both websites have pictures of their food everywhere you look and with everything you click on. The two websites definitely use Krug’s five important things as well. Each page definitely created a visual hierarchy that was interesting to look. The pages are easily broken up into clearly defined areas and there was minimal noise. Whenever your mouse goes to something it either changed color or moved to show that you could click on it.

Madisyn Kovach

ARTM 2210

Spring 2019

Review #3

Tuesday, April 2, 2019

Review #3:

The first website that really pulled me in was https://www.prada.com.  When I opened the website, I could easily understand what that website was trying to sell.  The next reason why I enjoyed this website was because there was not a lot of information to read.  We tend not to read web pages, we just scan them. Another reason why I liked the Prada website was because it had a lot of links for me to easily make my way around the website.  The other thing that I enjoyed was the simple color used on the page. The layout was all black and white and then some pictures shown had pops of red in them. Also when looking a this website, I liked when you clicked on a link how everything was centered.  It was a simple layout but a nice use of strong colors. This is why I really enjoyed the Prada website.

The second website that I found really interesting was http://www.lavinlabel.com.  This website is used for home and travel inspiration through unique visual storytelling.  The first thing that really caught my eye when first opening the website was the soft colors being used and the amazing font choice.  The as I was scrolling down on the page, I really enjoyed seeing the different kind out layout used. There was a variation of big and small pictures with just a little amount of text.  These pictures and text shown had a lot of unity.   When I was exploring this page, it was very easy to find my way around.  There were several links that could easily take me to other pages. The other thing that I really enjoyed was how it linked you to her social media pages.  This is so I could just see more pictures of things that she does. In my opinion, this page was stronger than the Prada website just because of the different layout.  Also, I felt like this website had more emphasis on what she was trying to sell because of the several pictures she used. This is why I enjoyed looking at the Lavin Label website.

No9Park is a French restaurant in Boston. This is not your typical walk-in restaurant but a night out on the town. You come here to wine and dine. Their website represents the style of restaurant. They use a combination of serif and san serif font with a horizontal layout. As you scroll, all the text is center on the page giving it a clean, simple look. There is a combination of pictures and colored backgrounds. The pictures have a dark tint to them for the purpose of not mixing values when adding text on top. The site is balanced by its use of color, text and backgrounds. Emphasis and unity are represented in the consistency of the menus. You can choose what menu you would like to look at (bar, dessert, enter, etc.). Once you click on one, the title of the menu is at the top-center of the page in serif font. As you scroll down, the subtitles and items on the menu are a smaller, san serif font. The name and price of the item is bolded with the ingredients written below it, unbolded. All of these details show unity because they look the same and are shown in the same place on the page. Along with emphasis, the different fonts explain the categories represented and leads you down the page. Balance, unity and emphasis play into the big picture of style and layout. Their style was represented by using all of these elements.

Bakn is a restaurant in Warrendale, PA. This is the opposite of your wine and dine but a casual stop-in. This place is everything bacon. If you are a vegetarian, this place might not be for you. Their website is consistent in color: grey, white, reddish-brown. They balance their colors by using different values; if it is a dark background, the use of white text is used and vice versa. A piece of bacon is part of their logo aside from the typeface. They incorporate the bacon shape as a frame for pictures and text as your scroll. This show the unity of their logo and stylistic choice of the website. Emphasis is displayed in their consistent use of headings and placement. A user would not be confused what they are reading because sections are labeled. Lastly, the layout has a combination of organic shapes with a grid system. This makes the website easy to read while still making it look aesthetically pleasing.

Both websites do a good job of using Krug’s five important “things” which are to create a clear visual hierarchy on each page, take advantage of conventions, break pages up into clearly defined areas, make it obvious what’s clickable, and minimize noise. Text is broken up into different sizes to give hierarchy and it is broken up into defined areas on the page with white space. In both menus, the convention system is: name, ingredients and cost of item. Both websites follow the system which is helpful for the user to consume information. Buttons on both sites show they are clickable by an element of change that happens when you hover over the button. For example, on No9Park when you hover over the buttons in the top panel, it changes to a darker value. Lastly, noise is minimized on both sizes with the use of defined space; gives it breathing room. 

If I had to choose between these two sites whether one is more effective at getting their message across, I would have to go with No9Park. This is due to the quality of their graphics and the scroll speed. On the Bakn website, the scroll time is delayed which can make it annoying to the user and the graphics are pixelated which shows poor quality. Other than those factors, I enjoy the Bakn website because of their theme and integrating that into their website.

For Review 3 I decided to explore and compare no9park.com and burgatorybar.com.  No. 9 park is a self described flagship restaurant in Boston’s Beacon Hill. Overall the look and feel of the site makes No. 9 Park to be a very high end/fancy restaurant.  While I have never been here, this feeling the site gives you seems to be for good reason, with there being private dining and a menu with some very high prices. The sites layout mostly consists of a background of photos of the restaurant with headlines in each photo followed by sections of text separating the photos.  There is a clear sense of unity with the site with every page having a very similar layout and the same global navigation bar being at the top of every page. The hierarchy of the site is clear and well defined with a its site name at the top of every page and then headlines to sections of text. No. 9 Park’s site is well designed making it clear what is clickable in its global navigation, breaking up of pages into logical sections, and keeping the site very simple and quiet.  The next site I looked at was burgatorybar.com. The website for Pittsburgh’s small burger chain, Burgatory. The site’s layout is very similar to that of no9park.com’s, making the photos of the restaurant be the main emphasis. The sites global navigation bar takes advantage of drop downs more so than no9park.com did. Where No. 9 Park placed there entire food menu on one continuous page, burgatory decided to separate each sections of the menu into a page itself. With Burgatory’s customization options, I believe this separation to be purposeful in order to minimize having a crazy amount of content placed on one page.  While this separation works for Burgatory, I do not believe it would have been as effective on that of No. 9 Parks site. Their menu seems to be much smaller, only needing 5 sections of separation where Burgatory splits the menu dropdown into eleven. Burgatory also has a clear sense of unity with its color palette similar layout among each page. The hierarchy throughout the site is clear with each headline having a line under and over making it more as a graphic of the page. The site is much alike no9park.com; being very simple thus creating a very visually quiet site with its use of hard edges to each section of content.  Overall I do not believe one site is more effective than the other. Each of them take advantage of conventions to convey the feeling of what the restaurant is like. With No. 9 Park being a much fancier, private dining and reservation type and Burgatory being a more casual sports bar restaurant.

The two sites I choose were http://www.cerealboxinc.com/ and www.playabowls.com. Cereal Inc. has a fun top of the page and it scrolls down to reveal different part of the what they are. The entire website is fun colors and displays new activities that will be coming up. The layout is focused on one thing at a time with different pictures and videos of different people that have been in their store. They show that their store is for all ages and just to get creative with your cereal selection. The cite flows very well as you continue to explore more of what this store has to offer. Playabowl has a very typical feel and has a quick slideshow what their bowls. They are heavy on eating healthy and showing that things can be healthy can taste plus look delicious. They also give you ton so options and you can customize your own bowl as well. Their cite is very organized and it gives the customer the opportunity to explore the cite the way they want. Both cities keep everything organized and easy to find but Playabowl makes it easier to see what options they have for their menus plus you can order and online to skip the line. I think Playabowl is more attention grabbing because it displays what they make a lot better and it has more variety of options.       

https://owltastic.com/#contact-form

Meagan Fisher is a web designer for her own business, owltastic. On her page, she goes through her bio, recent work, what she is doing now, social media connections, and how to get in touch with her. Her page is organized from scrolling top to bottom. She has a strict color palette which goes with the theme she sets up among the page. Her colors are white, navy blue, tan and a variety of tones and shades of these colors. Her theme consist of stars and time. She accentuates the theme by incorporating simple animation to add an aesthetic look. The information is presented in rectangle boxes with white margin space in-between which helps cluster the topics while giving it a clean look.

As you scroll through her page, all of her buttons are represented as ovals, the words itself, an arrow or words underlined. When you hover over the button, the color changes which indicates it is something to click on. Some buttons direct you to other websites such as her social media pages, the workshops she participated in and her recent work. Some of her other buttons which say, “Let’s Work Together” “Sound good? Let’s chat” “Contact” and “Let’s Talk” all lead to a section on her page of where you can send her a message. 

Fisher’s color palette uses the idea of night and day by the navy blue and tan. Instead of using black and white, these colors represent a pastel theme. This is effective when looking at the values. There is a combination of a navy blue background with tan text and vice versa. This setup balances out the page while making it more interesting to look at. The animated circles lead you through the page and set the pace of the mood Fisher wants to get across. The circles turn at a slower pace which indicates how she wants her audience to take their time scrolling through her page. She uses a combination of geometric and organic shapes. I believe she adds geometric shapes to add structure and organic shapes to give off comfortability. 

Overall, Fisher’s page is a great design. The fact Fisher does web design for a living highly influences how her page is laid out compared to others. She knows how a strong color palette with simple text will keep her viewers interested. Her use of simple animation and shapes helps people navigate her site easily. Lastly, she is consistent in her theme which makes it a fun storytelling process for the viewers.

The single page website I chose to review is Image Resizer by Promo. I first chose this site because the color immediately struck me and caught my interest. Getting from one page to the next by mostly clicking on links. When you place your mouse over something it will show up as being able to click on it. On my screen I only have to scroll top to bottom to navigate through the page. The website uses nice color, font sizes, and font types to make the page attractive and easy to understand/get through. Personally I believe the websites design is great and works well. I did not struggle to understand the page at all. I was about to easily navigate through it and find what I needed. The page is nice and flashy, but not too flashy that I got a headache or it was annoying.

The featured website I went through was called Missing. It described the journey of a 7 year old who got abducted then was found days later with three stab wounds. The color very dark but it gave the story a vintage look with uses paper with pictures of the frame to fill the background of the story. They used realistic images of the woods and of the girl, in which made the story more interactive. As you go through the story you can scroll backwards to explain the story more in details then scroll in any of direction to see more details of what was happening. Everytime a point of view is changed you get a white dot you have to press to guide you more into the story. The story used the little girl’s voice, text, and the finder’s voice to tell the story. You could hear other people’s voices as they were searching plus they helped narrate.     

The site I chose was the World Series of Sales website, highlighting their 2019 event. The site navigation is very easy to follow with a simple scroll top to bottom page. The sites colors are very unique. The whole site has a dark background with flashes of purple and blue appearing such as lens flares, making the background live and moving. When scrolling down the site, it highlights key information about the event, including the qualification details, location of the event, speakers, and also the charitable donations that can be made. Each section stands out on the page because they are all in a bright, white font, which stands out against the dark background, making it easier to read. What also makes the site easy to navigate, is that each section of reading leads to the next. Whether it be leading lines from one section to another, or the simplest of things by just placing the text on the page alternating on different sides of the screen. Also, each section of the site, fits the space for one screen, making it even easier to focus on one part of the site, before moving on to another. Overall the site is very well designed. With a simple design, the text and images are spread evenly throughout the site, making it easy to navigate and read. 

https://robhope.com/yo/

Madisyn Kovach

ARTM2210

Review #2

February 26, 2019

Review 2:

I looked at several of website but the one that really stood out to me was https://owltastic.com. The site used a beautiful dark blue and yellow that just really catches your eye.  I also saw that they used the color white. You do not see that often. I also really enjoyed looking at the texture. The texture included yellow stars with a low opacity. I liked that the opacity was low because it made you look longer to see what the background included.  I also chose this site because it was easy navigation. Scrolling up and down is simple but I feel like it is the best decision because that’s what people expect. On of the other websites I looked at scrolled left to right and it took me more than three minutes to figure it out.  You want the viewers to be able to use your website and not get confused. I also love the text used. Even though it is a fancier kind of font it is still easy to read. There are several elements that make the site easy to scan, read, and understand content. The headings are bolded which makes it very easy to read.  I feel like this site’s design is very well. Color is really important when I am designing. So, in my opinion this website has a really good color combination, as well as amazing images with movement on the page. This is why I decided to choose https://owltastic.com as my favorite website.

I chose to review the webpage for Bavette La Boucherie. As soon as I opened the page, a motion graphic appeared and showed the logo of the restaurant. Then photos of their food appeared. As the photos changed, there was a transition slide with the logo. This gave it a very interactive feel. As I scrolled top to bottom, I found their hours and information. They also included a summer events chart. The colors did change throughout the page but all stayed very similar. I assumed the restaurant was very modern and organic based off of the browns, greens, and mustard background colors of the page. I kept scrolling until I came across information about the farms they choose. On the sides of the page there were graphics of cows, pigs, and lambs that moved as you scrolled. This made the information seem less formal and boring. The graphics also stuck to the green color used earlier. I felt the overall design of the page was effective. Scrolling top to bottom made it feel organized which is what I would expect from a restaurant. If I had to click on something to be directed to other pages it would have felt very informal. But, towards the bottom of the page there was a section called “Press”. To see different articles about the restaurant, you had to scroll left to right. There were arrows that moved the different options across the screen. This felt appropriate because it allowed that information to stay within a certain region of the page without adding a lot of unneeded space. Overall, the information on the webpage was very clean and organized.

Review 2: One Page Love

Prague Wanderings

https://www.icscreative.com/prague/

This site was a long scrolling page showing illustrations of what Ariana Montanez did while she was working in Prague. As you scroll down the page, she has a different color background for little blurbs explaining who she is, what her favorite thing to do in Prague was, and a link to read more about her trip. She used a color scheme of what looks like pastel colors for the blurbs and the illustrations. The color scheme helped make this page feel like it all ties together. Navigation is very easy; the user just has to scroll down. The composition of this site made it easy to scan, read and understand, everything was centered, and I basically only read/looked at one thing at a time. I also think that the contrast of the site was a good choice, it had white space and didn’t clash with the color palette she used.  Again, the color scheme that was used really tied everything together.

A good website is user friendly and visually pleasing. This site created by Ariana Montanez fits just that because of the easy navigation, composition, illustrations and the color scheme. Since the site describes Ariana’s trip to Prague, I find it interesting how she decided to illustrate her experiences using only a few colors and making it work. The content drew me in and was the focal point of the site. Also, the site isn’t confusing at all since the only thing you have to do is scroll down. In conclusion, I really think this site was well done due to the easiness, the composition and the illustrations.

For the single page website, I chose “Frustration”.  Firstly, because it is an eye-catching title, and it is exactly the opposite of what everyone tries to avoid when making a website.  But, it also caught my attention with the elements it employs.  At first glance, the site could very much be seen as bare, simple, and plain, yet I feel like that is what makes it beautiful, and easy to work with.  No one wants to fiddle with a gaudy website that has an extreme number of buttons, colors, and nothing that flows together.  Frustration is not that at all.  When entering the page, you are greeted with a blank slate of white, some greys, and a few pops of black.  A very minimal color palette, but I think it works fantastically.  It uses easy-to-read type, and it is directly in the middle of the screen.  To navigate, the user must scroll down, and you’ll be shown sleek, basic images of hands holding an empty white box, stating that empty is the new full.  The texture seems glossy and polished. Nothing is very loud, or tries to capture your attention with anything crazy.  It appears smooth and airy.  The site is easy to scan because of the simplicity it has overall, from the colors, to font, to the photos.  I do believe the website is designed very well, and caters to people who prefer concise layouts.  It is a modern page, and that is what most people would probably be looking for when creating a site, especially in this age.  Overall, the website “Frustration” is well-organized, minimalistic landing page and could work with practically anything the designer wanted. It gets the job done in a very clean and effective manner.