Mashable. Our first Web Critique to start off the week fell a smidge flat. Partly because Mashable is so boring. While they make use of pretty good design philosophy, there really isn’t a whole long going on. Their brand is too weak and doesn’t quite break through the generic styling to give us much to chew on.

TheNextWeb was, I think, a nice transition from Mashable. We got a chance to introduce a quality blog with some nice styling and strong branding. It was a bit night and day where had a refreshing moment to look at TNW and get a feel for how different the blog was and the impression it made on us. Great design, backed by nice content and great functionality that was easy to use.

Smashing Magazine was just great timing. They happen to release a new visual update as we were planning Web Critique Week, I don’t think the timing could have been any better. With that said, we got to look at their new design and offer a little insight on the responsive design they built into it. Unfortunately, much of the Smashing Magazine brand isn’t translated as well on their new design and, personally, it fell flat overall.

Think Vitamin isn’t my favorite blog of all time, despite some of my high praises, but in a way, it rediscovered how some unique styling can be really refreshing. Some elegant design decisions on balance really seal the deal for me on this blog and was a blas to review and look at. Not much can be said about that footer, but we’ll leave it be for now.

Web Critique Q&A

Why did you decide to start Web Critiques?

Mike: When I was brought on board I wanted to bring my nature of critique that I had refined through the years of design and bring something new to the design community both for the Inspiredology community and outside of that. Andrew and Chad were great about letting me try out the idea…they liked it so I kept at.

Chad: Yeah, it was Mike’s idea to introduce Web Critiques – initially we did one a month, but we thought a whole week would really offer a lot of value and insight to our readers.

What was the reason for doing a whole week of Web Critiques?

Mike: We have been enjoying the Web Critiques and the value they were adding to The Lab. So we wanted to give them center stage and make the public more aware of these articles.

Chad: See my answer above

Do you think the Web Critique Week was a success?

Mike: I think the traffic probably agrees that we saw that the critiques were adding more value to the community. I would like to see more engagement in the discussion of the sites within the community, as our previous critiques have had nice community discussions.

Chad: Simple answer – Yes!

Andrew: Yes I think it was certainly a success. As Mike said, more engagement would have been amazing, so that we could get some good conversations going within each critique.

What would you have liked to have done differently with this week?

Mike: I wouldn’t have minded some more time on each review. I wish we could have broken things down more indepthly, but unfortunately we are limited in time.

Chad: I think we can take it to another level still, instead of just a critique – we can go deeper and maybe offer improvements. Show what Smashing Mag and Mashable might look like if we controlled it.

Andrew: It could have been interesting to get members of the community involved in the actual critique post, to offer another opinion outside of the Inspiredology family.

Will you be continuing to push the Web Critiques in the future?

Mike: Yes! Of course, we’re trying to get one solid critique a month.

Chad: For sure, I think this week proved it’s value to the community.

Are we gonna see another Web Critique Week?

Mike: It is very likely. This week, as you probably could tell, we focused on blogs. Who knows when the next time will be or what the focus will be on, but its likely we’ll see this again.

Chad: We will be sure to revisit the traffic and value but I have no doubt that this won’t be the last one.

Anything you’d like to add about your Web Critiques?

Mike: We have been trying to get community to feel engaged, offer feedback, and want to get their own work critiqued. I think these critiques, those centered around our community, would provide the BEST value for Inspiredology and whoever submitted it. If you have a site you want critiqued, send us an email or tweet us! Its pretty easy and we’re mostly friendly dudes. We’d love to also hear what you think about these critiques in terms of content, style, or anything in particular!

Chad: What Mike said!

Inky Deals Winter Bundle: $500 worth of design resources for only $29 + BONUS

Style and Function

When we talked about some of the blogs we’d want to take a look at, that were relevant to our community, we really jumped on the idea of looking at Think Vitamin’s design blog. Bringing in some new flavor to the blog atmosphere, Think Vitamin brings a lot of style to what looks like a sea of generic styles (though not always a bad thing); I was very quick to welcome the refreshment. Since their style is so important on the actual function of the homepage, I have included both parts of the discussion in this heading. Unlike the other blogs we’ve looked at, the styling (I use that term somewhat loosely to determine pretty colors, fonts, graphics, and etc) didn’t really affect the page in the way that it changed how users navigated. Smashing Magazine did create some negative conflict with all the ads that they use, but I am referring to how design reinforces positive browsing on the blog.

With that said, one of the best things going for Think Vitamin is their unique use of circles and colors. While their style certainly is “trendy”, it isn’t really trending for design blogs. The circles and rounded buttons contrast perfectly to the big, background box that encompass the lead article. This contrast really hones in on the main topic as a focal point, coupled with large and inverted (color) type, you have something that brings the audience in. It is a very clean and simple way of creating emphasis without getting too fancy with gradients, bevels, shadows or what have you. Think Vitamin doesn’t do anything special in the way of how you navigate the site’s pages. We still see the typical two column layout, with page navigation on top, though TV (Think Vitamin) uses asymmetry to balance their page. Careful decision was made to have their social media icons and topics near the top of the page. This position alienates white space which the left column tends to use up. The social icons, and ads, add color variety so when our eye sees this, we get this wonderful push back to the content column (left). This is a pretty elegant tug-of-war that goes on.

With all the cool things going on and creative style in both function and aesthetics, I am disappointed in the treatment of their logo; I would have preferred a more prominent stance and put less emphasis on “Curated by Carsonified”. That said, there isn’t a lot to dislike. The blog could benefit for a little contrast in the content column to give the audience some base, otherwise I really enjoy taking a look at the site and browsing. I am a big promoter of using large type; I think that is because I stare at small pixels and smartphones all day, so my “design” eyes get stressed. Think Vitamin does a nice job in creating a responsive layout, very similar to how Smashing Magazine built there’s. It does not suffer from the blunt ads on some sizes, and is overall successful.

Chad’s Take

Think Vitamin offers a unique design, and it’s one of the best blog experiences. Not like Smashing Mag, Think Vitamin keeps you focused on the content feed, their topics and page menu are by far secondary areas. TV does a great job of highlighted their featured story, and keeps you scrolling down through the other posts. I prefer this way of browsing a blog, I would bet TV has much more loyal readers than SM – based on this design.

Post Detail Pages Get Some Love

Finally! We see some discrepancy between the homepage and post pages. After really looking at so many blogs, maybe I am alone in this. As a user, I want a very easy browsing experience; whatever the designer can do to make it easier, I am all for it. Being able to tell I am not on the homepage is a big plus for me. TV brings a very subtle touch to their detail pages, because overall, not much does change. What does change, however, is the introduction to social buttons like twitter and facebook. They also leave an artifact from the homepage…did you guess it? The dark gray bar is the artifact you see from the main article and is the divider that says: “Here is the rest of the post you were looking for”. Brilliant, simple and effective—I can easily browse.

Chad’s Take

Really enjoy the dark horizontal bar that separates the content title, meta details and share buttons. It allows you to dive into the core of the content. I agree with Mike – love the large type – easy to read – looks great, and the nice 80% black works really well. My only issue is when the site has a short post – it doesn’t work well with their design. With the different strong horizontal lines and buttons, it’s really hard to tell where the core of the post is, and you can easily skim over it and be lost by the time you see the comment feed.

The Chicken Finale

Well then. If you have been following these critiques, you’ll know I have an affinity for good looking footers. I couldn’t tell you why, but I think every site needs a great base to ground it in. No question TV falls real short in this category. With a nearly nonexistent footer, TV attempts to seal the deal, close the sale if you will. What it turns out is that if you land on their footer, you’re out of luck—there’s nothing there for you. Though I am slow to say things like this, but it looks like a bit of laziness kicked in here. No question designing big blog themes is not a quick or easy task, but go all the way, not 90%. I do enjoy the placement of the Think Vitamin logo, however. A little chicken, if you ask me, to not continue their bold design approach to the footer.

You Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.

As we continue to look at top noch blogs this week (Mashable and TheNextWeb) it is only fitting that we take a look at Smashing Magazine. Fortunately for us, they just did a new redesign to kickstart their 2012 year; unfortunately for them we’re here to break it down (for the greater good of course).

Homepage

Now, I am tentative to describe and take a look at this homepage since its possible everyone may have a different experience. Smashing Mag took considerable effort to make sure that their site scales correctly to any device or screen size…it does, it looks great, and it works great; this is one of the hot topics circling their new design. On a standard 21″ display with 1920×1080 resolution, you should see the whole experience. Nothing falls short—you get the ads, categories, other pages, the works. As your screen gets smaller, or you grab the corner of the window, Smashing Mag does a smashing job of deciding what is the most important information for you to see—no doubt their branding and the content, cleverly leaving out the ads.

