Design Dribbling
Note: Dribbble is a service where graphic designers show off to each other for their work.
Only one of these weather applications is trying to solve a pressing problem.
There are diverging trends in the design community. On the one hand, we see interesting blogs from Ryan Singer and Julia Jouhaux , which develop our craft. On the other hand, an increasing number of people post their works and discuss them at Dribbble , which generally moves our craft in the opposite direction. This post is not about Dribbble, as such, it is about the fact that it values ​​this community. I will use the term product design, but I will also keep in mind the design of user interactions with the product.
Over the past year, I got acquainted with a lot of designer resumes, and found a trend worrying me. Too many designers do their work to impress colleagues, not to solve real business problems. This has long been a problem in advertising, when creative work awards were collected, instead of those that solve customer problems. Now it is more and more obvious in the design of products and interactions.
')
A decent part of the work, created by applicants, was superficial, created with an eye on Dribbble. Something that looks good, but does not work well. Ideal embodiments of a flat design that do not achieve the goals of a real business, do not solve everyday problems, do not consider the entire business ecosystem. Dribbble has discussions to discuss the color palette or any small surface interface details. People watch and emulate. Most of the work on the resource are similar to one another. Social software, accounting, marketing, weather software - they have the same styles. Try to find ten differences:
On the other hand, the best work that I saw was presented in the middle of the development process. Sketches, diagrams, pros and cons, real problems. Compromises and solutions. Prototypes showing interactions and animations. That which moves, changes, comes to life. Use real data.
The worst work applicants sent to PNG. No links to the problem to be solved, no business and technical restrictions, no context. These perfectly tuned, prepared for PNG retina displays would look great on Dribbble, but as a real design for real things, they represented no value.
Therefore, redesigning other people's work is nonsense. New logo, Yahoo, iOS7, changes to Facebook, New New Twitter, rebranding American Airlines .
The 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 problem solving for people, while observing the limitations of a particular business, then it is felt that many people who call themselves product designers and UX are actually just digital graphics designers. Artists. Stylists. Creating beautiful things is an important skill, but not the skill of practicing product design.
Starting from sketches and ending with finished layouts, designers should always think about the company's mission, vision and architecture of the product. Everything they do must pass through this funnel.
Mission - for what, besides making money, does a company exist? Her goals?
Vision - how do we see the future of the company? How does this help us achieve our mission?
Design begins on top of the company, with its mission. Then - a vision. It is difficult to create an excellent design in an organization that does not have clear missions and visions. Do not underestimate these things. If your company does not have a clear mission, make it your task to contribute to its creation.
After that, it is time for the product architecture. Not technical, but just what parts the product has, and how do they relate to each other. System. On the first morning of Facebook, Chris Cox (Product Vice President) gives an excellent introductory speech to an audience of people from all departments.
He could talk about anything, but he concentrates on explaining the product architecture and how it relates to the company's mission.
For Facebook, architecture is a guide to people, their friends and their interests. Handbook of businesses, from international companies to local shops. And all this has a map showing the relationship of all parts. Accurate and clear presentation of the product, which is clearly connected with the mission. It is very difficult to design without a well-defined product architecture. In many cases, the designer also develops this architecture. Explaining Facebook’s work to people, I often drew such diagrams:
The product architecture is not an information architecture. This is not a set of pages with cross-references, not a demonstration of forms or an explanation of the operation of buttons. The prototype will do better. This is a level below - 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 do not recall 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 the vision, and fits into the architecture of the product. And this should be the rule, not the exception.
As soon as you have clearly presented the mission, vision and architecture, you can think about the details. The goals that people have, making them happy, satisfied, successful. What your product does for them, where it works well, and where it doesn't.
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 importantly, discussing what the tradeoffs were, what the pros and cons were. How ideas are combined with vision or improved due to the product architecture. Sketches on the board, on pieces of paper, on napkins - this is what you need to post on Dribbble. Show me this. Even a textual description of the future product is more important than png, pdf and psd.
Design is a multi-level process. In my experience, there is an optimal way to move through them. The easiest way to imagine 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 system components and the connections between them.
Interaction - microinteraction. 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 explore the grids, colors, fonts and icons.
One by one, designers are concentrating on the fourth layer, without thinking about the rest. Work from the bottom up. Grids, fonts, color and aesthetics are not important unless the first three layers are worked out. Many people say that they take them into account - but in fact they skip them, because drawing beautiful pictures is always more fun and easier than examining complex business processes and meeting the different demands of people. Well, stay on the fourth level, but then it will not be design, but digital art.
The invention of the Network leads society to the strongest changes since the industrial revolution. The web penetrates everywhere - at home, at workplaces, on the bedside table and in the pockets of clothing. The web is always with us. He has already penetrated cars, clothes, things. By 2020, any business will be associated with the web. As Charles Eames said, "in the end, everything is connected."
Development of static pages with links is a dying profession. The rise of mobile technologies, APIs, SDKs, and open interactions between platforms and products draws us a picture of the future, where we will all develop systems. PDF with frames and photoshop with pictures are dying tools. Advanced designers work with sketches, boards, and prototyping tools (Quartz Composer, After Effects, Keynote, CSS / HTML).
This is one of the reasons why designers should write code. They definitely need to determine the problem and solution not by pixels, but by 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 feeling about how it should work.
At Intercom, we are working with Clay Kristinsen's “ Task Force Framework ”. We decorate each task, focusing on the event that causes it, motivation, goals, 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 it so that I can start a dialogue with him”.
It gives clarity. We attach this Task to the mission and set the priorities correctly. It makes you constantly think about design on all four levels. We see which components of the system belong to the Task, and which interactions help solve it. We develop from the top down, moving from the result to the system, interactions, and only then we 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 to develop a library of code instead of photoshop. This process is not ideal, 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), which we used eight years ago, and it in turn originated from the “ Elements of User Experience ” diagram by Jesse James Garrett.
In the next article, the author gives some explanations and develops the topic.
Only one of these weather applications is trying to solve a pressing problem.
There are diverging trends in the design community. On the one hand, we see interesting blogs from Ryan Singer and Julia Jouhaux , which develop our craft. On the other hand, an increasing number of people post their works and discuss them at Dribbble , which generally moves our craft in the opposite direction. This post is not about Dribbble, as such, it is about the fact that it values ​​this community. I will use the term product design, but I will also keep in mind the design of user interactions with the product.
“Looks awesome!” - how the Dribbble community rewards superficial work
Over the past year, I got acquainted with a lot of designer resumes, and found a trend worrying me. Too many designers do their work to impress colleagues, not to solve real business problems. This has long been a problem in advertising, when creative work awards were collected, instead of those that solve customer problems. Now it is more and more obvious in the design of products and interactions.
')
A decent part of the work, created by applicants, was superficial, created with an eye on Dribbble. Something that looks good, but does not work well. Ideal embodiments of a flat design that do not achieve the goals of a real business, do not solve everyday problems, do not consider the entire business ecosystem. Dribbble has discussions to discuss the color palette or any small surface interface details. People watch and emulate. Most of the work on the resource are similar to one another. Social software, accounting, marketing, weather software - they have the same styles. Try to find ten differences:
The most important work in grocery 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, diagrams, pros and cons, real problems. Compromises and solutions. Prototypes showing interactions and animations. That which moves, changes, comes to life. Use real data.
The worst work applicants sent to PNG. No links to the problem to be solved, no business and technical restrictions, no context. These perfectly tuned, prepared for PNG retina displays would look great on Dribbble, but as a real design for real things, they represented no value.
Therefore, redesigning other people's work is nonsense. New logo, Yahoo, iOS7, changes to Facebook, New New Twitter, rebranding American Airlines .
The 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 problem solving for people, while observing the limitations of a particular business, then it is felt that many people who call themselves product designers and UX are actually just digital graphics designers. Artists. Stylists. Creating beautiful things is an important skill, but not the skill of practicing product design.
Product design is a mission, vision, architecture.
Starting from sketches and ending with finished layouts, designers should always think about the company's mission, vision and architecture of the product. Everything they do must pass through this funnel.
Mission - for what, besides making money, does a company exist? Her goals?
Vision - how do we see the future of the company? How does this help us achieve our mission?
Design begins on top of the company, with its mission. Then - a vision. It is difficult to create an excellent design in an organization that does not have clear missions and visions. Do not underestimate these things. If your company does not have a clear mission, make it your task to contribute to its creation.
After that, it is time for the product architecture. Not technical, but just what parts the product has, and how do they relate to each other. System. On the first morning of Facebook, Chris Cox (Product Vice President) gives an excellent introductory speech to an audience of people from all departments.
He could talk about anything, but he concentrates on explaining the product architecture and how it relates to the company's mission.
For Facebook, architecture is a guide to people, their friends and their interests. Handbook of businesses, from international companies to local shops. And all this has a map showing the relationship of all parts. Accurate and clear presentation of the product, which is clearly connected with the mission. It is very difficult to design without a well-defined product architecture. In many cases, the designer also develops this architecture. Explaining Facebook’s work to people, I often drew such diagrams:
The product architecture is not an information architecture. This is not a set of pages with cross-references, not a demonstration of forms or an explanation of the operation of buttons. The prototype will do better. This is a level below - 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 do not recall 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 the vision, and fits into the architecture of the product. And this should be the rule, not the exception.
As soon as you have clearly presented the mission, vision and architecture, you can think about the details. The goals that people have, making them happy, satisfied, successful. What your product does for them, where it works well, and where it doesn't.
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 importantly, discussing what the tradeoffs were, what the pros and cons were. How ideas are combined with vision or improved due to the product architecture. Sketches on the board, on pieces of paper, on napkins - this is what you need to post on Dribbble. Show me this. Even a textual description of the future product is more important than png, pdf and psd.
Four levels of design
Design is a multi-level process. In my experience, there is an optimal way to move through them. The easiest way to imagine 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 system components and the connections between them.
Interaction - microinteraction. 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 explore the grids, colors, fonts and icons.
One by one, designers are concentrating on the fourth layer, without thinking about the rest. Work from the bottom up. Grids, fonts, color and aesthetics are not important unless the first three layers are worked out. Many people say that they take them into account - but in fact they skip them, because drawing beautiful pictures is always more fun and easier than examining complex business processes and meeting the different demands of people. Well, stay on the fourth level, but then it will not be design, but digital art.
With the ubiquitous penetration of the Web, design will mean more and more
The invention of the Network leads society to the strongest changes since the industrial revolution. The web penetrates everywhere - at home, at workplaces, on the bedside table and in the pockets of clothing. The web is always with us. He has already penetrated cars, clothes, things. By 2020, any business will be associated with the web. As Charles Eames said, "in the end, everything is connected."
Development of static pages with links is a dying profession. The rise of mobile technologies, APIs, SDKs, and open interactions between platforms and products draws us a picture of the future, where we will all develop systems. PDF with frames and photoshop with pictures are dying tools. Advanced designers work with sketches, boards, and prototyping tools (Quartz Composer, After Effects, Keynote, CSS / HTML).
This is one of the reasons why designers should write code. They definitely need to determine the problem and solution not by pixels, but by 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 feeling about how it should work.
Development of design in accordance with the Task
At Intercom, we are working with Clay Kristinsen's “ Task Force Framework ”. We decorate each task, focusing on the event that causes it, motivation, goals, 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 it so that I can start a dialogue with him”.
It gives clarity. We attach this Task to the mission and set the priorities correctly. It makes you constantly think about design on all four levels. We see which components of the system belong to the Task, and which interactions help solve it. We develop from the top down, moving from the result to the system, interactions, and only then we 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 to develop a library of code instead of photoshop. This process is not ideal, 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), which we used eight years ago, and it in turn originated from the “ Elements of User Experience ” diagram by Jesse James Garrett.
In the next article, the author gives some explanations and develops the topic.
Source: https://habr.com/ru/post/236715/
All Articles