Web Design Critique #1

by on 21st May 2010 with 27 Comments

screenshot

Today we’re going to start a new series where we take a brief but in-depth look at a particular design and discuss both the aspects that are done really well and those that could use a little work.

Over the course of these critiques we’ll discuss everything from design and color theory to usability and good coding practices.

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 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.

Keeping it Clean

These articles are meant to be a learning experience, not a way to bash designers. We will always seek to maintain the integrity of the designer and will try to focus on the positive more than the negative.

We will ask you to offer your honest opinions regarding a design at the end of every critique. We ask that you also be respectful of the site’s designer and offer clear constructive advice devoid of any harsh insults. We will promptly delete any comments that resort to simple ad hominem attacks or pointless complaints.

Get Feedback On Your Site!

In addition to being able to submit a site to our CSS gallery, you will soon have the option to have us consider your site for a dedicated critique as well.

This will result in much more exposure for your site as these posts will appear right in our normal stream or articles. Further, you will receive quality professional feedback and real, implementable suggestions for how to improve your site’s design.

Now that we’ve got all of the necessary introductions out of the way, let’s get started with our first design critique!

Dreamscape Studios

Dreamscape Studios is the online portfolio of web developer Brett Chaney. Brett is based in Melbourne and has a number of great site designs under his belt.

screenshot

What I like

This site is designed well and there are plenty of great features to choose from. Let’s take a look at the top three areas that stand out.

The Background

The background on Brett’s site is a realistic cloudy paper texture with a canvas-like finish.

screenshot

This is accomplished with a 2000 × 1400 background jpg. Many designers are still afraid of using a single large background image but even mobile devices load the image plenty fast enough to not bog the site down.

The Color Scheme

The site utilizes a very light, natural color palette comprising only a few main hues.

screenshot

This mild color scheme is perfect for a portfolio site because it helps draw your attention to the scrolling gallery of sites, which are brighter in color and immediately become the focus point.

The Typography

Brett uses a good mix of serif and san-serif typefaces that complement each other well. This shows that he has a good grasp of what types of fonts work well together.

screenshot

In a couple of places the type has been given a slight shadow that makes it glow a little or even seem slightly burned into the paper. It’s a nice touch and he showed a good amount of reserve by not using it too much.

Areas that Could Improve

Here we’ll take a look at just a few places where the design could be a bit stronger.

Layout and Whitespace

Whitespace is definitely a good thing in a layout, but awkward trapped space or too much open space in the wrong place can really reduce the efficacy of the design.

screenshot

The little side drawer on the gallery is a nice touch, but it’s really throwing off the layout of the page and creates a large empty area all the way down the left side of the page, which is prime eye real estate.

I also think the gap between the footer and the content could be reduced as its a bit unnecessarily disconnected at the moment.

Footer Content

The footer has tons of links in it, which is a great way to simplify navigation on large sites. However, these links are all outward and don’t really pertain to any of the content above in the least.

screenshot

Since this site is meant to be a portfolio, such a large list of friends and favorite sites just doesn’t seem professionally appropriate.

Further, as you scroll down the page, a bar pops up in the footer with a link to go back to the top of the page. I always point these out in sites because I generally love how useful they are in long blogs and galleries. However, all of the pages on this site are actually quite short and just don’t seem to merit a shortcut to the top of the page.

This link is actually even covering content in the footer as well and only goes away when you’re at the top of the page and therefore cannot see the footer. This means you never really get to see what’s under there, just that something is poking out (I believe it’s the copyright information).

Conclusion

Brett Chaney’s site features a great background texture, a nice light color scheme, and strong typography. The use of whitespace in the layout and the footer content could use a little tweaking, but aren’t really significant enough problems to ruin the site’s overall great experience.

Use the comments below to help the designer out by giving some constructive feedback. Also be sure to tell us what you think of the new critique series and whether or not you’ll be submitting your site.

Interested in having your own site critiqued? You can find out more here.

Comments & Discussion

27 Comments

  • http://www.christrude.com @trudesign

    Good critique, Brett’s site is nice and simple with a bit of complexity to stir things up.

  • http://eboyer@gmail.com Eric Boyer

    Great work, the white space is the first thing I saw when looking at this design. It really sticks out (in a bad way).

  • 7ate9

    I totally agree, Josh. I love everything about the site except the trendy use of the link lists on the bottom. I’ve never been a fan of this on most sites, as it just seems to be a space filler and create noise.

  • http://sixrevisions.com Jacob Gube

    You should charge a consultation fee for this critique. Well done Joshua!

  • http://www.houghtonlaird.com Barbara Laird

    It’s refreshing to see a well thought through analysis instead of just another “here’s a site” post. Thank you!
    I love the color scheme and the background texture. I think if the header and footer went full width instead of just the right column width, it would help. Also, the pages aren’t very long, so the return to top is more of an annoyance than a value add. It also bugged me that the “PORTFOLIO” button didn’t match the other buttons in style. But,overall, quite nice.

  • grunion

    sorry to say but i strongly disagree with the typography. this site actually has a mix of serf, sans serif, bold, narrow and some text has drop shadows. the styles not only contrast each other but dont work well for readability. nor would a true typographer or experienced designer agree with the aesthetic selection of fonts.

    the way finding is also an issue as some things have rollover states others do not. some buttons are one style while others are unique.

    the color palette is subjective but there is no distinctive linking color at this point. it appears that this “design” was purely built around the portfolio component. this site would get a solid D+ in the real world.

    however, i LOVE this fun critique experiment, well done.

  • http://www.tyler-dawson.com Tyler Dawson

    Great job on the website, Brett. I thought the critique was really well done, too. I do like the color scheme but think the use of an accent color might be a good idea (the red of the links, perhaps?)

  • http://www.dynamicwp.net Eko Setiawan

    Critics of this for us too, I learned a lot from this article.
    Thanks…great post

  • http://www.pixeleven.com Guillermo Hernandez

    I love these…Keep em’ coming! The textured BG is fantastic. I agree that the “Return to top” footer bar is very distracting. For a second there I thought it was the footer :)

  • http://dualitydesigns.ca Douglas Wollison

    Brett did a very clean website, though I agree with you guys on the white space issue.

    Grunion: From what I can tell, his only real typography problems are in his logotype, everything else seems consistently one font or the other. I think all he needs to do is rethink it.

    I also agree that he should make all the buttons consistent.

    The only other thing I’d really say about the design is the sketched in arrows found in the About and Portfolio page. While alone I think they’re perfectly fine. They just don’t fit with the rest of the typography. They also seem pretty redundant; I know they’re meant to be but they seem better suited for a quirkier website, while this one frankly seems calm, professional.

    This critique article series is a great idea, maybe if I’m lucky you’ll eventually cover one of my sites.

  • Vik

    I agree with grunion, the fonts are distracting and make it harder to read – serif, sans and script on the ‘about us’ page. My first instinct was to count them rather than read the site. (Full disclosure – I’m a developer, not a designer, but I ocassionally wear both hats.)

    Having ‘featured work’ on the left just didn’t feel right to me given the color usage, setting everything off to the right.

    That said, i liked that he gives visual cues in the navigation as to where you are.

    I think if he re-titled his favorites ‘design resources’ it would go over a little better?

  • David

    I think Grunion’s comments are very harsh indeed. There is nothing remotely unreadable about any of the text on the site. Also, we can’t be web designers, developers, logo designers and typography experts all in one can we?

    He claims only to be a web designer and judging from his site and other designs he is very good.

    I like the texture, feel, colour scheme, small details and for the most part the layout of the site. I agree there are a few awkward voids and the return to top is unnecessary. Lastly, I don’t feel the links at the bottom have (far) too much weight. It boosts the sense of involvement I feel he has in the industry.

    Critiquing sites is a great idea Design Shack – keep it up!

  • http://www.injured-in-new-york.com/ NYC Personal Lawyer

    There are some aspects that could be overlooked when developing a new page. Thanks for pointing out what’s important and the in-depth analysis of website design.

  • Pingback: Create an Awesome 3D Slideshow with Cu3er: Part 1 | Design Shack()

  • http://www.pawelbialach.pl Paweł Białach

    Hi! Very good article. I wish you all the best.

  • http://www.designil.com/ DesignIL

    Great critique! The design looks really good that I didn’t see any error on it in the first place.

  • arturo

    i like the natural color pallet safe with a bit of color

  • http://www.valid-markup.com A. H. Ansari

    Very useful article, thanks for posting.

  • http://ashaker.com Ahmed Shaker

    Great job man ;) creative and eye-catchy design

  • http://webdesigncompany24x7.com Steve

    i liked the way, you have did analysis.

  • http://www.thebedbugexterminators.com SARFRAZ

    I really like the way ‘)

  • http://www.oliviu.net Decorative Arts

    a very nice and clean design and a great review …

  • http://itcertificationsyllabus.com IT Certification Syllabus

    Thats a nice critique…i have a question for you.. do you critique all types of websites and do you charge for this service you offer…

    i really liked your critique and you definitely offered areas for improvement

    You have a clean template

  • http://www.foodshighinfiberlist.com Foods High in Fiber

    Thanks…great post.

  • http://nisk15 Md. Nur islam

    really nice work, i hope help us…

  • http://abcnethost.com Aubrey

    Here I am at the bottom of a very long page, on a site that critiques sites, and you said the site being critiqued doesn’t need an anchor link to the top, and yet, here I sit 20 pages down in the basement with no way.

  • Alex Davis

    As a new beginner I have a hard time determining what makes a site good or bad but what I like about this page is background image Brett used. At first glance I can see that this client is industrial. I also like the blue value in the color scheme. I think the pop up links at the bottum gives the site chalenging look.I found the top nav button a bit Aggressive. It just doesn’t seem necessary to have a button that cascades across a large porstion of the site but that may have been a request from the client. Overall I like the complexity of the site and it seems very well constructed.

Subscribe

Membership
About the Author