Logo

Scott's Portfolio

Github Profile LinkedIn Profile Go home

Quick Mocks

Jun 2017 - Nov 2018

Originally a 'Hack Day' project, this UI mocking utility became loved by devs and designers alike at a prior company. I won 3 awards and a significant windfall for developing it. jQuery JS Chrome Extension Google Analytics

Key Points


Features

Quick Mocks (QM) lets you modify the layout and text of any webpage quickly and easily to create mock-up designs. Essentially webpages become editable design templates.

Tweak the label on a card component to see if it looks better. Looking for a new banner image? Paste in external images and try them out. QM makes it easy to tweak the UI of an actual website without touching a single line of code.

Think of the browser 'inspector' tool, but on steroids!
- My sales pitch to colleagues


Video Example 'replace' feature.


Here are some videos of my favourite actions:

Edit Text Move Copy and Drag Paste Images Sort Screenshot

Save as single file Compresses all external images and links into a single HTML file which can be re-edited.

Playground A test friendly environment where users can practice actions.

Some other cool features:


See more explanation and the history here


Tech Specs

QM is a chrome extension which runs in the background of every page you open. JS is injected to process actions and interact with HTML elements. CSS is injected for minimal styling such as to highlight selected elements, and to enable draggable functionality.

Algorithm Algorithm

jQuery jQuery

Chrome Chrome Extension


Challenges

Continue the article here