The real estate industry has a long history with Layar. In 2009 when Layar began with geo-located layers, Funda, the Dutch real estate search engine, was one of the first and most popular layers on our platform. Today, individual agencies like 4one4 in Australia are using interactive print to provide relevant information about properties to their customers.
Interactive print goes far beyond the pages of magazines, pamphlets or business cards, and Van Santvoort, a real estate agency here in the Netherlands, is showing just what that can mean. At the recent Regionale Nieuwbouwbeurs real estate exhibition, the Van Santvoort stand featured walls full of digital interactivity built by Layar partner Limebizz.
Visitors to the Van Santvoort booth could scan the images and descriptions of real estate properties to view extra photos. Users could swipe through photos in and around the properties as well as view floorplans. Videos offered booth visitors with tours of properties, and a 360º interactive “walkthrough” really made them feel like they were there!
This project is a clear leg-up for Van Santvoort over the competition. Instead of a single picture and description, Van Santvoort could provide multiple pictures, videos and even 360º experiences at an in-person exhibition, instead of online where these experiences traditionally live. Bringing the digital to the real life really made the difference for Van Santvoort.
Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!
It’s the final day of HTML Week here on the Layar blog, and we saved a really great example for last!
In the very middle of LAYARED Magazine – pages 16 and 17 – a two page spread advertises the Layar Creator, including the quick steps to making interactive print. The illustrated spread provides a great overview of what it takes to use the Layar Creator, but scanning the page takes this to a whole new level.
Using some of the same basic HTML tricks we’ve been featuring throughout HTML Week, we created an engaging, animated walkthrough of using the Creator. Readers are directed to tap through the various steps of uploading pages, adding augments and publishing a campaign. Just follow along and tap the “Tap Here” buttons and you’ll be a pro at the Layar Creator in no time.
It’s a great example of how the HTML Widget in the Creator can be used to provide an immersive experience for readers. Here’s more about this widget:
Uses similar jQuery techniques from other HTML Week examples.
The steps are a series of screenshots from the Layar Creator.
Includes a “View in Fullscreen” button so users can follow the tutorial without needing to hold their device over the page for an extended period of time.
Again, this example seems more complex than it actually is. Using the FlexSlider plugin mentioned above, we created a few basic slides to introduce the walkthrough widget. When a user taps on a step to enter the tutorial, the slider fades away.
The green “Tap Here” buttons are very simple as well. It’s essentially three different elements that fade in and out on top of one another to produce a nice effect that encourages the user to tap the icon. Using timing and opacity options, the inner circle first fades in, followed by the outer rings. Then the inner circle fades out leaving the rings to guide the user.
The rest of the widget is simply fading from one screenshot to another, triggered by the user tapping the icons. It’s a very simple implementation but in this case it goes a long way toward educating readers of LAYARED Magazine about how the Layar Creator actually works.
After running through the 6 steps, readers are then familiar with how to create interactive print and are ready to hit the ground running when they use the Creator on the Web for the first time. This same widget could be used for any of a variety of purposes, from an app tutorial to instructions on constructing your new furniture. As with all HTML widgets, the possibilities are only limited by your imagination.
And that wraps it up for this example and HTML Week. Follow the links above to review all of our widget breakdowns from this week!