The removal of the ads is a nice touch for 2 reasons: These ads aren’t anything pretty and they’re distracting, but also because on smaller formats you’ll lose your customer (making reference that blog users are customers, member or not) if they had ads that get in the way of the content they want to see. This is the idea of customer expectation. Most users have an expectation when they land on a link or post or what have you, anything that does not align with their expectation (good or bad) can result in them bouncing right off. Manage these expectations by being honest and don’t use headlines or images that aren’t fitting to the article just to grab user attentions.

About that homepage. While they have different experiences you can have based on what device you’re using, we’re gonna look at their homepage from a desktop perspective. After spending so much time with TNW, I am hooked on how they accomplish and utilize their branding. Looking at Smashing Magazine, its clear that their brand isn’t the focus. They hide their logo in the top left and, overall, their colors are some what generic. All this passive-aggressive approach to branding does have 2 main advantages in this case: focus on the article content and focus on ads. This is great in that you can easily find your content but there is a rift in the balance of their pages. I often find my eye bouncing around between article content and the ads making it difficult to focus on the article.

Chad’s Take

First thing I can say is – “it’s about time”. Smashing Mag has fixed a number of issues with their old site – it’s probably best that we didn’t critique the old Smashing Mag. Let’s focus on the new – responsive design is by far their best feature and upgrade. You can see the design fits within Elliot Jay Stocks wheelhouse of clean, subtle layout and design. The same old problem still arises – ads, Smashing Mag is by far the most popular design blog out there – and yet they still pack 16 ad banners on the site. You would think they could figure out a better way of making money. For me it seems like it’s more greed than anything. I understand it’s a business and it needs to make money, but it seems like they are making more than enough of it.

Andrew’s Take:

Depending on resolution, the entire layout changes, and to be honest I tend to like it better in a smaller window. When the site is blown out full screen, the logo shrinks and seems to disappear, and the navs get messy in the vertical format—I’m not sure how great of a decision that was. I also find the right sidebar now to be a bit TOO ad heavy. Believe me, I am an advocate for display advertising, but it does tend to take away from the content in this new layout.

Function and Style

Their homepage retains all the info you need to find exactly what you’re looking for. Buttons at the top take you to different pages and are discreet making sure to not detract from the experience. Smashing mag also recognizes some of their most popular topics and categorizes them on the left for easy looking. Unfortunately, they hide their search feature opting for more clicks. Its hard to find if you aren’t looking for it and because of the rift between content and ads, you seldom find your eye traveling up to locate it. The post detail pages don’t differ much at all when compared to the homepage (so they wont get their own category); they don’t have any unique ability to share media socially like Mashable or deviate much from their homepages exact style and I find the lack of differentiation, confusing.

Chad’s Take

For me the best thing other than the responsive design is the left navigation. Love the double knock up tab navigation – you feel like your on the Smashing Magazine site when your their, as well as the Smashing Network without leaving the site. It’s focused and consistent. I also like the hover effect on the category and sub-category labels. The new colour scheme is soft and settling, at the end of the day the new site offers a great user experience without losing it’s focus on the content.

Andrew’s Take:

Overall I think the Smashing Magazine redesign was a successful and a much needed update. Not sure that they need to veer SO far away from the Smashing that we have all grown to appreciate, but there are certainly a few changes for the better. The major one being the responsiveness of the site, I can dig that.

Bring on the Feet…I mean Footer

The footer does a nice job of managing my expectation, mostly. They continue their soft style right down to the bottom and they showcase only relevant information for the blog. Its clear that Smashing Magazine recognizes success in people who search for content solely by clicking through categories, it seems this is how most of their users look for content. Otherwise, the foot does a nice job of bringing together important and relevant content. And then, as I am singing the praises of this footer, we find a cute little kitty. There isn’t much to say about this except that they added in the cat for fun sakes…so we’ll let that slide.

You Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.

As always, careful consideration goes into breaking down a blog’s infrastructure. While we were careful in looking at Mashable, many of the same rules apply for TheNextWeb—how is content arranged, is it distracting, how are the ads, and perhaps most importantly, how well does the blog keep your intention both through content and design.

Function and Style

I wanted to start off by talking a little bit about TNW’s style and then move into their homepage, because I want to put emphasis on their style. TNW takes a much more bold approach to their style—I love the orange, blacks, and off grays. Contrary to Mashable, TNW pushes a brand that is original and is seemingly, without trends (despite the minor ribbon effect in the logo). There is a distinct feeling of being aware of the site that does not fall flat on generic branding for sake of being safe. The strong statement of the logo helps users know where they are and builds familiarity; while many blogs place their logos in these same spots, the contrast to the rest of the content is not the same—it smells like confidence and I love it.

What else makes this powerful? When we think about guiding user eye, or navigating our customers around our website, it can be easy to over look the simple contrast of white and dark colors and what they might do. Here, the stark contrast of the dark gray as part of the header fixates us on the homepage, feature articles, and logo, further strengthening their brand.

Chad’s Take

At first glance, TNW is bold, clean and gets straight to the point; the large orange logo works nicely on the dark background. The top portion of the site is clean and offers easy ways to popular articles, minmal advertising banners and a content feed—some of the most relevant content.

Homepage

We establish in every blog critique that these blogs are about ROI (return on interest) and life revolves around traffic stats; these blog types are SEO and conversion junkies. TNW takes an approach that subtly, and barely, shows off their ads in favor of showcasing lots and lots of content. A bold statement that is held up by their faith in their quality writers and content developers. I can really appreciate this as a customer and find navigating the homepage a breeze and a pleasure. The articles aren’t hidden, nor are they a secret. I can navigate categories, by location, search, or see what’s popular—all without being distracted.

More importantly, our eyes falls down from the logo to the content, right to the popular posts, then back out through the feature articles to the logo. A brilliant move to keep us looking for articles and reinforcing their brand; that’s why they are the TNW. The name is becoming synonymous with their presentation.

Details, details, details

Their detail pages don’t stray too far from their formula of the homepage. That’s not a bad thing at all, but I feel like because of this, they miss some moments where they could add emphasis to a post’s point. It is rather difficult trying to distinguish one page from the next and eventually becomes confusing if you have multiple pages up. There needs to be a more clear distinction of content. They also lack the social media bar we saw on Mashable’s detail pages that I thought was incredibly important and useful; a very easy way to sell a page to other folks. With that said, it is still easy to read the content and navigate to the comments without disruption, which is easily the most important part of the page.

It is easy to see how it can be confusing to find where one page ends and another begins. While TNW does a great job of consistency, it is perhaps a bit too much. More time should be spent on distinguishing these post detail pages so that the user does not get overwhelmed or feel lost.

Chad’s Take

As Mike noted above, the post detail pages are clean and simple. I disagree with Mike, however, on the topic and think the consistency is well deserved; I prefer the simple easy post details! I am a big fan of the post UI details you can find on the left, the mac’esq home, arrows and channel sidebar really fit nicely with the site and add some great functionality.

Oh My! What big footer you have!

TNW’s footer is huge. Huge and beautiful. While I am partial to footers that have a clear “sitemap” of some navigation options and other misc info you wouldn’t otherwise put in the nav, TNW’s footer looks really nice. They have chosen to show their partners, which add a nice contrast with their logos, and they reinforce the current featured articles. This is a good idea to get you to revisit or visit some new content you may have missed scrolling or if you landed on a post detail page. Otherwise, I do prefer more content on the footers for when we are looking for specific information. It just makes it easy.

You Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.

Starting off this week of web-critiques, we are bringing in some of the biggest names around the web and looking at what they’re doing well and built them continued success all through 2011.

Looking at Mashable.com, its important to take the same approach we use when we look at all blogs. It is pivotal to understand the fact that a blog and a portfolio site are trying to do very different things. While a portfolio site (for example) is trying to convert the visitor to a sale in the form of a work inquiry, a blog is trying to convert their user to traffic statistics. And while Mashable is much more concerned about having a great size of users signed up for RSS, they still make money from non-members—this is important to keep in mind as we look at Mashable’s site and other blogs we might do this week (hint, hint).

Right off the bat, Mashable fits the expectation most users have after going through blogs after blogs. They aren’t straying too far from the formula, and that’s fine, I don’t oppose originality for originality’s sake—that’s infantile.

Homepage

Mashable does a nice job of not overwhelming welcoming users on their homepage, contrary to what many blogs do in this category. I think this is something they have tried to stay away from, making sure to keep their customers from leaving their site. Otherwise, Mashable does not have much else going on. They lack, what we call, good looks—by approaching design to be more functional makes success at some sacrifice. It isn’t a secret that Mashable doesn’t have much style, but their approach to design is simple and is backed by their articles.

Chad’s Take

My thoughts on Mashable have always been content before design; with the amount of content being published each day the homepage is updated every hour. I still think the homepage could be cleaned up a bit, especially above the fold! Many layers of toolbars and horizontal bars with numerous amounts of boxes really get you bouncing around and aren’t guiding your eye very much. Mashable has cleaned up the top portion of the site lately, which I appreciate from a customer standpoint.

Function and Style

Like above, there isn’t much style going on. There is a conscious design decision to skimp on style for function and quick load times—both of which are working as intended. Taking advantage of non-serif type they can make use of being able to nicely scale and stay somewhat relevant/trendy. Their scalability is practically their only weapon, aside from their content. Using different type scale helps bridge the gap between titles, navigation, and content bringing the audience through the blurbs and body of content.

Mashable’s best is with their ad placement—while I don’t love their image slideshows and the like, the ad placement is very no offending. The ads on the homepage are discreet and soft. Moving through their detail, or post pages, the style doesn’t change nor does the function.

When you look at Mashable.com, there certainly isn’t the glamor we may be used to for some of the other tops blogs but a testament to function and content. “Content Is King” certainly applies here and is the embodiment in Mashable’s guidelines. That, coupled with their nice left sidebard that floats on the detail pages, social media and spreading the word are crucial components to the design. The website is a company product and is treated as so; content just brings in the clicks.

As always, I love taking a look at footers. Footers, for some reason, seem to resonate web design awareness to me. Footers are tough to look right and to add in correctly; Mashable does not have a problem with this. Their footer is very standard, keeping it safe, and flows perfectly with their design philosophy of content over design. That’s not to say it looks bad, it doesn’t, and the footer remains a great helpful tool.

Chad’s Take

I love the bottom right slide out feature post when you slide down the page – really great effect to get users to bounce around. I do agree with Mike, the share functions are great, and extremely important for Mashable. They do a great job on getting users to see other posts, follow other topics and stay on their site for a good period of time without being overbearing.

You Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.

With every Web Critique we choose to focus on things that are relevant to the website we’re taking a look at and how they’re trying to sell their brand while pushing a website that is product-centric, functional, and looks great.

The recent release and immediate success of The Verge is a tribute to the great content of the website and the creators’ affinity for quality design and function. While not everything is crystal, there are few who will argue with The Verge’s layout, and otherwise, design decisions. It is clear The Verge’s quest was to develop a different gadget and tech centric blog.

TheVerge.com

Right off the bat The Verge stands out and stands on its own. They have a nice central “hero” spot where top stories will post and stay relevant. Nothing too new here as Engadget does something similar. Where The Verge pulls this hero spot off especially well is with the creative use of vibrant gradients and varying type sizes, with the the most relevant story the largest (both in size and typography).

I am generally an enamored by the site and often find myself sitting on the homepage staring at it. The beautiful logo holds a lot of weight in the top left corner acting as a base for the user for what would otherwise be a confusing, beautiful page.

Nothing is Free

This is certainly a modern approach to layout and function where the art of the design (and its challenge) is being able to make it all cohesive and easy to navigate. This is where The Verge’s weakest points show up. While I am vexed by the homepage, part of my eye’s curiosity to move around or through the site is because there is, unfortunately, and dare I say, a lack of flow.

When we look at the homepage, The Verge lacks guidance—where to go, what to click, and the inevitable “what am I looking for?” creeps in. Its important to not confuse an incredibly dynamic page, such as this, as effective because we stare at it. Staring at it is a fault of lack of vocal points and direction; our eyes are essentially in disarray. Guiding an audiences’ eyes is incredibly important in a site like this as conversion and return visitors is the central objective of The Verge.

Chad Mueller: I really enjoy the top portion of The Verge, but there is so much going on, and initially, lots to take in. The menu and trending topics offer a great way to easily find content so long as you know what you’re looking for—its overwhelming. The typography, colors, and gradient overlays are however, a really nice touch.

Scrollball, scroll.

As we continue to scroll down The Verge’s homepage, they continue their trend of elegant typography and great color. It feels as though we are looking at a newspaper that’d you get on an iPad. Their grid flows seamlessly and the columns do a nice job, coupled with the occasional orange headline, to bring us in.

Almost as if The Verge knew, they added in horizontal breakers. The “breakers” give the user a break and a resting spot. Its a very clever way of slowing down all the overwhelming flavors that are going on. The page is segmented into, what seems, as “areas of focus”—give us more.

Chad Mueller: As you continue to scroll down, you would assume the content would be easier to find; it isn’t—there is just too much take in. Its very interesting that the site replicates the look of a newspaper.

The Finer Things

