Why Design Documentation Matters

At Cooper we design products that empower and delight the people who use them. Design documentation is integral to our process because it communicates the design itself, the rationale for decisions we made, and the tools for clients to carry on once the project wraps up.

Good design documentation doesn’t just specify all the pixel dimensions and text styles and interaction details (which it must). It can also tell the high-level story, stitch together the big picture, and get internal stakeholders excited about the vision. One of our primary goals as outside consultants is to build consensus and momentum around the design—documentation can speak to executives as well as developers. After all, we’re usually leaving a lot of the hard work of design implementation on the client’s doorstep, and building great software starts with getting all the stakeholders on board.

Design documentation should create trust and provide consistency for future iterations of the design thinking. We believe it’s important to give the rationale and context behind design decisions. Answering the “why?” of design helps new team members get on board down the road, prevents wasted effort later when old questions get rehashed, and provides the starting point for prioritization and roadmap discussions. This facet of the process is too often overlooked or omitted for expediency, but trust us: clients will thank you later.

The best design documentation gives the client a unified design language, a framework for talking about the design, and a platform for improving the design over time. Static documentation is quickly becoming a thing of the past—we’re always looking for new documentation techniques and delivery mechanisms because we want to equip our clients with the most approachable and actionable information possible. Delivering design documentation marks the beginning of the client’s journey, not the end.

Serve your art, not your tools, Part 3: Start with a solid foundation

When you’re designing in the digital domain, you’re working with files. Lots and lots and lots of files. You probably don’t give much thought to your Finder, but for most designers, it’s the interface that you spend a great deal of your time using. Streamlining your workflow around finding and managing files will save you a ton of time and frustration. 

Apps to supercharge your Finder

Building on last week’s celebration of targeted, lightweight apps that make a designer’s life easier, here are some apps that help me get the most out of my Finder and streamline my file management workflow.

TotalFinder

Totalfinder is a very powerful tool that adds multiple tabs to your finder window. This seems like a minor addition but the ability to stack Finder windows into tabs is big time saver. 

Img totalfinder

Read More

Serve your art, not your tools, Part 2: Don’t Photoshop til you drop

Given the complexity of learning new programs, designers often get locked into one tool that we learn in and out, reluctant to experiment with others. But to keep growing as designers, we have to keep exploring new tools that could make our job easier and push our creativity in new directions.

Don’t Photoshop ’til you drop

We live in a Photoshop world! For all its power, Photoshop wasn’t designed to be an all-encompassing tool (even though Adobe appears to be pushing it in that direction). 

Img icons

While it does many things well, there are other tools that are far better suited than Photoshop for certain tasks. For example…

Read More

Serve your art, not your tools, Part 1: Tips for a leaner, faster creative process

When computers and digital technology came onto the scene, a design revolution was born. Thanks to the advantages of the new digital workstream, the possibilities for our creativity expanded exponentially. But, given the complexity of learning the new programs that are available to us, many of us now find ourselves locked into a single toolset (read: Photoshop), afraid to try something different. As a result, our workflows are inefficient and not oriented to working effectively in teams.

The goal is to be creative
A well designed workflow cuts down your stress and increases your focus, allowing more time for what you want to do most: be creative.

Img people

Creativity starts with ideas.
The creative process is more than just finding the right tool for the job; it’s also about finding the best approach to being creative. Starting in the computer pushes designers down the path of putting the pixel first and the concept second. Instead, I find paper to be the best way to explore and develop a range of ideas.

A quick exercise I use to the get the juices flowing is to start sketching ideas in quick 5 minute sprints. I focus on generating as many different ideas as quickly as possible, then expand on those ideas. This is best done on paper so you think about the concept rather than the design.

Img sketchbook

Sketching is a critical part of your workflow so don’t ignore it. Drawing stencils play a big part of my process and are instrumental in helping me get ideas down on paper. I especially find circles, straighlings, curvers, and squares useful, which you can find at any local art store. If you’re a mobile application designer, check out the UI Stencils for iphone, android, and w8 interfaces. You’ll thank me later.

Finding inspiration
As an illustration major in college, my professor implored his students to start a reference library of interesting photos, textures, colors, and whatever else we found interesting. The idea was to create a massive library of photo references that you could refer back to if you needed to draw a sports car, a pine tree, or a leather jacket for example.

Growing as a designer means keeping up with the ever-shifting trends and visual innovations out there in the world, and a library of inspiration can be a useful tool to stockpile inspirational art and help to spark your creativity.

