All posts tagged “Critique”

Cool Hunting Designer Master Classes in Milan: Present your latest work for critique on stage during this year’s design fairs

Cool Hunting Designer Master Classes in Milan

This year, in addition to our annual coverage of Milan’s Design Week, we’ve teamed up with Heineken to hold a series of Designer Master Classes on 9, 10 and 11 April 2013 at The Heineken Magazzini in Milan’s Zona Tortona. In order to give our readers access to some…

Continue Reading…


Cool Hunting

Web Design Critique #96: SuccessInc Drupal Theme

screenshot

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is SuccessInc, a Drupal theme from More Than (just) Themes. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About SuccessInc

“Most themes are built to look simple, clean, minimal. This one is built to help you impress. On both desktop and mobile. Success Inc. adjusts optimally to the width of the browser it is viewed on. As a result, it looks awesome, regardless if it’s a desktop computer, smartphone or tablet your visitors are using.”

Here is a screenshot of the homepage:

web design critique

First Impression

My initial impression of SuccessInc is quite positive. It’s a very attractive theme that looks to have plenty of top-notch features and customizable content areas. I love that it’s responsive and appreciate all of the easily-tweakable options that are built in. Let’s take a look at each section individually and see what we think!

Color Scheme

One of my favorite aspects of this theme is the bold color scheme. The bright highlights are starkly contrasted against the black, making for an eye-catching experience that feels classy and modern. The orange that you see above is simply the default color scheme, you can easily switch it up in the settings.

screenshot

Changing the color scheme is as simple as clicking a drop-down menu and choosing the option that you want. You can choose one of seven schemes: orange, cyan, green, red, cream, purple and gray. Just hit the “Save” button and the new scheme will instantly be applied.

screenshot

All of the color choices that they’ve included look great, making the theme fairly dummy-proof in terms of visual aesthetics.

Contact/Search Bar

The very top of the site has a little bar that holds some basic contact information along with a search bar. Here’s an up-close shot of what this looks like:

screenshot

There are a number of different types of websites where the user’s primary reason for stopping by is to find some sort of contact information. For these types of sites, this is a great little design element. Users don’t have to hunt around for a contact page or form, the information that they’re really after is one of the first things that they see.

As you can see in the shot above, there’s also a search field in this bar. The field itself is invisible, but is denoted by some placeholder text followed by a little search icon. When you click on this text, it becomes more of a traditional search field.

screenshot

This is a cool piece of design, but I’d be interested to see if users really respond to it that well. We tend to look for visual cues before we read, so it might take someone a while to figure out how to run a search. One quick route a user might take is to see the magnifying glass icon and click on it, which simply runs a useless empty search.

Further, the hint says to “Enter terms and hit Search…” but there is no button that says “Search” so again, it’s easy to see how this might confuse a user. Obviously, anyone half way competent with the web will figure this out quickly enough, it’s still a good idea to identify potential user road blocks and frustrations though.

Navigation

The navigation is provided by a rock solid Superfish menu. It works perfectly, has smooth animations and multiple levels, and looks pretty slick. Later one we’ll take a look at what happens when you downsize it for mobile devices.

screenshot

Slideshow

Moving down the page, next up is the slideshow. It’s a nice, big and animated content area that brings some interest to the top of the page. There are a few features here that I’d like to point out as well that you should consider when you create a slideshow.

screenshot

First, there are multiple navigation points. Both the arrows and the dots at the bottom serve to advance the slideshow or jump to a specific point. Further, the dots provide a reference point to where you are and how many slides are present. Finally, there are captions that allow you to add in custom messages.

Ultimately, these aren’t just nice features. They increase the effectiveness and usability of this piece of UI, making it more than simple eye candy. If you’re all about options, you can even go into the settings and change up the transitions or slide duration.

screenshot

Content & Footers

The rest of the page is pretty basic. It starts with a secondary content area and moves down to a footer, both of which are laid out in three columns.

screenshot

First, you have three content areas, each of which holds an image with a description and a button. I particularly like the shadow placed on the thumbnails here. It’s a nice illusion that gives some depth to the design.

screenshot

If the contact information in the header wasn’t enough, the footer provides some really nice functionality. There’s a place for a map, a Twitter feed and a contact form. This in addition to a sort of secondary footer that holds various social icons. These tend to be a cluttered mess thrown into a design as an afterthought so I really appreciate how well integrated into the design these are.

screenshot

Responsive Layout

The layout for the site starts as static, then when the viewport is reduced to a certain width, it becomes fluid. Here’s a look at a few of the steps for the design as the viewport changes:

screenshot

I love that this theme is responsive, I think this has become a necessity rather that a nicety. The thing that they really knock out of the park is that they layout seems to be fairly device-agnostic. Try as I might, I wasn’t able to break the layout in any significant way while experiencing with different widths. Everything, right down to the search bar, reformats nicely no matter what screen size you throw at it.

screenshot

On mobile devices, the navigation turns into a select box. This is easy to use, familiar and keeps all of the original options in place. There are some good alternatives to this strategy, but this is one of the more functional solutions.

Closing Thoughts

We’ve seen before that More Than (just) Themes does great work. My main complaint last time around was that the theme wasn’t responsive, but they’ve definitely addressed that concern with SuccessInc. Overall, it’s a great theme and I can see it working really well for lots of different types of sites.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Web Design Critique #95: WPMU DEV

web design critique

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is WPMU DEV, a marketplace for WordPress Themes and Plugins. Let’s jump in and see what we think!

Submit Your Site!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About WPMU DEV

“WPMU has the best WordPress, Multisite and BuddyPress plugins and themes on the web. Award winning, loved by 145,436 members, kicking it since 2004. It’s the only place you are going to find great Multisite themes, the famous 133-theme pack, amazing network home pages and 100% BuddyPress compatibility.”

Here is a screenshot of a section of the homepage:

web design critique

First Impression

“WPMU DEV is a beautiful site with a responsive layout and tons of great little touches that are enough to make this designer smile.”

</ br>

Last year, we took a look at another site in this same network/family: WPMU.org. That site felt a little plain. It looked decent, but very much like something out of a generic template. Further, the layout needed work and certain aspects of the aesthetic, such as the logo, were a bit off.

After the critique, the hardworking folks at WPMU completely redesigned that site, incorporating many of the suggestions that I made in the critique. The result is a gorgeous new blog that addresses every problem that I had with the old one. The layout is fantastic (perfectly responsive to boot), the aesthetic is beautiful and custom, even the logo has been redesigned to feel more modern. They really upped their game and knocked version two out of the park.

