Category: Site Review

When designing a website is it key to have clear, simple, and consistent navigation. The user looks for tabs and navigation the way one uses the hanging signs in a grocery or hardware store to find their way to what they are searching for. The more obvious the signs are the better. The ability to easily navigate ones way through a website will hold regard to how successful it is. From a designers point of view you want to avoid frustrating the user, once frustrated you have lost them and there for your site serves them no purpose. The use of balance, unity, emphasis and a good layout are key elements to create a successful website. Two sites I examined for use of these elements were Burgatoybar.com and Frantoary.com. Both sites exemplified use of these elements however I found Burgatory’s site to be more functional then Franktuary’s site.

Burgatory’s site being the more successful of the two is where we will start. The site its self is very interactive and has a lot of information displayed in a very organized and easy to navigate arrangement. The fundamental rule to follow is to have repetition with the site ID on every page the site may take you. This should remain consistent with the navigation. Both the Burgatory logo and site ID within the navigation function as home buttons and also remain stationary through out the sites navigation. The logo is set in the upper left hand corner and the navigation opposite of that. There is the use of balance and unity. They also both act as a means to get back to the home page, which is very critical if the user begins to feel lost. When exploring the navigation bar, first you have five initial tabs, taking you to their menu, products and other obvious reason you might by at the site. The most complicated the site navigation bar gets is the ten secondary links under the “hungry” tab, which take you to each section of their menu. The user may get stuck inside the menus tabs but not lost, never once will they think they are at a new page or not know how to move forward on the site. All elements mentioned are utilized in this site, balance, unity, emphases and a good layout. Which awards it the more successful. Now lets look at why Franktuary’s website and why it was not as successful in it execution of design.

Frantuary’s site is quite simple at first glance, I would argue that Burgatoy’s site is a bit more to take in but it is still much easier to navigate. At first glance, you notice the navigation bar that is placed obviously at the top of the page with the Frantuary logo right bellow. Both are thoughtfully placed and also functional. There is a sense of balance since both are conveniently placed at the top of the page where the eye tends to lazily rest itself. However once a location is chosen a second navigation bar is displayed in the body of the content. Which can cause confusion with the user. I feel it offers more distracting purpose then functional, something I would personally leave out. The second aspect I found to be misleading and confusing was the photo page. Once the viewer had checked out all previous tabs they are now at the photo tab. Once this tab is selected they are presented thumbnail pictures of dishes Frantuary offers. On one occasion of one of these thumbnail images being selected, it takes the user to their instagram page. This is where the user can get lost and move on. So much for the prospective diner booking a reservation they are now at Burgatory’s site buying a gift card. The only redeeming quality of this site to over come this is that fact that has a search bar. The “all mighty” search bar is a key element which allows the user the power to take the site where they want to go with out any noise.

After reading the assigned section, I can see how both sites unitize the fundamentals of successful navigation. I personally feel that Burgatory executed their layout in a much more efficient manor with a lot more information.

For my review of restaurant sites, I chose to look at Six Penn Kitchen and Kyoshi Bistro. At first glance, both of these sites look clean and have a neutral, non-distracting background behind the content. To start, Six Penn Kitchen is a very crisp site. Everything is balanced, clean, and ordered. Everything is contained within the confines of the banner across the top, and the navigation is continuous throughout the site. Emphasis is used through the use of important items being placed in the navigation bar or having a bright green color for the image to pull attention to these items. The site is very unified through the color schemes, and works well through the continuous navigation bar. Overall, the layout of the site is effective, and all the elements I would like to see, from the navigation, to the menu, even to reservations is included online. I also really like that they have galleries of the different food items and other important info.

 