Inspired efficiency
As a visual designer, I’ve extended the idea of maintaining a reference library and started an asset library of Photoshop files, Fireworks files, icons, vectors, textures, brushes, swatches, fonts and whatever else I find useful. The idea is to curate a collection of elements so that you spend less time searching in the future.

Just about anything can inspire visual creativity. Don’t just limit yourself to obvious things like icons or UI elements; branch out and explore non-digital works like paintings and illustrations. Over the years I’ve collected thousands of interesting and inspiring artifacts, including fonts, photographs, textures, color palettes, and even code snippets.

Img assetlibrary

Here are some places I go when I want to find new material for my library:

www.behance.net
www.pinterest.com
www.ffffound.com
www.dribbble.com
www.thebestdesigns.com
www.losttype.com/browse
From thenextweb.com: 97 places to find design inspiration

Tools of the trade
If you’re looking to start your own digital asset library, I recommend giving Pixa App a try. It’s a promising new application for maintaining an asset library. Pixa supports all the file types I use as a designer: Photoshop, Illustration, EPS, PDF and Fireworks files. Additionally, the fact that Pixa works with dropbox makes it an ideal tool for sharing assets with other team members.

As my collection grew, however, it became increasingly difficult to maintain it and keep it useful. Enter Evernote. Evernote excels at nearly everything I was looking for in a digital asset management application: it makes content collection, tagging, and sharing a snap. But Evernote’s secret awesomeness is in search: it can instantly find text not only in tags, titles, and notes, but also, using very accurate OCR, within the images themselves.

 Img evernote

Tell us what you think
I hope your take away from this post is that understanding your workflow is just as important as understanding your tools. The approaches I’ve shared are simple ones, but they’ve made a big difference in my own design process. Give them a try, and share your favorite tools and methods for working smarter, not harder, in the comments or on the Cooper PUB Facebook Page.

This is part of a series of posts related to a Cooper PUB talk on October 25th, 2012. They’re intended to get designers thinking about new approaches to their everyday workflow.

Part 2: Don’t Photoshop ’til you drop
Part 3: Start with a solid foundation

sCoop: Week of April 30

Life at Cooper

Photo

Cooper recently brought back the Friday Afternoon Social Hour! Everyone enjoyed Suzy’s seriously strong sangria and tasty tapas, and the great conversations in this all around good time. If this sounds like how you’d like to wrap up the work week, join us! We are currently looking for a Business Development Manager.

See more of our life at Cooper on our Tumbler

Sketch 2.0 Released

sketch2

*Download the sample .Sketch file from my Dribbble account.

Sketch 2.0 is a new Mac application designed to be what Adobe Fireworks has struggled to become: the defacto standard for interface design. With a toolset targeting the professional user interface and icon designer, Sketch seems to be headed down the right path.

Sketch is not without its issues and may not be mature enough to replace Photoshop or Fireworks as of the version 1 release; however it’s an excellent start and well worth your time to checkout.

Several of us at Cooper are very excited by Sketch, so expect a more detailed review soon. In the meantime, checkout Sketch for yourself.

The Monoprice Graphics Tablet

*Video Monoprice Graphics Tablet line quality by Ray Frenden.

In the world of drawing tablets, there is Wacom and…umm…well…nobody else. That’s what I thought before I read Ray Frenden’s review of the inexpensive Monoprice graphic tablet “The Little Monoprice Graphics Tablet That Could.”

With a starting price of under $50 for a 10X6.25 inch graphic drawing tablet, the Monoprice tablet seems too good to be true. After reading Ray’s review and a quick twitter search of other Monoprice tablet users, I’ve become a believer and am seriously considering replacing my Wacom Bamboo tablet.

Checkout the Monoprice tablets for yourself; it just might save you a couple hundred bucks.

Stay up-to-date with your favorite web service feeds

Feeds

If you’re a Basecamp, Github, Dropmark, or Dribbble user, you might find Feeds interesting. Feeds lives in your menu bar monitoring your favorite web services, notifying you when new content is posted.

Dialoggs enters private beta

dialoggs

Dialoggs is a new web service that just entered it’s private beta phase. Dialoggs describes it’s self as a combination of Twitter, Facebook’s privacy controls, and Tumbler’s multimedia features.