When they asked me to take a look at WPMU DEV, I knew as soon as I saw it that these guys were all about making great design a top priority now. Like the new WPMU.org, WPMU DEV is a beautiful site with a responsive layout and tons of great little touches that are enough to make this designer smile. Let’s jump in see what makes it so awesome.

Header

We’ll start at the top and move down the page. When you load in the page, this is the graphic that fills your screen:

screenshot

I love that the first thing that I see is a big photo of an attractive and friendly person. It doesn’t have that overly posed and formal stock photo feel but instead seems more genuine and believably casual. Right next to the image of the woman is a positive client quote, which brings context to the photo of the woman.

Right off the bat, they’ve hit on some of my favorite tactics: smiling faces and real client praise. This site, and consequently WPMU DEV, seems friendly, approachable and reliable to me as a visitor, and I’ve only been here for a few seconds!

All of this is backed up with a solid call to action: learn more. At this point, this is likely exactly what I want to do. This link takes you to a different, equally awesome page though, for now, we’ll stick to this one and scroll a bit.

Navigation

Before we move on to the next section, let’s talk about the page structure a little bit. For the most part, this is a single page site. The links in the navigation bar don’t take you to separate pages but rather jump you to different sections of this same page. Speaking of the navigation bar, it’s actually a really slick piece of development and design work:

screenshot

Initially, the navigation appears directly below the photo of the woman from the last section. However, as you scroll down the page, it actually clings to the top of your viewport. As it does so, a logo pops in and the text reduces its size in a fluid transition. This is the kind of stuff that I really geek out over so the navigation gets two thumbs up from me.

This isn’t mere eye candy mind you, what the navigation bar is doing is adapting to where it’s being used. At the top of the page, there’s already plenty of branding, so the logo isn’t needed. As you scroll down though, the logo pops up to remind you where you are and serves as a quick link to jump to the top of the page. Extremely functional. Extremely attractive. It’s a win, win.

Plugins Section

From here, you simply jump from one section to the next as you scroll down the page. Each section is unique and great looking in its own right while tying into the greater design aesthetic that governs the whole page. Here’s the first section:

screenshot

As you can see, these other sections reverse the color scheme that we saw in the header (dark background, light highlights), which makes for some really nice use of both contrast and repetition. When you hover over one of the icons in this area, the headline and even portions of the graphic become bright yellow, which yet again leverages contrast well.

screenshot

I love the way these icons look. They’re not the same set of minimal icons that you see in a thousand different iterations across half the sites on the web. They feel much more custom and have some personality to them.

Membership Slider

Next, we’re going to jump down a few sections and look at a really neat piece of UI that helps you decide on a membership plan.

screenshot

Here we have a nice, big slider that stretches all the way across the screen. As you move the slider from one month to three months and then on to twelve, the price at the bottom updates along with your savings. It’s a great point of interaction that has the ability to increase engagement. It also works really smoothly, allowing you to drag the slider or simply click anywhere to update the price. No matter where you release the slider, it’ll jump over to the closest stopping point.

Developers

The last section of this page that I want to look at shows shots of the staff and supporting devs/designers for WPMU. At a glance, it looks pretty unremarkable. Just a grid of thumbnails, right?

screenshot

It turns out these guys made even this section awesome. When you hover over a picture, you see a little overlay that shows the person’s name and position. Move your cursor away and the overlay slides out. The cool part though is that it slides in/out in whatever direction your cursor is headed. This means if you slide your cursor left out of one photo and into another, it looks like the overlay follows you. It’s a great illusion that I had to play with for a solid thirty seconds before moving on.

Responsive Layout

Before we finish, it’s definitely worth noting that the site is fully responsive. Below you can take a look at the desktop, tablet and mobile versions:

screenshot

Notice how well the design adapts to the device viewing it. As you move down, the core message is maintained, but non-essential extras are scrapped in favor of layout efficiency.

Great Work!

“Always be mindful of the barriers that you’re placing between your users and a conversion.”

</ br>
As far as I’m concerned, this site is top-notch. The design is perfect, the layout responsive and the messaging spot on. I can quickly tell what WMPU DEV is all about and have ready sources of information for any questions that I have.

I looked around for a long time trying to find something to complain about and frankly, there’s almost nothing. The one thing that concerns me is the effort that it takes to actually sign up. There’s no “Sign Up Now” button anywhere on the home page. Once I click the “Learn More” button, I’m taken to the plans and pricing page. This page is attractive, but I have to scroll for miles before I get to the bottom where I can finally choose a plan and proceed.

Always be mindful of the barriers that you’re placing between your users and a conversion. If I come to this site with the intention of signing up, I’m your best possible visitor and you want to make dang sure that I have an easy, clear route to give you my money.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Web Design Critique #94: HealthyHearing

web design critique

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is HealthyHearing, a source for hearing health and hearing aid information. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About HealthyHearing

“At Healthy Hearing, we work very hard to maintain our reputation as the leading online resource for hearing health information. Our goal is to provide high quality content that is understandable and inspirational.”

Here is a screenshot of the homepage:

web design critique

First Impression

My first impression of this site is fairly positive. From an aesthetic perspective, it’s quite attractive. The color scheme is calming and the imagery is friendly and approachable.

More importantly, I can clearly determine within seconds what and who the site is for. The purpose is clearly stated (Your Complete Hearing Aids Information Source) in several different ways in several places. I simply can’t miss that this is a site meant to provide help and information to the hearing impaired. This is a major goal so it’s no small success that this site accomplishes it so well.

In addition to purpose identification, I think that the site does really well in the area of navigation. By that I mean that I can very easily find what I’m looking for, and even if I’m just browsing, there are plenty of simple, helpful paths to follow. The overall site experience is well structured; another major win.

All this being said, I definitely have some small concerns and recommendations for improvement. Let’s dive into specific areas of the home page, where we’ll heavily focus on some conceptual misdirection and usability issues.

Who Is the Site For?

Before we begin diving into the areas that need improvement, we must figure out the proper vantage point for these critiques. I could critique every site based on how it suits my own needs, but ultimately, not every site is targeted towards me so this wouldn’t be very useful.

As I look over this page, this is the main graphic that grabs my attention:

web design critique

