Category: ARTM2210 Intro to Web

Miranda Kerin

Review 3

Mad Mex vs. Burgatory

For this review I chose to compare Burgatory and Mad Mex on their websites. The first site I chose to open was Burgatory’s, and was pleasantly surprised by how unique it’s homepage looked. Instead of the classic downward scrolling page, it allowed the user to scan through different burger choices and put humor in each slide. Being a mostly create-your-own meal restaurant, it was a clever way to show some of the creations one could potentially make if they visited in person. The site also has the same design feeling as the inside of their restaurants, allowing for a seamless transition in their marketing. They balanced out their page nicely with the use of bold text shown on either side of the central graphic. They place heavy emphasis on the image of the burger, for good reason. The layout, as I said previously, is unique but it works well for their company.

On the other hand, when I opened Mad Mex’s homepage I was not as impressed by the initial look of their layout. Their color schemes seem to work well for their style of restaurant, but their lack of texture gives the site a boring feel. Although the navigation is easy to understand, for it is located right underneath a simple banner. While this makes in some-what user friendly, it does not make it stand out as a unique and interesting website. The use of balance is thrown off by a large image that drowns out the text. They also use yellow text on a green banner for their additional information footer which is somewhat hard to read. This site also goes against Krug’s, “Make it easy to go home,” rule. There is no home link on the main navigation, the user must click the large banner in order to go back home. In fact, the only other option to go home is the small yellow text on the footer.

When comparing these two websites, Burgatory succeeds in having a more unique and balanced layout in comparison to Mad Mex. They tied in the theme of their restaurant to the experience of their website, and it only helps add to their brand.

For review 3 I chose to investigate the websites for Bravo Franco Ristorante and Six Penn Kitchen. To begin with, I found that the two websites had many similarities. For example, both sites have their company name and logo at the top center of their home pages; making it very easy for the viewer to observe what restaurant they are looking at. They both also have a tool bar at the top of their home site with links to different parts of the site, such as: menus, contact information, specials, etc. A third similarity I came across while experimenting was that when I clicked on a link in the tool bar, I was directed to a different page but still had the same tool bar to use if I wanted to go to a different page. I think that these aspects gave strength to both sites because I didn’t have to do any thinking when I wanted to travel to another page.

That said, the two restaurants are very different when it comes to what they serve, so their layouts are also very different. Bravo Franco Ristorante’s site had a much more distinguished look. It used serif typefaces and a more natural, business-like color scheme. The color scheme and typefaces remained constant from page to page, which gave it unity. The information presented on each page was clean and readable. Each page also had a heading, with a word that was much larger than the body of that page, which emphasized what the viewer should expect to read. The layout was clean and the text was very easy to read on each page, however I found it be quite boring. I found myself bored with the lack of color usage and illustrations. There were a few pictures present of dishes they served, but they were very small and in my eyes, took a back seat to the rest of the content on the page.

The design of Six Penn Kitchen was very different from the previous restaurant. This website used a much more playful color scheme and modern look. As stated before, the information that I was searching for was very easy to find due to the tool bar being constant within each page. However, I found that for the most part, the text was centered on each page making it not as legible. The site did use emphasis in making words bold or a different color, but I still found myself getting lost in the text at times. The website dealt with unity well since each page was almost identical to the next. Balance was also achieved because the body on each page was centered, leaving equal negative space on each side.

In all, I think both websites were successful in achieving balance, unity, emphasis, and layout. I think Bravo Franco’s was more successful when it came to emphasis and layout while Six Penn was more successful with balance and unity. Both sites were “idiot-proof,” which is a major goal for web designers according to “Don’t Make Me Think.” Also, I didn’t find many useless words that would turn me off to the site. Krug states multiples times in the text that the less words, the better. Viewers have a goal in mind and if they can’t find it within seconds, they will go to the next website. Neither website made me feel like I had to rip out my hair trying to find what I was looking for, so I’m sure Krug would say, well done.

