A Brief Introduction to Zeplin and Adobe capture

UIuiAs a UX designer, there are many software or apps to accelerate the work. Zeplin and adobe capture are two useful application for UX designer to enhance their efficiency, containing collaborating with other colleagues and accumulating design material library.


The final work of a UX design project is high fidelity prototype, and then it normally will be sent to engineers who would build it by programming. However, the programmers cannot directly read the prototype and transfer it into codes; also, designers don’t have to code the prototype by themselves. So what are effective ways of letting these two different groups people know each other and smoothly completing the task? UX designer talking with engineers face to face must be a helpful method, but this is not the fast one.

Zeplin, a smart application connecting the members in the product team, outstandingly solved this issue. As we know, programmers may not build the interfaces only by seeing the prototypes, but they can read and build those staff by the distance between pixels, the font names, and CSS codes. Zeplin has these features to convert the prototype by designers to codes only with several clicks. Here are the main features:

Convert the image size, colors, and fonts into codes

Converting the picture into CSS


Designers can review the prototype’s CSS codes by clicking the corresponding element. Zeplin can also display all details as a summary for engineers to review fast.


Immediately recognize the size of one piece

Once clicking the element, the pixel number will show automatically.


Help to build the design style guide

Zeplin has a lot intuitive way, which contains the fast creating the design style guide. The user can upload prototypes into Zeplin directly; also, they can use the “plugin” in Sketch to upload each prototype page into Zeplin, and Zeplin would automatically form a design style guide, which lists the color’s hex code and fonts name, etc.

At last, Zeplin supports Sketch, Adobe XD, Sketch, Photoshop, and Figma.



Adobe Capture

Sometimes we need to grab ideas from our lives, and sometimes collect some visual elements. With the application of AI, Adobe capture fully help us record the ah-ha moments:

“This is the font I want to use!”

“This color is fascinating! What’s its RGB?” 

With Adobe Capture, designers would reduce the chance of missing them.


Detecting the fonts

Once we find a font in our life, usually we would take a picture and send it to some fonts recognition website to help us find the font’s name, even inputting the alphabets into the website to improve the accuracy. Adobe capture aggregating all these steps.

Right now, designers only need to take a picture toward their desired text, pick the font you want to know, then Adobe Capture will give you the answer.


Recognize colors

One year ago, many people argued online for a dress’s color. Some insisted the color of the dress is black and blue, and others believe the colors are white and golden. With the Adobe Capture, there will be no more debate on the color recognition.

Open Adobe Capture, and users only need to scan the picture, the color’s name and all detailed information will display automatically.


Simulate the material

Adobe capture has a powerful calculating function to simulate any material. For example, I took a picture of my wooden table in the Adobe Capture app, it will automatically form a ball or other 3D models with the same material.


There are more functions in Adobe Capture, not only enhance designers’ the work efficiency, but also help explore designers’ material library.

In a word, the advanced application keeps emerging in our lives and help our works. Paying attention to the new application trend will release us from redundancy work and save time to do more creation.




Expert Voices Interview about the importance of kindness in design

I interviewed an employee in a big design company, and she told me her work details, which prove the importance of kindness in creativity. Her job title is the product designer and has worked for 3 years. She served as one of the designers of creating and editing videos and pictures in the company, and she is also one of the early members of the advanced technology and research team. She shared with me a lot of interesting and impressing things of her work, not only her routine responsibilities but also her view about the perspective on the current job market for interaction design, human-computer interaction and user experience design.

She told me that currently, one information technology company may need different designers, like visual designers, interaction designers or motion designers, however, some big companies are quite different. Based on the culture of “hack”, the designers like her focuses on all works related to one product, which means she can consider all layers in one product. To improve the efficiency, her team doesn’t always keep the normal design steps such as user interview, wireframe or data analysis. Instead, they would like to dive into a new product directly, brainstorm in a limited time, like 30-120 minutes, and make a high-fi prototype finally. Also, they use up to date applications to achieve the teamwork. The aim is clear that to make users love their design and help them totally in their life. Based on her description, I consider that looking highly on an efficiency of developing products and application of advanced software are two main reasons for letting employee receive sustained success.

