Make the design draft more realistic! Two B-end design walkthrough tools used by experts

B-side designers will definitely encounter such situations in their work: arguing with the front-end because the online project does not match the design draft, and in order to know whether the development color is used accurately, they can only "take a screenshot" and then "absorb the color" in the design software to make a judgment.

Therefore, design walkthrough has become a very important part of the project process in our work. Although the process of walkthrough is often complicated and boring, in order to ensure the consistency between the design draft and the online project, we need to have "handy weapons" to restore the project to a high degree. I don't know if you have any useful walkthrough tools, today I will share with you two browser plug-ins that I use very often:

Copiexl

This is an efficient walkthrough plug-in produced by ByteDance. Its principle is very simple. First, open the online project that needs to be verified; then upload your design draft image; then reduce the transparency of the design draft to achieve the purpose of quick project walkthrough. You can see at a glance where there are problems in the development. Here is a simple guide on how to install and use such a plug-in:

1. Installation method:

First, open the official website of the software (https://copixel.bytedance.com/), and click on Free Download (only Chrome browser is supported here. If you are using Safari, Firefox, Opera and other browsers, scroll down on the official website and you will also find a download portal)

After clicking download, you will be redirected to the Google App Store. Click to install it, which is similar to the installation method of browser plug-ins (you need to use a ladder here)

2. Usage Tutorial

Choose the right page design size

It is recommended to design according to the width of mainstream window sizes, such as: 1366px, 1440px, 1920px; the recommended minimum design size is 1366px, 1440px, and the maximum design size is 1920px (width). The purpose is to export the design drawing according to 1:1, which is consistent with the display effect of the development page.

How to export the design?

The principle of the Copiexl browser plug-in is to suspend your design draft on the restored page on the front end for comparison, so that you can quickly know what problems there are with your design page.

Therefore, we need to export the design draft into a PNG file at one time. This way, we can import it into the plug-in in batches and directly switch the design draft to improve the efficiency of the inspection.

How to use

Open the front-end page and use the browser plug-in "Copixel" you just installed to add the UI design diagram.

By adjusting the position, size and transparency of the design drawing to make it highly overlap with the development page, you can use software with screenshot annotation function (such as Xinp) to find faults and mark them. Use the walkthrough document to mark the problematic areas and explain the problems, so that you can complete the project walkthrough efficiently.

Then share the problematic walkthrough content directly with development.

CSS Peeper

https://csspeeper.com/

This is an efficient tool for design walkthrough/style copying/resource downloading. It can easily view the CSS properties of all elements on the web page, and there is no need to "right-click" - "inspect" the browser element like the Chrome browser, and then find the CSS code you need among many codes. We only need to click on the plug-in and select the element to quickly check the style.

Scenario 1: Design Walkthrough

For example, when the front-end engineer completes the page, the designer needs to check the page. At this time, many students often rely on their pixel eyes to compare one by one. If the B-end designer has some experience, he will open the browser's built-in inspection to check the elements.

However, the browser's built-in inspection is actually designed more for programmers. For us designers, we can only understand a small part of the content, so the efficiency of the inspection is obviously not very high.

At this time, using CSS Peeper, you can easily check the CSS style in the web page. We can not only see the general attributes of the element, such as color, background, spacing; we can also see the box model of the element, and see the element's Padding, Margin...

With this plugin, you can clearly see where the developer has a problem with the restoration, and you can show it off in front of him in a very "unfair" way.

Scenario 2: Style Copy

For designers, there is no need to worry about how competitors design their products. Because for any element on a web page, you can use this plug-in to view its restoration ideas and know its design style and attributes.

You can also click on a color or image to summarize all the colors or images used on the page and export them for easy analysis of the design style.

Scenario 3: Resource Download

Using CSS Peeper, you can quickly check which icons and images are used in the page. And you can quickly download these resources to your local computer for storage. In this way, you can become a resource expert.

This is the plugin I use most often in my work. What plugin do you use most often? Let’s share and chat!