I really love the detail pages that The Verge has built. They are incredibly clean, to the point, and not convoluted. The direction shifts, gains a little more focus, almost as to say “this is really what you want” and they give it to us. Large headings, great font choices for subheadings, and the occasional orange blurb really help make these pages stand out. Its easy to see how this is affecting users too, as the comments sections are strung with praise and constructive comments (more or less) relevant to the article. Many blogs should take note of these pages, perfect. The stylized photos and great color choices of orange on white bring us and tie it all together.

Chad Mueller: I really enjoy the post detail pages. These pages are very clean and easy to read. The large images and a carefully added “Jump to Menu” is a welcome touch. These pages are a breeze.

The Verge is a very nice and welcome tech-blog. It strives in not only providing great, unbiased content, but does so in a creative and almost innovative design. With a little more focus on the homepage, and the Verge would score a near 10/10. The Verge looks at a large portion of the users and recognizes we are screaming out—gives us some style and great information. From the video reviews to typographic precision, The Verge is booming on the web.

Chad Mueller: At the end of the day, The Verge suffers largely from the Homepage—I prefer less information. Set me up with the best and most newsworthy stories and make the rest secondary. Too many voices on the page.

Your Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology, @thejellymon, or email me.

What do think of The Verge website?

With every Web Critique we choose to focus on things that are relevant to the website and how they’re trying sell their brand while pushing a website that is product-centric, functional, and looks great.

The Burton website is a unique one and we are featuring its newest iteration. As in line with their brand goals and ideas, staying up-to-date with trends is not only relative, but essential to their fan base and target market.

Burton.com

This is what you see when you first arrive. Promo for their new line of snowboards, it is cool and to the point: “See are cool new line of snowboards” is the message here. The moment you scroll or click the top right “Burton” button, you’re brought to their real homepage.

I enjoy visiting Burton’s website every time a new iteration lands—they strive on building a great site and take pride on building a web experience that is not only stylish and fun, but falls in line with their fan base, I can appreciate this. Often times we find companies neglect to bring their advertising methodology to their websites, and thus often times, feel out of touch. That said, I don’t necessarily love their new design from an audience perspective, but they aren’t targeting me. I have a Rossignol snowboard and their website falls more in line, again from an audience standpoint, of what I’m looking to purchase; subtle and professional compared to Burton’s more radical and loud advertising methods.

I like my clothes folded, neatly placed, not in a pile on the floor—so in this regard Burton is successful. Without exactly turning me off to their products, I still like and read about some, their website brings in the audience they are trying to sell to, and keeps them, by relating to them.

Style & Function

I am hesitant to say I like the “hand drawn” graphics here. Perhaps this is because I prefer a different marketing technique for the snowboards I am in interested in buying, but the style here works very well and compliments the brand. Burton did a careful job of not over using the style and carefully place in in borders, drop shadows, and headings—this I sincerely appreciate. It makes reading and navigating the site much easier rather than a chore.

They’ve done a nice job of trying to making navigating their site quick and easy. You can tell their focus is showing off their brand and the brands values as well as their products. The homepage has carefully placed buttons, that at one click, show a video of something brand related. This is a smart move because it is enhancing the value and awareness of the product and you haven’t even seen what you want yet. Burton is selling you on the idea of their snowboard. When you see “your” snowboard, you will feel part of the Burton mantra.

The options on the left (above) show a new center image on rollover. This is a continuation of less clicks, more content described in above paragraphs. Its very easy to see what you want and where to get it. The minds at Burton understand 1 simple rule:

If your website is confusing or hard to navigate, you will lose customers and hurt your conversion rate.

This is really important to understand and ensures you don’t encounter a problem where your site delivers great content, but in a confusing way. Web designers should maintain this focus when building sites, though seemingly obvious, isn’t always so.

Should you get lost, Burton has kept their navigation bar that is simple and familiar. Easy to navigate and find what you’re looking for very quickly, should you be overwhelmed. This is very welcoming as a consumer. Often I find that it is best to have a navigation bar like this because sometimes, the customer knows what they want and they want to just find it—this makes that easily solvable. Lastly, this navigation bar shows Burton recognizes this in some customers who want to simply find their product, buy, and be out. Again, when a brand is aware of its customers, it creates appreciation and trust. It never hurts to keep in mind of most people who may visit your site.

I love this footer. Designers, take note. What makes this so successful is the plethora of information that is not quite product-centric. This means it is company information that a customer may want that is completely unrelated to the product itself. Again: Get in, find what you want, and leave. Its always frustrating when you want to look something up on the company and have to go find that information through pages after pages. In terms of style, it bridges the gap from the navigation bar through text, color and form. The footer keeps the grid with boxed information. Dig it.

