Blog

Recently we were asked to “polish up” some designs that a client submitted to us for a WordPress portfolio site.  The client was very set that she wanted her site to look very similar to the mockups she had made.  She’s a talented architect and has a solid aesthetic sense, so her confidence in her own website designs was certainly understandable.  But the problem we faced was a very common one:  what translates well to print does not often translate to the web… and the designs were going to work against her when it came to usability and long-term success, especially when used as a WordPress theme.

I’ve decided to share her designs (her name has been blurred out for privacy reasons) alongside the email I sent her because the whole issue is a great case study in working with today’s available technology and not letting arbitrary ideas interfere with a website’s overall usability.

Here’s the homepage mockup she sent me:

Here’s the Portfolio page mockup she sent me:

Here’s “page 7″ which is referenced in the email below:

Here’s the website she used as her primary example:  http://two9design.com/two9wp/?page_id=13

OK, now here’s what we wrote rather than just “polishing” the design:

Hi *****,

I’ve been digesting these mockups and this sample site for a few days and was just sitting down to work on refining the design, but decided instead to bring up a few usability issues that have been vexing me.  I don’t want to just give the coders a site that’s going to be challenging to build properly and challenging for you to maintain properly.  Let me explain…

I completely understand your aesthetic preference for a wide aspect ratio.  The sample site you sent from twodesign LLC looks nice because of its austerity, but there are some problems with it from a functional standpoint:

First and foremost, we want you to have a WordPress Content Management System for your site so you can easily add to your portfolio and content.  But, when working with a fixed aspect ratio like this, you’re going to have issues when it comes to photo galleries and content.  Many times– and sooner than you think — your content is going to spill over and need more space.  This design will not allow that.  So there will come a time very early on where a content addition you make completely breaks your website’s design.

The design you’ve given me looks great as a print piece where every page is carefully controlled by the designer.  It could potentially work as a totally static website too, though you’d run into the limitations fairly soon that way too; but that goes out the window quickly when you have “dynamic content”, which is to say content that is inserted by you into a template-driven site wrapper.  That’s how website CMS’s work though.  For a CMS to accommodate your longterm needs, the layout has got to be flexible.  Vertically flexible.  With a content area that can expand to fit a variety of content types.

Doing so will accomplish several things:
(1)  Free up your content.  In some of your mockups, I can see that you were struggling to fit all of your content into the space that this aspect ratio allows.  Page 7 of your PDF, for example, feels quite cramped to me, and I’m sure you cut some content out too in order to fit it there.  We need to build you something that lets you put in the content you need to put in, no matter what that content is.

(2) Free up your navigation.  In the twodesign site, on the homepage “interior architecture | space planning” etc looks like navigation and probably should be, but it’s not.  That’s very confusing.  Then, when you navigate to an inner page, on some of them that area becomes navigation and on others it does not.  Very confusing to the user.  Rule #1 of website user interface design is Be Consistent, especially when it comes to navigation.  I know you’re attached to a vertical navigation like that, but it’s very limiting when it is placed into a fixed-size space.  You will run out of space.  I would suggest using a dropdown menu for your subnav, similar to the menus on this site:  http://www.fireeye.com/  – roll over “products and solutions” to see what I mean. In fact the FireEye site, while far too techy for you, does hint at a wide aspect while still accommodating content– the same way the Emerald City site, which you liked, does.  In fact, from a wireframe sandpoint those two sites are fairly similar.

(3) Provide negative space.  Leaving room for wider margins, clean paragraph spacing, empty space and nice typography provides a sense of psychological calm to the end user. When you have a fixed aspect ratio and have to find ways to cram your content into it, that sense of being cramped affects the end user’s experience in a negative way.  If you look at my site, www.iluminada.com , you’ll see that I’ve used the browser background for my imagery– it loads behind the content, giving me a wide aspect because that background fills the user’s browser frame entirely, no matter the screen size.  Doing so frees up a lot of content space so I can have nice, big fonts, plenty of breathing room and flexibility for different content types  AND you can click the little white minus sign at the content’s upper right to hide the content entirely and just see the image.  Calm and also cost-efficient to build and code.

(4) Free up your portfolio galleries.  You design some very nice, elegant homes.  I don’t want to see you cramming those beautiful photos into a small space.  WordPress will not easily accommodate this either.  WordPress gives you the option of doing a “slider” ( http://www.crockerhomes.com/ ) or a thumbnail grid: http://www.pricelandscapeservices.com/portfolio/ where you can click the photos to zoom in.  Taking advantage of this feature makes it FAR EASIER for you to effectively maintain your portfolio and for people to get to the photos they want to see.  They way you have it in your mockups won’t easily work with WordPress, if it can be made to work at all for the budget you have.

I hope I haven’t overwhelmed you here, but I felt it was important to raise these issues so you can end up with a website that’s both pleasing to look at and totally functional over the long haul.  Please take some time to digest this and, if you like, I can come up with a visual concept that strikes a compromise.

Thanks.

–JB