Last year, I created a website for a client to showcase their new building. We wanted to make it easy for site visitors to explore the new areas of the new building while also making it easy for the client to update the building information.
The only materials available to us were the architect’s plans and renderings for the new building. We created an interactive floor plan where site visitors can click on different areas of the building to get more information.
A bit later on, I was doing another project for the same client, and we found a place where wanted similar functionality available. I also got a few inquiries from potential clients wanting a similar functionality for their own websites and that’s when the lightbulb finally went on – this needed to be a WordPress plugin. But it was a little more than I could handle myself, so I teamed up with Nathan Tyler of Tyler Digital.
We set aside four hours each week and got together to work on it – 4 months later, we announced the very first release of Draw Attention. And we’ve been working on it since then to add new features and keep things all up to date. Now it’s easy for anyone to create interactive image maps. Here’s an example of how it works:
Click on the items on the desk to learn more.
Designers need a computer to do their work well. One with a big and gorgeous screen is preferable.
A tablet is helpful for taking notes, taking photos of great design, or sketching up design ideas on the go.
Great for keeping up with all those Instagram, Vine, and Periscope happenings.
Need to be able to pick out tiny issues with a design and set up crisp and gorgeous typography.
Helpful for typing out tweets and answering emails.
Best tool around for pushing pixels around a screen.
For those times when fine-grained control over a design is necessary.
Great for slipping into a pocket when going out for an inspiration walk
For drawing sketches and detailing plans for world domination.
Best for getting sharp, thin lines in sketches.
These images are super easy to create and don’t require you to know any code. It’s easy to click to draw the highlightable areas of the image, and those can link to an external URL rather than loading up the more info box on the right.
In the Pro version of the plugin, you have a variety of layout options including tooltip and lightbox. The image is responsive, too! The Draw Attention area will automatically adjust to fit your theme and your site visitor’s screen. You can learn more about it, see some other demos, and watch a video over at wpdrawattention.com. We’re super excited about all the ways people have been using it and hope that you find some clever ways to put it to work for you, too.