For Kyoshi, The site is much simpler, and the layout is not as visually pleasing. As I can remember, the site was actually a bit different the last time I was on, which makes me think they are going through changes, although it would be more effective to push a new site after the updates are finished. For this site, the layout is a bit sloppy, and not very interesting. The first thing that I notice is that the size of the page changes for each tab. The navigation stays throughout, and there are always images that are found at the top of the page, but the balance of the site is not there, at least for the home page.  The page is very heavy on the left, with hours and other information on the right, but all of the other pages are centered and balanced better. Unity is also a bit off, as the background color changes throughout, and the color scheme is a bit too wide. The site uses pink as an emphasis color, but it is a bit too much and does not work great overall. As a whole, I feel that the layout of the site is not up to par.

 

In total, both sites have some basic principles that are important for sites. As Krug states, navigation is a big part of a site, as we need to be able to get to the pages we need. Both sites follow navigation, and make it easy to be able to navigate the pages. Both sites have page names that change based on the page you’re on, and also identify the restaurant. Neither site has a search option, which is not very important for a restaurant, and also do not have bread crumbs to show where you have been because there is no need to go multiple pages in. The navigation bar cuts down on the issue and allows the user to get to any page needed through the page already being viewed. Overall, the Six Penn Kitchen is a stronger site, and works as a whole much better than Kyoshi, but Kyoshi also has really strong elements that could be fixed and worked better. The pictures used for Six Penn Kitchen as well as the colors and the overall layout are more effective and more captivating than Kyoshi.

The two local restaurants being compared are Bravo and Panera. When first entering Bravo’s website, it is noted that the color of their website is easy on the eyes and not too dark or too light. The links at the top of the page are straight forward and easy to navigate and find anything. Bravo’s number and location is easily seen at the top of the page, with the hours at the bottom of the page so that users don’t have to do extra clicking to find out. Bravo’s front main page doesn’t contain a lot of wording and is spacious instead of cluttered like most other websites. Their page is organized, doesn’t have a large amount of useless text, and doesn’t require myself to do extra thinking in order to find information.

Panera’s main front page is also easy on the eyes in terms of color and contrast, using earthly tones like Bravo does. Their links have a drop down box that expands to more links that fit into the category of the main link. Their website requires thinking when finding certain information. For example, I tried to look up their hours but I still have yet to see a link for it on their front page. I had to place my mouse on locations at the top of the page, type in my zip code, and then it shows a list of stores, their distance, hours, and more information. This is a great feature, but some users may feel they have to think more in order to figure it out. Panera has a good amount of wording on their main page, with appetizing images of their food and links to important information that users may want to know about.

Between Bravo’s website and Panera’s website, Bravo’s website was easier to navigate and easier to find information for. Bravo’s website is clean, organized, not cluttered and overwhelming, and it is visually appealing to my eyes.

I decided to choose Bravo Franco Ristorante and Six Penn Kitchen for this review.  I thought that the top bar navigation on both sites were extremely similar and I liked both of them.  The nav bars incorporated both their logos and and offer everything I knew I was looking for.  I also liked that Six Penn Kitchen had a sub nav bar once you clicked menu.  Bravo Franco Ristorante had two separate pages for their lunch and dinner menus.  I liked that Six Penn showed you what menu you were on and didn’t take away the option of going to different menus on the second nav bar.  Bravo Franco took you to only one menu then you had to scroll the whole way down to bottom of the page to pick other menu types.

I liked the background image on Bravo Franco’s page and the white container that held all the information.  The red and black text on white stood out and I didn’t really struggle to read them.  I would have liked to see the menu items be centered on the page because it looks like there is a lot of open space to the right of all the text.  With Six Penn all text is center and uses the space of the page very well.  The dotted likes work to break up the sections of the specific menus.

I feel like Six Penn’s website is better than Bravo Franco’s because Six Penn is just a more visual site.  The sites are very similar in what they offer on the nav bar and effectiveness of finding what I need.  Bravo Franco’s lacks on the simplistic look of the page.  Bravo Franco has a very text heavy website where as Six Penn uses more pictures effectively.  They show their interior and exterior to their advantage as well as having galleries so that you can see and understand the atmosphere there.  Bravo Franco’s style is just not up to par with Six Penn in utilizing images and their well balanced division of their page.  I think that although content is pretty similar, Six Penn has the edgy due to style and organization of their contant

