Website UI Design In Figma with After Effects Animations Tutorial
HTML-код
- Опубликовано: 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 RUclips 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
You do everything wow
Hope you enjoy it, Avin!
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 RUclips! 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.
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.
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.
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.
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
That skull floating effect is killer!
Thank you! I'm really happy with how it turned out :)
This is some high quality content!!!
Glad you liked it! :)
Could this guy BE more wholesome?!! Love these videos, you always go 200%
Your understanding and explanation of lighting is amazing
I commented this in the beginning of the video... holy cow
Brandon: "And I think I'll... [insert unfathomably cool idea]" happens every 30 seconds and I love it.
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 ❤️
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
Okay I actually got chills seeing the final result WOW. DUDE THIS IS INCREDIBLE
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.
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
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 🙏
You’re seriously underrated! This is AMAZING.
You should definitely do more UI design tutorials!
Awesome video, I loved watching you work through each element. One thing I'd note: an eyepatch icon to represent a vision plan is clever, but an icon with a "slash" through it is universally understood as a prohibition of something and your eyepatch icon *looks* like a smaller icon with a slash through it. Just a potential confusion that you'd probably want to avoid!
Thanks for all your content!
Loved it ! Discovered your channel 8 hours ago and I watched everything.
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!
Im honestly so glad RUclips recommended you in my feed. This is absolutely amazing. Stunning work!!! If not one of the best I’ve seen so far on RUclips. 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 ❤️
jawdropping mockup design, im STUNNED
This is so good. Glad you showed everything you did without moving too slow.
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 :)
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.
I am already watching this video for the 3rd time. It’s just soo awesome work! Love this
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
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 just amazong works.
i love watching every video of you.
I'm going to hire you one day. What a designer. Thank you for this amazing content Brandon!
That final animation is SOOOOOO good!
Truly Speechless. I couldnt look away. Absolutely brilliant.
Absolutely incredible design. Practical and beautiful
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.
Thoroughly entertaining and educational! Well done!
Just found your channel yesterday and you are already an inspiration
Those 30 minutes feels like 5 tops. I MUST learn this. Thank you!
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 love your ingernuity, idead creativity and how you made everything come to life
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!
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 ❤❤❤
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?
You go above and beyond! Mind-blowing design!
This video deserves at least a million views!!! This is top notch!
This is absolutely gorgeous.
This is absolutely amazing!
Absolutely incredible work!
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.
This is Crazy! You have a Real Talent!
As a designer, that is amazing.
As a developer, that is terrifying. Nightmare fuel.
bruh
i have no words
that's just awesome
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 😄
Legend! What a slick design and excution!
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
You have mad skills bro! Keep it up. Its really inspiring. Thank you for sharing this!
the anamation in this is great!
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 🤩😍
Super cool, thank you for sharing this!
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
By just watching a few videos of your I just became your big fan Man ! ! !
bro you are insane !
I really loved the video, the way you explain it while workin on it ... you are insane
You are so freaking talented!
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.
Appreciate this tutorial so much. Really easy to listen to and follow. Great work!
Thanks a bunch, Donek! Appreciate you for watching
Bro, this guy is on another level when it come to design, jeez!!!!!
God the quality is insane. Waiting for the start to finish. Your videos are actually addicting.
Very cool to see a designer doing this as a web developer! Great video!
this video has so much amazing insights. i need more
I'm in love with your channel
This is Insane!
Please do more of these vids
That's it, you did the best.
Thanks for sharing this content 🙌🙌🙌🙌
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!
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 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 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
Dude, that was amazing! Greetings from Brazil!
I'm enchanted :O You're a true genius !!!
Your talent is absolutely mind blowing, please do more UI/Figma work!
Thanks so much, Darcie! Will definitely be doing more UI stuff soon :)
YOU ARE ABSOLUTELY AMAZING From start to finish it is a marvel for ME LOVE YOU and many many Thanks
Glad you liked it, Bilal!
i wish youtubes algorithm was based on quality of video and not views
coz right here is a million views worth video...
GREAT WORK !!
Really appreciate it! The algorithm is a blessing and a curse sometimes ...
Awosome work dude, Love it ♥
This was so good! I’m in awe!
You've made a fan out of me. Super stellar creative work!
Thanks a lot, Kay! Appreciate you checking out the video :)
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!!!!!😁
Wow. You never disappoint! 👌
Awesomely done brother 👌🏼👌🏼👌🏼
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
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. 🏴☠️🤩
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 😄
YAY new video! This is unreal, great work!
Thanks, Dylan! This was super fun to make.