Ames' syllabi

The two site restaurants I would like to talk about are Bravo Franco and No. 9 Park. The strong points of each site are very contrasting between each other. I visually enjoy No. 9 Parks website design and its over all feel of its design in an artistic way, but navigation and structure wise I feel like Bravo Franco has a better site. With Bravo Franco it is much more easier to navigate what you want fast and easy. The bigger sizes they use is easier for us to locate what we are looking for without much effort. Too much of the same size and like colors loses us with what information is important like I feel when I am on No. 9 Park restaurants site. No. 9  Park’s site does not have enough contrast between all of its elements to navigate as easy in Bravo Franco. This causes us to overlook the navigation we need to explore.

No. 9 Park’s site  is relatively static and not balanced based on the amount color-choices and image at the top of the home page. While navigating through this website, the only thing that changes is the top-right div that houses an image and some text. While this makes navigation easy to examine, the sites balance remains poor. There is plenty of black in the background, and the div appears floating because it has a lighter value. This value is sitting on the right side of the page, so I do not look at the bottom-left of the site at all.

Like before, the only content that changes are text and images on different pages; the site is unified because of its static approach to displaying content. Every page has black, gray, a splash of the accent colors and similar footer and sidebar content. The emphasis is drawn on the new text on each page. Where there is a stark contrast between the background and div containing the image and text, there is an emphasis on what the audience should look at. The layout is lacking any differentiation. There are two columns, one for navigation and another for images. There is a footer at the bottom with some more information on the company, reservations, photography credit and site design.

The site is identified by the logo at the top left corner, something that is found in many sites created today. The user knows they are No. 9 Park’s site because of the logo and consistent color scheme carried throughout. This identification serves as a primary indicator of current page viewing and a home button to bring the user back from the rabbit hole of links on this site. As previously stated, the logo is a primary way to go back home. There are no breadcrumbs on this site, so an additional home button is not found. The browser’s back and forward buttons are simple ways to get back, but there is no way back home other than clicking the logo.

There is no option to search on this site. I looked for search bar and came up with nil; however, there is a small site map located in the footer and a menu of pages along the side of the page. This site has some ancillary pages to describe how-to’s and other information you may need when visiting the restaurant. Sections are divided by layout and column work delegated by the web designer.

 

Primanti’s, in relation to No. 9 Park’s website, has more balance, unity and emphasis because of the division of content, images and colors used, typography and visual interest. To start, balance is even because Primanti’s uses right and left justification/float of text to express balance. The cover image has left alignment of text, while the navigation buttons are right floated. There is balance when scrolling down the page because of the dark background, imagery that copies the style of neon signs, chunked segments in terms of divs and analogous colors. This site is unified because the navigation bar and footer match on each page, as they should. Textures are implemented across the board to give a feeling of unification, especially when used more than once. Fonts are consistent and imagery feels the same on different pages.

As previously stated, emphasis is placed on neon sign skeuomorphism found throughout the site. This draws in the eye to the food or images that are near these icons. Every page, other than the home page, follows the unification of explaining the page with one of these icons that have a great amount of emphasis due to size and color. Layout consists of horizontal divisions with differing backgrounds and emphasis on different sections of the website. It works well to show an image for each page; this image describes what is going on before the user scrolls.

Primanti’s logo is based in the top left corner and provides a way to identify what site the user is on and also a way to go back home by clicking on it. As said before, the logo is a great way to go back home. As with No. 9, the information architecture is hierarchical and does not require a breadcrumb, because most pages are only one page deep.

Like No. 9, there is no dedicated search bar, but a small site map at the bottom. These utilities are found in the footer along with the site map. There are different sections in the site that are accessed from the navigation bar.

Primanti’s’ draws my attention because it has bold, big icons, imagery, dynamism and similar typography throughout the site. The attention to detail and interactivity are more fun and make me want to use the site longer and find more information on it. Although I did not read much, the imagery gave me the idea of where I was and what I was doing.

 

No. 9 Park (http://no9park.com/)

Primanti Bros. (https://www.primantibros.com/)

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.

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.

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

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.

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.