Wix Studio - Award-Winning Website Design | How to Make a Website: Deconstructing | Part-1

J Shri Ram everyone, and welcome back to the channel!

Today, we’re kicking off an exciting new series where we’ll dive into the mesmerizing world of award-winning website designs brought to you by Visual Identity. These aren’t just any websites—they're built on Wix Studio, infused with innovative animations and visually stunning elements. Whether you're a design aficionado or just stepping into web design, we're here to show you how you can create fantastic digital experiences like these.

At NewForm, we believe in empowering your design journey. From mastering new skills to connecting with industry leaders, we’re here to help you take your skills to new heights. Join us in honing your craft through our monthly web design challenges, weekly skill-building events, and exclusive sessions with top web design professionals. More on that later—let's dive into today's web design deconstruction!

Unpacking the Creative Process

First, let’s paint a picture. Visual Identity is not just anyone doing websites. They’re specialists who win awards for their aesthetic prowess. And now, we're pulling back the curtain on one of their groundbreaking projects—a vibrant and dynamic site built for a video production agency.

When the agency reached out for a redesign, the objective was clear. They needed a platform that didn't just attract clients but articulated their creative edge and personality. This is where our design spree begins, starting in Figma, our go-to for brainstorming and prototyping.

Figma: The Creative Canvas

Our journey roots back to our initial step—the *mood board*. For this project, lovingly titled *Feel the Heat*, inspiration was sourced through various channels like Pinterest, award sites, and more to nail the right tone. Collaborating closely with the client, we curated a mood board filled with diverse elements that resonate with their brand identity.

Next up—font exploration and site mapping. We journeyed into the typography forest and finally landed on a font that perfectly encapsulated the brand spirit. Once the visuals and fonts were in place, it was time to sculpt the site map and start crafting the all-important copy.

For those curious design souls worried about the overwhelming color palette—fear not! The project was crafted with primary and secondary colors with orderly precision, contributing to a broader-than-usual palette.

Animation Intricacies: The Icing on the Cake

This project isn't simply about visuals—it's the animations that sprinkle the magic dust. When planning animations, tools like Spline offer robust solutions even for motion design novices.

One of the signature animations involves a preloader that seamlessly morphs with the hero section. Every bit of animation detail, down to split-second precision with fades, scroll effects, and overlaps was meticulously planned and executed.

Bringing It All Together on Wix Studio

Having a plan on Figma is one thing, and translating that into an interactive digital masterpiece on Wix Studio is where the real challenge—and excitement—kicks in.

Small, Yet Significant Details:

- Header Pinning: Don’t underestimate the importance of a dynamic header. With Wix Studio's innovative scroll effects, making headers disappear and reappear with scrolls adds an intuitive aspect to navigation.

- 3D Explorations: For something like a 3D mango on the hero, Spline joined the party. Using iframes helped integrate Spline projects smoothly onto the website.

Quick Pro Tip!

If Spline watermarks are a headache, simple adjustments in the layout section hide unneeded overflow content—creating a classy presentation without premium constraints.

Appendices for the SEO Conscious

While the core website is all high on visual flair, the SEO components are not neglected. We contained content-heavy sections specifically for SEO to keep our client's visibility strong without broadcasting them upfront.

A Peek Ahead

This post is just the beginning. Up next, we’ll delve into how to horizontally translate these Figma designs into Wix Studio, exploring advanced CSS tricks, responsive flexboxes, and much more. We’ll save the breakdown for mobile responsiveness for Part Two!

Connect with NewForm!

Enthusiastic about design? NewForm is your playground to learn, grow, and connect. With monthly challenges, skill-building events, and exclusive sessions online, it's a haven for like-minded creatives. So why wait? Join NewForm today and climb your way to the summit of web design excellence.

Stay tuned for the next part of this series where we'll continue our journey, transforming digital dreams into reality.

Until next time, keep creating and dreaming big!