Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Our agency's workflow for creating a website normally consists of:

  1. discuss content-design with client
  2. we create wireframes (with optional, depending on client, approval)
  3. we create one or more pixel perfect "layouts" in illustrator / photoshop
  4. client approves with corrections
  5. return to step 3
  6. begin coding.

Now, since we are slowly approaching the year 2010, and we're pondering about RWD ("Responsive Web Design") and "mobile first", it's clear that our workflow wouldn't work without adding a ton of costs for the client (considering the technical CSS overhead isn't THAT large).

What is the best workflow which works with RWD and mobile first? Also, are there any specific tools that may help?

share|improve this question
1  
@Lauren Ipsum, rolled back. That was self-deprecating humor. RWD isn't really new, and we're reacting a bit late to it... –  Roman Dec 13 '12 at 13:12
    
does RWD = Responsive-Width Design? Might be worth making that clear. –  e100 Dec 13 '12 at 14:55
    
@e100 Responsive Web Design. I'll make that more clear –  Roman Dec 13 '12 at 14:57
    
@Roman I stand corrected. The humor was too subtle for me and I missed it. Sorry to step on your joke. :) I am also right in the middle of a project for a client discussing how companies are genuinely just getting started in mobile design next year (2013), so from my perspective it's not "reacting late to something new." –  Lauren Ipsum Dec 13 '12 at 18:34
add comment

3 Answers 3

up vote 1 down vote accepted

The hang up is steps 3-4. They have to be taken out and the approval/review process done AFTER coding starts.

Look into Agile Development and Lean UX:

http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-deliverables-business/

share|improve this answer
1  
+1. This is what interests me the most. But I can't actually take out completely the graphic deliverables... The PMs wouldn't like that at all, (they'd have to mediate between team and client A LOT more). After some research I found out about style prototypes and style tiles. I think I'll go into that direction. –  Roman Dec 14 '12 at 8:10
    
It's definitely fine to do the visual graphic deliverables, but make sure they a) aren't considered pixel perfect and b) let the client give feedback, but don't make it a signed-off milestone. –  DA01 Dec 14 '12 at 16:15
    
Dumping steps 3 & 4 sounds great in theory but I've seen a lot of dev time wasted following that format. In the end, it's still fastest to mock-up a static visual than code the interactive page. You can build your comps more like a tight wireframe than a pixel-perfect reference. You wouldn't be eliminating 3 & 4, you'd approach them with a different mindset. –  plainclothes Dec 14 '12 at 17:00
add comment

The ton of coding to make the design responsive must have an impact on the cost. Here's a suggestion of workflow addapted to the new requirements:

1.discuss content-design with client

2.we create wireframes (with optional, depending on client, approval)

2a.for desktops (classic)

2b.for tablets

2c.for phones

3.we create three pixel perfect "layouts" in Photoshop

4.client approves / with corrections

5a.return to step 3

5c.begin coding for all three widths

share|improve this answer
    
So, you're essentially saying that we don't need to change our workflow? –  Roman Dec 13 '12 at 13:07
    
Not by much anyway. But you must differentiate between sites that must look good on mobiles and mobile apps, which have another workflow. –  Marius Stuparu Dec 13 '12 at 13:09
1  
That just complicates the same problem...that approving static documents is a very imperfect/impractical process for web design. –  DA01 Dec 13 '12 at 23:43
    
Then your wireframes should be code, not static. Make B/W wireframes with placeholders for text and images. –  Lauren Ipsum Dec 14 '12 at 11:26
add comment

Workflow

As Marius pointed out, your workflow doesn't necessarily need to change all the much, you just have to consider three primary scenarios instead of one. No big deal, right?

What changes is how you parse the data map. You have to start with every piece of data/content and then drill down to priority levels. There are four broad categories:

  1. All devices
  2. Some combination of the three
  3. Desktop-only
  4. Nowhere

Mobile first?
Mobile isn't really "first" in this approach: You're considering all things at once. With that in mind, I think the biggest workflow change is going to happen in step 1: You have to develop a content/data map (which you're already doing) plus decide what falls off when.

Responsive Design

Making the call on RWD development really depends on the project. Responsive is perfectly suited to content sites. In the ecomm world, on the other hand, device-specific sites and apps are still king. I don't think we've figured out how responsive really fits the ecomm problem. (Frankly, I don't think we've figured out ecomm on mobile in general, outside of the simplest scenarios but that's a topic for another day.)

Outside of coding, the decision to be responsive or not doesn't change things all that much anyway. You still have to wireframe and comp all three (or four ... thanks mini-tablets!).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.