hiddencityphila.org

I wanted to go out with a bang (ha....ha) so I searched for some of the most meaningful, interesting companies/groups that maintained a website (as opposed to just a coolest website). And this was my best find. Discover the city that you have never known.

navigation. At first there is only one major group of "navigation" that will take you to different places on the site. That is the main navigation shown above. Upon rollover, the look of the links change (blue, and then the cute little arrow to the left of the link) and secondary navigation links are shown whenever appropriate. Once these links are clicked on, the look of the link changes in a sense that the roll over state becomes permanent (that is until you click different links :P); this lets you know where you are in the site (of course the content is very predictable from the main links...so if you should also be able to tell where you are from deducing...). The hierarchy of the navigation system is denoted by the slight font size difference and the dotted line that connects the secondary navigation BELOW the main navigation. All the secondary navigation links are available no matter where you are as long as you hover over the main link they are attached to, and the main navigation remains stationary throughout the entire site. You can go back to the "homepage" which is the map page by either clicking on map or the hidden city logo.

architecture. The site appears to be relatively deep (more than 20), and I don't think the site is actually lacking pages or is in need of more pages. The architecture is flat in a sense that every page of the website is accessible from the homepage (main and then secondary nav).

content/typography. Throughout the site, there is an appropriate usage of font size, color, bolding variation to indicate the hierarchy. Because of the nature of the content varying so much from page to page, however, this variation is not applied consistently. I do not have the problem with this inconsistency, though. They make intuitive sense. Alignment, bolding, font sizes, colors were used to make the hierarchy. And the labels are crystal clear. Very predictable.

structure/grid. The grid remains consistent throughout the site (even in calendar, which is actually very impressive). The top navigation stays, and below that the body area changes. The consistency makes for easiness understanding the site, and gathering information really fast. Although my eyes often do get drawn to the hiddencity logo in the peripherals, the body area does a good job of being a focal point of the site.

imagery/symbols. A lot of imagery/symbols of "treking" is used on the site. From the footprints to dotted lines. Photos are stunning (very professional) for each sites, imagery, photos are very appropriate, and I personally don't think there needs to be any more. No symbols that need thoughtful understanding is present.

color palette. Blue, gray, and white. Clean. Treking doesn't have to be dirty, and they made a smart choice to make a cleaner site since the concept of a month long festival is not something easy to understand. The color is strategically used (and the shades of course) to seperate the content hierarchy as well as to provide the visual anchors throughout the site (it doesn't look like it's floating, lopsided, etc.).

site focus. The point of the site is to introduce this new program/festival to the surfers and engage them in finding the hidden city of Philadelphia via participating in the festival, playing the innovative game, and visually enticing them to the secrets to be reveiled about Philly. The site doesn't have search function, but I don't think it is necessary. The most interesting feature on the site for me was the home page where they had google map with places to visit as well as how to get to certain places using the google map directions (this feature is useful when you go to calendar-->click on a site). There is nothing particularly confusing about the site, especially if you read the "about" which is below the map (didn't know at first this part existed becasue the map takes the entirety of my screen). I would move up the about (maybe make a separate page for it) and also have "sites/artists" link in the main navigation so that people can see ALL the sites/artists participating in the festival in a single list. Overall though, a wonderfully innovative site about an innovative project that will certainly be delightful.

chloebyob.com

I've noticed that my website reviews are becoming more "local" as the days go by. Oh well, what can I say, I actually end up spending more times on these random local/small websites since I've been trying to go do more off-line things lately. :D I visited Chloe's website to check out the restaurant before my friend and I went to have a delicious dinner. I really think restaurants should take the website seriously--it really makes or breaks it for quite some people. I went to Chloe DESPITE the website only because my friend insisted that it's one of HIS fav. restaurant. The appetizer was to die for. Lamb? My friend loved it but I didn't think it was worth 24 dollars.

navigation. There is one navigation (so there is only one navigation grouping), and it makes sense. It's the bare basics about the restaurant, and in a sense that they don't clutter up the website with useless information that no one cares about (really no one really cares about how historic their building is...unless they do), I enjoy the simplicity of it. Although there is a rollover state, the look of the links do not change nor is there headline in the body area that tells you where you are. But given that there are only four choices, it will be actually difficult to get lost in the website. Furthermore, the navigation remains stationary (only the body changes), and you can always go back home by clicking on "home."

architecture. Even without the sitemap (but then again, why would you have a sitemap for such a simple site), I can easily tell that the website is not very deep. No more navigation appears as you go deeper into the site, and it goes with the simplicity of the site (in that sense, it is at least consistent).

content/typography. Although they can get away with it because of the simplicity of the site, there is virtually no clear hierarchy in the site. There is usage of different font styles, presumably, different sizes, and some are italicized while some are not, but none of these really relate to each other in a real hierarchical way. I would improve it by having a clear hierarchy through successive intensity of the color usage or the font size change (as opposed to using different font styles...there is not enough text in the website to justify this much variety in font styles, really). As there is no headlines, the prominence or subordination of one information over another is virtually absent from the site, but as mentioned above, the labels of the navigation is plenty clear.

grid/structure. As mentioned above, the grid of the site stays very consistent (basically the right side of the page is the only one that changes), and the website contains within its own scrolling bar to scroll through the text so that the navigation to the left is EXACTLY where it is at all times. I guess this makes for a very easy to navigate website (not that it would have been that much harder if they just had the browser scroll to scroll through their text parts). On any single page, the one item that gets the most attention is the chloe logo on the right hand corner.

iconography/imagery. Other than ONE picture per each page, ther eis the infamous chloe logo, and no other iconography/imagery. It does leave me wanting a little more, but I don't want the site to get overcomplicated for no reason either.

color palette. Red, whitish color (off-white of some kind), that earth color surrounding the logo, and black for the text. They were chosen for no apparent reason. I visited the restaurant, and these are not particularly the color that the restaurant was especially decorated with (these are actually pretty common palettes for an indoor decor).

site focus. The point of the site is to introduce the restaurant and impart the surfers with a basic business information. It does not let you search for soemthing, and the only thing I find useful about the site is the hours of the restaurant (they do keep pretty bizarre hours for a business opertion), but that is also not to say I leave the site totally perplexed and uninterested. It does the job, and I am glad that the resturant managed to put online a website--so many other great ones do not.

brewhaha.com

So related to the coffee shop I discovered below, I thought I would post a site for my favorite coffee shop in Philadelphia. They do have the hands down best espresso and espresso-related drinks even though they could have done a better job with the up-keep.

navigation. Yep, there is only one navigation. It's not even as sophisticated as Cafe Fanny (although fanny was by no means sophisticated compared to some of the other websites), and they have far more actual stores (and presumably more sales/revenue) than Cafe Fanny. It's funny how that works. Anyway, although I hate how clumped they look, the grouping, since there is only one of it, makes sense. It's everything they think you want to know about the coffee shop. Since there is only one, also, there is no hierarchy per se unless we go as far as to say that the order of the items presented indicate some kind of hierarchy. The main navigation is stationary, and appears in every page. Although there is a rollover state (the color of the links gets brighter), there is no after-click state. Because the website has only like 10 pages, it's easy to tell where you are in the site. Once you click on the main link, that is where you are, and there is a headline in the body text that tells you so. You can always go back home by clicking their logo.

architecture. As mentioned previously, the site only contains 10 or so pages; it is not deep. But since you can access every page of the website from home, the website is flat. I think the simplicity of its structure is a good thing for this specific coffee shop because more clutter doesn't seem to be necessary. I would actually make it even flatter and shallower (no pun intended...?).

content/typography. The headline for the page (which tells you where you are, conveniently enough), is in the same stayle (muted color) as the navigational links at the top. Below that, there are, for some pages, usage of headline2, and paragrpahs (css style). There is a weight difference (the top navigation is in all caps...that's super emphasis right there). The labels, although there are many, are pretty clear about the information they will share with you.

grid/structure. Grid is verrrry css/html, and it is, although blocky, consistent across the board. Only body area changes. The consistency makes for the predictable, stress-free surfing. The focal point is the body text not because there is anything particularly visually interesting about the body paragraphs, but becasue the website is information-driven (you are there to get information about the cafe...aren't you?), the fact that the body paragraph presents that is enough of an incentive to pay attention. But yes, there is an undeniable absence of cool graphic elements.

iconography/imagery. They have this drab sephia tone photos and graphic element below it on every page on the right hand corner. I am not amused. They should have more interesting pictures, probably with less sephia (I see enough brown on the website), and get rid of the graphic thing. There is no symbol/iconography used throughout the site, but I don't think the site particuarly needs any.

color palette. Brown, light brown, lighter brown, yellowish brown. BROWN. jesus, I know they are trying to say "coffee" but it really makes the entire site 1. amateure, 2. DRAB. Brown, in its myriad shades, are used to for different text elements (headline 1, 2 paragarphas, navigational links), and they are clearly, and consistently applied to give a cohesive sense of hierarchy. But really, I am not amused.

site focus. The objective of the site is to provide some information about the cool coffee shop they are. Cool the site is not. Not only that, the site feels nothing like the actual store which has high white ceilings, well designed menu boards, and awesome coffee and food. The site does not let you search for something, nor is there anything exciting about the site other than the address and the phone number of the philadealphia locatoin (NO HOURS! UGH.) Since they are not even selling anything, they really failed at making me want to go their coffee shop if it wasn't for the fact that 1. philadelphia somehow notoriously lacks coffee shops worth going to do some decent work 2. their coffee IS actually fantastic. There is nothing confusing about the site; if anything, it is too boring to be confusing.

cafefanny.com

Not to free associate--well, who am I kidding: I am free associating. So after the bear naked, I googled other cool granola sites to see if anything interesting came up. Not only was this site one of the few that came out toward the top, it also had this weird name that rhymes (does it?) Anyway before I start, I wanted to point out MY FAVORITE part about this site. It's most an introduction website for a cafe that actually has a shop in Berkeley, CA. Not only do coffee shops usually not have a cute little website for themselves, but it's often impossibly hard to find their HOURS (which is possibly the most important piece of information other than how delicious their coffee is). They have it NICE and CLEAR on the homepage.
Nice.

navigation. There is only one navigation on the home page (and throughout) and that is the main navigation. Once you click on the link, it changes (the font color changes to orange from beige and the box also comes (secondary navigation) attached to the link. The link also has the box surround it.
The hierachy comes through mostly because of the simplicity. The top navigation, which stays constant in all of their pages, is clearly the most important navigation (well the logo is the bigger, but it IS the logo). The secondary navigation (the links of the secondary navigation changes to match the orange of the top navigation when clicked on) whose color matches the clicked on link) is of a smaller size font, but the small caps make for a nice transition from all small case used for the top navigation. The transition is thoughtful without being slick and I think it comes their cafe vibe pretty well (although of course, I have never been there). And because of the simplicity of the website, the place within the site is pretty clear to tell. You can also go back to the home page any time you want by clicking on "home."

architecture. It doesn't appear to have a deep structure. There are total of about 20 pages, and they are not acessible at first (you do have to clikc on each main navigation link to access that secondary navigation for that category), so in a sense, they are also not flat (structurally).

content/typography. Other than the ones I talked about already, the site keeps a pretty simple css style, where they utilize headlines (bold, bigger font), paragraphs (same color as the headline), links (a little darker yellow than the paragraph/headline). So in a sense, color, font weight, font size were all used to organize the page. And the links are very straightforward; when I clikc on menu, I know I am getting the full menu avaiable at the cafe and that is precisely what I get.

grid/structure. Grid, as mentioned before is pretty consistent where the top navigation has a little secondary navigation box attached to the bottom of it, and the focus is given ot the pictures dedicated for each page and the body text (there is nothing special about the tests but because you clicking to get the information, your eye does seek out the information in the text).

iconography/imagery. Although there is no icon/symbols used anywhere on the site, I do like the cleanliness that comes from the lack of those, and I probably wouln't change it. The photos that changes for every page is nice. I don't think more pictures will be necessary.

color palette. Purple, maroon, red, yellow/beige are basically all the colors. Although I don't know why these are chosen (could be their decor color), these colors speak to each other and work well together. As mentioned before, orange-beige helps with segregating texts, and so do weights/font size.

site focus. As mentioned before the point of the site is introduced the cafe. They do sell some stuff on the side, but they do not appear to be the main point (they do too little marketing to sell the items for someone who has never had their products previously). There's no search button (seems it would be excessive), and there is nothing really confusing about the site. I really wish I was in Berkeley to go to this cafe.

bear naked

It was sitting on my desk, you know a bag of bear naked, and I thought: "why not? i like bears."

Navigation. Possibly as simple as the dog-walking site below, it's simple. There is basically two navigation system on the home page, one is which is primary and the other is secondary (this secondary one, however, disappears if you leave the homepage...forever!)

Considering there is not-always-functioning-well drop down menu (the flash gallery in the front sometimes goes over this), the hierarchy per se, is indicated by first what is ALWAYS present (and those three buttons--get, live, meet--are). The hierarchy is further denoted by the descending font-size. However, confusingly enough there is also a navigation group toward the bottom of the homepage.
These navigation disappears once you get away from the page, but they ARE somewhere in the midst of the main navigation (for instance, theDEN is accessible through live bear naked>join the den) . They sort of act like "news" items on other pages, except they appear (visually) to be far more important to the site than just "news" because other parts of the page is so bare. I don't think it was intentional. The links do not change looks during rollover or after it's clicked on. But with inconsistent headlines, it's also not that easy to tell where you are in the site. Thankfully, though, you can always get back to the site by click on "bear naked," their logo.

Architecture. The site seems to be pretty deep (there's no site map), but more than that, it just looks unorganized (aesthetically they look as if they would be extra organized). It looks flat because with drop-down, fly-out menus, you can presumably get to every page from the homepage...but then again, I started to lose trust in the web-designer.

Content/Typography. As mentioned above, mostly font size is used to indicate levels. They are one of the sites that actually seem to use html css, and they also use headlines and paragraph styles in their body to produce headache-free content. These headlines are highlighted by their color, font size, weight, and capitalization. Not sure if they are particularly bolded...Although I am not sure if it's well organized over all, it is not difficult to guess what is behind each links.

Grid/Structure. Since all the grid you need from homepage is the top navigation, the most important part of the homepage's grid stays. All other pages are laid-out in easy html style, with a focus on the body text (a banner above that is visually most "stricking" though). I think it was easy to build it this way, and of course, it's clean, which is more than what some other sites can say.

Iconography/Imagery. Images of outdoors and bear claws are, for all the downfalls of the site, is the saving grace that makes me want to look through. Really I FEEL HEALTHIER as I browse through. I want to see more and better integrated outdoor pictures, but I wouldn't add any more symbols. I like the simplicity of the claws and I think having more of those cutsie things would actually take away from the site.

Color Palette. Aside from the pictures, orange, black, gray, white, and green are used. Very nature friendly (going with their nature-focused theme and all). In a sense of giving emphasis, orange is used to sort of highlight throughout the site.

Site Focus. The point of the site is to introduce the surfers to the brand and connect them together in a healthier "community," which bear naked is all about. It's one of the few sites WITHOUT the search function, but I don't see myself using it necessarily. They have like 5 products to sell...Also because the website isn't really feature driven, I don't know what could be my favorite. I do like the idea of creating a community for people who enjoy bear naked prodcuts (The Den). The confusingness of the site is the general layout and how the information is organized. Trimming down the pages and making the organization as intuitive as the three navigational links on the top will be the way to go.

truereligionjeans.com

Okay, so this is one of the sites that I am not too excited about to review (really, I am just running out of ideas for website reviews), but it does fit the recently pioneered theme.

Navigation. There are three navigation systems on the homepage. There is the left bar (with the biggest fonts!) that gives you what you expect from a clothing-merchant website. In the same navigation bar, to the bottom in less big fonts are company-info links. The list expands to show the categories within each sex/age group. The top one is reserved for account/shopping bag related things. After you click buy, you will need to use this navigation. Lastly, to the bottom of the browser, there technical items most of which are related to legal thingies. This grouping, makes sense to say the least. It certainly isn't confusing. The hierarchy of the navigation is mainly displayed through font size (although the bottom bar is also in gray which meshies closely enough with the black to fade in the background (presumably, the least important of the three navigation groups. This hierarchy makes sense as the site such as these should have the priority as following: showing products, selling the products, and other company-relevant information, in that order. None of these three major groups of navigation disappears throughout the entirety of the website (well except the investor relations page, which makes sense). Once you get into specific clothing item pages, additional navigation bars appear which includes sorting tools (pants size 30, 32, 33, 34, etc.) and page buttons since they have a lot of products for sale throughout the site! You can tell these are navigations becuase 1) why else would they be there 2) because it is in white fonts just like the expanded navigation once you enter specific sex/age category. Although there is a roll over state, there's no after-link state that tells you that you clicked on a spefic button. There is a nice little breadcrumb, though, at toward the top of the body section. You can also always get back to the homepage by clicking on the bigass logo in the middle of the page>>> TRUE RELIGIONS JEANS.

Architecture. The site, compared to the other sites I've reviewed, have a decent depth. There are not only gazillion products for sale (it's a huge brand), but they multiple views with a lot of sorting functions. The look, because of that, looks cluttered, but of course clutter and chunkiness is the brand aesthetics. So it fits. You can access most of the pages from the home page, but you can't get to the size 30 sorted men's jeans page with a specific wash from home page. But then again, making it so DIRECT would defeat the purpose of "browsing" (which leads to more temptations and presumably more sales), and not serve the company well.

Content/Typography. Typographical hierachy, as mentioned before, is mostly done through font sizes. Category headings are also in all caps, different color, heavier weight, and bigger font size than each items belonging to any one of hte category. I really don't think the distinction could be any clearer. And the navigation is crystal clear. I know when I click on kids, I am getting kids' clothes.

Grid/Structure. As mentioned before, the three navigational groups stay stationary. Only part that changes is the body area (which I expect them to) as I navigate through different pages of the site. It looks consistent and when I want to buy something, there is no hassle in trying to find things that are shifted everywhere. Unfortunately, the site name is TOO prominent--making it the focal point of EVERY PAGE--and kind of distracts the surfers from paying attention to the clothes that they are trying to sell.

Iconography/Imagery. All kind so country-style iconographies/symbols are used throughout the site to match the western-theme which is the dominating aesthetics of the brand. I would personally want less iconographies so I can focus on the pictures, but it is their brand-recognition thing. I don't know if I would recommend reducing iconographies as a marketing person. The images used, because they fit easily into the western-theme, are easy to understand the purpose.

Color Palette. Wood color (brown), red, yellow, blinking signs, white, black, gray--basically all kinds of colors are used on top of colorful photographs to visually clutter--again this IS their design aesthetics--the site. Typographically, as mentioned before, the colors are used strategically to indicate the hierachy. These colors were probably chosen because when used to together, they do invoke some kind of western-bar feeling (not that I have been into any).

Site Focus. The objective of the site is CLEAR. SELL THE CLOTHES. It does allow me to search for something, but I have an easier time finding specific items through browsing because I often don't know the name or the codes assigned to specific pair of jeans. The most useful feature is probably the sorting function. I don't have to start liking some design only to find out that the pair is permantly discontinued in my size. I don't think there is anything particularly CONFUSING, per se, about the site.

OAKNYC.com

A great site; I have yet to buy anything from them because 1. they are prohibitively expensive, 2. when there is a crazy sale, I email them to ask about stuff and they never get back to me. Oh well. I am sure I will drop by their shop sometime once I relocate to New York.

Navigation. What matters are three groups of navigation. The first is the one to your left (still tiny fonts, but I like them like that). The first step in shopping is browsing. And although the font size is still tiny, after the logo (OAK NYC), it is given the biggest font-size treatment amongst the navigation bars. The second group is on the top LEFT, which is about the store and other store-related literature. to the top Right, right above where all the products show up in deeper levels, there is the shopping cart and check out things which are the second step (and hopefully last; returning things are a bit of a hassle) in shopping. The hierarchy that exists within the page also makes sense. For instance, on the left navigation, men is clearly the category bigger than "new items" which are underneath it. All of the above mentioned three navigation group stay stationary throughout the entire website. The only part that changes is the body (which you know you they would change from the very beginning). Also about knowing where you are, once you click on any navigational links, the link is highlighted, and you also find out where you are in the site with a nice little breadcrumb at the top (appears right below the top left navigation group). And whenever you are lost, there are multiple ways to get back, one of the easiest being clicking on the logo.

Architecture. The site, although has many pages (because they have A LOT of items on sale) are by no means deep (about 3 layers in, very techinical at that). This makes sense though, since pyschology dictates that you make shopping as minimally laborious, and ultimately, the site serves little purpose beyond selling items. The architecture, in other words, is pretty flat. Navigation is straightforward, and structurally, the website is designed to match the intutition pretty closely.

Content/Typography. The typography (for the hierachy) as mentioned before is clear. I would normally say make it a little bigger, but since the clientele for the site is young, hipsters, I doubt the size increase will benefit their target market (besides, helvetica/arial bigger doesn't look that nice). Headlines are highlighted by both larger size and bolding. And navigation, as said before, is very intutitive and you get what you expect.

Grid/Structure. As mentioned previously, the grid stays the same (well all three important navigational areas are stationary and predictably, the body area changes). This makes sense, as all the necessary tools are where they are expected to be, and as I navigate deeper or shallower through the website, what I want to see is shown in the middle of the window, commanding my attention. The site demand my attention by presenting interesting, super saturated pictures, colors, and most of all, being awesome.

Iconography/Imagery. Other than the photos (which are more fabulous than they should be...really, the color is not "true"...) there is zero pic/iconography. I really like the simplicity of it. Maybe there could have been arrows and simple little icons for the navigation items, but I don't mind it as it is now. No symbols either.

Color Palette. Black/gray words, white background, and highly saturated pictures. They know what they are doing, this understated chic boutique look. It is hard to say how colors are used to indicate separation in the page (them only being black/gray), but black obviously takes precedent over gray. That is why the category headings on the left column navigation bar is just about the only one with black words. The usage of colors, however, is super simple and straightforward.

Site Focus. The point of the site is sales. It allows you to search for stuff specifically, but since it is a boutique, not a department store, what you are SUPPOSED to be doing is exploring pages and discovering items that catches your eye. Hence, I've never used the search box before. It is in a very prominent location though. I guess if you are an in-the-know hipster, you could potential search for very specific items. The most useful feature? I don't think there is something that particularly stands out about the page that I found to be "most" useful. But that doesn't mean I am confused about the site. There's just nothing technically eye-catching or impressive about the site. What they are known for is having really cool, not-sold-at-many-places items.