You should know the 14 strokes of product design

After I published my work on Dribbble, I received a lot of positive feedback and questions, which prompted me to write this article and talk to you about my two years experience and thinking about product design.

I'm ashamed to say that I have used the same design process in product design, but in my opinion, it may indeed be close to the ideal state. I divide these techniques into four parts: preprocessing, working processes, post-processing, and efficiency techniques. Let me give you one by one ways to follow.

A, pretreatment

　　1. Drawing sketches

Drawing sketches in fact not so much attention, with a piece of paper or a book does not matter, even if the hand of a flyer is no problem, the most important thing is to put the thoughts of the mind to the written, recorded. Only by drawing out can we really remember them and not be forgotten. As a result, we may need to keep a bunch of newspaper, Bills, magazine covers, and even napkins (laughs) that are recorded in a bit of inspiration.

The draft of the inspiration

But for me, the ideal carrier is a real thing, like a Moleskine notebook. I particularly like to look at the thoughts and inspirations I have recorded in them from time to time. In this way, I can look back at what I had thought and use it to tweak or even reshape the design of the project at hand, or to stretch out more ideas.

　2. Collect pictures

"Artists are collectors, not hoarders." You know, there is a difference between the two: Hoarders are not selectively admitted, while artists choose to collect them selectively. An artist will only collect what he truly loves. "--austin Kleon, like an artist, steals."

The second phase of preprocessing is collecting pictures, which is what I do every day. Hundreds of styles, thousands of images flooded the web, but I particularly liked the old-fashioned style. I will classify these images in the Dropbox (Dashboard, IOS, illustrator, etc.). When I get a demand or start a project, I look for inspiration through these images. Dropbox will sync all the pictures beforehand, so you can view them anytime and anywhere without networking. (In addition, small series also as always recommended the domestic Popular designer Web site navigation: http://hao.uisdc.com/inside the world's best 12 Map Library Resources)

　　3, Moonboard and preparation work

We can get inspiration from a lot of websites--dribbble, Behance, Pttrns, Pinterest, and so on, we can often find other people do similar projects. In addition, perhaps others are trying to solve the same problem as you, so you may also benefit from it.

It is necessary to do moodboard well.

What is Moodboard? Moodboard refers to the collection of colors, images, digital assets, or other materials that are perceived through the use of objects and products, and can cause some emotional reactions as a reference to design direction and form.

When I start a new project, I always prepare a folder to receive the relevant information, PSD, screenshots, inspiration, and a folder of resources. Among them, the name of the Inspiration folder in my collection from the Internet, the project related to all the files, to inspire my inspiration, this is my moodboard.

This folder should contain various types of information, from the base color Edition to the complete case study on the Behance. If this is an app that involves user information, you should also have a photo of attractive people. Sometimes I can't use this folder, of course, that's a different situation.

B, working process

　　4, I do not care about the quality of the wireframe

I'm not the kind of guy who spends six months polishing a wireframe prototype. It would be best if the customer had a wireframe in advance.

Good customers are prepared to think and train their ideas and even draw on paper. Using wireframe Prototypes For example, I'm not trying to say it, I'm just emphasizing that it's very important to understand the product in depth. Your Ui/ux skills, the ideas you want to express, and yourself are the factors that determine the final product. With the help of a wireframe, you can understand the customer's ideas and figure out how many screens are needed to make up the whole application. You will also learn more about the application itself.

One situation is definitely a designer's nightmare: The customer wants to export the wireframe 1:1 to the final product, without change. Hello customer, you are monkeys please come to the tease? What's the designer's job? So, when you hit a project like this, get it done as quickly as you can, and run away from the project like Bolt.

　　5, large size PSD background

When I first started working in Badoo 7 months ago, when I saw my colleague Sasha's work, I was thinking, I'm afraid this guy doesn't understand how Photoshop works, right? But now I'm going to use his way to draw, Because this pattern is more to my liking: when you are doing an entire app or a large amount of dashboard, using a large size background can better design the interface.

When I create a new psd file, I basically set the background to 8000x5000 pixel size. You know, I'm not just creating a set of UI kits, I can see how each element matches each other when I work in a big background, and realize the difference in the state of each interface. In addition, the design in this way can also be very easy to intercept a small map or a state/phase of the product picture to the developer.

6, with a PSD to receive all the interface

When I do an ordinary app interface, I also use the UI interface of other apps. At this point, I prefer that all other interfaces exist in a PSD, even if they are not of the same product.

I know it would be helpful to use sketch in this case, but I prefer to use Photoshop and put a large number of different UI source files in one PSD rather than dozens of separate files. As a result, I can quickly and easily select layers from one UI to drag and drop into the current interface without having to slowly look for a layer in dozens of different PSD files.

　7. Folders and Specifications

I'm a neat person from all angles-there are only icons on the desktop, and each customer has a separate folder for each item. Each of my folders is organized according to the same rules, just like the layer structure of my PSD. Each of my PSD structure is very clear, when I organize them, once found that a folder of more than 8 layers, you will create a new folder, the different attributes of the layer of the partition, summed up good. I will be the PSD layer organized in good order, as if at any time to welcome others to review the same. I don't have to name each layer individually, because you can easily understand the function of each layer through my folder naming and structure.

When I started working with @lukáškus recently, he always complained that he didn't have such a structured folder in AE. You see, it's important, right?

If you want to know more about PSD etiquette, you may wish to look at the PSD etiquette white paper.

　　8. Communicate with friends

My friends ' feedback on product design is a vital message to me. I can easily create a small set of user tests and listen to my friends ' feedback on their problems and change their opinions. These ideas often open up a new door to the problem-solving process, and I will do the testing at all stages of the product development to get feedback. In addition, anyone can participate in this kind of test, but I usually divide the testers into two parts: UX designers from the community and ordinary users. This is mainly because product audiences are often ordinary users, not designers.

　　9. Interface Design

I prefer to merge them into a PSD file when I or the client is ready for wireframe prototypes. Next, I'll figure out how the interface interacts and what happens when you click a different place. In this process, we often find missing links and interfaces that need to be supplemented, and other mistakes that customers and we have not considered completely. In this way, I can put all the interfaces and elements together to look at. When I'm faced with a 15-screen app interface design, it's hard to keep them in a uniform style, and the original design guidelines need to be adjusted.

Three different lines of identification, the first is a digital label pointing to the next screen, the second is the screen guide line, the third is to point to external applications and links to the line.

Preview diagram with Contact person

Full Preview diagram

About Styles--I use a prototype design that is similar to many designers, but instead of spending a lot of time drawing complex guides to show the interactions, I prefer to use the digital labels and simple intuitive guides that represent the next screen to show my design. It's a bit like the old-style game manual, but it's a lot better than a PCB-like guide line map. In this way, you can see more effective information on the whole picture.

For this I enclose a psd that makes it easier for you to understand my thoughts.

C, post-processing (design specifications)

Finally, the final part is to create a design specification that examines and ensures visual consistency. As it turns out, this link is a very important part of the project, whether it is large or small. In a large project, if you want to change the properties of some components, I usually can't 100% to determine if all the relevant components have been changed. With the design guidelines, we can ensure that there are no 50 shades of gray and 14 different sizes of fonts in the UI.

　　10 Color Specification

A good color specification is the first priority I would like to keep in mind. In the flat design popular today, we can finally as little as possible for the button and text set color specifications. You can create a color specification diagram like Photoshop Palette in PSD.

　　11. Layout specification

Another important specification is the specification of typography and fonts. Identifying the font, font size, weight, kerning, line spacing, and so on for each component is clearly identified in the PSD, which greatly reduces the burden on the designer and developer in standardizing.

　　12. UI Kit

When discussing the consistency of the app with the Web site, the UI kit becomes extremely important. Also, UI kit is essential if you are in a designer team or working with a front-end engineer. With this standardized document, designers can create new interfaces for capturing UI elements anytime and anywhere, and front-end engineers can clearly understand the style of each UI element without Gesanchaiwu running to ask the designer.

It is noteworthy that many large companies still do not pay attention to the consistency of the UI elements of the product, CSS style rewrite again and again, you will find that the same button in three different programs have three distinct descriptions, or even different styles. So don't forget to keep consistency.

D, efficiency skills

　　13. Todo

The secret to keeping everything organized is to use the Todo list. It's not important to use what app, it's important to do it. I like cultured code produced efficiency tools things, occasionally also like to use paper to record all kinds of to-do items. It's a great feeling to do all the things you do. I was addicted to taking over all the items that were sent to my inbox, but now I've found that the best thing to do is to focus on 1-2 projects at a time, and then start a new project after 100% of them, which is more efficient than working on 5 different projects at the same time.

"If you chase two rabbits at the same time, you will return empty-handed." "--russian Proverb

　　14. Target

It's good to be clear about your goals, but don't be bound by them. I would give myself a two-week plan (like a sprint) and set a quarterly target. At the same time, I will allow myself to try new things and set goals that can be achieved (such as using AE for my first animation), while constantly refining the project at hand until it is completed (for example, 2 Behance case studies).

　　What else?

I didn't use the mouse, I used only the trackpad, and I learned all the shortcuts. I use Skala preview to output the display on Photoshop to the iphone. At present I am still studying AE and sketch. When I created prototypes, I used Invision to work with web design projects, while iOS apps used the latest Marvelapp to deal with them. For me, using paper and pen to design the UI is quicker than dragging it on the iphone. Sometimes I still use Popapp to create early prototypes.

　　The last few words

Let me strictly follow the above process to deal with each project is not realistic, because some projects at the outset have ideas and ideas, I will skip some of the above process directly to start.

I have never experienced a real feedback in a company I used to work with. Designers can learn more from and benefit from user testing and feedback, which can prompt them to think about new projects and improve old projects. In particular, in the user testing process, the feedback the designer receives will refresh their perception of the product itself, as they eventually find that many ordinary users do not use the app in accordance with the designer's design.