High-speed improvement of the efficiency of web design execution, helping designers save trivial and complex working hours

Unlike "physical output" tasks such as graphic design, for web designers, in addition to the main tools used in the execution of Web projects such as Photoshop, Illustrator, etc., they are usually accompanied by other tools for assistance. For example, if you want to quickly understand the "physical output" of users when browsing the Web, you can quickly understand the "physical output" of users when browsing the Web.How to judge the "real experience"? When designing a meeting, how to present various pictures of a competitor's website? There are also many details that will be encountered in the design process. Here I will first list five commonly used auxiliary tools to help web designers improve their work efficiency.

Change browser window size

Tool name: Window Resizer

Introduction: The extension plug-in kit for Chrome browser, one-click installation is super fast. Use it to quickly change the window size of the browser, and you can store common Web page sizes such as 1920×1080、1440×900、1366×768， Includes tablet and mobile version sizes. It helps web designers to understand what the actual user sees and feels when browsing other websites, especially now that many designers' computers have high resolutions of more than 2K, 4K, etc. Need this tool more. In addition, when we want to display Web pages of various screen sizes, it is easier to pull to the correct ratio, rather than manually grasping the ratio.

Download url：link

Capture screenshots of web pages

Tool name: FireShot

Introduction: You can quickly capture the entire Web page or the entire Web page, turn it into an image file, and then download and use it. We usually use screenshots of Web pages when comparing competitive Web pages, referring to excellent Web pages, and even explaining the design of web pages. In the past, I didn't use a special tool to cut a "computer screen picture" with Printscreen and paste it into Photoshop for stitching, which is really troublesome. And this tool can also take screenshots of Web pages with one click, which is fast and convenient!
Download url： Load point

Get all the pictures in the webpage

Tool name: Web page image acquisition

Introduction: You can get the pictures in the current webpage, arrange the pictures, and get the URL. Sometimes it's super easy to use when collecting reference pictures! Right-click on any web page > Get the pictures in the web page, you can complete all the pictures of this web page, you can directly download or copy the picture url link. And sometimes I want to grab a certain picture of a web page, but the picture is not easy to grab, because it is written in the background-image syntax of css and cannot be downloaded with the right click, which increases the difficulty for beginners, and this tool can also solve this problem!
Download url：link

Font analysis

Tool name: WhatTheFont!

Introduction: Using pictures to find fonts sounds really amazing! Sometimes when I visit a website, I find a really beautiful or special font, and I want to know which font the author or designer uses, because it is impossible to print such a large number of fonts one by one in my mind. Using this tool WhatTheFont can recognize fonts and then fish out similar font types. Although I tried it a few times, it is not necessarily accurate every time, but at least I can find several options with high similarity, which are actually good.
Download url：Load point

Web fonts

Tool name: Google Fonts

Introduction: It is free and commercially available, with hundreds of English fonts for you to choose from. But what about Chinese fonts? For web designers, "Chinese web fonts" are really quite rare and precious, and they can be used much less than print output and graphic design! A free font jointly launched by Google and Adobe supports multiple languages, and Chinese Siyuan Bold is the savior of Chinese web fonts! No need to use Microsoft's bold or italics from Microsoft anymore! You can also look for it in Google Fonts, remember that Noto Snas TC is used for traditional Chinese.

Google Fonts：Go to browse happily
Noto Sans TC Siyuan bold, download url：Load point

In addition, if you want to get more Chinese fonts for all legal and commercial use, you can also refer to this article.：25 legal free high-quality fonts (attachment point), Although not all fonts in the article can be used on Web pages, at least they can be used in the visual design of Web pages. For example, it can be used in the main vision to make a picture and put it on the website. It is also one of the methods.