Furthermore, when I asked her what’s the enjoyable moment of her career experience, I noticed that she was excited when she talked about the Design Sprint methods which they often use to complete a product’s primary design. This method takes 5 days to achieve the primary works of product design. On the first day, they would clarify their target, and then do the brainstorm, select better ideas, make a final decision, build prototypes and do the user testing in the next days. With the clear limitations and strict plan, they find this is a better way to truly develop a good design. She told me that an excellent design must need sufficient user research to clarify the product’s ideation, but they tend to figure them out by themselves. The unlimited frame can let them think deeply and express the willing of truly helping users.

I also asked her about the details of her work experience. Her first project is about facial identification. Because this technology has not got mature on the market, she thought maybe they can grab the chance to develop this product. However, this technology is only good at identifying whether an image is a face or not; but it cannot tell different people’s faces. Then once a user wants to share pictures with his or her family or close friends, the suggestions from are rough which may result in that the user reduces trust to this product. She pinpoints the idea that product or user experience (UX) designers should not rely on technology too much, and the main aim is still solving the users’ problems, which require people to base on their kindness.

Focusing on the users themselves and helping them solve problems can be always a valid rule of creating designs, and it is the time for me to rethink my design works.

Will machine learning (ML) totally replace UX designers’ works in next several years?

In recent years, artificial intelligence (AI) has been back to people’s eyes, and machine learning (ML) is one of the key technology in AI. However, the ML’s achievement is striking. In 2017, the AlphaGo, a computer program developed by Google Deepmind that practice itself by applying machine learning, beat Ke Jie, the world No.1 ranked Go player. This advanced technology shocked amount of people in various industries. Will jobs be replaced by machine learning? Some people may consider the design works may not be replaced by ML, such as user experience (UX) design. I doubt that machine learning (ML) will totally replace UX designers’ works in next several years, and currently, there is still a deep gap for applying ML into UX design.

ML’s Limited Consideration

ML has quite different models of analyzing data or figuring problems, and the outcomes are normally inaccurate comparing with the UX designers’ work. ML deeply relies on databases and quantitative analysis when it deals with a design case, which has obvious defects, such as the limited information, rigid decision; UX designers to complete the design work are dependent on multiple consideration and qualitative analysis, which is more comprehensive in multiple situations.

Fig 1 UX designers’ workflow

For example, Yang and her team designed a clinical decision support case, which is for matching the heart organ for the patient who has heart diseases. This is a professional UX design project that requires the designers to dig deeply into the heart organ databases and build an appropriate application on digital instruments to help the doctors decide the surgery proposal. Although ML worked well in the lab, not in the reality, the clinicians did not accept the results of ML because they think they can make the clinical decisions based on their own experience.

Fig 2 Designing Machine Learning Driven Clinical Decision Support Tools 

Huge Work Needing to fulfill ML

Even if ML may achieve some tasks that UX designer cannot do, such as quickly create a number of similar posters in a short time, the time for attaining the state that UX designers being totally replaced by ML maybe longer than we think. ML has a possible advantage in some branches because of its characteristics but needs huge amount work to prepare for it.

Yang brought a label system for improving the interface design, which she adds a label for each part of the interface, such as the web content, button, navigation bar. After collecting the user data of complete ting a task, the ML can help the designer to analyze the results and judge which interface is better based on the rules set by designers. However, the label system is so hard to complete to finish this test. There are too many items need to be labeled, which cost huge fee. (Yang, 2017). So there still a lot of work needed to be done in the future to save money and improve the results’ accurate. Even though the researchers built the better ML system, it still has errors and the uncertainty. The results of the previous test may be influenced by tiny mistake during the test process (Yang, 2017).

