Tools Design for Websiteplanet.com
23 october 2018

CASE OVERVIEW

For Websiteplanet.com I created various web tools. The goal was to make really straightforward and easy to use tools (find all the tools in “Tools” section).

Step 1 – Find competitors

For each tool the client sent some similar tools and I also did some extra search. My goal was to find as many similar tools as possible.

Снимок экрана 2018-10-18 в 21.57.11

Step 2 – Analyze

I analyzed the tools I found: determined all pros and cons, checked design, usability, and efficiency. Our future tool had to be the best among competitors.

Step 3 – Sketches

After having all information about competitors I created my own tool designs (sketches on paper). I allowed couple iterations to create a perfect tool.

Step 4 – Mocking up

Then I was moving the sketches into Photoshop. At this stage, I could slightly change the idea because I had real dimensions, not paper.

Lorem IpsumStart

Step 5 – Different steps

Most of the tools include a few pages (start -> process -> result) so I had to create all the steps within each tool.

responsive_checkerStart

responsive_checkerResult 1

Step 6 – Present and get feedback

We normally had 1-2 tweaks iterations before finalyzing tools. Basically, just a few small tweaks were needed before we are done.

Step 7 – RTL and mobile versions

After the tool design has been approved, I moved on to RTL and mobile versions.

rtl

Here are the tools I designed:

Favicon Generator

Responsive Checker

Gzip Compression

Screen Resolution

Multiple URL Opener

Share Link

JS/CSS Minifier

Lorem Ipsum

AMP Validator

A few more tools are in progress.

P.S. A new Websiteplanet logo is my work as well :)