10th July, 2015
A project that is currently being developed required in its spec a map of the counties that it covers. We could have simply put in a static map and been done with it. Taking that route however would have diminished the user experience (UX) and interface (UI). So at Tidy Design we decided to incorporate some interactive elements into our map. This has enriched the UX and UI creating some cool effects.
How did we accomplish this and with what tools? To start with we had to use Photoshop to edit the map of Great Britain so that each county can be identified. Using different variants of the client’s colours enabled each county to stand out. The second element of the map is the markers, which are separate image files. Map marker icons from our “Free Stuff” page.
All that was left to do was to incorporate the UX, this consisted of a hover effect over both the markers and county names. Hovering over a county name enables the corresponding map marker to bounce, indicating its location. Vice versa made the county name standout by a change in background colour, text position and a pulsating animation.
Using CSS we placed the map markers into position. Em’s allowed the map to be more responsive and keep the markers in place, no matter the screen size. Animate.css a free to use CSS file provided the bouncing and pulsing animations. Finally the incorporation of jQuery created the hover event listener, which triggered the appropriate classes to be added. The classes being added are what create the visual effects you see…
Please stay tuned for more on this project.
Blayne Phillips