Examples of Layout, Responsive Sites & Latin Cuisine
Case Study 1 – JUNGSIK
Visually, this site is wonderful. There is an overall design concept to the crystal clear photography - each dish correlates to a design pattern that relates to the name and logo of the restaurant.
Everything is centered and symmetrical, which allows for the edges to grow as needed, with fixed social media and minimal buttons. This allows the site to feel polished and minimal.
The inline ul/li menu allows user a clear view of what all the site has to offer without navigating dropdowns. I also appreciate that this visually fits within the diamond made by the dish photo below.
The menu follows a similar structure to the main site menu, although it operates on two levels. There is a secondary internal menu navigation that will display the sub menus (Choice Menu, Tasting, Menu, Wine List). And below that the actual menu content is displayed in five columns, in both English and Korean.
This site has a particularly polished approach to its visit/location page, providing a custom zoomed image of a street map. While aesthetically pleasing, this does loose some of the utilitarian functionality of having a Google Maps plug-in that would allow users to have a broader understanding of the restaurant's location in the area.
My favorite feature of this site is the fixed nav menu. Because Whitman's is mostly one long scrolling page, a fixed nav makes perfect sense. While at first the menu seems clean, but pretty boring up there, the menu has a really wonderful transition between this blue background and a lighter background as you scroll below. The menu essentially has a subtle animation and changes color based on the scroll position transition.
Whitman's has a two column menu that can handle a lot of content, which might be a possible avenue for my Barcelona site that has easily over 100 items. The key to success with this approach is to have very bold markers - as evidenced here with Whitman's badge icon.
I really appreciate Whitman's responsive layout. The 2 column menu easily compresses to a 1 column - and in truth, I actually really like the sleekness of this view more than the 2 column. I think the color values were too similar to pull off a clear distinction of menu items from background. Here in this more intimate view that seems to matter a bit less to me.
The location and about us section also looks particularly nice when the site is compresses - even the Google Maps plug-in shrinks, although it does not always align with Whitman's in the center within the map frame.
Rather than taking a sidebar or one long inline menu, Bocadillos has sort of compromised by stacking two inline menus on top of eachother. I appreciate the central box with the most critical location and contact info right up front so users don't have to navigate or scroll to a footer to find that information.
This site is also responsive, but I think that it's menu is less successful. This drop down is accordian style, which ends up taking up almost the entire phone screen because there are so many options to choose from. Perhaps a hidden menu that can appear and disappear would have been better suited?
This site has very asymmetrical and unusual layout elements combined with hand-drawn elements that, combined, make it feel very fun and personal - expressing the atmosphere and brand visually. You'll notice on the homepage the crooked buttons are definitley a part of this style.
While I think these animations/scripts are beyond the focus of our redesign, I was intrigued by how Benito's Hat displayed their menu. Each categorey is an illustration, that when rolled over, expands to reveal text and displaces from it's original position. This is an interesting take on the accordian/ revealing navigation, while still allowing users to view the other categories.
Something I hadn't seen before in my reseach was a very simple image cycle of reviews with star ratings. This is a nice personal touch that could probably easily be translated to a live twitter feed to provide a social component.
True to form, the Benito's Hat map is the most unique of them all - providing a key of a different hat for each location. this wacky sense of humor totally fits the site and is functional as well.
Something that I am very concerned about for my site is the enormous menu. I think Whitman's is a great example of how to deal with a large menu and condensing it into a single column, clean scrolling menu with strong dividing sections.
Because the menu is so large, I'm unsure if a single scrolling page would be the best solution. If users selece the menu button, they will have miles and miles to scroll before reaching the next section without using a fixed nav.
Therefore, a visual compromise might be something like combining the approaches of JUNSIK and Whitman's: to have a clean inline fixed navigation, with a set of columns for the menu on a separate page that can fluidly compress to one column in mobile mode.
There were a number of subtle features from these cases studies as well as others I saw that I may want to incorporate, such as:
- social media or ratings rotating banner images
- get directions link to Google Maps routes
- Google Maps scaling plug-in
- fixed menus that change color based on scroll position
- large, clear food photography
- transitions between pages, such as one page "revealing" in an upwards motion a subsequent page beneath
- a side-column menu with a large photo div to the right with additional info
In addition, I will also work towards building upon Barcelona's existing brand based on their atmosphere, and hopefully finding time to resdesign their truly terrible Papyrus logo.