When other people see smiling faces, I see a target audience, and that’s exactly what we’re look at in this carefully selected image. Here I see someone who is certainly not a young man, nor is he too far into the “elderly” category. He looks stylish, fun and active. He wants to live life to the fullest with his awesome grandkids.

Are old people the only ones who need hearing aids? Certainly not, and perhaps the children in the image cover this idea. That being said, there’s a lot about this site that suggests that it is targeted directly at an older generation, so going forth, it’ll be important to keep this in mind. Major design decisions can and should be made in light of your intended audience.

Text Size Button

Right off the bat, I see something that confirms our assumptions about the target audience. There’s a button at the top right of the screen that increases the size of the text on the page:

web design critique

Now, if you consider who would need such a button, and who wouldn’t realize that most browsers can do this on any page with a simple keyboard shortcut, once again, we’re looking at older users.

I personally think this is a great feature that my grandparents would love to see on a lot of different sites (they freaked when Facebook made their text smaller). My problem with it on the homepage is that it’s nearly useless. There’s a ton of text on the home page and this button only affects one chunk of it, while completely ignoring the rest.

Admittedly, it has a much greater effect on other pages, but here on the home page I think one of two things needs to happen. Either make it work on a lot more of the text or remove it completely to prevent user frustration. In its current form, it’s probably just going to make people think that the site is broken.

Social Media Button Button Button Button

Did you catch the redundancy in my headline? Annoying, isn’t it? That’s how I feel when I look at the social media features on this page. At the top, above the search box, I find five social media buttons:

web design critique

As you can see, two of these are Facebook buttons and two are Twitter. Why do you need four buttons for two social media sites? This is a clear case of the kind of social media clutter that plagues countless sites today.

As we scroll down just a little, what do we see? More social media buttons!

web design critique

To all you marketing guys and SEO people, I get it, social media is good. But, just like with cake and ice cream, you can have too much of a good thing. Throttle that enthusiasm down a bit, less can be more.

On a side note, the Twitter imagery is wrong. The image above shows the old “t” logo next to the new bird logo. The latter replaced the former, and they should never be shown together. In fact, Twitter clearly states here that the “t” logo is dead and should never be used to represent Twitter.

Navigation

The next area that I have some issues with is the navigation. From both an aesthetic and usability perspective, I think we could tweak a few things here.

web design critique

From a visual standpoint, I initially thought that the items in the drop down menu looked like text fields, which was pretty confusing (they’re not). I’d consider styling these a little differently to prevent such confusion.

A much worse offense though comes from how small the clickable area is on each link. There’s this big box around each item, complete with a hover state that adds brightness, but those boxes aren’t clickable, only the words are.

Considering the intended audience of this site, you want to make your clickable areas as large as possible. If you provide me with a big box, complete with hover feedback, I’d better be able to click it! Again, the alternative is that your users will get the impression that you site simply doesn’t work.

Conclusion

As you can see, I really only pointed out a few very small things that need tweaking. On the whole, the page design meets its goals quite well. My main recommendation is to keep that target audience in mind, and comb through the site to figure out what’s going to bug them or turn them away. A lot of little annoyances can quickly add up to a poor user experience.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Web Design Critique #93: Surfcamp Portugal

screenshot

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Surfcamp Portugal, a site from Rapture Camps. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Surfcamp Portugal

“Located just 200 meters from the beach in beautiful Ericeira, Surfcamp Portugal is the perfect surf holiday getaway for both beginners and seasoned surfers. Our surfcamp is only a 3-minute walk from Foz do Lizandro beach in Ericeira, Portugal – surf capital of the Lisbon area and regular location for the World Surf Championship. Portugal is Europe’s surf Mecca and Ericeira was recently named one of only three World Surfing Reserves.”

Here is a screenshot of the homepage:

web design critique

First Impression

Can you imagine anything better than a week on a beautiful beach in a far off country, learning to surf and meeting people from all over the world? Me neither. It sounds pretty fantastic. Unfortunately, I’m just the guy critiquing this site and will not be enjoying the amazing adventures.

As far as the site goes though, I think it’s super attractive. From the layout to the photographs and on through to the colors and type, this is a really well-designed experience. Let’s take a closer look and see why.

The Photography Sucks You In

There are a lot of things that went right in this design, but there’s one particular thing that really drives it towards success: great photography. It starts with that big, beautiful header that swaps out the photo every few seconds and continues all throughout the site.

screenshot

The goal of this site is simple, to sell you on the idea of a surfing vacation. The absolute best way to do this is to show me how awesome it’s going to be, and these photos do just that. Beautiful oceanside landscapes, awesome action shots and a bunch of people sitting around a fire just having a good time.

I’ll let you in on a little secret, I’ve never surfed a day in my life and I looked at the price page not from a design critique perspective, but because I was genuinely interested in checking this camp out!

This tells me something extremely important: this design works. Even a desk jockey like myself can’t help but want to join in the fun when this page loads up.

Colors and Type

The color palette here really drives the aesthetic of the site. Never underestimate the power that colors have to communicate an emotion, feeling or mood to your users.

screenshot

Here the palette is a night time blue with blacks and grays. This gives the site a sophisticated and adult feel. Black can be a very serious color, but here it doesn’t suck the fun out of the page, instead it gives it a maturity.

For the type, we have a typical Helvetica Neue font stack. The headlines are nice and thin with all caps, an attractive and minimal choice that blends into the page well.

screenshot

I also really like the generous amounts of line-height in the paragraphs. I hate it when people squish their lines all together, let your type breathe! It increases the readability and makes the page feel less cluttered.

Repetition

Let’s return to our basic design education for a moment and remember that repetition is one of the most powerful weapons in a designer’s arsenal. When wielded properly, it brings consistency and personality to a design. With good repetition, everything feels similar, but maybe not the same; it just feels right somehow.

We see this in lots of ways on the Surfcamp site. One of the examples that I see pushed heavily is the use of hard lines and arrows:

screenshot

As you can see, the designer didn’t just throw in a single instance of a random idea, instead a general theme idea was developed and implemented in a way that really makes the design feel refined and well-planned.

Information Structuring

So the aesthetic is good and the design succeeds in earning my interest. The big question is, once it has my attention, can it keep it and answer the important questions that I’m going to have?

If I see a site about a surf camp, I’m going to have the following questions:

  • Where is it?
  • How much does it cost?
  • How long?
  • What’s it like?
  • Where will I stay?

Fortunately, the site designers anticipated and clearly presented answers to all of these questions and more. They’re all easily found in the navigation just above the content area:

screenshot

I really like that the information is all very straightforward. They don’t hide the prices or have you sign up to get more information. Instead, they list out prices for every scenario, show you photos of where you’ll be staying and provide awesome testimonials from people who have participated in the camp before.

Feedback: Push Bookings

Overall, this is a really stellar site and I commend the designers for doing such a great job. I don’t really have much in the way of constructive feedback, but I did notice one particular thing that could be rethought.

I think there needs to be a clearer path to booking. There is a booking page, but admittedly, it took me a second to figure out where I was supposed to be when starting on the home page.

To encourage those ever important signups, I think there should be a sizable “Book Now” button at the top of the sidebar, visible from every page. No matter where I am when I make the impulse decision that this is for me, you want to be there to turn that into a conversion.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Web Design Critique #92: Oomph

web design critique

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Oomph. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Oomph!

“Oomph is the go-to place for plastic cards with aplomb. Working with some of the world’s most popular brands, our little plastic gems have reached more than 20 million people – not bad going in five years. Whatever card you’re looking for, we can help. And if you can’t find the perfect card design in our gallery, get in touch. The possibilities in plastic are endless and we love trying something new.”

Here is a screenshot of the homepage:

web design critique

Aesthetic

Right away I can see that I love the aesthetic of this site. It’s wild, crazy and fun while perfectly conveying the idea behind the cards.

web design critique

As you can see, there are all of these crazy, glossy, colorful graphics that really push the idea that plastic cards are something cool and exciting. This could just as easily have been a very clean, Apple-looking site with an emphasis on dramatic card photos, but this makes the product a little more personal and approachable.

Type

Another thing that I really like about this site is the typography. The main headline font is called “BrothersBold,” shown off below with WhatFont.

web design critique

There’s a lot to like here. The typeface is perfectly readable and conveys a bold, masculine feel. Further, the chopped off curves communicates a sort of “cut out” feel that is perfect for a business that essentially die cuts plastic.

Aside from this, just about everything on the page is Helvetica. This is good because such a unique, interesting headline font requires a complementing typeface that is so simple and plain that you read it without thinking about it. Helvetica fits this description as the most ubiquitous and perhaps most invisible typeface on the planet.

The Grid

The Oomph home page is very clearly laid out on a strict grid. The grid is 1,020px wide and is fairly consistent from the top to the bottom of the page.

web design critique

As you can see, the primary construct here is the three column layout that occupies the center of the page. Remember, three is a magic number, so this makes the layout feel perfectly balanced and presents just the right amount of content.

One thing to really notice here is how balanced the whitespace is throughout the design. Obviously, a grid system is going to give you nice spacing horizontally, but you have to then be intentional about matching that rhythm vertically.

Non-Responsive

Though the site loads and looks find on a mobile device, it’s not in any way optimized for mobile viewing. On my iPhone, I have to do a ton of pinching and panning to figure out what’s going on.

Given that the site adheres to such a nice, strict grid, it’s definitely an ideal candidate for responsive design. A year ago, I was merely assigning responsive designs bonus points for extra effort, but now it’s quickly beginning to be something that I expect to see, at least on some level.

Responsive design is tricky business, but the real headaches come from content heavy publishing sites. For a static site like this, responsive or at least mobile-optimized design is less of a tall order and more of a baseline expectation.

Communication Hierarchy

Just as critical as the visual design of the page is the structure of the communication and how it is presented. In fact, this is really the core of what design is and why we have it. Good design structures information in a logical and attractive way.

The Oomph site has very well structured communication. Right away, when I load up the page, this is the first headline that I see:

web design critique

Notice that there’s a nice little visual trick here. The headline says “Plastic Fantastic. Cards by Oomph,” but at a glance, the word grouping that I see is “Plastic Cards.” This is exactly what Oomph is all about so this is a home run in communication design.

Questions Begged

Once you’ve had that initial look around and get the idea that this is a plastic card company, your first inclination will be to jump to some questions:

  • What types of cards do they make?
  • How much do they cost?
  • Who is Oomph? What’s the story there?

All of these questions are readily answered in the first place that you’ll look: the primary navigation.

web design critique

This is critically important to your design. Always try to predict the questions that you users will have and then try to decide the first place they’ll look to find them.

Shopping Experience

The shopping experience here is really smooth as well. The site doesn’t at all feel like a typical, cluttered online store. It feels like I’m just browsing the product offering and before I know it, I’m on step two of the purchasing process. The path to purchase is so natural and everything is presented so well: no secrets, no hidden prices or costs, etc.

Overall Opinions

On the whole, I think Oomph has a really solid site. The visual aesthetic is gorgeous, the layout is perfect and the communication hierarchy is top-notch. The only real complaint that I have is the lack of mobile optimization. Other than that, it’s definitely one of those sites that I spend the entire article complementing rather than critiquing!

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Web Design Critique #91: Photofolio

web design critique

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Photofolio, a Drupal theme by More Than (just) Themes. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Photofolio

Photofolio is a responsive, customizable Drupal theme with a ton of great features: multiple font schemes, superfish menus, slideshows and a lot more.

Here is a screenshot of the homepage:

web design critique

First Impression

My initial reaction here is quite positive. Photofolio is an attractive theme that gets a lot right, both visually and functionally. It admittedly feels a tad bit on the generic side from a design perspective, but given that it’s a template, that might not be such a bad thing. Let’s take a look around and see what we can discover.

Layout

Layout is one area where Photofolio really knocks it out of the park. The layout is clean and simple. There are a ton of content slots so you can fill the pages with as much as you need, but it’s all perfectly organized in a logical and straightforward manner.

As I mentioned above, this theme is fully responsive and looks great at just about any viewport size I can throw at it. This is great because it lets me know that they’re designing for all possible viewport sizes, not just a few popular devices.

web design critique

The site has a static width in the two largest media queries, then once you start getting down towards a mobile layout, things go fluid. This works really well for the content.

Alignment

One thing that I find a little distracting is that the alignment feels a little bit messy in the header. At a glance, you might not even notice it, but if you really take a close look you can see that the various elements could placed a bit better relative to their surroundings.

web design critique

Above you can see the basic wireframe of the header elements. It’s a subtle change but I would suggest tweaking this until you have something closer to the following:

web design critique

Here I’ve just infused a little more consistency with both the vertical and horizontal alignments in addition to adding a little more breathing room around the content frame.

