Building “pixel-perfect” website is hard; we make it easy for you

Managing client feedback is the leak-in-the-bucket. Fix it NOW.

Building Websites is hard

If you are looking for should (or shouldn’t) desiginers code, here’s a definite answer- https://uxplanet.org/should-designers-code-the-definitive-answer-7564b92a066

If you are a product designer working on website/webapps etc, you’ll agree with me that building good websites is hard but, building pixel-perfect one is just 100-times harder.

There’s so much involved already — Getting “correct” brief from client/boss, understanding actual product requirements, designing as per the brief, keeping technical constraints in mind and then iterating as per feedback.

There is friction at every stage, ability to communicate your “requirement” better is what takes you apart from rest of the crowd and save your time and boost productivity.


Especially Post-dev UI Reviews

As a designer, we are empowered to visualize and showcase product via design tools like Sketch/@photoshop/@Figma etc. and there’s hoards of tool to help us take feedback on our designs ( InVision, Marvel, CanvasFlip and so many more), make quick changes, show again, take feedback and pretty quickly we are ready to hand-over designs to development team.

But that’s when our moment of helplessness hits.

Doesn’t matter how efficiently designs are handed over ( via Zeplin, CanvasFlip Specs, or Invision) Once designs are implemented by development team, there are so many gaps of how it was designed and how it appears in HTML build.

Last-minute issues during UI reviews are nightmare for designers.

Or, marketing folks/client decide to changes heading and now it comes in 2-lines and now you have to make the font smaller

Or, final copy need little more real-estate on the website.

Or, CTA need to be made more prominent.

And list goes on.

What makes situation even worst is to communicate these changes back to design team. To change text on website, you need to get it from content folks and share it with developers. To make even minor fixes, client send you email with screenshot, you fix it and share updated design to dev folks.


Visual Inspector — Visualization made easy

2 months ago, we released Visual Inspector — a visual alternative of Chrome’s native devtools to empower designers to review design properties in page and make temporary changes in live web pages without digging in code.

Visual Inspector made it possible to express the exact changes to be done on the website/webapps with the same speed as design tools. Not only designers but other stakeholders in team including clients/content/dev teams started using Visual Inspector to review and change design properties.

Within 3 months, Visual Inspector has been adopted by 32,000 designers around the world to fix design issues over 1.7 Million web pages.

[For those, who don’t know about Visual Inspector(VI), it’s a free Chrome extension for designers to make temporary changes in live web pages in a familiar way. Available in Chrome Webstore.]


But design is rarely one man’s job

After initial success at Visual Inspector, we reached out to existing users to understand how and where are they using Visual Inspector and what can we do better.

During our user interviews, we realized that always almost there are multiple stakeholders involved and these changes need to be shared with them either for approval or implementation.

That’s when we realized that we have 2 face problem at hand:

  1. Empower designers to make changes in live web page and visualize changes
  2. Collaborate changes with stakeholders for review and implementation

We were doing pretty well with our first challenge and it was time for taking Visual Inspector to next level.

So, we decided to bring “Collaboration” in Visual Inspector.


Introducing — Collaboration in Visual Inspector

Visual Inspector was born with the idea to empower designers to build pixel website and we already made it super easy to inspect & make changes in live webpage. Next we added “collaborate” section in Visual Inspector:

  1. Add comment to the webpage to highlight changes
  2. Invite stakeholders to review changes and implement

Adding comments: This is as simple as selecting the element and write down your comments. You can also move around the comment popup for better visibility of the content.

Stakeholder review: For every web page you edit, you get a unique URL. You can share URL with stakeholders in the team — client/dev folks.

Once reviewers open the link in browser, it redirects it to your website and they can view all the change /reply to comments/ start a new comment thread.

To keep things simple, reviewers can not make changes to the page.


VI Colalboration v/s “Screenshot & Email”

Imagine you designed a website which has been implemented by dev team. You have a suggestion on website about a particular element, say heading of the web page.

Without Visual inspector,

  1. You take screenshot of the page, add new headline and put it both in email and send it to devs.
  2. Developer makes changes to the heading and ask you to review on website. But now, it’s broken in 3 lines instead of one.
  3. So you decide to take another screenshot and send it to devs to make the heading font size smaller.
  4. Devs makes it smaller and update you in email.
  5. You review it, but they made it way too small. So now, you write email to make it slightly bigger.

and it goes on…

But with Visual Inspector,

1. You just open the extension on your website, change the headline text. It’s broken in 3-lines, you make it exactly of same size as you want.

2. Leave a comment for stakeholders.

3. Share the link with client/dev to review or make changes

4. Client can instantly review and approve changes.

5. Devs get exact CSS and text to make pixel-perfect changes.

Which one of these way of fixing design issues look better — endless email conversations and to & fro or fixing issues/collaborating right within your website.

Yeah, right. That’s why Visual Inspector has been chosen by thousands of teams around the world to make pixel-perfect website without losing the peace of mind.


Summing Up

Taking feedback from client and implementing them correctly plays a crucial role in delivering pixel perfect website. If done right, this can be a delight to customer otherwise designer’s worst nightmare.

At Visual Inspector, we are committed to make website feedback collaboration and design bug fixing a breeze for all stakeholders and newly released “collaboration” is a milestone in our vision to build web without design issues.

We can keep going on benefits of Visual Inspector but why should I — It’s completely free for you to try — so grab it from the web store or checkout more on official website. ( No credit card of commitment required.)

In fact, it’d be awesome if you explore all the awesomeness all by yourself and share your feedback in comments.

If you find Visual Inspector helpful, share it with your friends.

See you in comments section.


Holidays are coming! Spread the good news with your friends on Twitter. Gift them this awesome tool. They are surely going to thank you for this.


Siftery brings you lifetime subscription of Visual Inspector for just $49 — https://www.canvasflip.com/visual-inspector/siftery/