Website UI Design In Figma with After Effects Animations Tutorial
Вставка
- Опубліковано 1 кві 2020
- Join me today, where we'll be doing website UI design in Figma with After Effects animations!
My Assets are from Adobe Stock ► First Month FREE: bit.ly/AdobeStockTrial
Tools Used ► Adobe CC : bit.ly/AdobeCCLink
The Process
----------------------
I'll be going through the entire design process from start to finish.
In this website UI design tutorial, we're going to be using the Figma app. We'll begin by going through the brand design and logo design process. From there, we'll develop the content for our website, and do some website layout design and website wireframes to create a page that is functional and works well. Next, we'll look at developing some custom graphics in Photoshop CC 2020. This will involve sourcing stock photos, doing some advanced photo manipulation with custom digital painting to add special effects like scene lighting.
We'll take a look at choosing typography for proper UI design that matches our brand's aesthetics as well as picking colors for a website. I'll discuss website hierarchy and information architecture too.
Throughout this process, we'll be jumping into After Effects CC 2020, and we'll be doing some website UI interaction animation. This involves creating custom animations for different elements in our website and connecting our different pages together with seamless transitions.
Work Request
----------------------
partnerwithbrandon.com/
Critique Request
----------------------
bscritiques@gmail.com
Instagram: @thebrandonshepherd
Twitter: @bransshep
(Some of the links above are affiliate links, meaning, at no additional cost to you, I will earn a commission if you click through and make a purchase.)
Man, the quality on this one is insane.
Thanks a lot, Calìbri! Worked pretty hard on this one, and it was super fun to make as well.
2023: Whats the prompt for this UI/UX?
@@BrandonShep can you start a full series on this now ???
@@BrandonShepI love this channel! one question-HOW ARE YOU SO GOOD?!
As an illustrator, graphic designer and general artist... that was awesome. I've seen loads of UA-cam designers try to show process and honestly it puts me to sleep. This was super engaging and I loved every minute of it. Good work!
Just the skull photoshop part was enough for one tutorial, never mind the rest of it! So good. I want to learn more after effects so hoping you do some more on this too. Nice work...again.
Thanks, Sam! Will definitely do more motion graphics tuts in the future
The way you think about making changes towards a final design is just so straightforward and simple, but still brilliant. Love watching this!
One of my favourite channels on UA-cam! What I've realised from watching your videos that sets you apart from most designers is your mastery of shadowing to create depth and texture between layers. Your work with the light rays / shadow on the skull is out of this world. The After Effects just took it to another level... would have thought it was stock cgi video. Quick tip: I would have put some easing at the beginning and end of the handwritten animation.
Super glad you’re enjoying the videos! And you’re spot on on the handwritten animation. I wish I had done that now. For some reason, it didn’t even cross my mind at the time
I have no idea why, but you made me feel like I understand what designing is about. Almost every video of yours feels like a nicely explained tutorial.
You do everything wow
Hope you enjoy it, Avin!
I have been binging like 20 of your videos for the past few hours. You are extremely underrated and deserve millions of subscribers due to how entertaining you are, the quality of your work, the variation of your videos, and your personality is very very approachable. Great stuff man, subscribed after the first video I saw.
The QUALITY OF THIS WEBPAGE IS BLOWING ME AWAY, I- I’m only halfway through the video and already shocked at how casually you’ve been able to create that skull animation main page, PLEASE make more of these videos WOW
I really like that you show every step of design process, each time I watch your videos I learn something new!
Thank you, Karen! Very happy you’re getting some value out of these. Let me know what types of videos you’d like to see in the future 😄
Going through the website at the end with all the animations.....
Was so incredibly satisfying.
This is incredible man. The Photoshop and the After Effects part alone was masterclass tutorial all on their own. I especially like the particle trick where you didn't rely on Trapcode or any of the particle plugin, just plain 2D techniques. If it was me it'd probably take a week just for the planning alone. Being able to do this in the span of one short video is just insane. Hats off to you and +1 subscriber.
Man, to master photoshop, illustrator, aftereffects, and who knows what else, on top of swiftly managing a successful youtube channel which means ur great at adobe premier as well, that deserves a hat tip right there... You also look young which is insane and inspiring, keep it up man ❤️
That skull floating effect is killer!
Thank you! I'm really happy with how it turned out :)
Your attention to detail is incredible, great job! I am a graphic designer as well, however I’m trying to move more into AE. So this video was perfect for me! Could you possibly do more videos on your design process in AE...adding, movement, sound, animating the elements? Thanks in advance for the great content!
Thanks for checking out the video, Christopher! Glad you liked it, and I'll certainly do a more in-depth video about animations/effects at some point.
Could this guy BE more wholesome?!! Love these videos, you always go 200%
I know I'm 4 years late but THIS GUY MAKES ABSOLUTE MASTERPIECES!
Just one thing though: I thought it would've been cool if the background 'sunk' as the transition to the next page (the skull went away, the water got darker, less light). For example, the second page could've been another object sinking (e.g. a treasure chest with its contents flying out of its open lid), and the last page could have been the ocean floor, which could have the hat the would've belonged to the skull, with some coral and maybe even a crab fish or something. Then, to transition to the homepage, it would be like a quick rising effect, passing all the other pages.
Sorry for the long comment and I'm no professional, but I just thought this would be so good!
I'm a full stack web developer, and I love your design so very very much! With a bit of tweaking from a development standpoint, I could see this website being a smash hit!
I would love to see a tutorial how this could work in the real coding. Even if it isn't a full coding but a guide for a designers what really could be done and how to prepare assets for this to turn into a real website. preferably a responsive one.
Same here. I was thinking of how I'd code this and it's giving me an aneurysm
This was astoundingly awesome to watch. The artistry is insane. So happy I recently found your channel. Listening to someone so skilled and talented talk about their field and explain what they are doing and why is such a rewarding experience, and you are definitely talented. Can't wait to watch more.
from website tutorial to photoshop tutorial... Bro I'm not even half way through the video!!!
I didn't even check out your othr videos but I Instantly subscribed
This is some high quality content!!!
Glad you liked it! :)
Loved it ! Discovered your channel 8 hours ago and I watched everything.
Your understanding and explanation of lighting is amazing
I commented this in the beginning of the video... holy cow
Seriously my favorite design channel. Every episode is fun! And I am learning! I love the vibe and heart you bring to every video
Much appreciation 🙏
Hey Brandon, this video was fantastic and really sparked my excitement for learning Figma. Seeing how you're able to seamlessly blend your talent with After Effects and Figma, I'd love to see more hybrid content like this in the future. Subscribed!
Thanks for subbing, John! Glad you liked the video. Figma is great, and I think you'll love it. I use it for so many things these days other than UI design. It's really just a blank canvas for planning, concepts, organization, collaboration, ... Easily one of my favorite tools, and I'll deferentially be making more videos with it soon :)
I am already watching this video for the 3rd time. It’s just soo awesome work! Love this
In around ten videos you have become my favourite graphic design youtuber. Pleasure to watch you work, can't wait to see what you get up to!
Wow, thanks a lot dude! Super happy you're liking everything so far, and thanks for checking out all the videos! Appreciate the support.
What types of videos would you personally like to see more of?
Okay I actually got chills seeing the final result WOW. DUDE THIS IS INCREDIBLE
the level of detail in this is absolutely bone chilling! As a beginner i love to watch you're videos as inspiration, i hope to be able to achieve designs like yours some day!
You’re seriously underrated! This is AMAZING.
You should definitely do more UI design tutorials!
Brandon: "And I think I'll... [insert unfathomably cool idea]" happens every 30 seconds and I love it.
This was such a delight to watch. I'd watch you design websites literally all day. Web and graphic design have been hobbies of mine for the past few years and I really want to turn it into something more elevated. Watching stuff like this teaches me a lot and I just find it so fascinating and mesmerizing.
Im honestly so glad UA-cam recommended you in my feed. This is absolutely amazing. Stunning work!!! If not one of the best I’ve seen so far on UA-cam. A bit hard to follow along tho because of the speed. Especially the whole After Effects part. Nonetheless, I’m definitely going to subscribe to your channel. You are amazing ❤️
This is far more advanced than anything I could ever imagine doing... lol Amazing to watch!
I've now officially watched all of your Videos and i'll never be able to look at a product normally again lol
Thanks for the journey!
Also great Video I really enjoyed it as well as your other content! Keep it up and have a good day!
Oh my god this design is INSANE! your design flow is captivating + inspiring. I really appreciated that soft music in the background as you were speaking. Really nice work 10/10 (+1 follower hehe)
Dude that was insane you inspired me. I thought why i dont use those skills while i can... I will just go and be productive now thanks for the such great video!
jawdropping mockup design, im STUNNED
Absolutely incredible design. Practical and beautiful
This is so good. Glad you showed everything you did without moving too slow.
Dude what a great video, didn’t expect to learn about displacement maps and after effects here ❤
absolutely brilliant! I could watch your videos all day long
dude just amazong works.
i love watching every video of you.
This is absolutely incredible and you can tell how much effort was put into it, but YOU FORGOT THE APOSTROPHE IN PIRATE’S
I've noticed too, but he added it at the end.
Thank you so much for this. I really apreciate the content you posted. I found you 2 days ago and have been watching all your videos :D
I'm going to hire you one day. What a designer. Thank you for this amazing content Brandon!
Just found your channel yesterday and you are already an inspiration
This is so cool! You put so much effort into it and it really shows! I love how you explain what you're doing for anyone who wants to do the same.
Those 30 minutes feels like 5 tops. I MUST learn this. Thank you!
I'm so glad I found your awesome channel dude, I'm fascinated by your work.
What a hidden gem, you deserve more.
Keep up the GW!
Thank you so much! I’m glad you found my channel too 😄
Just found your channel, I love all of your videos so much they keep me hooked throughout the whole video. Love your work keep it up
This video deserves at least a million views!!! This is top notch!
My god ! the quality is insane ! watching you on a big screen feels like you're here with me xD
Duuuuuuude! Where have you been all my life??? Your skills and sense of aesthetics are isane! I really love how you are sharing us your thinking process.
I’ve just finished watching every single video in 3 days. Watching these has given me inspiration to design again.
This web design was insane btw.. your videos are very appealing and have a nice flow and allows us to pick up different tips and trick along the way.
Incredible stuff Brandon, just when I think I'm getting good you show me that there's so much more to learn! Really impressive stuff.
For a video idea - you go through your favourite software to use for different types of projects? Similar to this how you jump between programmes but a little more in-depth as to why/how you use them.
Thanks for watching, Tom! Glad you enjoyed it, cause I had a blast making it. Will definitely have to do a software video at some point. Thanks for the suggestion
You go above and beyond! Mind-blowing design!
Bro, this guy is on another level when it come to design, jeez!!!!!
i love your ingernuity, idead creativity and how you made everything come to life
Truly Speechless. I couldnt look away. Absolutely brilliant.
By just watching a few videos of your I just became your big fan Man ! ! !
Man! You are SO UNDERRATED
Your channel is a treasure to me and I'm grateful to have found it and wish I had found it sooner
Your are so Talented 🤩😍
just creating that skull deserves a subscribe wow
love this guy !!!!! I watch his videos every time I have free time. I really want to see this website and if I know how to do it I would! I subscribed, and liked the video. CONGRATS FOR 1000 SUBS!!!!!😁
That final animation is SOOOOOO good!
This is Crazy! You have a Real Talent!
God the quality is insane. Waiting for the start to finish. Your videos are actually addicting.
bro you are insane !
I really loved the video, the way you explain it while workin on it ... you are insane
I loved this so much, it tells a story that you can capture just visiting the website. I'm a software/web developer and I'm itching to code this 😅
This is my new favorite channel
Thoroughly entertaining and educational! Well done!
As a college student studying design, I absolutely love your videos. As a graphic design student i am expected to observe anything related to design to be better at my job, but even though I a decent designer, I could not for the life of me observe anything consciously. I had to always remind myself. But watching your videos I am so able to observe without my conscious effort. What i mean to say is, you are making a better designer, and every video i watch of yours I am learning something, (more than what I learn in college 💀💀)
And also, please upload more often, your videos are not just educational/informative but also extremely entertaining, my non-designer sister also really enjoys watching you videos. I dont normally comment on videos but i really wanted to convey this to you.
I also highly request you to please make tutorial on how you make mock ups, and share some tips and tricks.
Lots of Love ❤❤❤
This is absolutely gorgeous.
This is absolutely amazing!
Dude, that was amazing! Greetings from Brazil!
Legend! What a slick design and excution!
You have mad skills bro! Keep it up. Its really inspiring. Thank you for sharing this!
the anamation in this is great!
Man.. you killed this one matey. Arr 👁 Your vision was so locked-in, that you just flowed right through to perfection especially on that home page animation
I’ve been working on our website on and off for about a year now and it looks nowhere near as impressive as this. This is absolutely amazing. 🏴☠️🤩
You are so freaking talented!
This is Insane!
Please do more of these vids
I'm in love with your channel
You've made a fan out of me. Super stellar creative work!
Thanks a lot, Kay! Appreciate you checking out the video :)
Very cool to see a designer doing this as a web developer! Great video!
Every time I watch your videos I’m always like “how do you even learn how to do this??” You’re insanely talented
That's it, you did the best.
Thanks for sharing this content 🙌🙌🙌🙌
Your talent is absolutely mind blowing, please do more UI/Figma work!
Thanks so much, Darcie! Will definitely be doing more UI stuff soon :)
Wow, I wish my mind worked like yours! Amazing piece of work!
Saw the 1k subscribers design you did at the beginning of this video. You've really come a long way!
bruh
i have no words
that's just awesome
YAY new video! This is unreal, great work!
Thanks, Dylan! This was super fun to make.
I think I've never enjoyed a tutorial as much as this one!
Motion of the skull is....SO COOL!! Glad to find your tutorial
Glad you liked it! I'll certainly do some videos with a more in-depth look at the AE process. Was just trying it out here in small amounts first to see if people would be interested.
@@BrandonShep That is awesome!
Appreciate this tutorial so much. Really easy to listen to and follow. Great work!
Thanks a bunch, Donek! Appreciate you for watching
Dude, this is one of the best videos I've ever seen lol amazing job, very inspirational
Thanks a lot, Smitty! Glad you enjoyed it man 😄
Here's some Web Design for you guys! Love to know what you think about this and if you'd like to see more of these types of videos in the future.
Also, what's your favorite fact about pirates? Let me know in the comments.
the quality of this video is 360P!
UA-cam is still processing it. Give it a few minutes and better resolution versions will be available. It's recorded in 2.5K
Super cool, thank you for sharing this!
Awosome work dude, Love it ♥
He was hoping for 1k like... currently at 16k. That's so awesome to see. Love this channel!