Website UI Design In Figma with After Effects Animations Tutorial
ฝัง
- เผยแพร่เมื่อ 10 ก.ย. 2024
- 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/AdobeSt...
Tools Used ► Adobe CC : bit.ly/AdobeCC...
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
----------------------
partnerwithbra...
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 TH-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!
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!
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
One of my favourite channels on TH-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
The way you think about making changes towards a final design is just so straightforward and simple, but still brilliant. Love watching this!
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.
Going through the website at the end with all the animations.....
Was so incredibly satisfying.
You do everything wow
Hope you enjoy it, Avin!
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 😄
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.
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
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.
@@BrandonShep Would be great.
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
Could this guy BE more wholesome?!! Love these videos, you always go 200%
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!
TH-cam is still processing it. Give it a few minutes and better resolution versions will be available. It's recorded in 2.5K
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.
That skull floating effect is killer!
Thank you! I'm really happy with how it turned out :)
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 am already watching this video for the 3rd time. It’s just soo awesome work! Love this
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.
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 🙏
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 ...
Your understanding and explanation of lighting is amazing
I commented this in the beginning of the video... holy cow
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!
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?
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 😅
After watching your videos, I think a key to being a good designer is having a good common sense about many things.
Those 30 minutes feels like 5 tops. I MUST learn this. Thank you!
Bro, this guy is on another level when it come to design, jeez!!!!!
As a designer, that is amazing.
As a developer, that is terrifying. Nightmare fuel.
Loved it ! Discovered your channel 8 hours ago and I watched everything.
This is some high quality content!!!
Glad you liked it! :)
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'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!
There's no reason for this to be so good. You should redesign all logos, packaging and websites on the entire internet. When you have the time of course. 😆
Awesome video, but as a frontend developer I would love to see how to transfer this to a working performant and accessible site ;)
Absolutely incredible design. Practical and beautiful
I love what you're creating. A single video of yours teaches me a lot more than an entire semester at design school. I just wish you slowed down a tad bit. I felt a bit overwhelmed by everything happening in the video.
Wow, that's great to hear! It is a lot to take in, but you can always watch the video multiple times :)
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.
This is far more advanced than anything I could ever imagine doing... lol Amazing to watch!
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. 🏴☠️🤩
My god ! the quality is insane ! watching you on a big screen feels like you're here with me xD
Im honestly so glad TH-cam recommended you in my feed. This is absolutely amazing. Stunning work!!! If not one of the best I’ve seen so far on TH-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 ❤️
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!
Every time I watch your videos I’m always like “how do you even learn how to do this??” You’re insanely talented
This video deserves at least a million views!!! This is top notch!
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.
The vision plan icon looks like a shield inside a no circle. An eye patch is a super cool idea though. Also basically everything on this website slaps!
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
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!
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 Don't even work in this field, but this video is very fun to watch, very informative and very clearly understandable. Nice work man!
just creating that skull deserves a subscribe wow
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 🤩😍
This would make a great main menu for a video game
jawdropping mockup design, im STUNNED
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.
I think I've never enjoyed a tutorial as much as this one!
This makes me realize how bad I am at my job. You're a beast, Brandon!
He was hoping for 1k like... currently at 16k. That's so awesome to see. Love this channel!
absolutely brilliant! I could watch your videos all day long
We need the development Process!!!! Too interesting tbh
You go above and beyond! Mind-blowing design!
You’re seriously underrated! This is AMAZING.
You should definitely do more UI design tutorials!
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!
Man, want some more like those After effects stuffs you have done there 🙌🙏🙏
This is unreal 👏 I'd love to have your knowledge and skills with all these programs. I do think you shouldn't really call these tutorials though as they don't really teach in any real depth.
Would love to see proper tutorials from you though maybe on a new channel keep this one to show off your skills and talent.
Watched it for 3rd time, man you are a genius, wondering why you are not posting anything for last one year.
U deserve a million of subs!
i love your ingernuity, idead creativity and how you made everything come to life
The quality is unbelievable
Underrated TH-cam Channel
Appreciate it :)
This is my new favorite channel
992 likes, we're close to the 1000 you asked for.
I'd love to see a real case study from you where you show your design process for an actual client
Dude what a great video, didn’t expect to learn about displacement maps and after effects here ❤
Hey Brandon, your works r awesome!! I love it 😍😍😍
Thanks a lot, Sri! Appreciate the support
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 😄
Just found your channel yesterday and you are already an inspiration
The most deserved like I have ever given on a TH-cam video!
a greatest designer and a great human being . proud to be your student love from pakistan 🥰😇
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!!!!!😁
Everytime i watch your videos it makes me want to subscribe to you even though i already am 🤣
You are wonderful, Olan, and I have a request. Can you design a simple wall paper and design what is on the wall? I repeat, you are a wonderful and creative person.
Saw the 1k subscribers design you did at the beginning of this video. You've really come a long way!
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)
This is that one designer you get at your project who creates designs without considering the development limitations
Haha I actually went to school for software development, and my brother is a full-time web developer. So I have a decent idea of what's possible :) This site is basically just a full screen video with some animated elements on top. Most of it could be implemented without issue.
@@BrandonShep Well, I agree with you on this one. It was more of a joke than anything, no hate intended :)
Love your videos and what you are doing!
@@BrandonShep yea i am also web developer this is pretty easy to code just video and some animations
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.
Beyond stunned how creative and effective you are by marrying authenticity with functionality so swiftly.
God the quality is insane. Waiting for the start to finish. Your videos are actually addicting.
This is on another level of designing the UI. Spectacular quality. Also your cam is super high quality which come with shadow not like other youtuber just pasting the rectangle background.
Thank you very much! One of my favorite videos I made so far. And I'm glad you like the camera setup. It's just a cell phone front-facing camera and a green screen, but it seems to work pretty well 😁
I'm going to hire you one day. What a designer. Thank you for this amazing content Brandon!
I haven't done much programming in the last year or two. But I'm kind of tempted to program this into a real mockup site. Sounds like a fun way to pull my hair out trying to make CSS bend to my will lmao.
dude just amazong works.
i love watching every video of you.
Truly Speechless. I couldnt look away. Absolutely brilliant.
bro you are insane !
I really loved the video, the way you explain it while workin on it ... you are insane
I always wished you do a step by step tutorial on this- i always go back to watch it. Really miss your videos