Most useful Browser Extensions for Web Designers or Developers

by | Nov 24, 2017 | Resources

Nowadays, most of the web designers or developers search and browse various websites and resources to get inspiration for their next project OR while doing their work designers and developers share data, bug reports with each team. Sometime capture screenshots and make long pages or try to find out the fonts or colours used in the sample sites.

This sometimes could be a tedious task and take a lot of time investing in reverse engineering or researching the same.

We will discuss some of the Useful Browser Extensions, which will help you save a lot of time and stay ahead of other teammates. ūüėČ

What mostly we “the Designer or Developer” need?

  • Identify Color on the sample website.
  • Identify Fonts used in the text of a web page.
  • Capture screenshot of a Full long page of the website.
  • Spelling Check or proofreading webpage content.
  • Create video tutorial or Screen Record, Share steps to replicate a bug or issue.
  • Create, edit spreadsheet for reports etc. and share with the¬†team or your boss.

(here we are talking about basic things, which sometimes takes time. Although there are many aspects which designers and developers needed) – Let’s stick to basics first.

Useful Browser Extensions

1. Identify Color on the sample website.

Guess how you find out which colour is being used in sample website, or image in a page, some of designers or developers, specially freshes see the source code or use developer console and manually find the CSS used of the particular colour, this is sometimes confusing and time-consuming.

Well then, stop the traditional way and be smart, make use of the most¬†useful¬†browser extensions available out there in the store. Some are free some are paid, depending on your requirements, choose what’s best for you.

Color Picker Eye Drop Chrome Extension

2. Identify Fonts used in the text of a web page.

Finding the fonts sometimes becomes a challenge and when you are looking at your sample website and trying to guess which font is used in it, it could take a lot of time to find if multiple fonts are there and you are wasting a lot of time comparing fonts. But for ease, there is Chrome extension. In just one click you will find the exact name of the font. With¬†“WhatFont”¬†you can identify fonts of the webpage in just a click, the new version also has a colour identifier, so you can see which colour is used in the text.

WhatFont Chrome Extension

3. Capture screenshot of a Full long page of the website.

How do you capture a screenshot of a webpage which is long? I assume some are using just default PRTSC/PRNTSCRN button and joining different screens in Photo Editors like Photoshop. Some may be using Window’s “Snipping Tools”. Still, there is a lot of work to be done when taking screenshots and combining them and present or showcase to your employer. If not already using Google Chrome Browser’s Extension¬†“Full Page Screen Capture”¬†then I’ll suggest using it. Save a lot of your time and efforts.

Full Page Screen Capture Chrome Extension

4. Spelling & Grammar Check or Proofreading webpage content.

Not all are good in English, sometimes we do a very basic mistake like forgot to add punctuation marks, use of connector words like and or and this could change the meaning of the text. Search engines also see basic mistakes and may affect your search engine rankings. A situation like this sometimes could be embarrassing.

So how do you enhance your written communication when you type? “Grammarly” is the perfect solution for anyone, everyone who is typing anything may use Grammarly Browser Extension. This will seriously improve your English by suggesting you corrections for the mistakes you do WHILE TYPING.

No Waiting, No proofread later, It will suggest you corrections while you type and you can make corrections and improve your writing.

Grammarly Chrome Extension

5. Screen Video Recorder – Capture Videos.

Capture, Edit and Share Videos, Record browser tab or computer screen, just like that.
Fed up sending screenshots and explaining bugs to developers or team? or want to make video tutorials? “Screen Video Recorder” is the solution. One of the must-have¬†Useful Chrome Extension.
Go to Chrome Web Store and look for Screen Video Recorder. There are few basic to advance extensions, depending on your liking and requirement, choose the best chrome extension.

Screencastify – Screen Video Recorder Chrome Extension


 

6. Do More with Google Drive.

Google is our friend, most of us are using Google tools and Services, but still not making full use of it, Google Drive as you know stores your data and you can share access it online on the go, can share it with anyone as well.
Google Drive Extension is really helpful when you are collecting and sharing a lot of data, Google Drive Chrome Extension is one of the most useful browser extension.

This extension allows you to save web content directly to Google Drive through a browser action or context menu. You can save documents, images, and HTML5 audio and video all by right-clicking and selecting ‘Save to Google Drive’. You can save the currently viewed page using the ‘Save to Google Drive’ browser action. The directory location and format of saved HTML pages can be controlled with the extension’s options page (Choice of an Entire image (default), Visible image, Raw HTML, MHTML, or Google Doc). You can automatically convert Microsoft Office files or comma separated files to Google Docs format.

Save to Google Drive Browser Extension

 

7. Take Selective screenshot Prnt Scrn РLightShots

“LightShots” it has two versions Browser Extension as well as Desktop application, depending where and what you need, I’ll prefer using Desktop application, Because it will enable us to take the¬†screenshot in any application and not limited to the Browser, however, if you need just for browsers then Install LightShot Browser Extension.

It is a simple and convenient screenshot tool. Select an area, edit your screenshot and upload it to the server.
Lightshot is the fastest way to take a customizable screenshot. Simple interface, nothing useless and lightweight.

Features:
* take screenshot and share it in few clicks
* select any part of the page/screen
* edit screenshot in place
* save on a disk or upload to the cloud
* search for similar screenshots

Capture Selective Screenshots using LightShots Browser Extension

 

 

These above are the easiest and widely used chrome browser extensions. Though there are several different extension which may have advanced functionality and thousands of different extensions for the different type of uses, feel free to browse and test them out.

These are useful browser extensions which help in increasing productivity by saving time and yet are free or very low cost.

We are a Website Design Company.

We do website designing, WordPress website design, we are Divi Theme Experts, we do custom Core PHP Integrations, SEO and we help establish business and identity online. Contact VertiDesk for your online presence and website design needs.

Call us

Are you looking to get your website designed?
Call us and we will help you get started with your website.

Call: +91 9 88 88 212 00

Write to us

Need a quote for your website or web project?
Email the details & we will contact you with your custom quote.

E-mail: web@vertidesk.com

%d bloggers like this: