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.