The Burton.com website is nicely done. I appreciate the attention to detail and the attention to their customer base. Navigation is simple, quick, and stylized without devaluing function or information. They continually update their site to stay up-to-date with trends and provide new and fun content to their customers.

Your Turn

The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from.

We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology, @thejellymon, or email me.

What do think of the Burton website?

]]> http://inspiredology.com/web-critique-2-burton-com/feed/ 12 http://inspiredology.com/a-showcase-of-hand-drawn-elements-in-web-design/ http://inspiredology.com/a-showcase-of-hand-drawn-elements-in-web-design/#comments Wed, 07 Sep 2011 12:10:35 +0000 Alex http://inspiredology.com/?p=10794 Web sites can, too often, appear more formal than they need to be. While they can look professional, there’s all too often something *missing* with many designs – the personal touch.

Adding some hand-drawn elements to a design (while perhaps not appropriate for all sites) helps to show some of the personality of the site owner & designer. It shows that the site doesn’t necessarily take itself too seriously, and whether you add just a touch of hand-drawn design or a lot, it can help to make the design stand out a bit more, and be all-together more interesting.

We’ve selected a showcase of web designs that make use of hand-drawn elements beautifully, from Rails for Zombie’s grungy backdrop to Denise Chandler’s impossible-to-miss monster octopus, we’re hoping the collection will leave you inspired & ready to break out the pens.

Things Cloud Sync

Branden Silva

Petsmos

Owltastic

Denise Chandler

Octopress

Dropr

Rails for Zombies

Gift Rocket

Adam Amaral

Stuff and Nonsense

Zaarly

Hark! A Vagrant

Matt Mullenweg

Vimeo

Are there any amazing examples of hand-drawn elements in web design that you’ve found that you’d like to share? Let us know in the comments.

The entry into our Web Critique series will be looking at the Italian Motorcycle company’s website, Ducati. We will try to assess their brand goals, style, and what the site is trying to do and get across…and how well it works.

Homepage

The Ducati Hero page is a actually pretty good; but I wouldn’t say its pretty. The Ducati brand is too small. This is a focus that should be made more clear, not necessarily the 300 victories. I think Ducati is making the assumption that “You know why you are here”. Creating Brand awareness is somewhat like brainwashing, it needs to be seen time and time again before it sinks, some more recognizable than others, that is well supported by style, trust, and product.

Lets be frank: the real issue here is that of the typography. Sure we get the point, lots of successful riders and races won, but at what cost? The cost of safe type and common design decency? On a webpage covered with ordered design and what would seem to be organized, this type is chaos. This is an unwelcome contrast and only hurts the page. We often find ourselves struggling to find a button to click in hopes of moving on and find what we are looking for. This hero image is not sexy, sleek, or stylish; a sharp contrast to what seems Ducati is striving for.

Interesting design decision here. Most of the time I am not a huge fan of drop-down menus, it is difficult to make sure it isn’t “finicky” (works well) and gets you to where you need to. Ducati’s isn’t particularly bad, but isn’t great. What I do like about it is that its simple to get to the bike I want. It keeps me from clicking too many times, straight and to the point—working as intended. The images are key here: they let those who may be interested in a Ducati, but don’t know what direction they are going in. This lets me pick a point based on looks, and go from there. Sex sells…and so do Ducatis.

Product Page

This page does not suffer from the main typographic issue of the homepage. The branding here is a little bit stronger merely due to the fact that there is a product shot. There is still a lot going on here and can be somewhat distracting. The page does do a good job of navigating us around, main focal on the product shot and then our eyes moving top-right to bottom-right. This is clever and relevant to users—it helps us scan the way in which the things we are concerned with (buying, colors, specs, etc) are part of our navigational process.

The details of particular items come up through lightboxesque style—a standard way of viewing “attachments”. It is reassuring that they aren’t using Flash and are designing progressively. Unfortunately, this operation does not flow smoothly and at times fails to operate as intended or to deliver what it is you are looking for; sometimes it wont center. This is a small issue that not only hurts the site’s quality, but overall brand awareness and begs certain questions: “How good can their bikes be if they can’t get simple web code correct?” Sure not everyone thinks this, but if you extrapolate very small flaws you’ll find how your trust in a particular brand starts to diminish. The good? Well it looks good and does a nice job of highlighting the key point—the ultimate goal. Sure how you get there may be a bit clunky, but ultimately achieves what is needed.

