Category: ARTM2210 Intro to Web

Web-expert.it is absolutely the most aesthetically pleasing website I’ve ever seen. I chose this website because it immediately grabbed my attention. On this web-page, it seemed like the page was animating as I was scrolling down it, showcasing the talent of this web design group very strongly. Animations are literally designed to move on the page as you scroll. The pallet used expresses a very strong understanding of color theory. The sepia-tone pictures contrast very well with the blur and red overlays.

For my second web review, I chose to review the Pest Stop Boys website.

https://www.peststopboys.co.uk/

The Pest Stop Boys’ website uses an excessive amount of colors and animation. While it certainly is impressive how they can add all of these effects in CSS, it is overdone to an extent and makes the information hard to read. In the website’s defense, however, there is little information that is actually needed to be shared. The website offers a quick introduction and ends with the contact information, all in a very large font. This would be more understandable if the text didn’t have animations when hovered over, making it extremely more distracting. Aside from the readability issues, however, the website is an excellent work of art and utilizes advanced CSS features well.

Like mentioned in the second chapter of The Principles of Beautiful Web Design, color is very important to a composition. This also applies to websites. The website here uses an extremely diverse set of colors, though it does well to incorporate value as well, as it separates dark colors from the bright colors. The cursor is a blob of inverted color, where everywhere the cursor is placed, the colors are inverted. This makes an interesting effect that is not extremely distracting, due to the small size of the blob. As for texture, this website uses simple colors without any texture or gradients. While texture does help a website immensely, this website works well without a large use of it. The minimalism mixed with the large selection of colors makes up for the lack of texture and gradients.

The navigation of this website is extremely simple. It is a relatively small scroll from the top of the page to the bottom, and all information is aligned in a similar way. As mentioned on page 34 of Don’t Make Me Think, the most important information should be more prominent. This does not always mean larger, but it should definitely stand out. This website does an excellent job of displaying what is especially important. Phrases such as “we stop” before “insects” and “contact us” before the contact information are made smaller because they really are not as important as the content following them. For instance, once someone sees phone numbers and emails and other information, they will often not need to think to know that it is contact information. The website is straight to the point in this regard, making the user’s trip quick and interesting. As such, this website can be scanned rather easily and the point is made very clear and understandable.

In a general review of the website, it works very well as a composition. The advanced yet not extremely overwhelming effects of this website show a great level of expertise and may reflect on the work of the Pest Stop Boys themselves. It is overwhelming in some aspects, however. The “Our mission” statement is on a lower contrast background, and all of the text is animated, making it majorly distracting. The color changes when hovering over text, as well as the movement of the text itself, may be disorienting as well. Despite that, the website still leaves a good impression on the viewer, marking a very good website, with the mentioned flaws being distractions that prevent it from reaching perfection.

I chose to look at Mailchimp’s 2019 annual report. On this page as you scroll down images slowly start to move up as if you are picking up posters. As the images change the titles that say business and unusual flicker from black to pink. I really enjoy the subtle nods to what they are talking about. Its very easy to navigate because you just scroll up and down. I also really enjoyed the use of colors and the poster style of the images.

+

I chose to do “Problem Studio” because I liked it’s minimalistic design. I like how good it was at grabbing my attention. I think it’s funny that this particular website is kind of boring at first, in spite of it promoting interesting website design. It helps me to rethink what makes a website aesthetically pleasing. When you scroll down though, the website looks more and more interesting, which helps to promote their skills in web design.

The color is limited to six pastel colors. It is flat in illustration but done very well. There is a button to download the site and a video to play. They just scroll down to navigate. They scroll down by using their computer mouse, trackpad or sidebar. The drawings are very simple and it is not too complicated or distracting to look at. The text is big and easy to read. The site is done well as it is easy to navigate and get information. It is not too distracting or hard to read. The site has nice simplistic drawings. The flow is well and it scrolls down without any trouble.

https://balanceapp.com

I do not shop online much, though I chose eBay as my eCommerce site to pursue a product on. Immediately upon opening the website I saw that the main page is very crowded. There is a fast moving banner near the middle of the screen that is a bit overwhelming at first, though it can be paused using a button. The most prominent feature on the site, however, is the search bar. The search bar is big and central, with the caption “Search for anything” inside of it. This setup is done very well as it is an integral part of the eBay shopping experience, and requires little thinking for one to find the product they desire.

