collaboration
It passes by the river
Business people and developers
Engineering, design, and product management
The problem with CAD
We want you to work with an artist
The power of One
picnic.lectoro.me
Designer + Developer Workflow
An Article by Dan MallThe way designers and developers work together today is broken. It’s too siloed and separate; “collaboration” is a fantasy that few enjoy.
The state of advertising in the 1940s was similar. All of that changed when copywriter Bill Bernbach met art director Paul Rand. Their collaborative working style led to the birth of the idea of “the creative team,” the mutual respect and partnership between art director and copywriter that tended to yield unique results. Bob Gage, an art director that worked for DDB, the agency Bernbach co-founded, described it like this:
“Two people who respect each other sit in the same room for a length of time and arrive at a state of free association, where the mention of one idea will lead to another idea, then to another. The art director might suggest a headline, the writer a visual. The entire ad is conceived as a whole, in a kind of ping pong between disciplines.”
Isn’t that what we all strive for in our jobs? True collaboration with equals and partners? Ideas that build off one another? Why does this seem so far away for some of us?
The Hot Potato Process
An Article by Dan MallThe big misconception I’ve seen designers and developers often fall victim to is believing that handoff goes one way. Designers hand off comps to developers and think their work is done. That puts a lot of pressure on the designer to get everything perfect in one pass.
Instead, great collaboration follows what Brad Frost and I call “The Hot Potato Process,” where ideas are passed quickly back and forth from designer to developer and back to designer then back to developer for the entirety of a product creation cycle.
Nobody gives a hoot about groupthink
An Article by Baldur BjarnasonTwo relatively common ‘fashions’ today are real-time collaboration and shared data repositories of one kind or another.
Both increase productivity in the naive sense. We work more; everybody is more active; the group feels more cohesive.
The downside is that they also both tend to reduce the quality of the work and increase busywork.
Pair Design: Better Together
Pair design is the counterintuitive practice of getting more and better UX design done by putting two designers together as thought partners to solve design problems. It’s counterintuitive because you might expect that you could split them up to work in parallel to get double the design done, but for many situations, you’d be wrong. This document will help explain what pair design is, how it works, and tour through the practicalities of implementing it in your practice.
Asynchronous Design Critique: Getting Feedback
An Article by Erin CasaliGetting feedback can be thought of as a form of design research. In the same way that we wouldn’t do any research without the right questions to get the insights that we need, the best way to ask for feedback is also to craft sharp questions.
When we were all together in-person
A Quote“We believe that in-person collaboration is essential to our culture and our future,” said Deirdre O’Brien, senior vice president of retail and people, in a video recording viewed by The Verge. “If we take a moment to reflect on our unbelievable product launches this past year, the products and the launch execution were built upon the base of years of work that we did when we were all together in-person.”
Building Momentum
An Article by Dan MallFight the Waterfall
Start all of the pieces of work a little bit earlier. The key to starting work early is not succumbing to the pressure of having to finish the work. Don’t worry about finishing. If you’re a developer, you can start doing things while your design or information architect are working because a lot of your work actually isn’t dependent on their work. Some of it is, so you probably won’t be able to finish, but that shouldn’t stop you from starting.
Share Work-in-Progress Early and Often
When you share work-in-progress, share it with the caveat that no feedback is needed at this point. You’re simply sharing it to let people know where you are. For example, if you have to make 12 wireframes, share it when you finish 2 or 3. Rather than spending a whole week to drop 12 wireframes, share 2 – 3 wireframes every 2 days. The more often you do this, you start to build rhythm, and rhythm builds momentum.
The Small Group
An Article by James MulhollandLying somewhere between a club and a loosely defined set of friends, the SMALL GROUP is a repeated theme in the lives of the successful. Benjamin Franklin had the Junto Club, Tolkien and C.S. Lewis had The Inklings, Jobs and Wozniak had Homebrew.
Around a dozen members is the sweet spot of social motivation: small enough to know everyone, yet large enough that the group won’t collapse if one or two members’ enthusiasm wanes; small enough that you are not daunted by competing with the whole world, yet large enough that you still need to be on your toes to keep up.
Scenius
Scenius stands for the intelligence and the intuition of a whole cultural scene. It is the communal form of the concept of the genius.
Mutual appreciation
A Fragment by Matt WebbTo use slightly different terms, mutual appreciation is a healthy jealousy without envy – a drive to achieve the same but without wanting to take it from the other.
Beyond Artboards
The Pursuit of Lossless Design-Development Handoffs.
Can't developers just see?
We designers love artboards. From rough UI sketches to high fidelity mockups, we see ourselves as visual artists expressing ideas on artboards that have a pre-defined width and height. To start a new project, we declare the size of the artboard in the first step.
What about responsive design? Not a problem! We diligently design on three artboards — one for mobile, one for tablet, and one for desktop — with content elegantly adapting, scaling, reflowing, reordering, and reprioritizing. We proudly hand off the artboards to developers while patting ourselves on the back: this is how responsive design should be done.
After weeks of arduous engineering, the product finally comes out. We find, to our great dismay, that some copy is hanging off the grid, the focal point of the hero image has been cropped out, the font sizes don’t even come close to the type ramp. What went wrong? Can’t the developers just see everything on all those artboards?
Nope.
We are the ones who paved the path
No matter how many screen sizes our artboards account for, some user’s browser will break loose from our prescription. With users resizing, rotating, and zooming the screen, new devices stretching, squashing, curving, and cutting (e.g. the speaker area in iPhone X) the screen, the sizes become infinite. Good luck making an artboard for each one of them.
Artboards are a lossy format. Using artboards in a handoff is a lossy process. When we pitch a finite number of plans against an infinite number of situations. We inevitably get in-betweens. Once there are in-betweens, there are unknowns. Once there are unknowns there is guesswork. Once there is guesswork, there are surprises. Engineers take the path of least resistance. We are ones who paved the path.
Until we get there
- As a designer, learn writing HTML, or better still, semantic HTML. If coding up the entire design is too hard, try coding up one component at a time, and not worrying about CSS. The HTML alone will prove invaluable for developers to understand the content structure. In addition, you are forced to optimize the information architecture as you work out the code from content.
- If coding by yourself is out of the question, pair up with the engineer who will receive the design. Work closely with him or her to prototype the design, validate responsive behaviors, and obtain feedback on the feasibility. Don’t call it an iteration until the design has seen played with in code.
- As a manager for large enterprise, co-locate your designers and developers, encourage interdisciplinary learning, understand that each minute spent on coding before the handoff translates to ten minutes saved from changing and fixing issues after the handoff.
- As a stakeholder in the handoff meeting, give the designer a thumbs-up when he or she demos live code running in browsers in place of mockups on artboards. That’s a design champion you are looking at.