Dialoggs allows you to follow people and send public and private messages just like in Twitter. What separates Dialoggs from Twitter, and what I’m most excited about, is Dialoggs ability to have long form conversations. Not having to worry about how many characters I have left? Priceless!

 

If your interested in learning more about Dialoggs, checkout “Introducing Dialoggs.”

Follow the creators on Twitter to win invite codes to Dialoggs: @drewwilson, @ammmir

Dialog.gs Website

 

Interacting with media across multiple devices

 

With the rise of mobile devices, more and more I need to be able to move files from my desktop to my mobile devices. Apple, Google, and Microsoft, along with several other third parties, have developed solutions but nothing that delivers a truly seamless user experience. Interaction designer Ishac Betran, in his article “Watch This Ingenious UI Idea For Dragging Files From Your Phone To Computer” details an elegant seamless drag-n-drop solution.

iPad Keyboard Prototype

 

Another interesting concept is the “iPad Keyboard Prototype” created by Daniel Chase Hooper. The video demonstrates a simple, intuitive way for simplifying text editing on the iPad. Instead of tap-and-hold to edit text, the user can swipe the cursor around the text block to quickly edit the text.

App pick of the week: Track 8

IPad ui

Track 8 brings the Metro experience to your iPad in a slick music player, allowing you to browse your music in an immersive visual experience.  

Checkout Track 8 for yourself.

 

Read More

Stay inspired with Evernote

As long as I can remember, I’ve maintained an library of inspirational imagery. I’m always consuming visually appealing material, so if I find something, I grab it, whether it’s an interesting font, photograph, texture, color palette, icon, or UX pattern. Growing as a visual designer means keeping up with the ever-shifting trends and visual innovations out there in the world, and a library of inspiration can be a place to stockpile the state-of-the-art.

Just about anything can inspire visual creativity. Don’t limit yourself to obvious things like icons or UI elements; branch out and explore non-digital works like paintings and illustrations. Over the years, I’ve collected thousands of these interesting and inspiring artifacts, including fonts, photographs, textures, color palettes, and even code snippets. As my collection grew, though, it became increasingly difficult to maintain it and keep it useful. Enter Evernote.

Evernote inspiration library - tile view

Read More

The sCoop: Week of April 16

New Instagram iPad app Iris

Ipad iris

Last week Instagram was sold to Facebook for a billion dollars and this week Iris an excellent new Instagram iPad app is released. Iris is a fun easy way to experience your Instagram photo’s on the iPad. If your an Instagram user it’s a must have.

Download IrisFollow on Twitter

Dropmark

Screen Shot 2012 04 20 at 10 24 41 AM

Dropmark is a new web service that allow you to create and share collections. The collections can contain all types of media elements by using a simple drag and drop interface. Dropmark is designed to make easy for individuals to invite friends or colleges to the collections for quick and easy collaboration. Dropmark is a great collaboration tool for design teams who need to share mock-ups, documents or inspiration.

Checkout Dropmark.com for more information

FoxTrot Pad Pack #1-3

Ipad foxtrot

FoxTrot created Bill Amend just released his comic strip to the iBooks store using the iBooks Author publishing tool Apple released earlier in the year. For $1.99 you can buy 1 of 3 Pad Packs. Each Pack contains about 100 strips that are designed for quick consumption.

FoxTrot for iBooks

The Rise of Interactive eBooks

With the popularity of the iPad and other tablets, we are on the cusp of a digital publishing revolution or at the very least a major reinvention on how digital content is published. Checkout UX Magazine great article on the Interactive eBook Apps: The Reinvention of Reading and Interactivity

The Smashing Book #3

Smashing book cover 5

I’ve always been a big fan of Smashing Books and the “Smashing Book #3″ looks like it’s going to be a good one. The book is slated to be released at the end of April so I’ve been pretty religiously watching for it’s release.

Preorder “Smashing Book #3″

If you’re interested in learning how the cover was created, check out Veerle Pieters blog post. “The Smashing Book #3″ cover design

Fontcase CS Plugin

The FontShop plugin (BETA) provides a simple way to try out any FontShop font directly inside your own artwork. The plugin allows designers to experiment with font variations, and to show different typographic options to their clients before actually purchasing anything.

Download the Beta version

Read More

The sCoop: Week of April 9

Prototyping at Rock Health

