Who said that a cool graphics editor is our everything? In practice, a web and mobile product designer spends a lot of time in the browser. Searching for ideas, icons, photos, fonts can take much more time than the stage of rendering the layout. And do not forget about testing both the layout and the finished layout.
The better organized your working environment is in the browser, the less time you will spend on this work.
Your bookmarks and extensions should be accessible from any device you will be working on. You can do this using Google Account in Chrome. Sign up for Gmail and enable sync mode in your browser settings. Thus, simply by logging into your mail from another computer, you will be able to access your space.
In practice, this can be very useful. For example, if I need to finish urgent work at home, all bookmarks, search history, and so on are duplicated in the browser of my personal laptop.
In order to easily navigate to the desired sites, logically distribute them in bookmarks into folders. Here is the list I am using:
- Fonts
- Color
- Icons
- Grids
- Good websites (I add websites that I think are ideal here)
- Landing Page (everything for landing page design here)
- Design content (this category includes photo and video stocks, mockups, vector graphics sites, and other sites with design content)
- Inspiration (here are design social networks and portfolios of cool studios)
- Articles and useful stuff
Note that the “Design Content” I could break it down in more detail, but the fact is that then the folders will take up too much working space in length, and for me this is not very convenient. I often use the browser from my laptop. You can read about which sites for design I bookmarked in the article "Organizing the Designer's Workspace in Google Chrome Part 2: Useful Sites".
Since there are a lot of extensions now, I divided them into subgroups. In each of the subgroups, you can choose 1-2 you like the most. It makes no sense to put everything, you will only overload your browser with unnecessary icons, which you will soon forget about.
What font
Perhaps the most popular plugin for viewing fonts on the site. To use it, you need to hover over a line with text.
Install What font
Font Face Ninja
I chose this extension for myself. When activated, a list of all the fonts used on the page, as well as their prices, if they are paid, is displayed in the upper right corner of the site.
Fontanello
The plugin also shows the font, style, as well as the size and color of the selected text. To activate, use the right mouse button.
Font Picker
It works in the same way as Fontanello: select a phrase, press the right mouse button, select the desired tab in the menu and look at the information in the popup that appears.
Google Font Previewer
By running the extension, you will be able to change the font on the current tab to one from the Google Fonts catalog. Very handy if you are planning a website redesign.
Font Swap
A handy tool for quickly replacing fonts on the site. All fonts are taken from the Google Fonts catalog.
Eye Dropper
The plugin allows you to select a color on the site with an eyedropper, and also saves the search history of the previous color.
Site Palette
Really nice extension, it generates the full color palette of the selected web page in a separate window.
ColorZilla
In addition to the standard eyedropper, the extension also has a generator for additional colors and gradients.
Toybox
A very good tool for checking a live site: you look and check the styles, and also write a comment. In this case, the plugin automatically takes a screenshot. Convenient for making edits during layout. The tool is paid, but there is a 30-day free version.
Check My Links
You can now check the correct operation of links in the text with one click. The plugin will highlight in red all non-working ones.
Clear Cache
I think everyone had problems with full and partial clearing of the cache. This extension solves this problem completely, as it allows you to customize this process. You can optionally choose what exactly will be cleared: only the cache, Cookies, downloads, auto-complete forms and passwords, history, local storage, and more.
Wappalyzer
Allows you to get information about all the technologies that are used on the site. The application has helped out more than once if the customer demonstrates an example, and an approximate estimate of the cost of the site is needed.
CSS Viewer
Another extension that allows you to collect information from elements on the site without opening the code inspector.
Perfect Pixel
A must-have for many developers is checking the current layout against the layout and showing the difference.
Visual Inspector
Allows you to change the layout of the finished site and works on the principle of a visual editor.
Dark Mode Dev Tools
The plugin enables dark mode for code mode in the browser. All you need to do is turn it on once, and the changes will apply to all the sites you browse through Chrome.
Window Resizer
Emulator of resolution of various devices right in the browser window. The code inspector is no longer needed. The application contains the most popular examples.
Corporate Ipsum
Random phrase generator for those who are tired of the usual Lorem Ipsum
Loom
A great extension for recording video from the browser screen. Allows you to show something that cannot be done with screenshots: for example, website errors. In addition, the extension has a desktop version.
Full Page Screen Capture
Allows you to take screenshots of the screen with scrolling.
Muzli 2
A daily portion of quality content is guaranteed to you. Now every time I open a new tab, an interesting visual is randomly shown to me. The extension requires registration with Google.
Install Muzli 2
Panda
The plugin is very similar to Muzli, with some minor differences. For example, it is possible to customize the type of presentation of information: the amount of news, the size of “tiles”.
SVG Grabber
Allows you to extract all the SVGs used on the page with a few clicks.
Image Downloader
Allows you to view and download all images from the selected site.
Dimensions
It will help to find out not only the sizes of objects, but also the distances between them. Of course, everything is in pixels.
Sessions Buddy
Tab management tool. It will help to distribute tabs into separate sessions and open them later. Very effective if you have many tabs open for the current project but need to take a break and come back to it later. This plugin will help not to load the RAM and convenient to use the browser.
uBlock
Blocking unnecessary ads, which will allow you to quickly access the information you need.
Follow me on Instagram - @frusia.pro - stay up to date with announcements of new lessons, check homework in stories, ask questions, and you will also find many useful posts about design.