In the book  “Don’t Make Me Think” Steve Krug discusses the principles of web page navigation really nicely.  He goes on to compare the process of navigating a web page to navigating through a store. While browsing any number of web sites I’ve never stopped and realized how similar the two processes are. When shopping the consumer uses signs to find the right department, isle, and product. A well constructed web page operates in much the same way. I recently reviewed and compared two sites: bravofranco.com and no9park.com. These two web pages are very nicely designed as they are both easy to use. I personally liked the no9park.com site more than bravofranco.com for a number of reasons.

Firstly when entering a web page it is key for the homepage to snag the user and keep them from leaving. If the homepage suffers in functionality or ease-of-use the user will quickly hit the back button. Bravofranco.com’s homepage lacked in its visual appearance due to the poor photos that are right in the middle of the homepage. The site has three large, tacky, and poorly light photos that give the user a sense of the restaurants informality and a lack of self respect. Other than having poor photo elements, the site is nicely balanced and all pages are brought together nicely. The pages are all properly tagged and framed to avoid user confusion. The pages emphasis on the page also left a lot to be desired. I didn’t get a good sense of where the homepage was trying to direct me. Should I check out the menu, or click on the directions button?

No9park.com is my favorite site because of how simple it is for me to navigate through the sites pages. The navigation bar on the right side gives me a firm idea of where I am located within the site. The web page also has a very nice visual element, the photos and graphic design is sleek and professional. Photos of the food looks elegant and intriguing, making the user want more eye candy. Information about the restaurant is well organized and easy to access. The site has complete unity as the side navigation bar locks all the pages together. This site simply has a very nice and easy to use layout. The reason I feel that no9park.com is nicer than bravofranco.com is due to how little thinking I had to do while using the site. It felt like an effortless experience to me, which will bring me back to the site.

The two websites I chose to use were the No. 9 Park and Bravo Franco Ristorante. What I noticed first about both sites were the photographs shown on the homepage that provide the user with a certain vibe about the restaurant; such as an elegant dining experience or a formal, very professional setting to it. However, when dealing with these photographs I feel that the No.9 Park site is more successful in their use of imagery due to the quality of the photos, along with the changing slideshow of the food, as well as chefs, and the dining place settings; whereas the Bravo Franco site gives only three different photos which do not give the viewer that good of a variation. As for the layout stylistic choices, I feel that the sections for each site are both listed in an organized way. But if I would have to choose one that is more legible, it would have to be the Bravo Franco layout because, unlike No. 9 Park, their sections are listed at the top of the webpage (where most are on most websites) and I personally feel that it is much easier to read across than vertically, especially if a title of the section is too long to fit on one line, such as “Monthly Cocktail Classes.” When looking at unity throughout each webpage, I think that Bravo Franco appears to be much stronger and I feel that it strongly relies on the color scheme chosen. The colors are really consistent throughout the different pages of the site and it even shows within their pictures too. The colors of a deep brown and a beige/tan are used, accompanied by white, are visible all over the pages. With this strong contrast, it allows all text to be very legible. Another thing I noted about the text was that here it is at a much larger size and with a nicer font than that of No. 9 Park. On each page for each of the sections on No.9 Park, the text is very small and in a standard font, and it is also used for the section titles which make the look of it seem a little plain and simple. However, plain and simple doesn’t have to be a bad thing. One thing that brought out some emphasis to each page on the Bravo Franco site was that each page has a quote from a worker or customer on the side about the food or their dining experience which in-turn make the atmosphere more personal and friendly. Overall, I think that both websites have their pros and cons, but if I had to choose one that was more effective, it would have to be Bravo Franco due to their legibility, personalization, and styles/theme throughout the pages provided.

Due to their contrasting styles I chose to write my review 3 on Burgatory and Bravo Franco’s.