This week, consultants from Cooper met with folks at RockHealth to discuss prototyping. Jim Dibble, Faith Bolliger, Peter Duyan, and Martina Maleike talked about tools available for creating both low-fidelity and high-fidelity prototypes. Prototypes are tools to foster communication around the proposed product. So, before deciding what type of prototype to build, you need to ask yourself who’s the audience and what kind of communication do you want to foster?

Jim prototype rockhealth

Prototypes can be used to communicate your product vision to stakeholders, investors, or your internal team. Prototypes can also be used to gather information from users and potential users. And finally, you can use prototypes to prove to yourself that the interaction in your head actually makes sense when expressed digitally.

In any case, you want to prototype just enough to foster the conversation you want to have with your audience. Low-fidelity paper prototypes are great for gathering user feedback, especially if you want to let the audience know that your design is still relatively pliable. While you may want to use a high-fidelity prototype to give potential investors a clear sense of your product vision, you may be able to use a low-fidelity version to convey the vision to team members. We have found that building high-fidelity prototypes of small moments of complex interaction can be incredibly valuable for communicating with remote developers about design intent and technical feasibility.

Interface Origami by Jaun Sanchez

The basic idea behind Interface Origami is to get out of the digital space and create a physical prototype. This allows you to play with your concepts in the real world, helping to avoid usability pitfalls by experiencing your concept in real world context. It’s a great way to explore ideas without worrying about pixels.

Check out Juan Sanchez great post about the concepts behind Interface Origami.

Fold

Prototyping on the iPad with Interface 2

Interface 2 is a great looking prototyping tool that has just been released for the iPad. Interface 2 allows you to create clickable, pixel perfect working prototypes on your iOS device using all the standard iOS components.

Beyond it’s excellent toolset Interface 2 allows you to export your prototype as Xcode project that can be shared with your iOS developer. Potentially speeding up your project development time.

Download Interface 2

Start and Maintain an Asset Library

As an illustration major in college, my professor implored his students to start a reference library of interesting photos, textures, colors and whatever we found interesting. The idea was to create a massive library of photo references that you could refer back to if you ever need to draw a sports car or something along those lines.

As a visual designer I’ve continued that concept. Except instead of collecting reference photo’s I’ve been maintain an asset library of Photoshop files, Fireworks files, icons, vectors, textures, brushes, swatches, fonts and what ever else I find useful. The idea is to create an asset library of elements that will speed up your workflow and save time, allowing you to spend more time designing.

Pixa App
* Pixa – New app for maintaining your asset library. Public beta.

I recommend every visual designer add an asset library to their toolkit. If you want to learn more about building your asset library check out Erin Nolan post: “Build your asset library today”

Procreate for the iPad

The new version of Procreate iPad app launched last night. I’ve only been able to play with it for a few hours but if it’s not the best drawing experience on the iPad it’s right at the top. It features new sketch and inking brushes that look and feel amazing. The smudge tool has also been and will allow you to rock some of those Brad Rigney techniques.

Download Procreate

IPad procreate

Need a Stylus for your iPad checkout: The best stylus for iPad by The Verge.

Icon Handbook by Jon Hicks

If you’re interested in icon design, checkout “The Icon Handbook” by Jon Hicks. This book covers all the basic concepts of icon design and will give you an excellent icon design foundation. The “Icon Handbook” is well written and a easy read. Packed with little nuggets of useful information.

The Icon Handbook

Iconhandbook

 

Pixelapse Visual version control done right

We are starting to see the rise of new cloud-based web services directed at creative professionals and one that I’m most excited about is Pixelapse.

Pixelapse address a real problem that visual designers have, version control. Pixelapse uses a visual version control system that will display thumbnails of your work as you progress through your normal workflow.

Pixelapse

Similar to Dropbox Pixelapse uses an application to creates a Pixelapse folder on your mac. Once the Pixelapse folder is created everything within that folder will be synced to the cloud.  Within the Pixelapse folder you can start working on photoshop, fireworks or illustration files. As you work and save you files normally Pixelapse will constantly sync those files to the cloud automatically creating new versions allowing you to revert to previous versions at anytime.

The other nice thing about Pixelapse is that you can invite people to review your files and make comments as you go. Great for working with clients or in a team environment. Pixelapse is currently in private beta, checkout their site for more information.

Checkout Pixelapse

Portland/CreativeMornings – Aaron James Draplin

Finally, check out this great talk by James Draplin from draplin.com

“The DDC 50 Point Plan To Ruin/Save Your Career.”

Checkout some sketch notes

Read More