PS, product design process, 4-part ideas-PS tutorial

I want to share with you my thoughts on product design over the past two years. I have always followed the same design process in terms of product design, but in my opinion, it may indeed be close to the ideal state. I divide these skills into four parts: preprocessing, working process, post-processing, and efficiency skills. To put it bluntly, I have always followed the same design process in product design, but in my opinion, it may indeed be close to the ideal state. I divide these skills into four parts: preprocessing, working process, post-processing, and efficiency skills. Let me give you one by one.

A. preprocessing 1. sketch

It doesn't matter if you use a piece of paper or a book to draw a sketch. even if you have a leaflet at hand, it's okay. The most important thing is to put your mind in the pen, record it. Only after being drawn can we truly remember them and never forget them. Therefore, we may need to save a bunch of newspapers, bills, magazine covers, and even napkins (laughs) that record a bit of inspiration ).

Draft of inspiration

But for me, the best carrier is actually something, such as a Moleskine notebook. I especially like to review the ideas and inspirations I have recorded from time to time. In this way, I can review my previous ideas and adjust or even reshape the design ideas of the current project, or extend more ideas.

2. collect images

"Artists are collectors, not consignees. You know, there is a difference between the two: the consortium will be unselective, while the artist will choose to add to favorites. Artists only collect what they really love ." -- Austin Kleon stealing like an artist

