Design dribbling

Original author: Paul Adams
  • Transfer
Note: Dribbble is a service where graphic designers show off their work to each other.


Only one of these weather applications is trying to solve an urgent problem.

There are diverging trends in the design community. On the one hand, we see interesting blogs from Ryan Singer and Julia Zhuo that develop our craft. On the other hand, an increasing number of people post their works and discuss them on Dribbble , which generally moves our craft in the opposite direction. This post is not about Dribbble as such, it is about what the community values. I will use the term product design, but I will also keep in mind the design of user interactions with the product.

“Looks cool!” - how the Dribbble community rewards surface work


Over the past year, I looked at a lot of design resumes and found a trend that worries me. Too many designers do their work to impress colleagues, and not to solve real business problems. For a long time, this was a problem in advertising when creative works were collected, instead of those that solve customer problems. Now this is all the more obvious in the design of products and interactions.

The decent part of the work created by the applicants was superficial, created with an eye on Dribbble. Something that looks good but works poorly. Ideal embodiments of flat design that do not achieve the goals of a real business, do not solve everyday problems, do not consider the entire ecosystem of a business. Dribbble has discussions to discuss the color palette or any small surface details of the interface. People watch and emulate. Most of the works on the resource are similar one to another. Social software, software for accounting, marketing, weather - they have the same styles. Try to find ten differences:



The most important job in product design is usually the ugliest


On the other hand, the best work that I saw was presented in the middle of the development process. Sketches, charts, pros and cons, real problems. Compromises and decisions. Prototypes showing interactions and animations. What moves, changes, comes to life. Using real data.

The worst work applicants sent in PNG. No connection with the problem being solved, no business and technical restrictions, no context. These perfectly tuned PNG prepared for retina displays would look great on Dribbble, but they were of no value as a real design for real things.

Therefore, redesigning other people's work is stupid. New Yahoo logo, iOS7, Facebook changes, New New Twitter, American Airlines rebranding .

People involved in these projects did not have a context for work, there was no information about restrictions and organizational policies.

If product design is a solution to problems for people, observing the limitations of a particular business, then it feels like a lot of people calling themselves product and UX designers are really just digital graphic designers. Artists. Stylists. Creating beautiful things is an important skill, but not a skill in product design practice.

Product design is mission, vision, architecture.


Starting from sketches and ending with ready-made layouts, designers should always think about the mission of the company, about the vision and architecture of the product. Everything they do should go through this funnel.

Mission - for what, besides making money, is there a company? Her goals?

Vision - how do we see the future of the company? How will this help us achieve our mission?

Design begins on top of the company, with its mission. Then - a vision. It is difficult to create a great design in an organization that does not have a clear mission and vision. Do not underestimate these things. If your company does not have a clear mission, make your task to contribute to its creation.

After that, the time has come for the architecture of the product. Not technical, but simply what parts the product has and how they relate to each other. System. On the first morning of his first business day on Facebook, Chris Cox (vice president of product) gives an excellent introduction to an audience of people from all departments.

He could talk about anything, but he concentrates on explaining the architecture of the product, and how it relates to the mission of the company.

For Facebook, architecture is a guide to people, their friends, and their interests. A guide to businesses, from international companies to local stores. And all this has a map showing the relationships of all parts. Clear and clear presentation of the product, which is understandably connected with the mission. It is very difficult to design without a well-defined product architecture. In many cases, the designer develops this architecture. Explaining the work of Facebook to people from the outside, I often drew similar diagrams:



Product architecture is not an information architecture. This is not a collection of cross-linked pages, not a demonstration of forms, or an explanation of how buttons work. The prototype will do better. This is one level lower - this is the structure, these are the main blocks. Objects in the system and their interaction. At Intercom, we also think about design in the context of product architecture:



I don’t remember the description of the product architecture on the Dribbble project. It is difficult to meet the dialogue of designers about how their work falls on the mission, promotes vision, and fits into the architecture of the product. And this should be the rule, not the exception.

Once you have clearly presented the mission, vision and architecture, you can think about the details. The goals that people have, which makes them happy, satisfied, successful. What does your product do for them, where does it work well, and where not.

Rough sketches and scribbles describing these things are more important than png with Dribbble. From the beginning of the creation to the delivery of the finished product, psd and png are the least interesting to me. More important is the discussion of what compromises were, what were the pros and cons. How ideas are combined with vision or improved in relation to the architecture of the product. Sketches on the board, on pieces of paper, on napkins - that’s what you need to post on Dribbble. Show it to me. Even a textual description of the future product is more important than png, pdf and psd.

Four design levels


Design is a multi-level process. In my experience, there is an optimal way to move along them. The easiest way to represent these levels is as follows:

The result is what we want to achieve. What will people do better and easier to do?

Structure - the necessary components of the system and the relationship between them.

Interaction - microinteractions. Sequences of behavior and events. Interface components and how to work with them. What is moving, changing? At this stage, constantly return to the structure and customize it.

Appearance - after passing through the previous layers, you can do the appearance. Make everything beautiful. Now you can deal with grids, color, fonts and icons.

One by one, designers concentrate on the fourth layer, not thinking about the rest. Work from the bottom up. Grids, fonts, color and aesthetics are not important if the first three layers are not worked out. Many say that they take them into account - but actually miss, because drawing beautiful pictures is always more fun and easier than considering complex business processes and satisfying different people’s requirements. Well, stay on level four, but then it will not be design, but digital art.

With the widespread penetration of the web, design will mean more


The invention of the Web has led society to dramatic changes since the Industrial Revolution. The web penetrates everywhere - at home, at workplaces, on the bedside table and in the pockets of clothes. The web is always with us. He has already penetrated cars, clothes, things. By 2020, any business will be connected to the web. As Charles Ames said, “in the end, everything connects.”



Developing static link pages is a dying profession. The rise of mobile technology, API, SDK and open interactions between platforms and products gives us a picture of the future, where we will all develop systems. PDF with wireframes and Photoshop with pictures - dying tools. Advanced designers work with drafts, boards, and prototyping tools (Quartz Composer, After Effects, Keynote, CSS / HTML).

This is one of the reasons designers should write code. They clearly need to determine the problem and solution not in pixels, but in the algorithm of what happens between the components of the system. Build prototypes, write code, and debug details when real data shows what was forgotten and what could not be predicted in advance. Working with real data will give you a better sense of how it should work.

Design development in accordance with the Objective


At Intercom, we work with Clay Cristinsen's Task Framework . We make out every task, focusing on the event that causes it, motivation, goal, and the desired result.

“When it happens ....... I need ....... so that I can .......”

Example: “When an important new client logs in, I need to find out about this so that I can start a dialogue with him.”

It gives clarity. We attach this Objective to the mission and set priorities correctly. This makes you constantly think about design at all four levels. We see which components of the system belong to the Task, and what interactions help to solve it. We develop from top to bottom, moving from the result to the system, interactions, and then only come to the appearance.

In addition to Tasks, we are building a template library that reflects the orientation of our design work on the system. We are increasingly using a library of code to develop instead of photoshop. This process is imperfect, and we are constantly improving it.

Notes : the four-level model is an adaptation of the six-level UX model (proposal, concept, structure, information, interaction, appearance) that we used eight years ago, and it, in turn, came from Jesse James Garrett's diagram “ The Elements of User Experience ”.

In the next article, the author gives some explanations and develops the topic.

Also popular now: