Website UI Design In Figma with After Effects Animations Tutorial
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.)
Пікірлер: 560
Man, the quality on this one is insane.
@BrandonShep
4 жыл бұрын
Thanks a lot, Calìbri! Worked pretty hard on this one, and it was super fun to make as well.
@lowruna
Жыл бұрын
2023: Whats the prompt for this UI/UX?
@abceries8955
Жыл бұрын
@@BrandonShep can you start a full series on this now ???
@adiankita2988
9 ай бұрын
@@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 KZread 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.
@BrandonShep
3 жыл бұрын
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 KZread! 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.
@BrandonShep
4 жыл бұрын
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
You do everything wow
@BrandonShep
4 жыл бұрын
Hope you enjoy it, Avin!
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!
@BrandonShep
4 жыл бұрын
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 😄
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
Going through the website at the end with all the animations..... Was so incredibly satisfying.
Could this guy BE more wholesome?!! Love these videos, you always go 200%
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!
@BrandonShep
4 жыл бұрын
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.
That skull floating effect is killer!
@BrandonShep
4 жыл бұрын
Thank you! I'm really happy with how it turned out :)
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 ❤️
Brandon: "And I think I'll... [insert unfathomably cool idea]" happens every 30 seconds and I love it.
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.
Your understanding and explanation of lighting is amazing
@justingolden21
Жыл бұрын
I commented this in the beginning of the video... holy cow
Okay I actually got chills seeing the final result WOW. DUDE THIS IS INCREDIBLE
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
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!
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!
Loved it ! Discovered your channel 8 hours ago and I watched everything.
Seriously my favorite design channel. Every episode is fun! And I am learning! I love the vibe and heart you bring to every video
@BrandonShep
Жыл бұрын
Much appreciation 🙏
Im honestly so glad KZread recommended you in my feed. This is absolutely amazing. Stunning work!!! If not one of the best I’ve seen so far on KZread. 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 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'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!
@lika_cola
Жыл бұрын
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.
@shinobiseb
10 ай бұрын
Same here. I was thinking of how I'd code this and it's giving me an aneurysm
This is some high quality content!!!
@BrandonShep
4 жыл бұрын
Glad you liked it! :)
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!
Dude what a great video, didn’t expect to learn about displacement maps and after effects here ❤
This is so good. Glad you showed everything you did without moving too slow.
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)
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!
@BrandonShep
3 жыл бұрын
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'm going to hire you one day. What a designer. Thank you for this amazing content Brandon!
absolutely brilliant! I could watch your videos all day long
jawdropping mockup design, im STUNNED
That final animation is SOOOOOO good!
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.
@marinak8339
Жыл бұрын
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.
I am already watching this video for the 3rd time. It’s just soo awesome work! Love this
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. 🏴☠️🤩
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
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 ❤❤❤
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!
@BrandonShep
4 жыл бұрын
Thank you so much! I’m glad you found my channel too 😄
Just found your channel yesterday and you are already an inspiration
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!
@BrandonShep
4 жыл бұрын
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?
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!
God the quality is insane. Waiting for the start to finish. Your videos are actually addicting.
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!
Those 30 minutes feels like 5 tops. I MUST learn this. Thank you!
You go above and beyond! Mind-blowing design!
Absolutely incredible work!
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.
dude just amazong works. i love watching every video of you.
You are so freaking talented!
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
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
Every time I watch your videos I’m always like “how do you even learn how to do this??” You’re insanely talented
Appreciate this tutorial so much. Really easy to listen to and follow. Great work!
@BrandonShep
4 жыл бұрын
Thanks a bunch, Donek! Appreciate you for watching
This was so good! I’m in awe!
You have mad skills bro! Keep it up. Its really inspiring. Thank you for sharing this!
This is absolutely amazing!
This video deserves at least a million views!!! This is top notch!
YAY new video! This is unreal, great work!
@BrandonShep
4 жыл бұрын
Thanks, Dylan! This was super fun to make.
bruh i have no words that's just awesome
Thoroughly entertaining and educational! Well done!
I'm in love with your channel
i love your ingernuity, idead creativity and how you made everything come to life
Dude, this is one of the best videos I've ever seen lol amazing job, very inspirational
@BrandonShep
3 жыл бұрын
Thanks a lot, Smitty! Glad you enjoyed it man 😄
This is absolutely gorgeous.
the anamation in this is great!
Legend! What a slick design and excution!
bro you are insane ! I really loved the video, the way you explain it while workin on it ... you are insane
Your talent is absolutely mind blowing, please do more UI/Figma work!
@BrandonShep
4 жыл бұрын
Thanks so much, Darcie! Will definitely be doing more UI stuff soon :)
You've made a fan out of me. Super stellar creative work!
@BrandonShep
3 жыл бұрын
Thanks a lot, Kay! Appreciate you checking out the video :)
Absolutely incredible design. Practical and beautiful
Hey Brandon, your works r awesome!! I love it 😍😍😍
@BrandonShep
3 жыл бұрын
Thanks a lot, Sri! Appreciate the support
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 🤩😍
My god ! the quality is insane ! watching you on a big screen feels like you're here with me xD
Man, want some more like those After effects stuffs you have done there 🙌🙏🙏
Very cool to see a designer doing this as a web developer! Great video!
Wow. You never disappoint! 👌
By just watching a few videos of your I just became your big fan Man ! ! !
This is incredible! I'd love to see a whole series focused on web design.
This is Insane! Please do more of these vids
This is Crazy! You have a Real Talent!
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!!!!!😁
Saw the 1k subscribers design you did at the beginning of this video. You've really come a long way!
Truly Speechless. I couldnt look away. Absolutely brilliant.
Super cool tutorial man! Photoshop to AE workflow opened my eyes. I have only been doing illustrator animations so far :0
YOU ARE ABSOLUTELY AMAZING From start to finish it is a marvel for ME LOVE YOU and many many Thanks
@BrandonShep
3 жыл бұрын
Glad you liked it, Bilal!
Bro, this guy is on another level when it come to design, jeez!!!!!
Awosome work dude, Love it ♥
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.
@BrandonShep
4 жыл бұрын
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
Super cool, thank you for sharing this!
I Don't even work in this field, but this video is very fun to watch, very informative and very clearly understandable. Nice work man!
Awesome results!!
Your skills are insane! I loved everything about this!
@BrandonShep
4 жыл бұрын
Thanks, Rebecca! Definitely one of my favorite things I've made as far as these videos go