Creating UI Spec - Improving my workflow

20 Mar 2010 - 12:22pm
4 years ago
10 replies
2637 reads
Kevin Cannon
2009

Hey all,

I'm doing a lot of UI specs these days and prodiving very detail descriptions and info to developers who are building the apps i'm designing. Here's a rough sample of the type of thing I mean:

style_guide_example.gif

This is a very time confuming process, but it's required to be this exact. Does anyone else have the same problem and know of any tools that can help automate this or improve my workflow. Currently my process is. 1. Design everything in photoshop. 2. Create Illustrator document with all the screens. 3. Add sizing and design notes to each screen. 4. Export UI spec as PDF.

Would love to know any suggestions for improving this method?

Thanks

AttachmentSize
style_guide_example.gif58.81 KB

Comments

20 Mar 2010 - 2:49pm
Patricia Colley
2010

I use a similar workflow, though I just use Photoshop layers for my callouts and export as PNG for browser or PPT display. I don't find this time-consuming, compared to writing full technical specs. 

One thing to consider is creating a universal (high-level) style guide to cover common elements that appear across different apps (headers, themes, text treatments, design patterns), and just mark the variations in individual specs. And make sure your basic techniques are solid. Set up layered template docs to gain efficiencies, and continue to hone your PS/AI editing techniques (layer selection, step and repeat, etc.).

If the issue is you're not getting enough time on projects to do this work and your designs, you should probably discuss workflow and resource allocation with management. 

I'm curious to hear other perspectives. I don't use Fireworks, but I'm open to trying it if there's a compelling enough reason to change my current workflow. 

20 Mar 2010 - 3:16pm
Krystal Higgins
2008

Since I use Photoshop for my designs, I currently use "Export Layer Comps to Files" to generate JPGs of the various states of an app.  Then I take these JPGs in to InDesign and do my markup there.  I like InDesign because you can create links to other pages or callouts, and it has its own style sheets so you can update and apply text formatting, object styles, page templates, etc. with a simple action.  I find this much easier and more accesible than trying to keep everything in the source design application. 

20 Mar 2010 - 8:35pm
Maurice
2009

Hi all,

@kevincannon - all depends on how in depth you want to get and the time you have. Additionally, how much is required as proof of concept. If you're in an Agile environment (verbally communicating physically), you can bypass some steps as long as they're recorded somewhere in the flow. I don't believe you have to create every screen, but you must indicate where consistency and/or interaction occurs. I agree with Patricia and would like to hear more from Krystal (do you have a Photoshop action for this?). As you all indicated, this is time consuming, but effective. I have been using Catalyst to test/show real-time interactivity with my PS layers.

Here is what I admire (from last month 'Febuary') which should be very helpful and useful to enhance delivery:
http://www.bbc.co.uk/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html

There is a PDF file in there somewhere.

I too would like to know if there are any other tools/methods (progressive technology).

Hope this helps.

Maurice

 

26 Mar 2010 - 5:41pm
toddmoy
2010

Hi Kevin,
All the points above are good. Personally, I would import the final design into omnigraffle, Axure or indesign for the annotations.
One other idea that hasn't been mentioned is Photoshop's annotation feature. You can place notes on the design itself, which are retained if you export to PDF. The drawback to this is that the notes aren't layer-specific. If you're using layer comps to manage different states of the app, you'll end up with a lot of meaningless comments on your design. However, if you're doing each view in an independent file, then that might work for you.
Cheers,Todd



21 Mar 2010 - 11:13am
Sachendra
2005

I usually use Visio to communicate the layout (faster than Photoshop) and give reference to visual design separately, mainly to modularize because if there's a change in visual design I would have the change the layouts as well. How do you communicate the flow?

21 Mar 2010 - 12:21pm
Maurice
2009

Sketching > High Fedelity Wireframes > Storyboards >
For the Mac there is Balsamiq which has some pretty cool stencils (sketch drawing look).
I use Axure RP, which also has alot of stencils and add-ons useful for wireframes and prototyping. It also have the capability to document alerts, actions and events. But flexiblity in Photoshop, InDesign, Axure, Balsamiq, ForeUI, Visio or even Word is a good rounded touch.

There is a 'blue flavor' presentation deck out there called "UX Best Practices" by Nick Finck
There is also a great little book called "A Project Guide to UX Design" by Russ Unger and Carolyn Chandler
Hope this helps.

21 Mar 2010 - 5:14pm
Joe Sokohl
2004

FYI, there's a beta for Mac Axure available now from http://www.axure.com. Pretty stable--I just completed a billable project with it. And Balsamiq exists for Linux, Mac & Windows as a desktop app & is also available as a Web app. There's also iPlotz and many others.

Kevin, I think you're pointing out one of our current dirty little secrets--specification is important and yet, if done well, takes time.

21 Mar 2010 - 6:51pm
ChrisDigital
2010

Hi everyone, new here...

I've been following this discussion via email with great interest.

I too use Balsamiq, a friend at Catalyst group turned me on to it... previously I used to build U.I. drawings in illustrator and Photoshop. Balamiq has cut down hours of work into minutes for me personally. I've also seen some interesting tutorials on Adobe.tv re: fireworks. In addition, I've also met some other pros that swear by Axure and I've been waiting for some news on the Mac version to see if it's worth my time.

But I find it fascinating how there's so many ways out there to do the same thing. I recently discovered Hotgloo from this list http://garmahis.com/reviews/wireframe-tools/ and I've been dying to give it a try.

26 Mar 2010 - 2:06am
thepofo
2010

Writing a Corporate Styleguide, for print, web etc is always a lot of work but it's a one-time job as you don't change it every few months. My workflow in this is:

  1. drawing the initial UI and functionality descriptions in Axure + generating prototypes (have an approval on the UI)
  2. A. Doing photoshop design (have an approval on the design)
    B. With Catalyst you can now "animate" your design, but I would only use this as absolute final approval phase
  3. Start Indesign and put together a Styleguide

 

Depends on who is doing the slicing of your design, but if you have an experience Web Integrator, he or whe will respect the sizes and margins you defined.

Eric

26 Mar 2010 - 5:41pm
Mathew Sanders
2009

In terms of efficiencies in creating the deliverables, you might want to check out unify.eightshapes.com which describes a framework for reusing a library of interface components, and a practice of separating the concepts from the deliverables, with the intention that they can be reused.
:)

On 21 March 2010 06:42, kevincannon <contact@ixda.org> wrote:

Hey all,

I'm doing a lot of UI specs these days and prodiving
very detail descriptions and info to developers who are building the
apps i'm designing. Here's a rough sample of the type of thing I mean:


This is a very time confuming process, but it's required to be this exact. Does anyone else have the same problem and know of any tools that can help automate this or improve my workflow. Currently my process is. 1. Design everything in photoshop. 2. Create Illustrator document with all the screens. 3. Add sizing and design notes to each screen. 4. Export UI spec as PDF.

Would love to know any suggestions for improving this method?

Thanks

Attachment Size style_guide_example.gif [1] 58.81 KB
(((Pl
Syndicate content Get the feed