Visual Identity
Visual Identity
  • 17
  • 22 814
Wix Studio Masterclass: Deconstructing an Award-Winning Website Design | Part-1
Jai Shree Ram everyone, dive into the first part of our in-depth series on creating award-winning websites with Wix Studio. In this video, we break down the design process of a visually stunning video production agency website, from initial concept to final execution.
Learn about:
- Our design process in Figma
- Mood boarding and client collaboration
- Font selection and color palette creation
- Integrating 3D elements with Spline
- Basic Wix Studio layout techniques
- Tips for header animations and iframe integration
Perfect for web designers, Wix Studio users, and anyone interested in creating eye-catching, interactive websites. Stay tuned for parts 2 and 3, where we'll dive deeper into recreating this site in Wix Studio and making it fully responsive.
My LinkedIn: www.linkedin.com/in/hardik-bhansali-363346152/
My Instagram: thehardikbhansali
Find the inspiration for your next project:
www.awwwards.com/
orpetron.com/
www.cssdesignawards.com/
www.siteofsites.co/
godly.website/
www.darkmodedesign.com/
www.lapa.ninja/
www.siteinspire.com/
dribbble.com/
httpster.net/
bestwebsite.gallery/
What is Visual Identity and Who is Hardik Bhansali?
Visual Identity is a Wix Studio web design agency and Hardik Bhansali is the founder of Visual Identity wix studio web design agency.
zhlédnutí: 16

Video

Reinventing Contact Forms: Interactive Bill Slip Design in Wix Studio #wixstudio #webdesign
zhlédnutí 103Před 4 hodinami
Check live with all sound experience: visualidentity.co.in/ LinkedIn: www.linkedin.com/in/hardik-bhansali-363346152/ Instagram: thehardikbhansali Discover how we're transforming the user experience of contact forms using Wix Studio! In this video, we showcase our latest experiment: an interactive contact form that generates a real-time bill slip with satisfying beep sounds. 🔹 See...
Figma to Wix Studio Type Settings Tutorial | Wix Studio Web Design Tutorial #wixstudio #typography
zhlédnutí 57Před 12 hodinami
Jai Shree Ram everyone, thought I'd just give a quick heads up on the type settings in figma and wix studio and the conversions in the type settings on both the platforms. My LinkedIn: www.linkedin.com/in/hardik-bhansali-363346152/ My Instagram: thehardikbhansali What is Visual Identity and Who is Hardik Bhansali? Visual Identity is a Wix Studio web design agency and Hardik Bhans...
Wix Studio Tutorial | Amazing Split Screen Scroll Animation in 5 minutes #wixstudio #wixtutorial
zhlédnutí 97Před 14 hodinami
Jai Shree Ram everyone, found this amazing animation on the WISE website so though I'd recreate it on Wix Studio without any code in like 5 minutes :) My LinkedIn: www.linkedin.com/in/hardik-bhansali-363346152/ My Instagram: thehardikbhansali What is Visual Identity and Who is Hardik Bhansali? Visual Identity is a Wix Studio web design agency and Hardik Bhansali is the founder of...
Wix Studio | ThreeJs Image Distortion | No Code Tutorial
zhlédnutí 174Před měsícem
App Link: wix.to/XaQsDt0 Now you can create stunning liquid image distortion effects in wix ;) Linkedin: www.linkedin.com/in/hardik-bhansali-363346152/ Instagram: thehardikbhansali Website: www.visualidentity.co.in/ Who is Visual Identity? At Visual Identity, we're not just another Wix Studio web design agency; we are the artisans of the digital realm. Our pursuit? To transform y...
Animated Pre Loader In Wix Studio | Part - 2 | Wix Preloader #wixpreloader
zhlédnutí 1,9KPřed měsícem
Find the code here: www.visualidentity.co.in/post/how-to-enhance-your-wix-studio-website-with-eye-catching-animated-preloaders Alright, now it's time to dive into the coding side of creating our amazing pre-loader animation in Wix Studio. Even if you're new to coding, don't worry - I'll walk you through every step. Follow me on: LinkedIn: www.linkedin.com/in/hardik-bhansali-363346152/ Instagram...
Pre Loader in Wix Studio: Web Motion Animation On Jitter | Part 1
zhlédnutí 550Před měsícem
Welcome to part 1 of this Wix Studio tutorial on creating an amazing pre-loader animation! A pre-loader is a stylish loading screen that shows up before your website loads, giving visitors a smooth and polished user experience. In this video, we'll be using Wix Studio's powerful animation and design capabilities to build a modern and visually appealing pre-loader from scratch. Even if you're ne...
How to Add Smooth Scrolling to Your Wix Website with Lenis Library | Wix Website Tutorial
zhlédnutí 882Před 2 měsíci
Find the code here: www.visualidentity.co.in/post/enhancing-user-experience-how-to-implement-lenis-smooth-scroll-inside-your-wix-studio-website Lenis Github: github.com/darkroomengineering/lenis For collaborations: www.visualidentity.co.in/ Are you looking to enhance the user experience on your Wix website? Smooth scrolling animations can make a huge difference in engaging visitors and keeping ...
Relume to Figma Design Tutorial
zhlédnutí 11KPřed 7 měsíci
In this video learn how to use Relume to export AI generated wireframes to figma and design at supersonic speed! #aiwebsites #relume #figma #webdesign
Wix Studio Tutorial - No-Code Advanced Design Using Hover Interactions
zhlédnutí 5KPřed 7 měsíci
Wix Studio Tutorial - No-Code Advanced Design Using Hover Interactions

