Archive for May, 2008

Getting Design Approval: The Single Mockup Theory

Monday, May 26th, 2008

For years, my employer has included this line in their standard contract: “We will propose 2-3 homepage mockups and a single secondary page mockup”.

There are variations on this throughout the industry, but overall it’s pretty standard, the assumption being that clients should see multiple concepts before choosing a direction for their website.

But it doesn’t often work.

Never having faced these kinds (or any kind) of design choices before, the client often takes the weakest elements of one mockup, suggests merging them with the weakest elements of the other mockup, and because they’re paying you big dollars, you’re expected to comply.

Now you’re both stuck. You’ve allowed them to settle on a mishmash Frankenstein product and bogged them down with a maze of choices rather than doing the right thing — using your expertise to steer them in the right direction.

What’s worse is that the endless back-and-forths with the client have wiped out your design budget. You’ve got zero remaining hours for your Frankenstein homepage and minimal hours left for designing important secondary page concepts like product listings or blog pages.

Reverse the Numbers

In the past year, I’ve pushed to change our standard contract to say, “We will propose 1 wireframe, 1 homepage mockup, and 2-3 secondary page mockups”. So far the result has been distinctly happier clients and happier designers.

Why? The underlying idea is that a design budget is better spent with ample planning, strategy and confidence applied to one “definitely” design, rather than letting clients chase after multiple “maybe” designs.

Meetings and Exploratory Time

Initial meet-and-greets are a great opportunity to squeeze the client for information on their tastes and their industry. If they’re overwhelmed or unable to offer useful information, it’s your job to get them in touch with their own opinions.

I’ve found it helpful to use a big-screen projector while browsing select sites from CSS Beauty or Most Inspired or Best Web Gallery. Try to gauge what ‘moods’ the client responds to, as they relate to specific colors, shapes, layouts and typography. It should become apparent what the client likes, and more importantly, doesn’t like. If they’re still indifferent, explain to them which sites work for you and be specific about why.

I also have clients bring in marketing materials like business cards, photos and brochures. Lay them out on the table and see what they do and don’t like about their existing business identity. If they absolutely need certain elements from their print materials to carry over to the website, discuss ways you can and can’t deviate.

We’ve now established some things about design aesthetics, but before the meeting is over, we also want to establish the content types that will display on the homepage: marketing text, taglines, blog excerpts, featured products, masthead imagery. Break them into modules and sketch it on paper if necessary, or use a tool like Best4C.

By now we have both ‘mood’ and modules established, which will make it easier to determine the sort of layout we’ll need: minimalist, blog style, magazine style, corporate, or otherwise. When the meeting is over, both designer and client should leave with a clear mental picture and be ready to set a single design strategy in motion.

Moodboards, Wireframes & Info Design

If the client is on a smaller budget, you may need to skip ahead to creating a polished homepage mockup. Otherwise, it’s good to use the post-meeting/pre-design phase for making preliminary sketches either in the form of wireframes or simple moodboards.

The ‘Polished’ Homepage Mockup

Once these general blueprints are client-approved, the table should be set for you to create a focused, polished mockup. I’ve found client approval to come more easily if the mockup is presented with thorough notes on why your design team felt it worked, was strong, and represented them well. As we are the appointed experts in this case, they are often willing to listen.

Why Multiple Secondary Mockups?

If the client’s site will have dynamic features like a shopping cart, for example, mocking up the interior product pages is going to be pivotal. Clients who barely care about the color scheme on their homepage will definitely, and loudly, have opinions on the user-experience of their store. Plus, you and your production team will need to know how static pages and sublevel navigation will look. If you already hit your single homepage concept out of the park, there should be plenty of budget left over for getting these interior pages on track and providing additional mid-phase information design.

Why additional information design? Because no matter how “100% sure” a client is about the content materials they provided upfront, trust they will ALWAYS need help re-organizing their content halfway through the build process, once they’ve seen it on the screen.

It’s our job to be patient throughout the strategy process — what’s second-nature to us is likely to be completely foreign to them. Ideally, we should know when to take charge and when to collaborate equally.

Related Quotes

DesignBit:

This process of creating one mock up is really trying to get the message across that if you take more time accessing the clients needs with well planned data gathering / analysis you will get the mock up that’s a good fit for the company first time.

Paul Boag/24 Ways:

Many clients like the idea of having the option to choose between multiple design concepts. However, although on the surface this might appear to be a good idea it can ultimately be counterproductive for design sign off.