Like mentioned on page 17 of the reading, it is important for a search bar to give a list of choices when somebody starts typing in. If done correctly, one’s result may potentially be in the first few results before they even finish typing it. eBay quickly recognized my product and also put the tag “Video Game Accessories” next to it in the search bar to indicate that it is within the specific category I am looking for, not to be confused with anything else. I then clicked that button and moved forward with my search.

Upon searching, I was brought to a new page with only products related to my search result, though this page was very crowded and had many buttons. While it may have seemed overwhelming at first, I quickly noticed that the products I had searched for were prominently in the center of the page and in a very large size. Upon further examination of the side areas, they were largely search tools to aid me in my search, in the event that I had trouble looking for a specific product. Like mentioned on page 21 of the reading, I merely glanced at the page at first instead of reading the mass of information encompassing it. I looked for important information, then I quickly found it and clicked it.

The next page I am brought to is focused only on the specific product I had chosen. I quickly noticed two buttons: “Buy it now” and “Add to cart.” The price is displayed to the left of these buttons, and I instantly know that this is what I must click to move on with my purchase. I add it to my cart, and my shopping experience is complete.

Though eBay may look overwhelming at some points, it is a well designed website which allows one to quickly find a product they are looking for. Though the home page is overwhelming at first, loading in ads and quickly moving the banner across the middle of the screen, the shopping process is straightforward and easy. The site also keeps track of what products I have looked at in order to recommend some similar ones, which would be helpful if I was interested in that. Overall, the interface is well done with obvious buttons to click and the most important features placed prominently in each section. I would definitely use eBay again to buy a product I desire.

I find that https://thenorthernpines.com/ is similar to my website. The website is simple with fixed layout that almost has no flexibility to adapt to different web browsers and devices. Their website consist of quiet colors with almost no vibrant colors, which I think is depends on the general atmosphere of the real restaurant. For texture The Northern Pines websites uses a pattern type of wood texture.

Comparing to my website, they include a slideshow that consist of several photos of their actual restaurant. I think this is an advantage that I should consider to improve my website. I tried to make my website a simple and as fast as possible, thus, I did not include many graphics.

I chose to do my review on no9park.com and olivegarden.com. First of all, I tend to like Olive Garden website more because it is easy to know it is a restaurant website. When I first opened No. 9 Park website I was not sure what is it exactly. What came to my mind first was the website is for a corporation because of the huge building background photo and the lack of any photos of food. While surfing Olive Garden website, the design serves the purpose where several food photos are presented. Therefore, according to the book, a good website should be clear and users should be able to quickly figure out where to click and navigate.

Second, Olive Garden website seems more balanced since everything is centered and visible in the first page. However, on No. 9 Park website, I had to scroll down several times to discover the content of the website. While the website is divided into organized sections, scrolling down several times make it lacking the symmetry feel.

Third, I like the colors of both websites. Olive Garden uses more of freshness and energy color which is green, while No. 9 Park uses black color that indicates elegancy, formal, and prestigious. I think that the coloring of each website indicates the identity and style of the restaurant.

I think that each restaurant website goes in different approach. No. 9 Park is a classy restaurant in which the website tries to introduce the owner and chefs, the area, and how luxury the restaurant is. This is visible through using portraits of employees, a landscape background of the city, and their classy tables. However, since Olive Garden is a trendy chain restaurant, it cares more of specials and offers, new dishes, and their mobile application. This is clearly visible by using several images to serve these purposes.

Finally, I think that Olive Garden website is more user friendly due to the hierarchy layout and the ease of navigation. When I visit Olive Garden website, I can easily navigate to where I need to go, and I can easily understand the content of the website. However, I also enjoy surfing No. 9 Park website because it is classy and quiet, but it requires the user to spend extra time reading to learn more about the restaurant.

Since technology is constantly evolving, information is becoming 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.

