Site Critique: Brass Goggles

http://brassgoggles.co.uk/brassgoggles/

Brass Goggles is a blog dedicated to the "lighter side of Steampunk." The entries can be about anything which pertains to this aesthetic - from modified umbrellas, to retro-futuristic space travel posters, to "Repo! The Genetic Opera." I wanted to see how one of the web's foremost Steampunk resources uses the aesthetic in its site.

The layout grid is visibly blog-like and stays the same on every page. Entries display on the left, most recent at the top. Links are on a column to the right. Since the site is a blog, the architecture is deep but narrow. Users go further and further back in time, away from the home page, but the pages must be accessed in a linear fashion. However, the sidebar makes browsing considerably more efficient because it organizes entries in alternative ways, ordered by likelihood of use. For example, viewers are more likely to browse entries by tag topic than by date posted. The search function is particularly useful because it compares the search string to entry content instead of just tags. Searching is essential to managing so much information. Also convenient, the site has anchored links for vertical navigation on a single page.

When you go to an individual entry, the right navigation disappears when on expanded entries. However, to compensate for this, chronological back and forth navigation appears. On the positive side, users can then comment on individual entries, allowing for networking, a crucial aspect when maintaining a subculture website. These comments only appear on the pages with individual entries in order to save screen real estate. On the negative side, sometimes comments cannot be posted although other people have posted before you.



True to its motto, Brass Goggles takes its color scheme from Steampunk without being dark. The background is warm sienna brown, highlighted by gold. The titular Brass is a key material in Steampunk technology. Thin lines and shades are used to distinguish content. Any image juts from the monochrome and becomes an immediate focal point of that entry. Disappointingly, the site has no logo which makes the header awkwardly bare. It would benefit from some stronger texture or imagery which does not compete with the entry images. The typography, although it smacks of "default font," is clear and easy to read due to its lighter color. Headers are larger but faded, and sidebar links are colored. However, within entries, links do not differ much from copy which can lead to their being ignored. When the user hovers over or clicks a link, it underlines. However, there is no visited state, which is useful when browsing entry-based collections of information.

Brass Goggles is a site which uses Steampunk colors effectively within traditional blog design, but it could further tailor its look via textures and detail treatments. It does not take me back to the Victorian era yet.

Site Critique: Metamorphoses Temps de Fille

http://www.metamorphose.gr.jp/english/

Ignoring any poorly translated text, many Asian sites have a distinct visual style. They tend to be crowded with content and use much brighter colors in unforgiving quantities. Metamorphose: Temps de Fille can only be described as "pink," similar to Hello Kitty. It is another clothing site I found while researching subculture fashion. Lolita is a style which originated in Japan and, for many youth, become a way of life. All will tell you very quickly it has nothing to do with the book. It lauds innocence and femininity found in Victorian sensibilities and elegance. The clothing trademark is bell-shaped dresses, buckled shoes, knee socks, and bows. It is filled with black (kurololi), white (shirololi), and pink. There are many subcategories like the playfulpunkloli, the dark gothloli, and the kimono-wearing waloli. This review focuses on the English site.

The home page captivates viewers immediately with a slideshow of the latest designs. The main menu lies to its right, but not all the labels make sense. "New Items" is self-explanatory, but “Go! Go! Lolita-chan!” could be anything. Annoyingly, “Contact Us” opens the default mail client. Upon entering the second level, the menu system moves to the left of the content. Subtle but annoying, the width of the main content pane changes from page to page, so the menu moves horizontally as users travel between sections. Luckily, the site map is a constant fixture on the menu but would be rendered unnecessary with better information architecture. The current site is shallow mainly because pages are incredibly long and require incessant scrolling. While most users do not mind this, much eye-catching content will get caught below the fold when the makers could have just created subcategories. The site map revealed something I had missed on my first exploration. The menu options had subsections. “New Items” could open up into “Winter Collection.” On the Winter Collection page, I saw what I had missed before. A submenu extends to the right of the content menu, but it is near invisible against the background.



All this navigation disappears on the “Online Shop” page, which thankfully adpts a similar layout to other online stores. The user is taken to another site with a new left menu, categorized by clothing type. Sale items conveniently have their own section, and items are searchable. However, the font choice differs, and there is no return to the home page, neither buttons nor logos.

Every aspect of this site is pink on pink. The background is their pink Victorian-inspired logo, which is repeated in pink at the head of the page. Their menu has pink buttons, which, when rolled over or selected, turn a different shade of pink. The headers are pink, Old-English-inspired, text. Other colors, sometimes used for buttons, thus look arbitrary. Copy is black, but the thin, sans-serif font can get lost against the detailed background. Images are often used in place of text for titles. This would be interesting, but the images are uncomfortably large, lack uniformity, and scream “cheap gradient.” Therefore, they automatically become the center of attention, taking the user’s eye off of the product.


Online, detail is a difficult to execute. Metamorphoses: Temps de Fille is another victim of trying too hard. Navigation is unintuitive, and if they want to sell, they must better integrate the shop page. Pink is a sensible color for this business, representing the “Sweet Lolita” style of clothing being sold. However, another color like a dark brown would make everything easier to read. Subtle touches are good, but an onslaught of varied fonts, curly lines and bright colors is not, especially when trying to highlight a product.

Site Critique: Skingraft Designs

http://www.skingraftdesigns.com/

A friend recommended Skingraft to me when I was researching Steampunk clothing for Anachrofactory. Skingraft Designs is a Los Angeles clothing company whose work borders on art. Only independent stores carry it, and many pieces are one-of-a-kind. Although one section denotes pieces for sale, the site is for showcasing, not shopping.

I have a love-hate relationship with Flash sites. Skingraft has a nice layout but does not need its current animation. The photographic content is undeniably incredible but hindered by the interface and pixilation. The site runs from one main menu embedded into a timepiece-like treatment where users click orbs to access sections. This is cleverly keeps with the site's decorative, Victorian style, but the circular frame and usurps valuable screen real estate. The site background is an eye-burning white. A dark, neutral color would bring out the subtle artistic details of the menu and pieces. The realistic photo menu is destroyed by its rollovers. While users appreciate selected states, they should not be heinous, computer-drawn circles laid over the photographs. Instead, the designer should manipulate the photograph and actually have the menu orbs change color.

As with many Flash sites, there is no definite home page, and the five sections must be navigated without a sitemap. Fortunately, the section names are self-explanatory. The “Purchase” link instructs users to go offsite to a distributor called Hunters & Gatherers. "Gallery" happens to have confusing subsection labels. Not all the "Gallery" links actually go to gallery pieces. Those that do provide limited image-viewing functionality. Few viewers will realize the circle between the pagination arrows allows them to view the image source. One cannot zoom in to analyze the lovely pinstripes on the vests or the ruffles on the hoop skirts.


Since the site is very image-oriented, most text is used for headers. However, the header font choice is atrocious, often unreadable. The copy font is simple, but also not well weighted. The logo looks less like a logo and more like a free font with a Photoshop filter. Victorian font should be elegant and historically inspired but not reminiscent of high school Goth. Differentiating link and text can be difficult, especially with Flash. Most things I clicked led me nowhere, and there were no search functions. Clicking “Updates” provides the user with inactive text URLs. Worse, with Flash, one cannot copy and paste. Few people will take the effort to type in a web address.


When taken at high resolution, photographs are great resources for web page layouts. However, that means the site has to match them and must do so with subtlety. If the site treatments were darker, textured, yet soft and text not overly decorated, the gorgeous photography of the designers’ wares would provide just enough balance with the site’s detailed menus. This could easily be done without losing the feel from Steampunk’s grey, brown, and brass theme. Ultimately, Skingraft’s poor use of Flash limits features which are found naturally on HTML pages, and this in turn limits their ability to function as an online gallery.

Site Critique: Goth: Dark Glamour

