Digital Agency Insights – How To Make Web Design Truly Magical Again

Even with centuries of old-school magicians preceding us, the art form has not lost its magic touch. Withstanding the test of time, magicians still draw large crowds, even generations apart. It’s certainly not just because of the Boy Who Lived and that era of magic. To flourish, web designers must do the same, especially with the rise of the tech-savvy millennials. Before you stress about your strict project timelines or despair over the ghastly amount of stock templates readily available for free downloads, I’m here to inspire you again and show you how you can apply that magic touch to your design process and thinking. As Dobby would say, let’s wow their socks off!

As a creative director of a digital agency by day and magic fanatic by night, I find tremendous inspiration in magic as an art form. Even with the limitations of a stage, sleight of hand, special effects and showmanship can still make my jaw drop. From my own studies and analysis of hundreds of the best magicians around the world, I’ve distilled 6 primary principles governing a successful magic performance and will show you how applying them to web design will be an absolute game-changer.

Let’s save mediocrity for the amateurs shall we?

1. Surprise your audience, keep them guessing

Taking a lesson from our first act, Penn & Teller were a famous duo of the late 80’s. They often broke the magician’s code by revealing how they did a trick. The audience would be clued on…or so they thought. Then they would perform a more advanced version of the trick, baffling their audience once again. How can we surprise our audience with something familiar yet innovative?

Cinemagraph of dripping honey – Pexels

Cinemagraphs – humans love pictures, so imagine a picture that moves. When users notice the movement, they usually watch it loop a few times before progressing down the website. This adds intrigue to the experience and also increases the length of time they’re on your site, which Google rewards favourably. Statistics show an average of 15% extended duration of on-site browsing with the use of cinemagraphs.

Parallax effects – make elements move when users are scrolling. It is truly magical when images on a website respond dynamically to how we move. Parallax effects bring inanimate objects to life. Users are more likely to scroll through the depths of your site as you’re making it exciting to, like going on a treasure hunt with surprises on the way. 

Parallax effect on The Rookeepers website – designed by Chromatix

PRO TIP – Use subtle hover effects to engage users and encourage them to explore the different interface components dotted around your site. These are rewarding visual cues which increases their engagement by mimicking the sensory rewards of real-world interactions.

2. Dazzle from beginning to end

Magician Hans Klok impressively holds the Guinness World Record title for the “World’s Fastest Magician”, through performing the highest number of illusions in 5 minutes. His performances are rollercoaster rides of non-stop tricks from start to finish. Whilst we don’t want to overwhelm users, we can enhance each point in a user journey to captivate our users.

Here are different points in a web journey where you can add design flair

• Engaging loading screen
• Text loading effects
• Parallaxing images on scroll
• Icon animations
• Subpage video banners
• Page transitions

With such a variety of effects to apply and different degrees which you can play with, there is an infinite number of experiences you can create.

3. Perfect execution

The stands will go quiet for our next guest, Shin Lim. Number 1. Sleight of hand artist in the world and reigning champion in close-up card magic, Lim performs his tricks without speaking, directing all attention onto his smooth hands. Lim has refined his speed and fluidity as his signature style. And well has he mastered it.

One of the lessons we learn from Lim, is to choose one thing and do it extremely well. As an example, you can go ham on the assets of a site – explore adding textured overlays, illustrative elements, patterned backgrounds or cut-outs. To ensure the focus is on the imagery, keep the complementing bodies of text simple. On the other hand, if you’re a font aficionado,  let type take centrestage. Experiment with bold typography and overlapping text – make your copy sing. But keep the other elements more subtle, they’re your supporting cast.

PRO TIP – Quality over quantity. Focus on refining the fundamentals rather than adding visual fluff or chaos. If not executed well, having a crowded page full of competing elements and flashy effects can result in everything trying to stand out, but failing to do so. You don’t have to be over the top, to be at the top. 

4. Get up close & personal

Our next act, bilingual American / Japanese magician Cyril Takayama has a real way with people. Renowned for his prime-time TV performances, Takayama’s real asset is his ability to build a great rapport with people. With this deep level of connectivity, he can quickly make his audience laugh and smile with ease. Blended with his incredible showmanship, his performances resonate with his audiences who feel incredibly comfortable, relaxed and friendly towards him very quickly. Social skills are critical in facilitating better interactions with people and especially in great web design. Users are more likely to choose a service or buy a product from a website they feel resonates with them. Regardless of the purpose of your website, connecting with your users is pretty much a universal priority.

We can’t exactly reach out of a virtual computer screen to greet those who visit our websites…yet. So let’s talk about things we can do to add that human touch.

Approachable headings – change out robotic and clinical text for conversational & friendly tones. If it’s the right fit, maybe consider adding a touch of humour and get a chuckle, or some wit if you want to appear sharper and polished. Good copy is underrated.

With the right words, even chook feed can be exciting – Apostrophe

Anchors – help usher your audiences to what they’re looking and miss the irrelevant stuff. Whilst millennials might be used to scrolling, they don’t always want to, especially when in a rush.  Who doesn’t like skipping the queue?