In a world of limited budgets it is unwise to waste money on producing designs that are ultimately going to be thrown away. The resources would be better spent refining a single design through multiple iterations.

What is more, multiple concepts often cause confusion rather than clarity. It is common for a client to request one element from one design and another from the second. As any designer knows this seldom works.

Garrett Dimon:

If you present clients with multiple ideas and expect them to choose one, invariably, the end result is muted and diluted as the message of the different ideas gets blended together. This is what happens when you approach the situation with an offering.

Instead of spending time creating 3 differnt comps, ideas, or concepts, take aim at that one that’s great and make it amazing. Blow them out of the water. Leave them speechless. That’s guiding.

It’s really about taking them where you feel and know they need to go. You may be a little off course and that is to be expected. Believe it or not, your clients are looking to you for answers, and they want to help you find those answers. They are looking to you for guidance to the best solution.

Flash Player 10 3D versus Away3D

Tuesday, May 20th, 2008

3d test

One of the most exciting new features of the new Flash Player is the native 3D support. I put together a couple of demos to compare FP10’s 3D performance versus the ‘old-school’ approach, using the Away3D library (I didn’t have time to build a PaperVision example, but I imagine the performance would be similar to the Away3D one).

These demos display video and text on multiple 3D planes. Take a look and see what kind of frame rates you get.

Here are some observations based on the demos:

  • FP10 wins in terms of performance. This make sense when you consider that the 3D math is being handled internally.
  • FP10 wins in terms of SWF size (6k versus 110k). Away3D has to load in all the 3D code externally.
  • FP10 3D has no concept of depth sort. Depth sort must be handled manually. For simple scenes this is trivial, but once you get many polygons intersecting, depth sort can become a complex problem.
  • The FP10 perspective distortion looks a little odd to me. The plane seems to get bigger at the right and bottom of the view.

FP10 offers a very limited subset of the functionality offered by Away3D and PV3D (no cameras, complex objects, collada import etc), but for simple 3D scenes it gives much better performance. In the near future I imagine the PV3D and Away3D teams will incorporate FP10’s native 3D support to give the best of both worlds.

(Thanks to Keith Peters for his minimal components used here.)

Firefox Clear Cache Button

Tuesday, May 13th, 2008

Yay!

Designing a web app with character

Thursday, May 8th, 2008

In this presentation, Denise Wilton, designer at Moo.com talks about how to build web apps that not only work well, but have their own special character and personality.

As well as sharing tips from her design experience, Denise discusses the important role that copy plays in building a credible, likeable web app too.

This session is from Future of Web Design London 2007, hosted by Carsonified. You can listen to all the event MP3s and download Denise’s presentation at the FOWD past events page.


Review of W3

Tuesday, May 6th, 2008

Disclosure: This is a paid review. Saying that, all our reviews are honest. It wouldn’t be fair otherwise.

What is it?

W3<MARKUP/> (order here) offers a service to designers (or developers without enough time to complete a project I guess) where the designer submits a design (in ‘unflattened’ form e.g. a Photoshop/Fireworks file) to W3<MARKUP/> and they code it in HTML and CSS. This is not to be confused with amateur “slicers” - they claim to carefully craft the code according to standards and use modern front-end coding techniques. Picking out the more interesting aspects of their service, straight from the horse’s mouth:

We Provide:

  • Pixel-precise PSD conversion to CSS / HTML by hand (W3C Valid)
  • Design implementation into skins, themes, CMS, shopping carts or other software

With:

  • AJAX, sIFR, swfIR, mootools, script.aculo.us, jQuery, Prototype code,
  • Search engine friendly / semantic code,
  • 100% control of code style and preferences via our order form,

Who it is for?

Again, the service is primarily aimed at graphic designers with no or limited experience of coding for the web. It could also appeal to those front-end coders with little time or resources to produce the XHTML/CSS for a website. The service would be of use to those with some experience, but without the confidence to code to W3C standards. Those that want a theme for a particular blog/CMS/e-commerce package could look into W3<MARKUP/>’s services.

A quick look around their site

Whilst I shall concentrate on their service in this review, it is worth making a few points about their website. After all, you have to use it to get your design coded.

The design is a little off-beat (in a good way.) The site is unusually right-aligned with a bold, textured background at higher resolutions. I think that the website flows nicely with use of the “splatters” and “brush strokes” although the main brush stroke sometimes obscures content for me.