I chose to review two local restaurant’s websites: Meat and Potatoes (http://meatandpotatoespgh.com/index.html) and Butcher and the Rye (http://butcherandtherye.com/#) They are not only similar in cuisine, style, and atmosphere, but the two restaurants are actually in collaboration, so I felt it would be interesting to compare the two.

I first looked at the website for Meat and Potatoes. Upon first visiting the website the viewer is immediately drawn to a butcher chart in which is labeled the different parts of the website which can be navigated: Menu, About, Gallery, Contact, etc. Upon clicking on one of these panels takes you to a simple webpage that minimally addresses the information. The viewer can then visit other parts of the website through a navigation bar at the top of the page. The website has a good sense of unity by using consistent color scheme, texture, and illustrations. The only disruption in this was the “The Chef” tab, which takes you to a bland, mediocre website belonging to the owner, which distracts from the otherwise persistent theme. Nonetheless, this website does a good job to create a brand for themselves and convey a sophisticated, yet rough around the edges, attitude. While the emphasis of these webpages is of course on the information selected, the restaurant’s logo, address, and number are consistently repeated on each page, which is convenient.

Next I visited the Butcher and the Rye website, which had a one-page layout. While the website seemed to mimic Meat and Potato’s monochromatic color palette and heavy use of texture, this website seemed to portray a more whimsical mood. At the top of the webpage is clickable typography and corresponding illustrated decals. Upon clicking on the words, for instance “The Menu”, the page automatically scrolls down to an image of the menu. The viewer also has the ability to scroll manually through all of the information. There is an evident consistency in the imagery of the page, relying on a bitmap texture and vintage collage technique. While the Butcher and Rye website is a bit busy, it’s certainly unique and attention grabbing.

Regarding Krug’s list of essential aspects of a website, I’ve tried to determine how the webpages implemented these. As far as creating a clear visual hierarchy on every page, I feel that the Meat and Potatoes website does a better job. Each category is featured very directly by importance, whereas the Butcher and the Rye webpage is a bit all over the place and everything seems to flow together. I feel that the Meat and Potatoes website also does a better job at utilizing conventions, for instance it implements headlines in a more prominent way, where as the Butcher and the Rye is presented in more unconventional way. I think both pages do a good job at creating clearly defined areas through page breaks, borders, and titles labeling each section. Both websites clearly define what is a clickable link very well. Meat and Potatoes implements underlined text and text that changes color when hovered. Catcher and the Rye relies on a bold red color when hovered at the beginning of the webpage, which really grabs the viewer’s attention and urges them to click. Lastly, I think both websites did a fairly good job at minimizing noise. If anything, the Butcher and the Rye website is a bit busy and slightly distracting, but I think it works well to suggest the desired feeling of the restaurant.

Overall, while the Meat and Potatoes website is definitely clean and well organized, the Butcher and the Rye personally draws my attention more. The one-page scroll is unconventional and interactive, and there is immense interest in the visuals of the webpage. The webpage is fun and a bit offbeat, suggesting that the restaurant would be a unique and unordinary dining experience.

 

 

The two sites I choose where Bravo and Six Penn. I think both sites were very well designed. Bravo put the most emphasis on there logo where as Six Penn decided to put the focal point on the location image at the top of the page. Six Penn’s unity works better than Bravo’s because of overall texture and color usage. I also think Six Penn’s layout works better than Bravo’s because it looks more interactive and interesting than Bravo’s very basic look. However, I think both sites are very usable and easy to navigate. Six Penn is defiantly more effective at grabbing my attention. They use a variety of images that show a many different aspects of the restaurant. The color choices were also much better with Six Penn than Bravo. They show a very elegant style but also very approachable. In conclusion both sites are successful but Six Penn steals the cake with style, elegance, and approachability.

The two websites i reviewed was SixPennKitchen.com and Burgatory.com. the Purgatory website attracted me more bc it uses more of a Bighter color palette then the sixpennkitchen website does, Burgatory’s website also has a better use of images as they are bigger and easier to see. the Burgatory website in that sense users emphasis very well because the pictures of the food and everything is bigger to put that emphasis on them. the sixpennkitchen website has a very limited color palette as far as having the same two colors, i found that it is easier to get to as far as the menu or about us page and news & gallery page, were as purgatory makes it very hard to navigate to other pages. the sixpennkitchen website is very easy to navigate through because all of the different tabs are all on the top of the page and easy to find, the different sub menus are very limited as well the color palette, were as the Burgatory website sub menus are more colorful and have a better design to them then the other website which is better to look at and more interesting. Overall i feel the Burgatory website is the overall better website.

Multicraft International as a single page website works out very good as the navigation is very easy and simple for the user to work their way through the site. I also liked the way the navigation of the page as it was going from top to bottom following the gear as you went through the different sections of the page. I also liked how the the different sections had very good descriptions of the management style they were trying to convey. I felt that the graphics on the page could have been a little bit better, I also felt that the color choice could have been used better i felt they used to much grey and red. overall i felt it is a ok single site page but still has a lot that could be better on it. The navigation on it is very good and very easy to follow and i liked the how they used the gear to follow you as you went down through the page. Overall i felt it was a very well thought out but still needs a little bit of work to do on it.

The name of the site that I am reviewing is HeartKids.co.nz. Heart Kids is a New Zealand based charity that raises money for children with heart disease and congenital heart failure. The site is a single page scrolling site that has information and stories about the children and people that Heart Kids helps. The site runs off a timeline based template, where you scroll down the page and find out more and more about the topic at hand. The site is very easy to navigate so someone that isn’t exactly computer savvy could still scroll through this site and learn about how they can help and donate for the cause. The site is very beneficial, has a very strong two color design, and very modern and artsy scrolling that allows for a great user experience. In my eyes this site helps the cause more.

Today I will be reviewing a website that interestingly is made of only one page. These websites are great in a lot of ways, there’s a clear way of viewing the page, as opposed to being able to go to any page on the site. It also can cost less depending on who you pay for hosting or designing your site for you. Sites like this are becoming more and more popular for all their benefits and while they aren’t perfect for every use on the web they are still important to understand.

On the website “one page love” you can find a large number of sites that utilize only one webpage, it’s a great site itself and highlights the best one page sites of a certain week. While going through the site I saw a visual striking thumbnail that I clicked on to visit a site about bandages.

As far as texture and color are concerned, this site is a lot of striking black backgrounds, and this is done really well for a minimalist look. Along with the stark black is a panel that is made to look just like a large patch of human skin, this is one of the best parts of the site as it showcases the products, bandages, with an appropriate background. Against the black the light skin texture causes extreme contrast, which pulls the user through the page.

The navigation is simple, in that it is only vertical. This works because the visuals of the website are very minimalistic and simple and the content layout mirrors this minimalism. The vertical site is broken into panels that either have information or visuals and go back and forth between the two. It also makes sense to be so linear because this is really just an advertisement and so it just gives the viewer what they need to understand.

As I have stated before the minimalism and contrast makes the site really easy to navigate as it just continues down vertically hinting at what the site is about, then explaining the product in text then revealing each bandage, finally showing the bandage on a mans neck in use and explaining the background of the product. Another great and useful tool on the webpage is the fixed buttons that scroll with the user and constantly allow them to purchase the product at any time.

I personally love this site. It’s a great example of how you can have a product website and make it simple so that any possible buyer can navigate it and buy the product. Simplicity and striking design are used together to make a really user friendly site that does what it needs to do.

source: http://sherwoodforlee.com/works/boo-boos/

The site I choose was a proposal for the McWhopper. This website used a lot of earth tones along with the colors of both McDonalds and Burger King. I thought the use of texture on this website is the best I have ever seen on a webpage. To go from one segment to the next all one would have to do is scroll down. However, it felt “glitchy” when scrolling and inconsistent. The site uses a lot of movement and its strongest element being contrast.

I think overall the site does well with the design. The movement through-out the site keeps the users interested. The use of contrast for the type makes it easy to read and relays a clear message. They use a good use of imagery, type and video to convey a number of different elements for the same message.

I chose to write about the single-page graphic novel, ‘The Boat’ by Nam Le, which can be found at this link: http://www.sbs.com.au/theboat/ and covers 6 breathtaking chapters. ‘The Boat’ page blends beautiful ink and brush illustrations, haunting audio, and an impactful story with smooth and emblematic animations. The painted black and white texture of the page gives it a “storybook” feeling which is appropriate for the subject, and the watercolor is reminiscent of the water within the story. In chapter 2, a pale red-orange color is used with flowers and feathers, to imply a calm point in the storyline, but otherwise the page uses a monochromatic palette, implying the solemnity of the story. The page uses a top to bottom scroll, which is indicated by an arrow and the word “scroll” at the start of the page. There is also an auto scroll feature, which allows the viewer to be completely submerged in the experience. The visuals also tilt and move slightly with the movement of the mouse. There is a side panel, which allows you to click through the different chapters, as well. While scrolling, panels of illustration tilt alongside text, mimicking the movement of the water. The layout is mostly panels with layered illustrations and text, appearing and disappearing at certain points in the story. The panels move forward, shake, and sway while the viewer scrolls through the narrative. The panels and illustration style essentially make this page an interactive digital graphic novel. Speech bubbles will appear when the viewer scrolls to that point, once again creating fluidity and clarity. The background is also an interesting element to the page, and fades in and out of animated illustrations. The text and imagery flow well together and make the storyline and events captivating and easy to understand. Overall, I think the site’s design is exceptionally well done. I find this website to be especially inspiring and uniquely done. This is a unique concept that truly utilizes the one page design. ‘The Boat’ digitalizes a printed graphic novel, meanwhile still lending an experience to the viewer. The movement of the page, with wonderfully done paintings intermingling alongside the narrative, is effortless and mesmerizing.

 

The single page website that I have chosen to analyze is deadfiesta.com. I came across this particular website through onepagelove.com and noticed that it was given the honor of ‘most loved’ on their site. I personally wanted to view a single page website that was known for being well thought out and uniquely designed, therefore this site was the right fit. When I opened the web page, the first thing I noticed where the bold, warm colors. The use of royal blue and bold orange helped clarify what the website was going to be about before even looking at their center graphic. The nicely used colors within their illustration help draw the eye to the main focus, which is “The Multicultural Day of the Dead Festival 2015”. Immediately below that is the date of the festival, October 24^th, 2015, and the area the festival will be held, Grand Island, NE. This information is the most vital to anyone interested in attending, and the web designers placed it perfectly on the page with a good amount of emphasis. They added subtle formal textures bordering the graphic, but it does not overpower their message. Instead, it gives the feeling of traditional patterns which ties into the tradition of the Day of the Dead festival. When navigating through this site, one simply scrolls down revealing many facts and answered questions about the festival. Each section is broken up by a bold color change, along with different added illustrations that help bring the whole site together. For example, the section promoting the “Dead Fiesta Dance” shows a well drawn graphic of the classic sugar skull performing music. It also gives an appropriate amount of information one would need to learn about it, and how to register for the event. Each section of text is fully centered on the page, and is alight with everything else. This allows for a large amount of information to be neatly organized on a downward scrolling page. At the very bottom of the page is their contact information, which I felt was a good place to put it. Those visiting the website are most likely inclined to continue scrolling downward to reveal more information and artwork, and after they’ve gathered that information, they are offered a contact list in case more questions are needed. It also gives the viewer a reason to continue scrolling downward, so they fully experience the website. In my opinion, this is a good example of a one page website that is trying to promote an event. It offers the feeling of a large advertisement, which is a good thing, and gives even more information than a simple poster would be able to contain. They also stuck with strong theme throughout it all, which helped tie it all together.  In my opinion, having a professionally done website can help bring people to the event, it gives people a sense that the event coordinators are serious about what they are doing, and will provide the best experience possible.

The single page website I chose is for a kitchen design company called “Eginstill”. The website first brings up a big picture of a kitchen on the screen. When I attempted to scroll down to see what else this website had to offer, it minimized the picture bringing me to a main page. The website has a very modern look to it, matching the kitchen designs and colors perfectly. There is a guide menu on the left side of the screen which includes contact information and the different kitchen designs the company has created. Each section in the guide menu has it’s own scroll bar and while I was scrolling through the different kitchen designs I noticed the designs labeled on the guide menu were either visible because I was looking at that design on the right side of the screen or they became hidden because I had scrolled past that design. The title of each section was labeled at the top of the page and moved with the rest of the screen as I scrolled through. For each new kitchen design there is a slideshow option for that set. Also as I scroll down the pictures expand to fit the screen. I find the design of this website very eye catching. The site’s design is extremely easy to read and understand the content. The entire website gives off a modern feel and it’s layout and composition is very well put together.

Sonic Blocks

Sonic Blocks is a one page music platform that allows users to create music by dragging different blocks into a centered cube. Each block has a different sound that adds to the music. The blocks are divided into treble, mids, and bass. The site’s layout consists of one center cube surrounded by floating blocks of varying sizes. The user can click each block and drag into the center. The site makes use of cool colors such as blue and purple. the background seems to be made to look like outer space, which adds to the feel of the site. The site is easy to use and understand. Clearly written instructions are shown once the page has finished loading. The music is interesting and there are plenty of possibilities. I ended up making a few beats of my own. Some good. Some bad. I was even able to put every possible block into the center and it sounded pretty good. This site’s design is very user friendly and fun to use. It is a good way to waste time and the designers seem intent on adding new blocks when they can. I plan on returning to this site in the future.

The single page website that I chose to review was done by James Ellington. The designer’s topic discussed the hills and forests of Iwate, Northern Japan. The first thing I encountered entering the site was some information about what the site had to do with. The designer clearly stated that he took a trip to Iwate and was inspired by the landscape and wanted to create a page that informed others of its beauty. To navigate to the next concept of the page, al I had to do was scroll down and I was greeted by new background noise and footage of the forests. He had “Inspiring Soundscapes” as his largest text, which let me know that that is what this part of the page was going to talk about. Beneath the large text he talked about what you would hear while walking through the forests and the background noise he added made it fee like I was there, which I thought was very creative. To get to the next segment of the website, all I had to do was scroll down again. I was greeted by new footage again and new large text that said “Motion Into Life.” The footage was of a running stream and the background noise parralled the footage accurately. The text beneath the large text was there, again to explain this segment. When I scrolled down again, to find another segment, there was no footage; instead a simple picture of the tops of trees. However there was new background noise and more large text to explain the page. The text read: “Sound x Motion x Experience.” The text underneath, or the text that has been used to explain each pages concept, did not make sense to me for this part. It didn’t have much to do with his experience; it simply stated that he was leaving Iwate that night and would not be returning. My final scroll led me to a short biography of the designer with a picture in the background that matched the footage that I was greeted with one the opening page.

Overall, I think this website was laid out very well. Everything was consistent and I didn’t have to do any thinking as far as navigating the page went. The different segments of the website were unified by similar text, sound, and imagery which created a nice even flow. The images and footage he chose to have on each segment worked well together because they all had a similar color palette, letting me know that this was indeed one website. There wasn’t much texture in this website as far as the text went because everything was black and white with a sans serif font. However, there was still texture and this could be found in all of his different footage that he chose to add. I think he made the text so plain so that it didn’t take away from the pictures. It was clear to me that his intentions were to make his viewers feel as if they were actually in the forest of Iwate and I think he was successful in that aspect. I think the designer did an excellent job on this single page site.