Creative error / success messages – if your visitor somehow finds themselves stranded at a 404 error page (shock horror), you can minimise this negative experience with an error page that empathises with them..and then redirects them to a helpful one.  In the same vein, if your visitor has finalised a purchase, ensure there is a success message to reassure them that their order or booking has been received. Get them excited about the upcoming delivery and further enhance the shopping experience. 

Creative 404 error screen – Pixar

Through intuitive design, you provide a user with a more personal experience. Intuitive design means you can prompt people’s attention to tasks that are important while also enabling them to make their own decisions on what to do next.

5. Make it memorable

This magician almost needs no introduction. One of the undisputed greats of this era, David Copperfield is famous for his death-defying acts – though he sure tempts fate. With acts of incredible magnitude, he has been mesmerising his global audience for 40 years. His performances evoke feelings of shock, bewilderment and excitement. How can we push the boundaries of the digital realm like Copperfield?

How about taking a moment you can’t see with the naked eye and sharing that? Flowers take days to open, sometimes weeks. We took a timelapse video that shares this moment in a matter of seconds. Watch a peony open up right before your eyes right here. Sharing this rare moment instills a sense of wonder and helps create a great first impression.

Ideas to create a memorable experience 

Storytelling – Good stories are like gifts – they guide users through an emotional journey in a linear narrative. Story-like experiences feel more personal and are can connect with users at a deeper level, making them harder to forget. Think of the difference between exploring a museum on your own versus having a guide to take you around.

Video banner for Autron VR – designed by Chromatix

Video backgrounds – As video content is harder to fake, it can give off a stronger sense of authenticity. If a picture speaks 1000 words, picture the novel that videos tell. People leave behind their TV screens and pay to go to the cinema for an experience. Doesn’t that tell you something? You can capture that essence in a good video on your website. Additionally, many web users take in information better via video than text, especially with the shorter attention spans prevalent in millennials. It’s not only a feeling thing, it’s functional!

Illustrations – There has always been something awe-inspiring surrounding illustrative work. It can partly be attributed to the appreciation of an artist’s time and effort. This effort and time gives off a sense of value and care, which resonates with users’ intrinsic values and can generate feelings of appreciation. After all, haven’t you heard the saying that people might not remember what you say, but how you made them feel.

Make your website a cohesive space, where you whisk your users on a journey. Engaging with users’ imagination or emotions to create a space they can immerse in will make browsing your website feel like an experience, like walking through Disneyland, as opposed to a library. However, one thing to bear in mind is that interactive stories won’t suit all purposes and you need to make sure the brand has a story worth telling, before you try to tell it.

6. Always be 3 steps ahead (or more)

Our last, but by no means least important act is Derek Hughes. What can we learn about digital marketing from a famous magician who’s mastered the ‘accidental’ trick into his repertoire? His acts become even more impressive with his seemingly spontaneous mistakes, as he still manages to make the trick work perfectly, giving the illusion of true sorcery. Planning my friends. Plan. Plan. Plan. Whilst his acting might fool you, every spoken word or subtle flick of the wrist which seems spontaneous and natural is actually well-rehearsed & precisely-timed choreography.

To stay ahead of the game you can

Understand who you’re designing for – You can make decisions off facts, not feelings through understanding your audience. Conduct customer surveys to create accurate customer profiles so you even know small details such as their device preferences or the times of day they’re browsing.

Plan user flows – create multiple use cases and map out all the potential journeys so you can ensure that users won’t end up lost or stranded on a page without an easy way to navigate back to the original goal

Wireframing demonstration – Whimsical

Make sure you wireframe – Just like how an architect won’t build a house without a blueprint, make sure you don’t dive into designing without the bigger picture. Don’t even think about it. Having a wireframe can allow you to assess your balance of content types and whether there’s enough variety to ensure your users won’t be overwhelmed or bored. 

Good web design requires planning, just like a magic trick. Planning and predicting the projection of outcomes will allow you to cater for your customers’ various needs in advance, so there is a smaller chance of rude shocks later on. If you clearly understand your site’s purpose and your customers, you can use data to drive decisions, without designing something that you like, but no one else gets. 

The take-aways

Following these 6 principles, you can design truly magical web experiences. Just like how Harry doesn’t cast every spell in his duels, we don’t recommend throwing every trick in one go; pick and choose wisely what you will, depending on your project requirements.

Mastering a good magic trick takes time and practise, as will successful implementation and executions of these principles. But with these in your arsenal, you’ll suddenly discover that brand guidelines aren’t so restricting and customer feedback isn’t to be feared but coveted. You can surprise not only your audience, but yourself with how wonderful web design can be. The wondrous world of…web design!

How we can help

If you’re a professional, careful implementation of these tips should help take your designs to the next level. However, if you feel a little overwhelmed and would like some web loving or some help in implementing these strategies for your business, you can give us a call on (03) 9912 6403 – chat with our team of friendly digital experts today.