Color Schemes

Another really great thing about this theme is the customization options. For instance, there are a whopping seven different color schemes to choose from.

web design critique

All of the color schemes are quite sharp looking and well implemented. I really appreciate how drastically different color schemes change the personality of the site. Whether you’re looking for a fun or formal look, this theme can work for you.

web design critique

Type

By default, the type for Photofolio is a casual, thin typeface that feels perfect for the light aesthetic. The line-height and words per line feels about right throughout the theme as well. This sounds small but it’s actually a very big deal, you never want to buy a theme with sloppy type!

web design critique

Open Sans is the primary font used here. This is of course a Google Web Font, and the Drupal is awesome enough to give you access to other great Google Web fonts in case you want to swap anything out (the theme has a few different prebuilt sets to choose from). Combine this with the color scheme options above and you’ll find that you can really tweak this theme to suit your personal style.

Browser Compatibility

Photofolio is billed as fully cross-browser compatible, and indeed it worked well in every browser that I tried. However, there does seem to be an interesting Safari quirk. When I hover over anything with a transition, there’s a weird flashing bug.

I recorded a screencast of this effect. You can watch it here.

Is the Design Successful?

We’ve already established that the design is both attractive and highly functional, but these aspects alone don’t necessarily make for a successful design. The success of a design is always based on the goals that it seeks to achieve. Whether you’re creating a Drupal Theme or a social network, you must establish a set of goals and keep them in mind.

Photographer Appeal

So what goals does Photofolio have? I would assume one major goal would be to appeal to photographers. As a photographer myself, I definitely see a lot here tailored to my needs. Photo slideshows and multiple gallery layouts to choose from along with a solid blog means that I can pretty much run my entire site from here. I can effectively show off my work and post about individual events.

More Than Photos

I think another major goal for the design would be to not tie it too exclusively to photographers. The features and design are such that this site could easily be used for a number of creative niches such as web design. The gallery examples are currently full of photos, but it would be easy enough to fill them with website screenshots instead.

Versatility

Templates are an interesting beast. Normally, design is all about decisions. You have to choose between those two fonts that you like and whether you want to be casual or professional. Your job is to target the design very specifically to one purpose, which depends of course on the client.

With templates though, the opposite is true. The idea here is to build one thing that can be used in many different ways by many different people. Instead of making hard choices, you spend your time piling on more options. The goal here is versatility. People want to know that if they purchase your product, it’s going to suit their needs, even if those needs change down the road.

In this area, Photofolio is quite successful. The responsive nature of the site means that, no matter where your audience tends to access the web from, they’ll get a stellar experience. This is of course in addition to multiple layouts for several of the pages, color choices, font schemes, and even some manual layout reordering options.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Web Design Critique #90: MOO.Com

web design critique

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Moo, an awesome service for printing business cards, postcards, greeting cards and more. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About MOO

“MOO was born out of a love of beautiful, high-quality print. Printing has been around for centuries, and we’re certainly not the first printer on the web. But, whilst many other printers have chosen to use new technologies to simply reduce the costs of printing (and often the quality), we strive to make print not only cost-effective but better than ever before.”

“We want to set a new standard for print, with remarkable new products that bring great design and uncompromising, high standards to the web. We’re only young, but when we grow up we want to be the best printer on the internet.”

Here is a screenshot of the homepage:

web design critique

First Impression

Right away, there’s a lot to love about MOO. The site is very attractive and features a clean, minimalistic design that really highlights the big beautiful product shots. Within seconds I can clearly see that, if I’m looking to get business cards printed, I’ve come to the right place. As business cards are no doubt a huge chunk of MOO’s business, they’re featured very prominently throughout the design.

As I look around for the first time, I really like what I see. My only real complaint is the lack of a solid mobile experience. Granted, I’m probably not going to attempt to design business cards on my phone, but I can easily imagine a situation where a colleague hands me a new business card and tells me that it came from MOO, causing me to reach for my phone to check out their pricing and products.

What I’ll get in this scenario is the plain old full sized site. A little responsive tweaking would go a long way here. The actual card design and ordering process involves the use of a custom Flash app, which is fine for now, but there’s no reason to not present an optimized experienced to mobile users who just want to check out the site.

Other than that, the site looks pretty great. Let’s jump in and do our standard goals-based analysis of the design.

My Questions as a User

Considering the nature of this site, I think some of the goals for the design would be to provide answers to a series of questions that I’m going to have when I load up this site in my browser. Here’s a pretty typical flow of questions that will take someone from curiosity on through to ordering:

  • What is MOO?
  • What do they sell?
  • How much will it cost?
  • How long will it take?
  • How do I get started?

If the design succeeds in answering these questions in a quick, easy and attractive fashion, then it’s doing its job. If not, some improvements will need to be made. Let’s have a look at each.

What is MOO?

The first and foremost question of course relates to just what the heck MOO.com does, given that the domain isn’t particularly descriptive, this is important! Fortunately, one of the first things I see on the site is this big banner.

screenshot

“We help you and your business create great Business Cards, MiniCards and more,” it doesn’t get much more straightforward than that. Combine this with a huge image depicting a couple of stacks of business cards and you have zero room for doubt as to what MOO does.

screenshot

One of the biggest mistakes you can make when designing a website is assuming that your visitors know what you’re all about. Never hesitate to be completely straightforward and explain your business (verbally and visually) so that even a child could understand.

What Do They Sell?

This is really a sub-point of the previous question: MOO sells business cards, we get it. But that’s not all they sell, so how easy is it for me to learn about all of their products?

screenshot

As you can see, the first two navigation menu items cover the full gamut of products. Even if this is my first time on the site, I can pretty quickly find what I’m looking for, whether its rounded corner business cards or stickers.

On top of this is my favorite feature of the homepage: the main image area is actually one large slider that cycles through the various products sold by MOO.

screenshot

This is awesome and really sells me on the business. The one thing that I’d recommend here is to make those thumbnails even larger (and possibly the text as well). As an example, MOO competitor Vistaprint has nice large boxes that take me through the different types of products that they sell:

screenshot

MOO’s design is far more attractive, but it’s a little easier to quickly find what you’re hunting for on Vistaprint (MOO does this on a separate page here).

How Do I Get Started and How Long Will It Take?

Both of these questions are answered right away on the home page as well. There’s a big button on every tab of the slider that takes you to the “make” step: make business cards, make minicards, etc.

screenshot

There’s also a big banner that informs you that next day rush printing is available. Let’s be honest, printing business cards is something that we all put off until mere days before we need them, so this no doubt helps them snag more than a few last minute sales.

What Does It Cost?

This is the one answer that I can’t find on the home page. It’s going to be, without a doubt, one of the most significant questions that any potential customer will have. From MOO’s perspective, I can see the logic behind getting people invested into the design phase before pulling out the pricing, but from a user’s perspective, I feel like I should at least get a small taste of what their pricing structure is like.

To be fair though, it’s still extremely easy to find pricing on anything. It’s shown clearly in the first step of the design process before you upload or create anything:

screenshot

There are too many products with too many variations to detail it all on the home page, but perhaps just calling out that you can get fifty cards for $ 20, or some other price point that they’re proud of, would provide users with the quick perception of value that they need to push them towards proceeding.

The Design Process

This isn’t the place to walk through the entire process of ordering products on MOO, but it should be said that their design process is really slick and easy. You can choose from awesome design templates, start your own design from scratch or upload a pre-built design.

screenshot

I actually personally order my cards through MOO so I know firsthand that this system works very well, no matter which route you choose to go. Even if you’re a complete design novice, their system really holds your hand with type graphics placement so that your end result will look professional.

Again, it is Flash, so it might be nice to one day see something a little more mobile friendly here. I’m tempted to say that no one would design a business card on an iPad or smartphone, but the truth is that we’re quickly reaching a point where you fully expect to be able to perform content creation tasks on mobile devices.

Random Thoughts

On the whole, the MOO site is pretty fantastic. We’ve covered all of the major stuff, but here are some random praises and critiques that I have.

Holiday Card Burst

There’s currently a callout on the home page for a holiday card sale, which is great… except for the fact that there are zero holiday card graphics on the whole page. At the very least, toss in an extra slide, right now the burst is just slapped over the other non-holida-card slides, which can be a little confusing.

screenshot

No Printfinity Love?

MOO does this awesome thing where you can print your cards with as many different back-side designs as you want (Printfinity). It’s a really cool feature that seems like it would distinguish them well, but I don’t see any mention of it on the home page. Perhaps they’ve decided that it’s not a popular choice among customers. If that’s not the case, I think it’s worth a homepage graphic.

The Accordions are Awesome

All throughout the site, vertical accordions are used as a primary UI element. These are a really nice touch as they allow you to store a ton of content in a really small space and are highly usable.

screenshot

Consider More of a Human Presence

One thing that I notice as I look around the home page is that it’s all so sterile and clean, which is great, but a little bit of a human touch goes a long way. If you wait long enough to see the postcards tab in the slider (shown in the pic above), you see a whole bunch of smiling faces. This is really nice and I think some more content like this would really help friendly the place up a bit.

In the design world, faces are magic. We can’t help but be drawn to them. I’m not saying that there should be a cheesy stock photo guy on the home page with his thumbs up, but perhaps some photographer business cards with a few people on them somewhere.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack

Do You Have The Right To Critique Another Designer’s Work?

I don’t think I really have to go over the old saying about everyone having an opinion because we know everyone does. If we didn’t, clothing would be one style and one color and if my nephew had a choice, it would all be yellow.

Do You Have The Right To Critique Another Designer’s Work?

Well, while we all shake off the thought of a world where everyone looks like a Dr. Seuss character, it just serves to remind us that diversity in looks are one of the wonderful things about our race and planet. Nature made a thousand different colors just for parrots. It’s a crazy world of differences.

Still, among evening skies that turn a million different colors, there will always be someone who insists it is the greatest sunset ever and someone who stands next to that person who will say the colors make them sick to their stomach. Are they both right? Naturally, they both think they are and tomorrow, there will be a different colored sunset with more joy and sickness from other people.

The recent logo changes from Microsoft and more recently, ebay, brought every opinion out of the shadows. Designers like to pick apart designs.

instantShift - Microsoft New Logo

instantShift - Ebay New Logo

In a Article (50 reasons not to date a graphic designer), there are several nasty truths to which we must all admit our guilt. Among that list are the designer’s secrets:

  • They want to save the world only with a poster.
  • They rather study the paisley pattern on your outfit than listen to what you have to say.
  • Do not know how to dress without consulting the Pantone book.
  • They can’t go to a restaurant without secretly critiquing the menu design.
  • They see ordinary objects and laugh.
  • They idolize people who nobody knows and speak of them as if they were his colleagues.
  • They hate each other.
  • They ask your opinion about everything but they do whatever they want.
  • They dream of the day nobody will make a single change to their designs.

This list has almost two million Google returns because we see the funny side of these quirks but the last one is more than just a quirk – it’s a unique problem we have because while we want others to keep their opinions to themselves, like the menus we pick apart while the crying part-time waitress who designed them stands awaiting our lunch order, we can’t keep our own damn opinions to ourselves. In the days of the World Wide Web, we can now make waitresses cry all over the world.

The faceless internet makes it easy to insult others. Some call it flaming. In most instances it is that same thing as giving a critique. People are freer to give advice and critique when they cannot look into the eyes of those whom they are addressing. As a former art director for several large, well-known corporations that drew creatives from around the globe, looking for that one chance to get hired, I can tell you it’s very hard to face someone and pass judgment that their work wasn’t right for the products produced by those firms. It was never said they were not good enough, just that their work wasn’t appropriate. Still, I know they heard “you aren’t good enough.”

Who Has The Right To Judge Talent?

Unless you are a bit of a sadist, no one could enjoy the position of absolute power over others. After years of reviewing senior art school student’s portfolios, I stopped because I felt one couldn’t judge their talents at that point in the beginning of their careers and I couldn’t take the look in their faces when I made gentle suggestions on work they felt was perfect. When I am asked by a designer, photographer or artist to review their portfolio and “tell (them) if (they) are any good,” I refuse, telling them instead that there are only two judges of their talent; the clients they service and themselves. Then I refer them to another article I wrote, entitled “Who Are You Trying To Impress?

I’ve been told it changed their outlook on their careers. I think the message of not caring about opinions that don’t affect your life or work is a big relief to those who read the article. Although I’ve brought up the same points when speaking in front of an audience of designers, I guess the message doesn’t quite get through. It does, however get through on a one-to-one basis when giving my own opinion on design group forums.

The recent blibber-blab about the ebay logo redesign must have pushed my buttons because of my own postings in defense of the designer I now can expect less birthday wishes on Facebook. The first match to my fuse appeared on a local AIGA chapter group board. The subject featured a press release from ebay; “Our New Logo; eBay introduces a new logo that reflects our commitment to delivering a cleaner, more contemporary and consistent experience.”

The designer who posted it wrote: “Okay gang… GO!”

Critiques ranged from snarky shots at the design, to kerning considerations and accusations of how horrible design has destroyed society. Then I had to open my big mouth.

“Okay, gang…” I wrote. “How many of you would sell your soul to the devil to be able to put the ebay logo in your portfolio and have a bunch of designers tell you how bad it is all over the internet… GO! ;)

Naturally, the person who started the thread quickly responded with, “What is your point with that comment?”

I wasn’t blameless. It was too sharp a response to be considered constructive. My post was spoiling for a fight and I knew it.

Shoving my foot farther into my mouth, I punched back:

“Was I speaking in a tribal clicking language? ;) My point is that subjectivity will give 20 people 20 different opinions but is anyone right? Some designer probably got initial direction, went through endless design-by-committee suggestions and this is what was chosen as the final product. So, do any of our comments really matter? Will people say, “gee, I was going to buy something on ebay but that logo turned me off from using the site.”

“With all of this in mind, and we all know the drill, how would you feel if you were the designer? How would you feel if you made a dump truck full of money to put up with the creative input? Would you walk away from the project once ebay execs started ‘helping’ with the design?”

I also pointed out that Lippincott was the firm that designed the logo. If you’re not familiar with this design/branding firm and their offices all over the globe or the top iconic brands they have helped launch, then you should check out their work.

instantShift - Lippincott

Further responses from the person who started the subject included:

“What you see as irrelevant opinion I see as valid professional critique, at least in a forum of professional designers. I’d have no problem or qualms giving Lippincott a fair critique of the logo, why should I?”

“By your logic good design and competent designers are pointless because everything is subjective, so everybody just shut up and do whatever the client asks you to do. That’s the kind of thinking that’s responsible for mediocre design.”

Others joined in defending this position, including a young designer, just starting out who wrote:

“I’m a big proponent of minimalism, but I’m starting to get worried with all the minimalism I’m seeing in design lately. Minimalism was meant to describe the essence of a company, but lately it seems like designers are like “omg apple does it, we should do it too” where is the creativity? Even within minimalism it seems like it’s all the same stuff.”

She did have to take a left-handed shot at my comments, “h8rs gonna h8.”

“Minimalism was meant to describe the essence of a company?” Someone needs to get a refund from her art school.

Further comments did, however, get less opinionated and turned to discussion of why the choices might have been made.

In another thread of this type on a different design group board, the comments were similar, so I tempered my snarkiness and added my two-cents:

“Interesting comments!” I posted, trying to stay extremely neutral. “The logo was designed by Lippincott – Brand Strategy and Design.”

“Subjectivity,” I continued, using the opening of the post I had put on the other group board, “will give 20 people 20 different opinions but is anyone right? Unless any of us were actually there, we are not privy to what was presented, as some here have pointed out. What was the initial direction from ebay? Did designs go through endless design-by-committee suggestions and this is what was chosen as the final product? So, do any of our comments really matter? Will people say, “gee, I was going to buy something on ebay but that logo turned me off from using the site.”

“By my thinking,” I added, hoping to throw some extra humility into this new discussion, “there are only two opinions that matter; the client’s and the designer’s. Within that, there must be the understanding that we are a service industry and sometimes service vetoes design considerations. That’s the reality professional designers face and have experienced. Personally, I believe including the question of critiques from outside sources, especially when not involved in the entire process of the design is moot and subjective without any insight as to the entire process.”

While I was hoping that post would make an impression, it wasn’t even mentioned in further comments. It garnered a couple of “likes” but that was it.

I did, however, notice that in this thread, some people were blaming those involved for not fighting ebay executives for a better outcome.

“The marketing VP should have fought harder for a logo that would have staying power and strong impact on the consumer instead of pleasing everyone” posted one commenter.

Another commenter closed her opinion with the statement:

“No compromise please!!!”

“Cowardice!” One person wrote. “This screams of design-by-committee, and of a client running the process and a studio afraid to stand up and say, “stop! YOU shape the design PROBLEM and let US shape the design SOLUTION!”

The closest statement with which I could somewhat identify was:

“What we are not able to see is the range of possible exploration that was offered.”

That designer continued, “although it is up to designers to inspire and encourage clients to push their evolutionary envelope, ultimately ‘how far’ is the client’s call to make. To some organizations, baby steps are giant leaps. And in this case I can only assume that to those in the boardroom, this felt fresh yet safe, and an acceptable progression of their established brand equity.”

“Don’t always blame the designer for the design. They hold responsibility, yes, but not the checkbook.”

Other comments about how bad the logo is continued, along with tears and fears for what it has done to the design industry as a whole. An interesting comment posted was short and sweet:

“If it ain’t broke don’t fix it, and if you’re gonna change it, reinvent it.”

I suppose that would have saved ebay a few dollars.

I wrote to Lippincott to ask a few questions for this article and received a quick response from someone in their public relations department.

“Changing our logo was not a decision we made lightly. We recognize people feel a special connection to our previous logo, but too often it reminded people only of what eBay was, and not what eBay is today: a modern global marketplace. We are proud that the eBay community remains diverse and connected – and that the eBay shopping experience is now more modern, clean and consistent. We wanted to reflect these elements in our identity.” – Attribute to Richelle Parham, chief marketing officer, eBay North America

“We wanted to reflect the right amount of change in eBay’s new logo. The design is inspired by today’s vibrant marketplace and sleeker experiences. We leveraged the iconic color arrangement and approachable form to reflect eBay’s heritage and evolved it with a brighter blue and darker yellow and a streamlined arrangement to create more visual harmony.” – Attribute to Su Mathews, senior partner, Lippincott

I can’t say I blame them for not answering my questions – they certainly don’t owe anyone except the client any explanations. The client was happy, so what else matters?

I went back on the group board and posted this message, hoping it might create enough shock to end the flow of misspelled critiques from the group members:

“The cries of blah-blah-blah from designers not there as witnesses will go on and the senior partners at Lippincott won’t lose any sleep from it all. They will still receive more résumés they can view, from panting designers hoping for a shot at the big clients and to be a part of the firm and, as John Steinbeck wrote, ‘the world (was) turning again in greased grooves’ (meaning, in his book, Cannery Row, that nothing really mattered as small problems passed and faded into time).”

