What are the UI designer files that should be written?

As a UI designer, the job content is not only to do PSD and Chettu, only these two are called art. Basic a qualified UI designer must have the ability to write documents, the minimum required documents include: Planning, Specifications, Wireframe, mockup, Chettu, logo files, UI kits, UI pattern, guideline >>>

Elementary school Composition "My volunteer" want to be a writer, when the writer good ah do not go out on the money to earn, see this thought more simple more lazy ... It turns out to be a designer, and you can only be interested in writing.

Designers in the workflow will need to produce a variety of documents, please as a deposit certificate letter in writing, anyway, the basic function of documents is to deposit certificates and communication. No matter what the document has a few common points:

You can read without oral explanation.

How to write more detailed, avoid the use of "Wait" (etc) such words.

Version control.

I am not in charge of the superior level, since the beginning, I have been front-line grass-roots staff, only to share the front-line to do what, what quality, understand what. The rest I climbed up and went through it again.

　　Planning book

This is planner work, but UI designers must have the basic capabilities of 5W 2H 1E.

What what--the purpose and content of the project.

Who--planning related personnel.

Where-where-planning implementation site.

When--planning time.

Why Why--planning reasons, prospects.

How--planning methods and operation implementation.

How many--planning budget.

Effect effect--forecast the result and effect of the project.

You can refer to the encyclopedia of 5w2h1e–mba and a minute to write a business plan! These two articles, writing a project is not so difficult, the UI designer to write but the 5W 2H 1E Bar to the extent of the list.

Specification Book

The specification is divided into 2 kinds, functional spec function specification book, Technical Spec Technical Specification book. Technical specifications of the book is RD in writing, and designers have little relationship, functional specification book is the designer to pay attention to the goal.

The spec book defines what to do in this case, what features to include, such as shopping cart, message board, membership system, etc., and the proposal is a completely different document.

A long time ago, the functional map of the old learner can be used as a very simplified version of the functional specification book, and the UI designer does not need to write a complete and detailed functional specification, but must have the ability to organize the map.

Spec bag contains flow chart and UI flow. Flow chart is a flowchart (contains user operating context or function stream); UI flow refers to the operation process between interfaces, which is a different chart. Reference Flowchart –mba Encyclopedia, UI Flow for beginners

Extended reading work list: Functional Map, work list: UI flow

Wireframe

The normal software development process must contain the proposal book, the specification book, if do not do so usually ... Cough... In short, the Wireframe phase should be a familiar job for UI designers.

Wireframe must write the explanation text!

Wireframe must write the explanation text!

Wireframe must write the explanation text!

It's important to say 3 times. (This terrier has been rotten before)

A bit like User Story but not all, the description of the text to be noted on the page of various operations, component changes, reference to a variety of state and emergency situation, to consider the more thoughtful the better, in advance prevention is always better than found leakage to hard plug to the easy.

Wireframe can refer to what is Wireframe, why to draw 3 times Wireframe? These two texts.

Extended reading work list: Wireframe

mockup

is to open Photoshop or Sketch, such as drawing software, the designer of the most familiar with the session, and the most of the son of the RD step. Do not design the results of the actual staff can not do it also blame RD is not fine, see them cut not to kill you.

And the designer to hear "can not use more than the #FFF white color?" mockup Although the designer of the most familiar files, but also the most problematic files, need to be familiar with the platform specifications, WEB framework, will not be able to see a bunch of "personal works" can not be used.

Extended reading: Work list: mockup

　　Chettu

Chettu This work may be f2e or designers, f2e work just stepped on a variety of online more versatile, if the APP project will be Chettu by the UI. Once met the designer very happy to say, Chettu by their home f2e take back to do, no longer he is responsible for ... Is the graph cut how much is not enough use causes to be f2e to give up?

Different platforms, the way to cut the map is also a big difference. The UI designer needs to be familiar with the Chettu approach and cut out the shared graphics in a way that can be easily understood.

Extended reading: Working list: Cutting diagram

　　Marking documents

When the mockup production completed into the cutting stage, you need to make a note of each element size, position, color code, transparency, font, Word level, file name and other information to RD,RD will know the "value" how much. Do not expect them to know without any explanation of the picture how to use, put where, the interval is a few px, there are such gods Kone who want to be RD.

This is a very cumbersome and boring job! Fortunately, many tools on the market can speed up the process of production. Tried a lot of, I recommend the most recommended document artifact: Specking, almost automatic, press a button on all calculate good value run, save effort.

Extended reading: The day I think of a replacement