For my web design class, I created a new company called “Dizzy Dipz” that is a fusion restaurant that focuses on boozy ice cream. I created the brand identity and with the help of a partner, was able to bring the company to life with a semi-professional feeling website. I will compare it to that of popular local food chain – Burgatory, as they also serve a selection of boozy milkshakes.

Burgatory 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.” Its minimal color scheme and layout make the experience easy on the eye and mind.

In some ways, Burgatory’s webpage is quite similar to Dizzy Dipz. This is of no surprise to me because I took inspiration from their site in regards to the layout and content. I do think that Dizzy Dipz stands out because it gives off young and social vibes. The colors alone are so vibrant and different from most other companies and I think it gives it an edge when comparing it to a restaurant with similar menu items. I also like how Dizzy Dipz includes more photos that will give the consumer a better idea of the both the atmosphere and food. The wording and names of the headers and items on both sites allow for a better insight, as well. Burgatory includes a very minimal amount of photos within the bulk of content, but uses an abundance of playful typography. I think both sites look pretty clean and simple with an easy understanding of the navigation process. 

Reference

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

I have chosen Burgatory and La Prima coffee company as two restaurants to compare to. Burgatory has a great flow to their website, but stands out also. Burgatory’s website is very easy to read, and has really great navigation as well. The only thing that is bothersome is that some of the elements of design makes the site look busy. On La Prima coffee company’s website they have a very simple and clean look. There isn’t anything that is too busy on the website. This makes everything easy to see and great to navigate as well. There is also a visual hierarchy on the Burgatory website, however, La Prima does have some hierarchy but not as visual as Burgatory. Burgatory definitely has the hierarchy in place that is not mistaken for anything else. On both sites there is a clear explanation of everything that is going on. There is no “frilly” text involved on either website. Burgatory has some fun text involved but it is short and sweet. There is good balance to both of the websites and well. Burgatory has a lot of emphasis on their website, especially with their colors on their menu bar. I find that Burgatory is more attention getting just because of the boldness and the colors on the site.

I chose the website laprima.com for the competition against my website. La Prima is a coffee company in Pittsburgh, and their website is done really well. In my website I have a slideshow as well, but their slideshow takes up the entire background. Their navigation is really great because it is next to their logo in the menu bar. Everything is really easy to read, and easy to navigate. The colors on laprima.com is really well done. The colors match with the brand and is really clean and modern.

The website that I have done with my group is nicely done. It seems clean, but it does not really compare to laprima.com. Laprima.com is very clean and modern, and there is also a good flow to their website. We have a great flow with our website, but it’s a very limited website. It’s very simple, and definitely more of a beginner’s website. Our website will have a cool pattern to it to help the website stand out. It also has a great font, and it’s very simple as well. 

The website that I consider completion for my fusion restaurant is La Prima. The layout of La Prima’s website is very clean and compartmentalized. The color scheme of their website is very neutral with sticking with dark grey, coffee brown, and light blue. They had a sense of texture in their pictures primarily in their pictures of coffee grounds. Their menu bar is just a button that says menu that slides out after you click on it. It gives you the option of what page you want to see and goes into different types of coffee you can buy when you click on shop. I think the website now is effective, but also a little too much. You have to think a little bit about where you need to go when you first open the site. I think it would be more effective if the menu bar went across the top of the page under the logo to give it a better sense of navigation. 

My final project site is more effective and stands out more than La Prima’s because our menu bar is at the top of the page so you can see your options clearly and it has the visited link color change so you can see where you already looked. The other difference between the two sites is the choice of color. La Prima’s site has more earth tones while the final project site has brighter colors that catch your attention better than La Prima’s.

https://chezramarestaurantcolumbus.wordpress.com/

The layout is decent but I would prefer to have more white space between the sections. For the color I don’t think the purple hued background goes well with the website. There seem to be two different color pallets co existing on the same page and they are definitely competing. The texture is overwhelming to me-texture sensory overload! The navigation is simple and functional, it does what it needs to do but it isn’t anything fancy. 

I think my team website really stands out with the Chez Rama Restaurant described above. Our website has more white space so it doesn’t feel like it’s crowded. Also more professional pictures have been taken. The JQuery navigation adds visual interest while simplifying the user experience.