“Time for us, as designers, to look to our own houses and smile at what we can accomplish and learn to stand move on from what we cannot.”

That statement didn’t stop a thing. No one even referred to it but the comments continued about how bad the logo is, etc. and so forth.

So, Who’s Right?

The easy and probably best answer to who is right about un-requested critiques and opinions is that no one was right in all of the exchanges I’ve outlined. I think that any designer would change their opinion on the freedom to critiques others work if they suddenly found their latest design at the center of the web spotlight and, as I first wrote, ” have a bunch of designers tell you how bad it is all over the internet.”

I remember a TV episode where some character is embarrassed in front of his schoolmates when they find out he has sexual thoughts about a teacher who is… less than attractive and they tease him mercilessly. When he manages to lock himself in the school administrator’s office and read every student’s private file aloud, over the intercom, mentioning ALL their “unique” quirks, the school then turns into a very quiet and polite place as nobody can meet the gaze of anyone else.

As designers, we are all proud of our work and try to promote it to each other (just look at sites like Dribbble). How would one of the people throwing around comments of disgust for the design work for ebay or using descriptors like, “cowards” without thought of others, feel if suddenly one of their logos were to pop up on a discussion board with the suggestion of “go!” inviting brutal critique from those who sit outside the process or, perhaps, just don’t have the professional experience to know better?

instantShift - Dribbble for Promotion

“Art is uncompromising and life is full of compromises.” – Gunther Grass, novelist, poet, playwright, illustrator, graphic artist, sculptor and recipient of the 1999 Nobel Prize in Literature. Perhaps you think a man of his achievements and notoriety is just a babbling moron? Okay, gang… GO!


instantShift – Web Design Magazine

Web Design Critique #89: Discoveries Magazine

web design critique

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Discoveries Magazine, a medical research publication. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $ 49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Discoveries

“Discoveries Magazine is Cedars-Sinai’s flagship publication about medical research and its impact on patient care. Published twice a year, Discoveries showcases the excitement of scientific discovery and the men and women who benefit from it.”

Here is a screenshot of the homepage:

web design critique

Now that we’re familiar with the site, let’s dive in and discuss the merits of the design.

The Good

There’s a lot that I like about this design, so let’s start by discussing all of the things that went right in the design. What are its strong points? What can we learn from it as designers?

Clean Design

The first thing that I notice about Discoveries is that the design is extremely clean. The colors of the site’s background and structure are muted and understated, which allows the content to really shine. I’m not distracted in any way, my eyes shoot straight to the content. This is an impressive feat that lots of designers struggle with when working on a content heavy site like a magazine.

web design critique

Layout Awesomeness

A big part of the “clean” character of this site is the layout. It has plenty of whitespace, and the content is nicely organized in a clearly hierarchical fashion. Instead of everything competing for my attention, there’s a clear path of communication. It’s a beautiful thing.

web design critique

The best part: it’s responsive. The site effortlessly adapts as the viewport changes. We start with a static grid at full desktop size, which hits a breakpoint, drops the far right column, then switches to a two column fluid grid. One more breakpoint is used to bring that down to a single column fluid grid. So simple, so effective. I love it.

Custom Illustrations

I think my favorite thing about this site is the (seemingly) custom illustrations that are scattered throughout the articles. Stock photos are one thing, but illustrations like this have a way of giving your site a personality and a brand. It’s one of the reasons I’ve always loved A List Apart so much.

web design critique

To a visual guy like me, illustrations like this bump your publication up in standing. You must have a decent budget if you’re commissioning custom artwork, this stuff can be really expensive!

web design critique

These illustrations all seem to be quirky and unique. I’m not sure if they’re from the same artist or not but they all have a very similar feel. Keep them coming.

Highlighting Important Content

I hit on hierarchy in a previous section, but it’s crucial to point out how effective it is to highlight important content. This site’s designers do that in the same simple but effective style that they’ve used for everything else.

web design critique

I’m a huge fan of image sliders and this one is exactly what an otherwise very basic page needs to grab the user’s attention and add in a little engagement.

The Bad

As you can see, I really like the look of this site. There’s a lot that the designers got right. However, this is a critique is it not? Let’s jump into the areas that could use a little improvement.

Generic Design

There’s a fine line between bold minimalism and generic design, and it’s really tricky to fall on the former side of that equation. For all the praise that I’ve given for the layout and “clean” look of the site, I can’t shake the feeling that it all looks a little boring and generic.

There’s something about it that just screams, “I grabbed the most popular template from a WordPress gallery.” There are some sections that fight this feeling, such as the header:

web design critique

This looks great. The font is unique and has character (like the illustrations) and you’ve got a nice splash of color. But this is where it stops. Repetition is the key to good design, but I don’t see this style repeated anywhere. Use that color to grab my attention in other places around the page and toss in some headlines with a tall, condensed font.

The best way to get a feel for how to battle generic design is to look around at similar sites that have successfully pulled off a strong personality and brand. One such site is Relevant Magazine, a publication with designers that I’ve admired for years.

web design critique

As with Discoveries, Relevant features a clean design with great hierarchy and plenty of whitespace. But unlike Discoveries, the site is overflowing with repetition and little design touches that fight off any ideas that the site is based on a template.

Pagination

Looking around on the site, I came across an issue that’s hotly debated in online publications: pagination. Every site owner loves page views. We want as many as we can get.

One day, someone realized that they could boost their page views dramatically with a simple technique: just spread your content out over several pages! That’s what seems to be happening on this site:

web design critique

As you can see, this article is divided up into a whopping six pages (most were actually nine or ten!). Each page isn’t super long and contains only about six paragraphs. This makes for tons of page reloading as you’re reading through content on the site. I can perhaps see someone making an argument that splitting up the content like this is somehow good for the user, but I really don’t think that applies here.

If you’re really dead set on this pagination tactic, at the very least, toss in a button that makes it possible to see the content all on one page. This gives the users the power to decide what’s best for them.

Closing Thoughts

Ultimately, I think Discoveries Magazine has an awesome start to work with. They have solid content (I got sucked in a few times while writing this critique), and their organization for that content is awesome.

The two main areas that they need to focus on is fighting the generic template feeling in the design with a stronger branded presence and improving how content is presented in specific posts.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Design Shack