Compared to competitors, the site offers a whole host of information, answering every question I could think I’d need to know the answer to. Whilst the home and ‘why w3′ pages cover the basic, my favourite pages are the FAQs pages and the ordering page itself.

FAQs: The FAQs page (or section I should say) is vast. There are many, many questions conveniently categorised for your sanity. This smashes the opposition where depth of information is concerned.

Order: The page I was most impressed with was the Order page. I was expecting the usual name, email and requirements boxes but was presented with a clever form asking me nearly everything about my imaginary project and adding up the cost as I went along. Nice one, W3<MARKUP/>. One (minor) niggle is that the order page doesn’t seem to be well linked to. It’s a shame that it may be missing out on exposure due to people not finding it.

The Quality of Service

What would we look for from a company that codes other people’s designs? I’d personally look for the following two things:

  • The similarity and attention to detail between the mockup and the final output. The customer expects this. That said, we know that coding in XHTML and CSS is not a pixel-perfect art. Attention to detail is key, but the odd pixel difference between browsers and platforms is expected.
  • Quality code. Simple enough - but a short turnaround adds extra pressure into the equation. Let’s see how the XHTML and CSS hold up.

Let’s review some examples:

1. getpaid4yourrecipes

Website Thumbnail

The first example is getpaid4yourrecipes. The coded version from their example section is W3C compliant for XHTML and CSS. Bonus points for adhering to XHTML Strict doctype standards. The code is extremely concise and there are no real cases of divits. Accessibility-wise the web page passes Priority 1 accessibility (without a manual check) but fails at Priority 2. The error brought up is repeated link text, probably brought on by the sample links to ‘Shirley.’ So we’ll forgive them this time as it’s only a sample.

I’d be very pleased if I were the client in this case as attention to detail has been near-perfect.

2. RockMeTV

Website Thumbnail

The second example is RockMeTV. And the quality of code? One easily rectified error in the XHTML here. Same with the CSS, although this will be valid when CSS3 becomes official. I’m generally more interested in the quality and craftsmanship of the code and again things are rosy. Code is semantic, concise and doesn’t suffer from tag bloat.

3. Right-Reg

Website Thumbnail

Again, XHTML is valid and CSS has one error. The thing that stood out the most with this design is that it is coded very semantically and also is very SEO friendly. Also, a good use of sIFR. Excellent considering a short (I assume) deadline

Conclusions

I haven’t had the opportunity of putting a design through the process and cannot comment on that aspect of their service, but here goes for the rest:
Our online pharmacy is the perfect resource for people to get their drugs without any hassles or awkwardness. cialis We work hard to make sure you save money every time you shop with us. levitrasoma At our online store, you pay less and get more. viagra

Pros

  • Very high quality of coding shown in portfolio
  • High degree of flexibility/customisation - unlike most competitors.
  • Doesn’t feel like Joe Blogg’s Slice’n'Dice Web Shop - more like a Quality Web Boutique.
  • The price is very competitive given the attention to detail.

Cons

I’m struggling here, but:

  • Service only as good as the designer (but I guess it is the same with all websites.)
  • It would be nice to see the original design files on the website for comparison.
  • The name W3<MARKUP/> could be easier to type in reviews. ;-)

Last Word

I’ve said the following before about these types of service, but it’s worth mentioning again.

To get the most out of this, a good design talent is needed to create the design in the first place. If you’re a designer without coding knowledge then this service (or a competitor’s - they happily list them on their site) could be for you. It’s also worth me pointing out that these types of services span two categories; the professional, code-loving type in this review and the slicing monkeys that don’t help anyone (read my comment to find the difference). If you’re a designer looking for this type of service then ask someone to look over code samples - it’s worth it. It’s also better than buying a template from Templates R Us. It’s the difference between buying mass produced cheap food and the organic stuff. Don’t expect the moon on a stick, but do expect good code and a site that looks almost identical to your design.

Based on what I’ve seen, I’d have no issue recommending the service to a graphic designer friend.


Created by DesignForWeb company. All rights reserved © 2007-2010. Check also the iPhone / iPad developers blog
Disclaimer
The materials collected in this blog were taken from open access sources. We try our best to preserve the copyrights of original authors and clearly state the authorship as well as link to original source website where it's possible. Please leave your comment if you feel offended by any post or if you dispose of any information about breach of copyright law in this blog. We will do our best to resolve the situation immediately.