http://www3.fitnyc.edu/museum/gothic/home.html

Much of the Goth subculture's appeal comes from being over the top. I found this site while researching fashion for Project 2. I hoped it would provide factual insight on Goth culture and elegant images for visual inspiration. However, the Fashion Institute of Technology actually took it too far when they designed the site for their Gothic: Dark Glamour exhibit, to the point where content is indistinguishable from layout.

First off, I hate websites with sound. The site gave me a terrible first impression when howling ghosts began leaking through my laptop speakers. The only way to turn it off is to mute the computer. Otherwise, it switches every page. Many people multi-task while online, and this feature would interfere with music players.

Because the entire site consists of under twenty pages, the main navigation is simple, limited to one menu. However, the typography and rollover effects look cheap. For an art school, such fallacies reflect badly on the institution. The option names are also painfully vague. Each header is a noun associated with the Goth aesthetic which I assume are sub-gallery names or clothing lines. Some nonconventional gallery menus work, like Linda Berkvist's color-based one, but those cases are still logical and relevant to the content within. To top it off, the only way to access other pages is through the back button. Also, the only link to the museum itself is a logo on the home page which is not noticeably clickable, so if a viewer wished to see the exhibit in person, he or she would be unable to even find driving directions.


Gallery sites profit from creative, image-heavy layouts, but FIT has gone past the kitsch to annoyance. Good sites push the boundaries on grid layouts, but FIT has gone with whatever is easiest to code – push logo and copy to the left and imagery to the right. The two-column, grid lines are practically visible. I like the use of large images, but many of the pictures actually showcasing the exhibitors’ work have so many Photoshop filters, they are beyond recognition. Several times, I mistook a site graphic for an actual show piece. To access a larger view of a piece, the user must roll over the image and hope for something clickable. I appreciate the attempt at interactivity, but navigation is not the place for hidden object games. This is further exacerbates the cryptic menus. On the other hand, the piece-specific pages are simple and pleasing with just the right amount of description for the artwork.

The color scheme is predominantly black, dotted with hints of red and white. These colors are weighty but used to an advantage to create a creepy feel. The site does a pretty typography is differentiated but small and serif, so readers will get a visual vibration and skip past the interesting information, especially if they are just browsing and not actively seeking information. The large, bold headers contrast well to the simple white copy.

FIT has created an experience that goes into too many directions, with too little guidance, and too many distractions. While I am impressed by the clothing on display, I am displeased by all the junk I have to put up with to get to what I really want to see.

Site Critique: HM

http://www.hm.com

After selecting my country, the site opens up to a full-screen, photographic, Flash page advertising H&M’s latest collection. This surely keeps people returning season after season, looking for something artful and new. However, despite the entertaining, moving content, I cannot decipher where I should go. Intuition says try to buy a current product, so I look for a menu to begin shopping. There are two: main on the left and settings in the upper right.

The words in the main menu changes color keep it from blending into the changing photo backgrounds. Some pages are slightly unreadable, but this eases because the rollovers are red and animated. As you go deeper into the site, submenus drop down and indent, functioning like a breadcrumb. It never disappears, so you can always return to the home page. The corporate wording is easy to understand ("About H&M", "Investor Relations", etc.), but gallery displays are grouped under “Inspirations.” As to be expected, there is no correlation between Inspiration pages which see, partially like news and updates. While one displays the latest Winter Collection, another has the Top 5 of some product category, and another has a program for uploading your photo, so you can play dress-up on yourself.


Incorporating photography and video in websites creates a more immersing environment. Every page presents a different call to action, like the virtual runway which invites you to zoom in on garments. However, viewing such an image heavy site requires cable connection or faster, and there is no simpler, alternative portal. However, the designers did, however, take wide-screen monitors into consideration. Photo backgrounds keep to aspect ratio and lie atop another background image. Nevertheless, the menus cling to the sides of the screen, resulting in an open but horizontal page. The site avoids visual clutter by using pagination for galleries and selecting photos with positive and negative space that lend to natural grid structure. The unifying, header color is red, obviously chosen for the logo. This logo is a brush font, which contrasts nicely to the black or white, sans-serif, body text. Because font size stays the same, the change color change between pages is tolerable. Most pages have sound, but miraculously, it is linked to clicks, so it plays when the user expects.

I had difficulty finding shopping information. Although the galleries displayed prices, they did not allow purchase. To make it easier to access subsections, I checked the site map, but it was incredibly large and pertained overwhelmingly to corporate. The closest thing to an online store was a locator for real stores. This was when I realized that, despite the Flash displays, the true purpose of the site is to provide company information.


H&M has developed an engaging site, highly attractive to investors. However, ordinary customers may be confused due to the lack of online store component. The photographic galleries are visually appealing but difficult to navigate. There are occasions where one can be too creative, to the point of being unintelligible. H&M needs a more identifiable customer section to cater to shoppers. That said, the site has done more than most other by providing more than an information repository – providing fun.

Site Critique: CIS 110 Page

http://www.seas.upenn.edu/~cis110/

I have used this site in some form almost every day since my first college class. I took the three basic computer science courses and then began working as a teaching assistant for CIS 110, the first class in the series. At first, I had been impressed. I expected an HTML page, complete with hyperlink blue and Times New Roman, but I found colors, buttons, and CSS. But now, time has passed, and the more I use it, the less it appeals to me.

Worst, the site has four menus. Because it has its own bar, above the content pane, the large, grey one seems like the primary navigation. It is really just links to other Penn web pages. Although mildly relevant, the site should really focus on providing students with class information. There is another text menu, so light it looks like a breadcrumb, which links to similar courses’ sites, all of which use the same layout. You may want your homework but end up with your neighbor’s lab. The pages relevant to your class are on the left sidebar, a location often associated with secondary navigation. My least favorite aspect is the tiny Java resources menu in the top left. You can’t pass the course without those links. I would individually add each reference link to the class menu and then combine the other menus into a “department links” option. This pushes back the UPenn information and brings forth the coding information. The menu has hover states, but it could use a selected state.

The site simple architecture means a search feature is unnecessary. Page titles appear in bold green on the content pane. Most content pages link to off-site documents like PDF lecture notes. The navigation is consistent with the exception of the “Resources” page which explains how to set up programming environments for the class. Here, the side menu disappears, and there is no return.


In good, engineering, fashion, copy is succinct, often in bulleted lists. Even menu items are straightforward descriptions. “Schedule” shows the weekly class schedule, and “Staff” contains staff contact information. The only ambiguity lies in “Content.” There once were individual sections for lectures, labs, and assignments but, since Spring 2008, students must log into this page to access course notes and assignments. Designers should turn “Content” into the home page, so students do not have to dig for current information. There have been cheating concerns, but I think the login requirement is useless when the information is pretty freely distributed to begin with.

Visually, I feel things are too simple. The site uses only one font - sometimes bold, sometimes larger, sometimes smaller. Announcement text is red. Links are cyan. Again, the “Content” pane poses an exception. It uses Courier and just ends up looking misplaced. The layout utilizes cool colors – grey, white, and muted teal – probably selected partially for readability and partially at random. There seems to be no thought towards “what looks good,” just “what doesn’t look bad.” Nothing stands out, and imagery is limited to staff pictures, HTML tables, and a space-filling Java logo. I feel adding a handful more images and subtle treatments - that don’t look like clip art - would make the experience more personable and stimulating.


A useful, prominent, feature for students is the off-site, PHPBB bulletin board where they anonymously talk to a TA about an assignment outside of office hours. It can be accessed from the sidebar, but requires another login and yet another to post. Also, it should open in a new browser or tab, so students can keep the 110 page open as well.

If you can navigate it, the 110 site is practical but visually cold. The design is mediocre and could be great with some attention to detail. Students do not expect much to begin with, but when a site needs to attract students to a major, a little improvement goes a long way.

Site Critique: The Awesomer

http://www.theawesomer.com

The Awesomer is a blog where every entry links to something interesting the proprietors found while surfing the net. Duly noted, anything - from Steampunk Star Wars toys to skull-shaped vodka bottles - can count as “something interesting.” Since it was originally conceived in August 2008 as a “technology shopping blog for guys,” frequent subjects include cars, video games, and alcohol.

From a functional perspective, the site works like a charm. The RSS - efficiently yet subtly integrated into the primary navigation - is convenient, letting me use Google Reader to fetch my updates automatically. Since the site concern material goods, entries have "Buy It" and "Hat Tip" links which point offsite to places you can buy the item or to relevant articles, respectively. Clicking one article brings up links to others you may like. I enjoy how the designers provide, by links, sorted by interest, to its sources and bridges common social networking sites by maintaining accounts on Facebook, Twitter, and MySpace.

Browsing entries is a breeze. The site architecture never deepens more than two levels, and the navigation stays constant on every page. Navigation consists of two menus, a primary for entry filters and a secondary for site information. While the site information categories – “About,” “Contact” - are relatively standard, the filter titles are more ambiguous when they try to be hip. I could deduce “Wearables” pretty quickly, but I still can’t quite describe “Lux.” “Leisure” is pretty vague, and there is the much-hated-by-Gavin “Etc” category. The home page lets you view all entries, but there is no “All” category in the filter navigation. Instead, users click the title image to return to the homepage. Although this does not bother me, it may not be obvious to less-experienced users. What does bother me, though, is that nothing indicates which filter I am under. Since the only difference between filter sections is different entry pictures, the primary navigations’ maroon rollover should also be used as a selected state.


My favorite aspect is the look. The logo is at once modern and retro, and its constant presence helps users remember the site name. Especially for a site that updates constantly, it is important that users remember the URL to return later. Each entry consists of an image, a succinct title, a one-sentence description, and some sharing information. They are laid out in a uniform grid. Online, images are preferable to text for efficiently conveying information. They are much more clickable, more engaging. Unfortunately, the Awesomer deceived me with such large calls to action – pictures opened up in Lightbox rather than directed me to articles. The background is off-black, screen-printed with a subtle, abstract, grey design. Paying homage to its technorati roots, the site uses easy-to-read, white, text pops out, so users can read it easily. Serif fonts distinguish header text from copy. However, the maroon links can be hard to read against a dark background on dim monitors.

Overall, the Awesomer deftly organizes a lot of information through filters, uniform layout, and imagery. A few design details have been overlooked, but there are many subtle features which I appreciate. When things are constantly updating, simplicity and subtlety define elegance, and the Awesomer presents news stylishly.

Sketches: Movie Genres V, Con Commissions, & Horror Sketches

Almost done the Movie Genres sketch exchange at PE. This character belongs to http://yorufukugawa.deviantart.com . Done for sci-fi.

.
Some chibi commissions of teenage girls frm New York Anime Festival. They look like Bratx dolls crossed with genetically inbred Powerpuff girls. Argh.


A large commission of the twins from Ouran High School Host Club, also from NYAF. I redrew it because I had a better pose idea.
Re-working some of my old original characters. Trying to see if Lucient should have a tattoo.


Creepy stuff drawn while watching Mirror's Edge. Inspired by one hell of a performance of Quills at my school.

Sketches: Movie Genres V

Drew some creepy things, but they're not ready to upload yet. However, here's a creepy thing for http://hoboriss.deviantart.com . It's here character as a zombie for the Horror genre of the movie exchange.



PS - Erin, since I know you're reading this, - to filter out site crits, look to the right. There's a filter on links set.

Sketches and GiftArt: Movie Genres IV

This is Weptes, drawn for http://chael.deviantart.com . She's meant to be like a shaman because we were trying to do epic fantasy movies.


Here is the piece I got in exchange from http://kitsunechan.deviantart.com . I love the dialogue. Totally fits.