If you’re either a designer or run a website, your life at one point might have been ruined by phrases like ‘make it pop’ and ‘edgy’ etc. Sure they mean something to both designer and website owner but trying to understand what exactly it means can often make you miss out on the basics of a web design. Spur is a web application that helps you check if you’ve covered everything there is to cover on design basics. The app itself doesn’t run an analysis on your design, rather it provides you tools to analyze the design for yourself.
The app has 7 different tools, Grayscale, Intersections, Contrast, Blur, Mirror, Rotate & 50% Zoom, that will let you check for a design convention. Each tool provides a brief explanation of what it is you should be checking for. Tools are used independently of each other.
To analyze design, you can either enter the site’s URL or you can take a screenshot (or mockup) and upload it to the app. To upload an image, click Upload an image instead just below the Spur it on button, browse for the image and click upload.
The app might take a while to load website screenshot. Once it does load, you can start using the different tools. Start with the Grayscale tool. This tool renders your site colorless so you can see which areas are actually attracting a user’s attention and why. The Intersections tool helps you check how many distinctive parts the site is divided in to. This doesn’t just mean how many columns or rows the site design in divided in to but also how distinctive parts create intersections and focus a reader’s attention. Drag the ruler lines out to outline the different elements.
The Contrast tool takes the colors on your design and changes them to the ugliest & brightest shade in the color’s spectrum. The tool helps you check if you’re using too much of the same color in too close a proximity and if the overall color theme holds up well. The Blur tool helps you check if the different elements on the page are well distinguished from the others i.e. can you tell where each is positioned.
The Mirror effect flips your whole design so you can check if it is actually aligned right and is yet another way to check if the different element on your page are positioned well. The Rotate tool lets you check the page’s width and the 50% Zoom tool is another tool that checks the site’s layout for cohesiveness.