Stan1ey UX Tools

version

 

Branding

Grid Layer

See the live website with your chosen grid and baselines on top of it. Align everything and it'll automatically look better!

Palette Checker

Pushing out a new brand colour palette? Quickly highlight the bits that don't match your new list of colours.

Design Elements Distiller

Shows the summary of some basic design elements used on the page, in the order of frequency.

Design Process

Wireframe it!

Transform your prototype into wireframe, to discuss the high-level design decisions with no distraction from its visceral details.

Modal Sizer

Deciding the size of a modal element such as a pop-up window is not always straightforward, considering the various screen sizes in this responsive design world.

Localisation

Label Sizes Matter

Measure the width of the labels in pixels, and find the optimum size of the UI elements in the various translated strings, for your better localization.

Typography Comparison

Compare the Latin alphabets with non-Latin characters side-by-side, to understand their differences in the alignments and space around the text.

Text height

Visual height of Latin-based text depends on its cap height and baseline. Find your cap height and baseline for your typeface and line height here.

Editables

Try your UI with some different labels and contents. Just click and edit -- Go WYSIWYG with online web pages!

Stretchables

Would your layout break with long translations? Click and make any string longer to find out even without any localization work!

Accessibility

Colour Contrast Matters

Find all the legible colour combinations in your palette with ease. Enter your colours for an instant colour contrast matrix for WAI compliance level A or AA.

Contrast Highlighter

The contrast of some information is not conveniently written in codes, such as texts over image background or even in imprinted in images.

Readability test

Is your content easy enough to read for the most users? Check it now with this online tool to measure the readability score and compare it against the recommendation.

Font Size 101

Ever tried to compare the different behaviours in the font size units? Now you can with the exact pixel measurement.

Data Visualisation

Normalised Colour Palette Generator

Computational way of creating a colour palette with consistent contrast and visibility over the background, without relying on monitor calibration or lighting conditions.

Icon Colouriser

Dynamic infographics such as digital dashboards often require labourious work to create colour-coded icons for many different states. Not any more.

Data Analysis

AAB Stats Adviser

AAB testing is a fail-proof way to compare the designs and verify the experiment at the same time. However, it's not an easy one to analyze. Compare three variants with one click.

Misc.

Sketch Plug-in: Lorem Variabilis

Generates "lorem ipsum" dummy text for the selected text layers, with the selected number of words.

All about Touch

There are a lot more underneath taps and clicks. Use this tool to understand what you might be able to use to unleash the depth of touch events.

Hardware: Know Your Display

Is your display Retina? XHDPI? MDPI? LDPI? Load this page and find your pixel density. Remember: It depends on how far you look at it from.

Gadget: Quick QR

A handy tool to create a QR code for ANY text snippet; such as a bank account number, address, etc.