The second phase of preprocessing is image collection, which is what I do every day. There are hundreds of styles and thousands of pictures are filled with the Internet, but I especially like the old style. I will classify these images in Dropbox (Dashboard, iOS, illustration, and so on ). These images are used to find inspiration when I get a requirement or start a project. Dropbox synchronizes all the image content in advance, so you can view them anytime, anywhere without going online. (In addition, small make up also as always recommended domestic popular designer web site navigation: http://hao.uisdc.com/inside the world's favorite 12 library resources)

3. Moonboard and preparation

We can get inspiration from many websites, such as Dribbble, Behance, Pttrns, and Pinterest. we can often find similar projects made by others. In addition, you may also benefit from others' attempts to solve the same problems as you.

It is necessary to complete the Moodboard.

What is Moodboard? Moodboard refers to the collection of colors, images, digital assets or other materials recognized by the user and product, which can cause some emotional reactions and serve as a reference for the design direction and form.

When I start a new project, I always prepare a folder to store relevant information, PSD, inspiration, and resources. Among them, the folder named inspiration contains all the project-related files I collected online to inspire me. this is my Moodboard.

This folder should contain various types of information from the basic color version to the complete case study on the Behance. If this is an APP that involves user information, you should also have attractive person photos. Sometimes I cannot use this folder. of course, it is another situation.

B. Working Process 4. I don't care about the quality of the lineframe.

I am not the kind of person who has spent six months polishing the prototype of the wiremap. If the customer can prepare a line chart in advance, it would be better.

Good customers are preparing their own ideas and ideas, and even drawing on paper. I just want to emphasize the importance of in-depth understanding of the product itself. Your UI/UX skills, ideas you want to express, and yourself are the factors that determine the final product. With the help of the line diagram, you can understand the customer's ideas and figure out how many screens are needed to form the entire application. In this way, you will also better understand the application itself.

There is a situation that is definitely a nightmare for the designer: The customer wants to output the line frame: 1 to the final product without changing the points. Hello customer, are you a Copey guy from monkey? Where is the work done by the designer? So when you come across a project like this, get it done as quickly as possible, and then run like Bolt to stay away from the project and draw a line.

5. large PSD background

When I first started working in Badoo seven months ago, I was thinking about Sasha's work. I'm afraid this guy doesn't understand how Photoshop works? But now I am planning to use another method to plot it, because this model is more appealing to me: when you are doing a whole APP or Dashboard with a large amount of information, use a large background to better design the interface.

When creating a new PSD file, I basically set the background to 8000x5000 pixels. You know, I am not just creating a set of UI kit. when working in the big background, I can see the combination of each element and the differences in the status of each interface. In addition, this design can also easily capture small images or product images in a certain status/stage for developers.

6. Use a PSD to store all interfaces

When I create an ordinary APP interface, I also use the UI interface of other apps. At this time, I prefer that all other interfaces exist in one PSD, even if they are not of the same product.

I know that using Sketch will be helpful in this case, but I prefer Photoshop and place a large number of source files from different UIs in one PSD, rather than dozens of individual files. In this way, I can quickly drag and drop layers from a UI to the current interface without looking for a layer in dozens of different PSD files.

7. folders and specifications

From all angles, I am a neat person-there are only icons on the desktop, and each customer of each project has a separate folder. Each folder sorts the content according to the same rule, just like the layer structure of my PSD. Each of my PSD structures is very clear. when I organize them, once I find that there are more than eight layers in a folder, a new folder will be created to separate the layers of different properties, summarized. I will organize the PSD layers in a well-organized manner, as if I would welcome others to review them at any time. I don't need to name each layer separately, because you can easily understand the functions of each layer through my folder naming and structure.

Recently, when I started working with @ luká Kus, he complained that he didn't have such a structured folder in AE. Do you think this is important?

If you want to know more about PSD etiquette, read the PSD etiquette white paper.

8. communicate with friends

Feedback from friends on product design is crucial to me. I can easily create a group of small users for testing, and listen to my friends for feedback on the problems they encountered and modify their opinions. These ideas often open up a brand new door for solving problems. I will perform such tests and obtain feedback at various stages of product development. In addition, everyone can participate in this Test, but I usually divide the tested into two parts: UX designers from the community and common users. This is mainly because the product audience is often ordinary users rather than designers.

9. interface design

When I or the customer has prepared the wiremap prototype, I prefer to merge them into a PSD file. Next, I will figure out the interface interaction and click a different place. In this process, we can often find missing links, interfaces to be supplemented, and other errors, which are not fully considered by customers and us at the beginning. In this way, I can combine all the interfaces and elements. When I face a 15-screen APP interface design draft, I find it difficult to keep them in a uniform style. Therefore, I need to adjust the original design principles.

There are three different identification lines. The first is to direct the numbers to the next screen, the second is the in-screen guide line, and the third is the line pointing to external applications and links.

Preview with contacts

Full preview

About styles-the prototype design style I use is similar to that of many designers, but it takes a lot of time to draw complex guides to demonstrate the interaction process, I prefer to display my design with digital labels and simple and intuitive guides on the next screen. This method is a bit like old fan's game book, but it is much better than a printed circuit board-like guide line map. In this way, you can see more valid information on the entire graph.

C. Post-processing (design specifications)

The last part is to create design specifications, check and ensure visual consistency. Facts have proved that this step is an extremely important part of the project, whether large or small. In a large project, if you want to change the attributes of some components, I usually cannot 100% determine whether to change all the relevant components. With the design guidelines, we can ensure that there are no 50 different gray and 14 different fonts in the UI.

10 color specifications

Doing a good job of color standardization is my top priority. Today, with the popularity of flat design, we can finally set as few color specifications as possible for buttons and text. You can create a color pattern similar to that of the Photoshop color palette in the PSD.

11. layout specifications

Another important specification is the layout and font specification. The fonts, font size, width, spacing, and line spacing of each component are clearly marked in the PSD, which greatly reduces the standardization burden on designers and developers.

12. UI Kit

When discussing APP and website consistency, the UI Kit is very important. At the same time, if you are in a designer team or working with front-end engineers, UI Kit is equally indispensable. With this standardized document, designers can capture UI elements anytime and anywhere to create new interfaces, while front-end engineers can also clearly understand the style of each UI element, you don't have to ask the designer every other day.

It is worth noting that many large companies still do not pay attention to the uniformity of the UI elements of their products. CSS styles are rewritten once and again, you will find that the same button has three completely different descriptions or even different styles in three different programs. Therefore, never forget to maintain consistency.

D. efficiency skills 13. todo

The secret to keeping everything in order is to use todo list. What kind of APP is used is not important. what is important is execution. I like Things, the efficiency tool produced by the Cultured Code, and occasionally like to record various To-do items with paper. It feels great to complete all the agent tasks. I was addicted to taking over all the projects that were sent to my inbox, but now I found that the most exciting thing is to focus on one or two projects at a time, and after 100% of them are completed, start a new project, which is more efficient and reliable than fighting for five different projects at the same time.

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

14. Objectives

It is good to clarify your goals, but never be bound by them. I will plan for myself within two weeks (like a sprint) and set a quarterly goal. At the same time, I will let myself try new transactions and set achievable goals (for example, using AE to do my first animation ), at the same time, we constantly improve the projects at hand until they are completed (for example, two Behance case studies are completed ).

What else?

I don't need a mouse, I only use touchpad, and I learned all the shortcut keys. I use Skala Preview to output the display content on Photoshop to the iPhone. I am still learning AE and Sketch. When I create a prototype, I use InVision to process web design projects, while the iOS program uses the latest MarvelAPP. For me, using paper and pen to design the UI is faster than dragging on the iPhone. Sometimes I still use PopApp to create early prototypes.

Last few words

It is unrealistic for me to strictly follow the above process to deal with each project. because some projects have ideas and ideas from the very beginning, I will skip some of the above processes to start work directly.

I have never experienced real information feedback in my former company. Designers can learn more about and benefit from user testing and information feedback, which can encourage them to think about new projects and improve old projects. Especially in the user testing stage, the feedback the designer receives will refresh their knowledge about the product itself, because they will eventually find that many common users will not use the APP according to the designer's design.

The above is the content shared by PS in four parts of the product design process. For more information, see PHP Chinese network (www.php1.cn )!