10 Handy Chrome Tools Supporting Work of UI/UX Designers
A selection of Google Chrome tools which I use in my design and development workflow…
by Brett Mazoch, published in A Designer’s Thoughts
Designers tend to use diverse tools to make their design work better. I do the same. We are eager to explore new tools when there is a chance that a particular one can help us in our day-to-day tasks. Finding the right one is a gradual process, but once it’s done, we can enjoy our effort. Because of that, I’ve recently revised all the available extensions for Google Chrome (my primary development browser) and put together a set of the tools which are useful in my design and development workflow. I believe you will find them handy as well.
So I went through more than 30 Google Chrome extensions and prepared a selection of tools which you can see below. The tools I am going to introduce to you support my company work on a web-based information system for hospitals and clinics called Epro and also my design and development work on personal projects. I divided the tools into 4 categories:
Categories of the tools
- The Classic of classics + advanced debugging (1)
- Tools to check designs implementation (3)
- Tools to check accessibility, SEO and performance (3)
- Tools to improve our work in general (3)
Let’s scroll down and have a look at them in more detail.
A. The Classic of classics + advanced debugging…
The post about Google Chrome tools for UI/UX Designers can’t be written without mentioning Chrome Developer Tools. It’s the base for every designer and developer who has chosen Google Chrome as a primary development browser. I am opening the list with this tool, but keep reading because you may discover others which maybe you have never heard about.
Chrome Developer Tools
Integrated by default, see: Settings ► More tools ► Developer tools
Ctrl + Shift + I (Windows, Linux)
Cmd + Opt +I (Mac)
Why I like it / How it can help you:
- Chrome Developer tools are very powerful for developers, designers and basically everyone who needs to inspect and analyse a code behind a website or a web application.
- I personally really like and often use some of its features:
- Source code tweaking and debugging
more about inspecting the code and styles…,
more about inspecting Javascript… - Testing different devices and resolutions
more about device mode… - Analysing runtime performance
more about analysing performance…
- If you are a ReactJS developer or a designer who is working on a product developed on ReactJS (that is exactly my case), you may want to extend default developer tools by React Dev Tools and Redux Dev Tools. This combination will make inspecting React components and its states very convenient. Have a quick view at React/Redux Dev Tools in this more detailed article.
B. Checking implementation of designs…
Part of the designer’s work is checking if the implementation of designs does actually follow those designs properly. I often test developer’s outputs and need to check if a white space or a gap does have desired dimensions, if some UI elements, interactivity or information is not missing etc. If I find some usability or visual issues I create notes which I report and have them fixed later by me or somebody else from the project team. Below, there are tools which help me exactly in those situations.
PAGE RULER — MEASURING DIMENSIONS
► Plugin Summary + Installation
Why I like it / How it can help you:
- Page Ruler does help very well with a general quick check of dimensions, distances and gaps sizes. The tool can be also used by developers when they want to gather measurements from specified designs.
- Thanks to available visual guides the tool is useful also for checking if UI elements in the view are vertically and horizontally correctly aligned.
NIMBUS — SCREENSHOTS & SCREEN RECORDER
► Plugin Summary + Installation
Why I like it / How it can help you:
Nimbus Screenshot & Screen Recorder is a great tool for everyone who wants to capture a current view and add additional notes to captured screenshots. I just love it! Let’s see why…
- It offers various capture options: Current visible part of page, Fragment, Selected area, Selected & Scroll, Entire page, Delayed screen, Browser window, Blank screen, Video.
- Editing mode (shown in the image above) provides a very useful functionality for creating quick notes in a taken screenshot. Use case from my work: when I find in our web-based product a visual bug, it is very easy and straightforward for me to take a screenshot, highlight that problematic place, add some notes and save the image for reporting.
- On top of the features mentioned above the tool offers also screen recording (browser tab mode+ desktop mode). This is very powerful mainly for reports of usability and interaction issues.
UX CHECK — USABILITY REVIEW
► Plugin Summary + Installation
Why I like it / How it can help you:
- UX Check combines functionality for visual highlighting of specifically selected parts of a current view with 10 Usability Heuristics for User Interface Design.
- The tool provides a quick and easy way for creating usability and UX reviews. The results can be exported in form of a document which can be sent by email to stakeholders and other people involved in the project.
C. Checking accessibility, SEO and performance…
“A truly outstanding digital experience is a fusion of accessibility, usability, creativity and technology.” — taken from Accessibility is part of UX (it isn’t a swear word) and I can’t agree more. Is it your goal to offer an outstanding user experience? Then the accessibility should be taken seriously and that is why I incorporate a tool for accessibility reviews in my process.
Another important aspect of overall user experience is performance and I have a tool which helps me with that too. Have you ever heard about statistical data mentioned in Performance is User Experience? “Users expect pages to load in two seconds, and after three seconds, up to 40% of users will abandon your site. Moreover, 85% of mobile users expect sites to load at least as fast or faster than sites on their desktop.”
And the last aspect, that in my opinion also connected to user experience, is Search Engine Optimisation (in short SEO). No doubt, there is a crucial connection between SEO and UX and the aim should be to make SEO and UX work together. Another opportunity for a handy tool there!
SITEIMPROVE — ACCESSIBILITY CHECKER
► Plugin Summary + Installation
Why I like it / How it can help you:
- Siteimprove accessibility checker provides general accessibility audit with a comprehensive description of found issues. The report gives information about how to meet necessary criteria. Problematic parts are nicely highlighted (after clicking on the description), so it’s easy to find them in the view.
- The accessibility report can include information about issues with a text contrast (based on Success Criterion 1.4.3 of web content accessibility guidelines WCAG 2.0 and its levels of acceptance A, AA, AAA) or issues with tab indexes for keyboard use, forms accessibility and others.
YSLOW — PERFORMANCE CHECKER
► Plugin Summary + Installation
Why I like it / How it can help you:
- YSlow analyses a website performance and confronts it with Yahoo!’s rules for high-performance websites — Best Practices for Speeding Up Your Web Site.
- The tool offers performance audit with explanatory notes and suggestions for improving. It also measures used source components and its total weight which is again useful information for performance optimisation.
SEO QUAKE — SEO CHECKER
► Plugin Summary + Installation
Why I like it / How it can help you:
- SEO Quake provides general search engine optimisation audit with suggestions for improving, keywords density statistics, links analysis and other useful information like page ranking (Google index, Yahoo index, …), counts of sharing (Facebook, Google, LinkedIn, …) and backlinks statistics.
D. Improving work in general…
The last three extensions help me to stay inspired, be focused (thanks to that also be more productive) and communicate textually without too many spelling mistakes since English is not my native language.
MUZLI — STAY INSPIRED
► Plugin Summary + Installation
Why I like it / How it can help you:
- After you install Muzli plugin into your browser, you will get a place within a blank tab with feeds from the most favourite websites focused on digital design, product design and other closely related topics.
- As designers, we should always stay inspired and informed about the industry and this plugin is a quick shortcut to the world of inspiration and our own progress.
GRAMMARLY — AUTOMATIC GRAMMAR CHECKER
► Plugin Summary + Installation
Why I like it / How it can help you:
- I think you will agree with me when I say that a textual communication is an important part of our jobs. If you care about what you write, you will not be happy with any mistakes. If that’s true, you can try The Grammarly plugin which automatically checks your text copy.
- In my day-to-day work, I am expecting to handle the English language (and writing specifically) on some level of proficiency. Grammarly helps me to keep that level high enough even though I am not a native English speaker.
NOISLI — SOUND ENVIRONMENT
► Plugin Summary + Installation
Why I like it / How it can help you:
- The last plugin captured my attention for its simplicity and usefulness. Noisli does help me to bust my focus to the next level by providing a tool for generating pleasant nature sounds.
- I use the tool to block out distracting background noises, get quicker into the productive zone and eventually reduce also stress.
Final thoughts
And that was it, my readers — a list of Chrome tools which help me on a day-to-day design & development basis. The list has settled down a while ago after experimenting with various extensions and I am happy that I could introduce them to you in this article. I believe every designer, and even a developer, should find their own tool set. I hope you have found some inspiration in this article. Let me know if you liked the list or if you use another tools in the comments…
There are more tools which I use in my design and development process, not specifically linked with Google Chrome, and it may be useful to share them with you too. My plan is to write about them in another article.
For more stories see ► A Designer’s Thoughts.
Thank you for reading!
Worth reading? 💚
If you enjoyed the article, please clap below to help others find it.
Do you have any question or just an idea for sharing? Feel free to leave a comment below or share it on Twitter.
The article was written by Břetislav “Brett” Mazoch while working as a designer in England. He moved there from the Czech Republic to follow his traveller’s dreams and work passion — UI/UX Design and Front-end Development.