　　UI Kit, UI pattern, guideline

These three are completely different documents, often mixed together to speak, even more will be linked to the document to stir in the big fight.

　　UI Kit

Dribbble Many designers will put their own design of a product all components are concentrated in a picture, this file is called "ui kit". Complete set of UI component library concept, only figure, not too will have the text explanation, common in the original file, easy to use.

　　UI pattern

Just sandwiched between the UI Kit and guideline. Use functions or uses like UI kits to categorize and assemble components, but also like guideline to illustrate how each component is used (how it is implemented, not the concept description).

The UI pattern is divided into two types, giving the actual person the same look as Bootstrap, which gives the UI designer a look like the interface design model.

　　Guideline

Split a product family will use all the elements to the smallest units, and hierarchical categories, need a large number of text to help explain the meaning of the element and the use of rules. It is necessary to change its contents through an audit mechanism. All members of the company should be able to obtain this document in a simple way, equal to the company's corporate identity system.

Extended reading: Essentials of Design Code

Attached to the latest book recommended:

For the 2nd row of the 4 book's Experience: Design methods, design psychology, design thinking to change the world, the font walk. The top three is a theoretical class, in the reading order, I would suggest that the method of design should be read first, this one is more practical; the psychology of design complements the part of the design that is not mentioned in the book and introduces it in depth. Design thinking and transforming the world is for advanced or senior designers.

　　Method of Design

The first of the following 11 misunderstanding is very important to read the value of the glass heart of the designer do not buy this, will be hit face badly.

Myth One: Design is the brother and sister of art

Myth Two: Creativity exists

Misunderstanding three: The difference is good

Myth Four: Must find inspiration

Myth Five: Talent is very important

Myth Six: Design is a way of life

Myth Seven: self-expression is very important

Myth Eight: Designers are smarter than customers

Myth Nine: Designers are audiences

Myth Ten: The value of the award

Myth 11: Creative people should not be bound by rules

The book mentioned work will encounter difficulties and solutions, if I pushed the pit to see Burn Your Portfolio, can reflect the two authors of similar views.

The beginning of the designer very push to start this, first set up a correct attitude and concept, lay the foundation is not easy to be brought crooked. The understanding of design, what is "design", how to do design, how to utilize various design methods, what kind of difficulties may be encountered, how to solve and so on.

　　Psychology of Design

Heavyweight Classics, Norman's books are designated as must-read books by many of the top design colleges. I bought 2014 out of the revision, according to the author, "What Have I changed?" and not too much, just changed the whole book. "And he singled out the popular example, is the designer must buy and carefully read the textbook."

He used a lot of examples to describe that man is a contradictory creature, and that his mouth is upright. How to find out what users really need instead of being cheated by their words.

For beginners who do not know what the designer's mind should be, and what perspective to look at the world, the feeling of "paying a price peek at the door of truth" has been read.

Although this book on the implementation of technology is not much help, will not tell you how to do this side, how to change, is the "practice of Taste" book. Each year the best fixed to look at this one time, the feeling will be very different.

　　Design thinking and transforming the world

Classic heavyweight masterpiece, very not recommended to the novice to see! Especially after watching the guy who started shouting slogans ... Head clearly know what you're doing, what the industry is doing, what the company is doing in the middle-level designers see this comparison will not harm colleagues.

, this is a book that is to be read every year, and with the increase in experience and knowledge in the field of "Design without surface direct connection", the content recognized in the book will be completely different.

This book is very beautiful World Datong, the current business is not the case, do not know the situation of the guy to see this will blindly follow the book, Back to the project team to get the chicken fly dog jump. So very do not push the level of people who come to see this, do not take this cushion foundation, not by their own brain to fill the belt crooked off on the lucky.

Please study the project process, project management, software development, team work, company operation, Industry dynamics, information development and so on. (Don't ask me why I'm so extreme, there are living examples around.) )

　　Font walking

There are a lot of "sensitive" photos in this book, so China probably won't make a Chinese version.

Many designers on the "Chinese font" awareness is actually very inadequate, the school will not teach so fine, do web pages and apps due to a variety of factors and will only use the built-in words, will not be able to invest in the font fonts. (Yes, I'm talking about me.) )

Font walking is very suitable as a designer of the light readings, although the book has a lot of professional knowledge, but the writing and graphics in the case of reading up very relaxed not laborious, suitable for the afternoon tea to bask in the sun slowly look.

After reading the understanding of Chinese fonts have a deeper understanding, but also cherish the land and culture of Taiwan. Font evolution not God says there's light!