Fig 3 A label system for tractors


UX Designers are Lack of ML Education

It is positive to admit that ML has a broad and deep application area in the future, but some of the anticipation is short of strong support. A lot of ideas are mainly based on designer’s general thoughts or daydreams without accurate deep realizations to ML. Only bring forward some new concept for cooperating with AI which is lack of the application details. When Dove and his team do the survey to more than 50 designers, most of them write down fancy imagination of ML applying UX (Dove 313), or some designers write his own imagination that ML can create multiple projects for a suit of interfaces which can change with time (John). But they mainly ignore the details and did not explain the mechanics. UX designers realize the ML’s importance and try to combine the design work with ML concept. However, the lack of AI-related knowledge makes their thoughts or ideas look naïve.
Current UX designers normally lack the ML Education. Dove’s survey results showed that seldom UX designers accepted the ML education before (Dove 314). The current UX designers seldom know the ML technology details, and the new generation UX designers don’t have enough education for ML, which may slow the speed of exploration of applying ML in UX.



Design Critique: aTimeLogger 2 (IOS app)

ATimeLogger 2 is an application for helping users to track time, and related functions can also be achieved, such as enhance users’ ability of time management or record multiple tasks’ time-consuming. Furthermore, ATimelogger 2 has an outstanding performance in signifiers and constraints, which brought forward by Don Norman. The clear interfaces and logical constraints successfully satisfy users’ needs.

Design Thinking

Tracking time is an effective way to do the time management, but several designers often focus on the tracking function itself without digging out the real issues behind it, which is saving time, improving efficiency and so on. I believe the designers of ATimeLogger 2 did a serious design thinking before they develop this application, which they may take the time tracking as a “suggestion” rather than an original problem. Their target is attached closely to the real issue and the whole design is “invisible”, like Don Norman said in his book  the design of everyday things, “good design fits our needs so well that the design is invisible, serving us without drawing attention to itself.”

Concepture model – Interfaces

There are 5 buttons at the bottom of the main menu and the corresponding interfaces only display necessary content, which successfully supports users to identify each piece of information in short time. After a user taps the first bottom icon, the minutes of activities’ time consumption showed immediately on the top. Each activity has been signified with one simple icon and a small font text, which locates on the left of the activity bar. As the same size with the activity button, the pause and stop button locate on the right.  The user can immediately know different activities’ time consumption and adopt the action for pausing or stopping them. Besides, other activities are all listed behind the activity bar, which icon is bigger than its text. These obvious signifiers are helpful for users to switch to record other activities’ time.

Also, the interface to the second menu button recorded the history time consumption. Users can tap the two buttons on the top to switch the form of time record as list or pie chart. This function is a complement of the time tracking, and provide users an impressing feedback of their behavior.


Simplified Icons – Initial learning

The buttons, including buttons for signifying activities, are all flattening icons. This simple style attains a good communication with users for completing a completed time tracing action during a limit time. Furthermore, the simplified icons are related to the image that we are familiar with, such as the stopwatch, the plus sign, which is discoverability for users to determine what actions are possible or ensure the current state.

Simple Gesture

When the user wants to start, pause, stop tracing time, switch tasks, or check the past record, they only need to tap once on the interface. Also, ATimeLogger 2 doesn’t adopt other gestures, like dragging, 2 finger tapping, to complete any action. It seems constraint users, but actually, it effectively saves time for users to learn and use this application. Without the complex gestures, users can avoid trial and error especially when they use this app during a busy time.

However, I consider the only shortage of this app is the deficiency of mapping. Various type activities can be collected into different groups; however, once the user puts one activity into a group, he or she has to tap twice to start tracking time (the first to open the group).  Once the user entered into one group, the menu of higher level activities are all hidden. I think to keep all the activities and show a hierarchy is better for users to understand the current state.