The first site I looked at was Buratory’s site. When I first saw it my reaction was that of a very playful less serious company. I get this impression because of the layout of the page and playful working. While it is very balanced using what looks to be a three- four column system. The content is not symmetrically balanced, as I would see in Franco’s (a more up scale restaurant). But it uses this to its advantage drawing some attention away from the over whelming content rich left side to the more minimalistic right side. This right side contains information such as milk shake menu, Helluva burger, and the log which is a portal to the home page. The unity of the page is mostly in the colors and textures used on the page. The perfect accents of red mixed with earth tones are used perfectly to make some parts stand out while letting others slip into the background. As stated in the “Don’t make me think book” they use different size fonts to form a hierarchy of information. More important information is larger while less important information is generally towards the bottom and smaller.

The second site I looked at was Bravo Franco’s which looked to be a very clean site with everything lining up in it three column block style site. Side from the pictures the site only uses about 3 colors, which I think, add to the unity of the site. It is a very symmetrically balanced site with nothing that might draw your eye away from the important information. Similar to the Burgatory site it also has a hierarchy of text sized with their company name front and center and in large font, which stands out clearly. The site also has a lot of containers; at no point other than the phone number and the address at the top leave the confinements of the box which most of the information lives.

Both of these sites have very good navigation system. Everything is laid out for easy of use and maximum utility. Each has a well thought out nav bar at the top or on the side of the content. Though I think the Bravo Franco’s nav system is less convoluted and to the point( partly because of the wording). Each also has clear indicators on what can be or cant be selected for more information. Lastly each has a home button that make navigating the site a pleasurable experience. At no time was I frustrated or confused where to go. Each site has its pros and cons but over all I think both site are well designed in their respective styles.

Six Penn:

From the homepage the website features a single columned, multiple row layout centered beneath a directory banner which holds links to the key pages of the site, along with the name of the restaurant in the center, and their logo on the far left side, both of which function as links back to the homepage. The first link is for their “Menus”, which like all the links when clicked turns green in order to let the user know where they’re at on the site; beneath the banner is a list of their different menus (starting off on their more sought after, dinner) which like the banner above is centered on the page and remains highlighted to let one know what they’re looking at. Beneath the subdirectory are the hours that each menu is served, so there’s no confusion as to when the restaurant switches over to the next meal, and a stacked list of all the available options, organized by each course. The site continues to keep the same clean format of keeping each section neatly organized and centered beneath the top banner, subtlety keeping track of the location by highlighting the section, without any confusion of what each link will bring. It’s very straightforward, and easy to navigate, making it easy to find all the information you could want to know about the establishment in just a few clicks.

 

Butcher and the Rye:

The website for the Butcher And The Rye restaurant is a single paged site stylized in a very contemporary and rustic single column fashion. The top of the page reads as a billboard for the site, listing the different sections that the page will cover; however, when you scroll over the different listings they turn red, signaling a link which takes you down to that section to avoid the massive amount of scrolling it would take to reach the bottom, and engaging an overhead directory which will take the user to each section to continue to make the page faster and easier to navigate. Though if one did choose to scroll down the whole page they’d be treated to a variety of bold type treatments telling what the restaurant has to offer, such as the enormous variety of bourbon they have stocked, and an illustrated chart of all the different beefs one could have, all which act as a header for the section right below it. The site is simple and transitions well from one part to another, keeping itself contained amongst each frame. Though there isn’t any color indicator in the header to keep one sure of where they’re at, each section is boldly labeled and accompanied by a complimenting image which easily tells where one’s at, unless they’re completely ignorant to the design.

 

Most Effective:

While each site is simple and straightforward to use, it’s felt that the website for Six Penn Kitchen is more effective. Though it features more pages, and less graphic elements which embellish the atmosphere of the restaurant it has a better sense of contrast and placement that keeps the user sure of where they’re at and where they’re going. The color scheme for the Butcher And The Rye is consisted of a nearly black background with gray type over, which though sets a mood, is also difficult to read in some places. Though it’s easy to discover, it’s not obvious that the listings in the top header are actually links to the different sections, and they aren’t organized in the same way that they are on the rest of the page, or the header that appears after it’s out of sight. Even though it’s a simple graphic organizer meant for quick navigation for the site, it’s a tad peeving that things aren’t listed in the right order. The site for Six Penn is right to the point, what you click is what you get without the feeling that you’re skipping over something that you might have wanted to see first. All of the headings and important information are highlighted in green and bolded if not bigger than the accompanying text, which helps pops out for the dark gray background for quick and painless navigation through each page.

The two sites I choose to compare were Bravo Franco and Six Penn Kitchen. I think many people will agree with me when I say that Six Penn Kitchen was a really bad website example. Their use of layout felt empty and yet cluttered. The didn’t use the entire space for the layout of the menu. It kind of looks like they clumped everything together. Bravo Franco’s layout was well designed due to their usage of space and how content was set up compared to where on the menu, the pictures were placed. I didn’t really like the colors used in Six Penn Kitchen. The black, gray, and lime green really didn’t work with grabbing the viewer’s attention. The menu itself felt dark and the text was hard to read because it was small and some of the text was lime green placed on a black background. Those two colors do not mesh well together and I would highly recommend choosing different colors. Bravo Franco colors felt really uplifting. They were of lighter colors and the text was a readable size. The menu itself has a sense of harmony to it and you can feel that everything is unified because the entire menu has a sense of elegance to it. The colors mesh well together. The pictures are appealing. In my opinion, I would say, Bravo Franco’s website was just more visual appealing. And being as though this website is for a restaurant, visual appeal should have been the main focus when creating the website itself. The website for restaurants reflect how the food would look and how the place itself would look. It’s the complete opposite with Six Penn Kitchen. Six Penn Kitchen itself feels unbalanced because it’s completely clumped together and then it just has negative space out on the sides. Six Penn Kitchen lacked visual appeal and harmony.

The single page website I chose to do a review for is the Look Book, for Melinda F. This web site utilizes design elements such a color and geometric shapes to create and identify multiply pages on a single page site. Although most design elements on this page work a few were a bit distracting, over all I found this web site to be very functional and easy to navigate.

As you enter the site, you are welcomed with a large header that is emphasized with a large rectangular, cool blue/aqua gradient with large crisp black font to display the title. The viewer instantly knows where they are; this is a “Look Book” and the month and year so you know it is current. Located underneath what the page is you are now informed for who is page is made. As your eyes fall under the title you see the logo and then the company name. This site can be easily recognized what it is and who is for. The cool colors used in the gradient are set on top of a white background with small thin geometric shape out lines. These shapes are colored with the same saturation as the gradient, the use of the same saturation helps unify the patterned background with the large solid geometric shapes on top. The shapes in the background pattern are small enough is size as to not battle with the fore ground allowing this combination to function together.

After taking in where you are and who the company is, you have now checked out the clean layout and want to continue on. With out a thought you know to scroll. Right under the company logo and name in small italic text, are the words scroll with a thin horizontal line leading you down the page. The combination of the text and the horizontal line effortlessly help you navigate through the page. You are directed to the next section of the layout with out any noise in between.

As you scroll, the company name disappears but to logo remains; this helps work as an identifier to let you know you are on the same page. The patterned background, color scheme and font hierarchy also remain the same to help add to the unity of the page. You are now looking at the products featured in this months look book. The title of the item is in large colorful text and then small sans serif font, in an unsaturated grey color for the description. This combination of a warm and cool color helps the eye to differentiate between the two elements, where as two warm colors may cause the eye to struggle to figure out what to look at first. After the gray text for the description there is navigation button that is out line in another geometric shape to distinguish the link from the other text that will take you to the full site in order to purchase this item, you know this because it is label “shop”. The use of repetition of the same layout makes this page easy to read. As you scroll down the page the placement of the text and images remain consistent allowing the eye to do less work.

After viewing all the products there is now a new section on the layout, this si labeled Deign, using the same font color and font family as the header. The design section future descripts the products as a whole; the main elements are in a large front size and also displayed in color. Even if the viewer is scrolling quickly down the page they still will catch the main words of description and will perhaps stop to read more. If not, the main descriptive words are large enough that it takes a second to read and you scroll through.

Now the viewer has reached the footer of the page, we know this because it is a flipped design of the top header. Same cool blue/aqua gradient and same crisp black text, only now the text reads, Shop. Incase you missed the smaller link button to take you to the full site after each product description; here is the viewers second chance to be navigated to the full site. The use of repetition ensures easy navigation to the full site, and hopefully entices the consumer to shop there.

My review of a one page Parabellum Studio http://www.inparabellum.com/ . It is a website for a fashion company that uses multimedia to show there work. The site starts off really crisp and clean and the black text on a white background makes it really easy for me to see what I need to see. The hierarchy of text makes everything very easy to understand and that continues throughout the page. What I thought was really cool when I first opened up the page was that there are randomized lines that go everywhere your mouse goes.  I thought it was a really neat idea and different.  The lines did not distract or take away from the text but I did wish it continued in the white parts of the rest of the site.

As I continues to scroll down on the page I notice that the site begins to bring red and grey into the color scheme. The red and grey bring great contrast to the site and continues the crisp look. I don’t really understand the crumpled paper but the image looks well made and brings my attention to the two pictures off to the side. The text takes a back seat due to the red image standing out but is still not hard to find or read. Three more lines show up that spread apart as you continue to scroll down the page. It is not really the random patterns I still want but they add a nice look to a simplistic page.

Scrolling down more I notice the site will be alternating between image on the left, text on the right and image on the right and text on the left. This makes the site a little less repetitive. Along with switching the side of the text and image, it also rotates the red and grey between the image and background. The site continues the idea of the lines that spread when you scroll down more.

After scrolling two more images and getting a quick summery off all the aspects of Parabellum Studios, I come across text on the right that says people. On the left next to the text is nine pictures of people in an angled style. When you put your mouse over a picture it tells you who they are and what they do but it doesn’t tell you anything else about the people that work for Parabellum Studios. You can click the two arrows below the text to navigate through the 20 employees they have listed.

As you scroll down further you have your good old contact us then on the very last part on the bottom left they have their location on a google maps. My only problem with the map is that it will not take me to the google maps of there business.  It has the little red dropper like google maps but it takes you nowhere which was disappointing.

As a whole the site is really crisp and clean with color contrast. It is very easy to read and understand what the Studio does because it does not clutter the page at all, everything is very simple and your eyes just flow down the page as you scroll. The site very successful and I truly enjoyed the look and flow of it the first time I looked through it. The second time I started to nit pick and wanted things like more randomized lines and more info about the people working for the studio and also the map. The design works because of how simple the creator made it, they kept the colors simple and have high contrast, the images aren’t busy and let your eye flow from image to text. I the only thing the site is missing is a little more interaction with its graphic images, other than that it is a very strong and successful one page website.

I am reviewing the ste http://jpg.codes. It makes use of changing the user’s appearance through selectable background colors based on hex. To access these colors, the user must select the hamburger icon in the top left corner. One can find an easier color on the eye, however, there is no texture associated with this site.

The site could operate nicely as a single page with scrolling, but chooses to provide a new page to look at work, and even redirect to pages that have been created by the author. Scrolling is the preferred navigation; the user can scroll up and down. Big buttons, icons, circular portfolio images as buttons, and humor make the site easy to use, understand and ultimately enjoy.

The site could use work because there is little content on the homepage, which could be expanded to accompany portfolio information. The button to change background colors is interesting, but ultimately unnecessary. There should be more than one way to contact the author than a button that says “Holla atcha bwoy.”