Komentáře

  • @MillerThriller
    @MillerThriller Před hodinou

    Would it make more sense to do a looping gif verse video? Just curious

    • @visualidentitydesign
      @visualidentitydesign Před hodinou

      Definitely, infact for pre loaders we’re using a gif but for the hero section the visual had to be too big and smooth a 60fps gif was getting quite big in size compared to an mp4 🙌🏻😄

  • @SAVIOR773
    @SAVIOR773 Před 14 hodinami

    Need that tutorial😊

  • @MillerThriller
    @MillerThriller Před 2 dny

    Would love to see a tutorial not only on the bill slip, but button selections integrated into the form

  • @Neal-bg2uz
    @Neal-bg2uz Před 4 dny

    Thank you for this I love your videos

  • @Neal-bg2uz
    @Neal-bg2uz Před 4 dny

    I'd love a tutorial on how you added the text behind the diamond on your site the way you did if you ever have the time!

  • @staticmotion1628
    @staticmotion1628 Před 5 dny

    Very cool good to know thank you, what program are you using to record your screen i like how it follows your mouse

  • @staticmotion1628
    @staticmotion1628 Před 6 dny

    That's crazy how easy you did that love your content thank you

  • @miteshmhatre3403
    @miteshmhatre3403 Před 10 dny

    Can you tell them to update wix search and wix blog app?

  • @Lily-wr1nw
    @Lily-wr1nw Před 14 dny

    Amazing from a designers view. I would love tutorials from you.

    • @visualidentitydesign
      @visualidentitydesign Před 10 dny

      @@Lily-wr1nw I’m planning on posting more regularly so stay tuned ☺️

  • @doun138
    @doun138 Před 16 dny

    hi, i am currently having difficulty with scroll up button. I want that when i click on my scroll up button, the scroll in itself is smoothly going up. And i cant achieve that. Can you please help me ?

  • @mr.fanstastic9010
    @mr.fanstastic9010 Před 20 dny

    whats the title of the song

  • @staticmotion1628
    @staticmotion1628 Před 22 dny

    very cool found your channel from Ryan @wixfix can't wait to see more videos your stuff is amazing thank you

    • @visualidentitydesign
      @visualidentitydesign Před 19 dny

      Sure! I'd love to hear your ideas too if you want me to create video around something specific?

  • @stronglikebulll398
    @stronglikebulll398 Před 23 dny

    For some reason this isnt working on one of my wix editor sites I added the code successfully to other wix sites but theres one site that wont work

  • @stronglikebulll398
    @stronglikebulll398 Před 23 dny

    would love to see a tutorial of how you built your personal site - its very good

  • @stronglikebulll398
    @stronglikebulll398 Před 23 dny

    where is the tutorial

  • @sohailrahman735
    @sohailrahman735 Před 24 dny

    this video seems like you did it without upgrade (because most channels suggesting me to upgrade to use preloading option), is it true, pls reply 🙏 Edit: it'll save me time if i know it can doable in free plan with wix studio (even using code)

  • @lifted4evr
    @lifted4evr Před 26 dny

    Does this work for website building with Wix Editor?

  • @teamopaqstudio
    @teamopaqstudio Před měsícem

    Here's what I did > Turn on dev mode, Create a new page put container with loader element in it change it's id to PreLoader copy your code & paste it to new page i created. but it won't work why?

    • @visualidentitydesign
      @visualidentitydesign Před 19 dny

      you also need to make the pre loader pinned as I showed in the video :)

  • @rafaelzardo1033
    @rafaelzardo1033 Před měsícem

    Hey, how did you do it?

  • @chilltracks
    @chilltracks Před měsícem

    i love u

  • @coxejoao8708
    @coxejoao8708 Před měsícem

    Thanks a lot! Very good explanation.

  • @adityagera5651
    @adityagera5651 Před měsícem

    Exactly what I was looking for! Thanks a lot, brother.

  • @coxejoao8708
    @coxejoao8708 Před 2 měsíci

    Could you please do a tutorial on how you did this loading animation in the beginning.

  • @coxejoao8708
    @coxejoao8708 Před 2 měsíci

    Nice tutorial, Keep on doing!

  • @retrovert5540
    @retrovert5540 Před 3 měsíci

    amazing tutorial

  • @kennygo5053
    @kennygo5053 Před 3 měsíci

    So good. by this way we can put image or new text on hovering right

  • @XOX_6006
    @XOX_6006 Před 5 měsíci

    Does this work for mobile ?

  • @thisarashayamal5887
    @thisarashayamal5887 Před 5 měsíci

    Need more tutorials ❤

  • @178rohan
    @178rohan Před 6 měsíci

    it also seems to break the layout of my website after loading?

  • @178rohan
    @178rohan Před 6 měsíci

    would you know by any chance how i can make the preloader fade out to reveal content beneath it?

    • @visualidentitydesign
      @visualidentitydesign Před 6 měsíci

      i think if you just remove this part from the code, setTimeout(function() { $w("@/preloader").collapse(); }, 5000);

  • @178rohan
    @178rohan Před 6 měsíci

    @visualidentitydesign thank you for this simple straightforward video it worked! lol i searched all over the web on how to achieve this properly

  • @visualidentitydesign
    @visualidentitydesign Před 7 měsíci

    Copy this code: $w.onReady(() => { waitForLoading(); }); export function button_onClick() { $w('#preloader').show(); waitForLoading(); } function waitForLoading() { setTimeout(() => { $w('#preloader').hide('FadeOut'); }, 5000); } setTimeout(function() { $w("#preloader").collapse(); }, 5000);