And so it repeats

Most of the site continues in this sort of fashion. The interface continues to be a bit clunky, especially when searching for accessory items or using the drop-down selection menus (not navigation). The overall brand feeling falls a bit a short. Ducati sleekness and style doesn’t quite come off in the site presentation. Minimalistic approach does play well, it is evoking of the Ducati spirit and in line with the motorcycles, its unfortunate that their products just aren’t quite highlighted enough.

The site’s footer continues the use of minimalism but fails to reveal much information or evoke the sense of “I want this damn bike”. It is an attempt to be elegant, but doesn’t quite meet the mark. We get basic functionality and utility here. Sure I am nitpicking a bit, but it feels like a halfway attempt at creating more of an inviting and immersive experience, so it must be commented on.

Solutions…

This is a not a perfect photoshop mock, but it gets the point across. I went with the idea of making the product the focus and emphasis here and built on the idea of their minimalistic approach. It is easier to navigate a product page top to bottom—this is human nature, therefore I envisioned it so. The icons of the different colors are below the product. This gives a sense of “many different options” and helps to add contrast from the boldness of the product shot. Selecting these options are easier without forcing the eyes to look else where—its all right there. Simple and to the point: You want this bike.

Another small touch is adding in the Ducati font logo. Some may not of even noticed its addition, it is subtle. Its subtle because it belongs there, some experienced web users assume that a logo is nearly always there: we have recognized that is a prime position for such things. The Ducati emblem was not enough. Seeing as how most bikes show off the Ducati font logo, this is fitting to brand the navigation with this logo. Its a visual reminder that your peripheral vision picks up and builds on subconsciously.

Be a part of this

We hope you enjoyed our first Web Critique featuring Ducati.com. The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and learn from. We also want to encourage user submissions! We could even break down a fan’s portfolio or website or print piece—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology or email me. We would love feedback on things this article needs or ways to improve this new type of post we will be doing.

3D modeling is also a popular trend in food and beverage web designs. This stylish trick brings a sense of reality and all products seem to be more accessible.

Now dig deeper into the world of taste and smell with food, sweets, beverages and restaurants website designs. Come on, start the gourmet journey – it is impossible to resist!

Food Websites

Beautiful appetizing photos of food, vivid layouts and various typography – all these means are good for building a food-related website. The main feature of this type of sites is a photo gallery located on the home page directly. Food manufacturers often try to tempt their online audience with numerous mouth-watering images with tasty dishes which almost cry “Eat me! Taste me! Cook me!”

Cheese & Burger

President

Alta Dena

Boboli – del Sole

Woki Tokee

The Square

Orca Bay

Calve

Hormel

Chipotle

Sweets Websites Designs

We have found that sweets websites are often designed in perfect brown tones. Dark, white, milky chocolate colors are often used by designers to draw in the user’s attention and to make them dream about a piece of a sweet cake or a little candy. Websites’ backgrounds and their decorations can be a strong call to action motif especially for those customers which are dying to eat some sweets.

Taking into account that millions of people are crazy about candies, web designers of chocolate-related websites often use products’ images as menu icons. It acce

Chocolations

Willie’s acao

Honey heart

Bloomberry & Co.

Max Brenner

Milka

Charlotte’s Cakes

Skittles

Hershey’s

Wonka

Drinks & Beverages Websites

Drinks and beverages websites always look stylish and cool. These web designs are called for advertising not only a beverage itself, but also a life style. Looking at beautiful and modern people drinking beer for example, customers like the image they see and want to fit in. That’s why a sense of style and the right target audience detection are the key elements in drinks and beverages web designs.

Pepsi

Honest

Quills Coffee

Blue Moon

Kingdom

Maxwell Hause

Baltika

Copper Door

Henrici

FeelGood

Restaurants and Bars Websites

The developer’s creativity has almost dropped to zero when it comes to restaurants or bars websites creation. All of them already have some interior design and cooking traditions which make them popular and recognizable by their clients. These parameters identify the color scheme and the layout of a future website, so everything a web designer should do is just to find the means of presenting it all online.

These web designs always present the atmosphere of a restaurant, bar, pizzeria, night club, etc. Restaurant websites are often visited by new people which have never known about them. The task of every web designer is to make people understand within graphic means if it is something they are looking for or not.

Biliouris

Cafe-Marionnette

Wholesome Bakery

Spaghetti warehouse

Russo’s Pizzeria

G2

Giraffe

Jason’s Deli

Benito’s Hat

Phillips