Illustration by Tracy Dai
At the beginning of December we announced an addition to the XD Creative Challenge, highlighting the outstanding creativity of challenge participants. With the first challenge complete, it’s time to introduce the winner, and showcase how they leveraged Adobe XD to create this stunning website design, making use of background blur, and several other features in Adobe XD.
The winner of our first ever XD Designers Spotlight is Julie Bradford, who crafted this video game themed website landing page leveraging Background Blur, Auto-Animate, and time transitions.
The challenge
Kicked off as part of the Adobe XD Daily Creative Challenge with Howard Pinsky, participants were challenged to design a landing page in Adobe XD, integrating the use of Background Blur to add depth as it made sense. Entries were evaluated on a mixture of creativity, originality, overall design and how well they aligned to the brief.
Over the course of a week designers from around the world let their creativity loose and crafted some amazing work shared on Behance. Landing page concepts appeared spanning a breadth of topics from travel, to health and finance, and even a landing page eloquently showcasing cookies. In the end it was the creative combination of travel and viking fantasy that caught the attention of the judges in the AEsir Travel concept from Julie. I sat down with Julie to talk about how she came up with the idea, and what went into creating the loading sequence that set her submission apart.
Meet Julie Bradford
With a Bachelor’s Degree in Communication design and a minor in Illustration, Julie has formed her path into design with a mix of both formal and informal education, often challenging herself with Creative Challenges to sharpen her skillset.
Julie now works at the New York City College of Technology filling the design needs of faculty and staff which gives her the opportunity to explore new design challenges everyday working in a variety of mediums. The fulfilling nature of seeing her work in the real world, addressing the needs of the people around her is why she loves doing what she does, and the power of design.
Crafting the AEsir travel experience
Inspired by the viking worlds of the newly released Assassin’s Creed Valhalla game, Julie wanted to explore what an experience might look like if we were able to book a trip into this fantasy land. Blending ideas from our modern understanding of travel booking, with the aesthetics and imagery from this virtual world, a unique experience was born.
The prototype begins with a captivating loading sequence designed to transport you right away into another world. After researching the marks of the ancient language, Julie designed the loading sequence to randomly translate letters from ancient Viking to English using a series of time triggered Auto-Animate transitions. The result is a stunning sequence akin to a video game loading experience, further bonding the real and virtual worlds. Upon final translation, elements and menus with blurred backgrounds were brought into view with Auto-Animate, adding further depth to the composition.
Auto-Animate wasn’t just a feature in the loading sequence, micro-interactions leveraging this prototyping feature were used across the landing page design to create hover effects and motion as viewers interacted with the elements.
To add further excitement in the search section of the site, a raven glides across the screen to reveal the next section of the website, setting the tone for the types of experiences someone can expect to book. A keen eye can also catch the subtle build-in animations for each page section. To accomplish this, Julie started each section on a new artboard, and used Auto-Animate to add subtle motion to elements as they were brought into view.
Take for instance the gallery grid view of trip photos. On the preceding artboard, each of these gallery images is spread from the center to add more spacing between them. Once it transitions into the main artboard, the gallery images appear to tighten up and animate into the centre of the section.
This combination of creativity and expanding on a simple briefing like this creative challenge not only brought Julie’s idea to life, but it really made it shine amongst so many other amazing submissions.
What’s next?
In the spirit of continually learning, I asked Julie on what she wanted to teach herself next in the realm of design.
“Honestly I really just want to learn more [Adobe] XD. I’m actually currently cataloguing a lot of past challenges into different categories to teach myself in the best way possible.”
Along with expanding her knowledge of Adobe XD, and tackling XD Creative Challenges, Julie is looking to the future and equipping herself for the next steps of career growth.
To connect with Julie and explore her other work, check out her Instagram, and connect with her on Linkedin.
If you’re looking to learn more about Adobe XD yourself, visit letsxd.com for helpful learning resources, and check out the XD Creative Challenge to put your learnings into practice today.