Came here for timestamps and could not find anything, so: 2:06 Introduction 2:18 - What is UI Design 2:30 - UI vs UX Design 5:13 - UI Design vs. Frontend Developer 6:48 - Designing and Prototyping UI's (Tools: Sketch, XD, Figma, InVision...) 7:46 - UI Fundamentals 9:09 - Color & Contrast 12:30 - White Space 13:52 - Visual Hierarchy 15:32 - Complexity vs. Simplicity 16:22 - Consistency 17:34 - Scale 19:31 - Adobe XD (Adobe Experience Design) -- (Will update as I go)
1. Keep it simple 2. Use White Space in your favor 3. Use 2 major color for contrast, and shades of the main color 4. Look up for trends and add something unique Thanks Gary - subscribed to watch more
The Frontend Development Course is now up! kzclip.org/video/8gNrZ4lAnAw/бейне.html - We make the UI design from this video into a working reality in the browser!
Must learn to use inkscape, not krita, gimp etc. Otherwise, it is still very difficult to design a UI after studying all these UI courses. The point is that nowadays many components of UI are directly produced by tools, not drawn by pens.
Note for the beginners: Remember that good design should talk about the features of the product itself. You should accept human mistakes and try to do a better design in order to predict those mistakes and somehow respond to them in a good way!
a graphic designer here trying to learn UI design for the first time and finding your video the best and the most informative on the internet. thanks for the amazing video
Thank you so much for your patience and expertise. I indulge on your tutorials watching them over and over and don't get tired. I have expanded my knowledge immensely. You're awesome!!!
I feel great about this field after viewing your entire presentation. Most resourceful and helpful! and yes, 90210- was my jam! I am subbing and coming back for more lessons and much needed thorough and relevant educational content. Thank You for sharing, Gary. Bless you! 🙏😁
The call to action button would have been a great opportunity to reference the logo imo. Since both had fully round corners and it's one of the only other element using green. The text on the blue one and the button on the green one, just a thought ! :)
Really good crash course, I love how you get detailed and explain each important design principle while showing us as well. It would be cool too see maybe an intermediate crash course for UI design going into deeper pages than home and for other devices such as mobile.
This is an amazing video, you take the time to really explain why you do what, and show multiple options what works and what doesn't. Thank you so much for sharing this! It would be awesome if you do this for medior/intermediate, and advanced as well. Really curious how that will go. Thanks again!
Many thanks for this video, Gary - I was doing my bootcamp capstone project and your video pointed out issues with my design that I was able address. At today's demo day dress rehearsal, the feedback was 'looks like a professional website.' Wouldn't have been possible without your video! Peace!
This video is simply a m a z i n g . I've been searching for a "crash course" like this for days, and I'm so happy that youtube recommended me this haha Thank you very much! It's very easy to understand and shows really important points to make a good UI design, perfect for beginners like me. Please Keep up!
This is one of the best and simplest life changing tutorials i have encountered so far.This is very cool and i want to start concentrating on UI design sounds really interesting.
First I have watched your video on UX vs UI design because I needed to understand what is better for me to start learning. You have helped me to understand through your video that UI is definitely better for me. Then, I have watched this whole entire video on UI fundamentals. What I can say is that this one has really pursued me to become an UI designer because you show the actual work which an UI designer would do, even tho here you present only the very basics. Thank you! I have subscribed to your channel and I will keep watching your videos to get a better insight om the learning process. 😉
Hey great looking design. I was wondering how do you recreate this design using html css? It would be great if you could upload a tutorial where once you design the webpage, you also recreate using web technologies especially that 3d server icon you built. Thanks!
Super helpful and insightful video, thanks heaps. You've convinced me to make the move from Photoshop to XD, that face plugin is genius! For some reason I had this impression that UI was way more complicated then this, maybe you're just really good at explaining it. Also I was a big fan of Melrose place 😄
Heyo Gary, i love your content. You are so talented. Keep up that good work. I already was enable to create a very nice first website planned with Figma after just 1 hour of this video and 5 minutes of another video of you. Have a nice week.
Loveeee the colour pallete in this and the design itself. Not sure if you made the crash course where you take this design and make it in the browser using html and css. Thanks!
Followed along with this and made my first example project in Adobe xd :) Thanks Gary. Cheers to finding other tutorials/learning more UI design stuff.
You had moments (like this one in 56:33) while designing and working with typography when you didn't quite knew if the fontsize is enough. You wouln't had a problem if you had switched your view with CTRL+1. This makes you see true fontsizes of your text. Besides that, good video!
Thank you so much. I am a graphic designer but i just got placed as a UI designer and I have to study all night today. This was the first video I watched! Great tutorial! Thanks a lot!
That is amazing, Gary! I look at it and am stunned how clean it looks, nothing over the top, because I and ofc others try to make super something, overthink, take too much time and end up looking messy. But looking at this video opened my eyes that you don't need much and how IMPORTANT is spacing to make it look clean. Less is more.. usually, I get stuck on a design, because trying to tap into my inner da Vinci spending hours or days and end up with a mess. Thank you.
I really love your channel . It is very helpful for everyone who develop your career . I must say self taught is only thing which is stay with us anytime. So be safe be learn.
Incredible course. Thank you for producing such high quality content. So as we are talking about design, I would like to make a suggestion ... if you mirror your image, your microphone would come from the corner of the screen instead of floating in the middle of it or maybe put it on the left side of the screen just as it is. Got yourself a new follower!
Man, you really saved me, i'm studying a lot of programming to be a freelancer web dev, and, i need to hop into web design also. This video, which is free, filled with information, it's a crash course and etc, helped me a lot. Now i just need to get a little deeper to UI Design with time, study UX Design, and Graphic Design, so i can be a Web Developer and Designer :D. Thank You! +1 sub
Easiest way to check your UI: make it b&w and blur it - thats how the human brain processes basicly an image. You will see if you have enough white space, too much, enough contrast etc.
This is the best UI video I found so far. I'm a beginner and just getting started with UI world. You explain everything very clear, straightforward and very easy to understand too. Not skipping any ads, already subscribed and already hit the like button :)
Thank you for breaking down the fundamentals into the categories I can memorize and get back to. But I wanted to hear a little bit more about typography here. But I liked it, thank you for your time and work!
Amazing tutorial! Apart from the fact that he basically created a f-ing amazing logo any startup could steal in like 5 min, all the info is super clear for newbies like me. Hat off, and super freaking like! 👌👌
I followed along with this course. My company was called "Snek&Co." My branding colors were Emerald green and secondary was Pantone yellow. I choose to go with 2 octagon-looking snakes as a fabricated picture out of shapes. I created a octagon scroll with arrow in it in Emerald, an Emerald second section with octagon slope and my portrait-reviews-section was dark grey. My font was Century Gothic (I haven't downloaded more yet). My Get-Started/Subscribe button was Pantone with black border in a stretched octagon, with shadow. GOSH, I am so happy to do something design-wise after 9 years of being lost in all jobs that don't really speak to me.
Loved this! I have just passed my uni course in UX Design and I'm now working on UI to move into freelance. One thing I noticed through this video is there is no consistency with the font sizes. Does this matter? E.g Headers should only be one size... Subheaders another... Body text another. You kinda just slide the font size around till you like it. I'm just trying to learn to ensure I don't get into any bad habits. Also- for all web app designs do you use this 12 column grid? - Thanks
Wow, thank you very much. Good explanation and awesome and easy examples! As you said, I‘m feeling more confident now to make things right in my webdesign :) Thank you!
Thanks bro what an awesome tutorial i have ever found. I am actually Theme designer and developer on Themeforest. And i always used to get problems with Visual hierarchy, Typography Hierarchy, Contrast, White space. You explained things really well which cleared a lot of things in my mind. But you did not explain typography, font sizes, combining type face, and using font weight. I think that could make this video perfect for UI Design. However its still amazing its cleared so many things. Thanks so much! for wonderful work. Good luck! Keep good work going.
I hope you'll read this! After my graduation from university I felt so lost, I had little to no actual knowledge over modern programming languages, it was like I had no place in this field. I started watching online tutorials on HTML and CSS but I still felt like something was missing. Then I heard about UI and I felt like it was my calling. I've always loved arts and im the one to notice all the details and try to fix them, plus i love photo editing. Sadly I didn't know where to start, how to apply my "talent". Your tutorial was godsent! I have this silly smile on my face watching you creating this website. Everything you add to your design I completely understand PLUS i have the proper knowledge (im still an amateur but hey! practice makes perfect) to actually structure this sketch of a website! During the pandemic I felt helpless, I felt like I'd forever be unemployed, it's amazing what an ego boost a simple tutorial can be. Thank you, thank you a million times Gary!
This video made my day, 06 May 2020. Now moving to the 2nd part - HTML, CSS to implement it. I am an experienced backend developer but I stuck on designing a good looking frontend but at the end of the day, today I am confident enough to do that.
Heyy there! Thank you for quality content. I was always into graphics and web development. UI seem like an intersection and a way to go. How do you see UI design as a discipline in few years? In my opinion it's quite perspective, but I would like to know an opinion of a professional with years of experience.
this Course deserves to be in Udemy thank you for giving it for free 🙂 I have a question you used white color for the background I like to use off white (#e6e6e6) instead of white (#ffffff) is that ok?
Amongst UX and UI Design there is also Interaction Design... these tend to be a bit more engineering driven in their work focussing on the "mechanics" of the UI ...
Sticking to the basic patterns really does the job as simplicity makes it easy for all i.e designer, developer and most importantly the user. I am really amazed how complex and confusing designs win on awwwards.
This video is really fantastic. I realized my UI skills where absolute trash and started taking a course on UI design fundamentals. Its very helpful to see someone mock something up while explaining and demonstrating the design principals I have been learning. Looking back at my previous work makes me literally embarrassed by myself lol Thank you for this and all the other great content.
@Lasith K its absolutely fantastic. Theres no coding so far (halfway through), but principals to design by. Its been really eye opening on why my own designs have been so trash. Since I've started, Ive dove further into topics he touches on, because it is a fundamentals course, and its changed the way I look at front end development
So the thing is me and a friend want to build an app. We would need a graphic designer but we don't have any funds for that. I wasn't even sure what UI meant, so this is exactly the stuff I needed. Thank you!
Amazing beginners course. It amazes me how we who started doing any "web jobs" 15 years ago had to do everything, wireframes and mockups, UI prototyping, and writing front-end code (HTML, CSS, javascript) and that position was just called "Web designer". Today it is a 4-5 people job. I still code mostly for WP, doing the whole front end side, but I see in a lot of new front end devs that they have 0 eye for design (or interest to follow margins and white space rules even if you provide a design - they don't think it is important). The same goes for many UI designers who lack creativity and need wireframes to be able to produce anything. I have a feeling that today's workforce does not want to think nor does enjoy this jobs, a lot of people go in it just for the money. Just a small digression for discussion if anyone else had the same experience on their projects or when hiring. But you sir did an amazing job :) I loved this video!
_Excellent_ video! This is the type of training every junior designer should be getting when joining a team. I'm very grateful that you offer this video for free and will make sure I point people over to it when I can.
Excellent tutorial , the design fundamentals are well explained and the design concept can be implemented by beginners , i am looking forward for your next video hopefully its about admin panel design i'm sure it would be great tutorial like.
This was BEYOND fun to do!!! I am self-taught and I've been learning Full Stack for almost a couple years, I am pretty good with HTML, CSS, JavaScript, CSS & JavaScripts Frameworks and Databases...This has been the missing piece to my puzzle! I enjoy the Frontend as a designer/developer and this has reassured me that I need to stay on this route! Thank you so much for the video!
@Celica Green well for my journey i knew i wanted to do to create experiences that i know i would like to see if i visit a website or a mobile app. My curiosity led me down a self taught road where i learned html and css. This was so I could code my own designs without any assistance. The I learned basic JS fundamentals. Using functions to create dynamic actions throughout my designs, whether it's a click of a button or a slide of a navigation menu. I actually learned code first and then learn most of the design tools I mentioned (except Sketch...not a Mac fanboy).
@Celica Green Not sure how you are asking this, but the pillars of ui/ux stems from HTML, CSS, and Javascript. These are the foundations. As far as JS goes... just the basic fundamentals will do. Some other essential tools would be any of the following design tools: Figma, Adobe XD (personal fav), Sketch (for Mac users only), or Photoshop. Hope that answered your question.
I wasnt able to find a job right out of art and design school and went into insurance for a year. Now I found UI design as a real path and Im really excited to start working on a portfolio. Heres to changing my career!
@1neflameonyoutube I’m glad I’m here, I’m a junior graphic design student, but have classes in my university that deal with UI/UX design and I’m really thinking of building my UI/UX portfolio now as a student! I would really love to start a portfolio but don’t know where to begin, hopefully this video helps!
this tutorial, while it was relatively easy to follow, I wish that you would have spoke more about the fonts/sizes etc that you were using, i am doing this for school and I want it to be as accurate as possible. I also noticed that when you started the bottom section, you told us not to follow along, but then you kept going without changing it, so I had to go back and rewatch what I could have been doing already.
Question, what tools are usually used paid and Opensource to create Quick Reference Guides? colourful, compact and nicely packed in folded paper (as we see in the Premium Tea, DIY furniture, Electronic Appliance etc)
FWIW: An interesting set of UX "laws" that overlap with the UI principals that Gary listed. While this is somewhat of a tangent I went ahead and added it here since I'm pretty sure I would forget to to do so if there was a UX video in the future. LAWS OF UX: lawsofux.com/
Came here for timestamps and could not find anything, so:
2:06 Introduction
2:18 - What is UI Design
2:30 - UI vs UX Design
5:13 - UI Design vs. Frontend Developer
6:48 - Designing and Prototyping UI's (Tools: Sketch, XD, Figma, InVision...)
7:46 - UI Fundamentals
9:09 - Color & Contrast
12:30 - White Space
13:52 - Visual Hierarchy
15:32 - Complexity vs. Simplicity
16:22 - Consistency
17:34 - Scale
19:31 - Adobe XD (Adobe Experience Design)
--
(Will update as I go)
@Ibrahim Kane to
Many thanks!
Pls come back
oh
1. Keep it simple
2. Use White Space in your favor
3. Use 2 major color for contrast, and shades of the main color
4. Look up for trends and add something unique
Thanks Gary - subscribed to watch more
advices for more tuts on UI design ? that help in building the fundaments ?
@iCrack True
Color Scheme should not necessarily be 2
The Frontend Development Course is now up! kzclip.org/video/8gNrZ4lAnAw/бейне.html - We make the UI design from this video into a working reality in the browser!
@Radar123 yeah the guy mentioned UI designers need not create their own illustrations .
Must learn to use inkscape, not krita, gimp etc. Otherwise, it is still very difficult to design a UI after studying all these UI courses. The point is that nowadays many components of UI are directly produced by tools, not drawn by pens.
Note for the beginners:
Remember that good design should talk about the features of the product itself. You should accept human mistakes and try to do a better design in order to predict those mistakes and somehow respond to them in a good way!
Thank you
a graphic designer here trying to learn UI design for the first time and finding your video the best and the most informative on the internet. thanks for the amazing video
Thank you so much for your patience and expertise. I indulge on your tutorials watching them over and over and don't get tired. I have expanded my knowledge immensely. You're awesome!!!
That was an incredible amount of value in just 90 mins. I'm bookmarking this so I can send it to designers who are just starting out whenever needed.
This was an awesome first introduction to UI design. Very easy to follow; much thanks and looking forward to diving into your other videos!
I feel great about this field after viewing your entire presentation. Most resourceful and helpful! and yes, 90210- was my jam! I am subbing and coming back for more lessons and much needed thorough and relevant educational content. Thank You for sharing, Gary. Bless you! 🙏😁
Great tutorial. Found it useful to learn UI design using Adobe XD. Looking forward to the second part covering it's implementation in HTML, CSS and JS
The call to action button would have been a great opportunity to reference the logo imo. Since both had fully round corners and it's one of the only other element using green. The text on the blue one and the button on the green one, just a thought ! :)
Really good crash course, I love how you get detailed and explain each important design principle while showing us as well. It would be cool too see maybe an intermediate crash course for UI design going into deeper pages than home and for other devices such as mobile.
This is an amazing video, you take the time to really explain why you do what, and show multiple options what works and what doesn't.
Thank you so much for sharing this!
It would be awesome if you do this for medior/intermediate, and advanced as well. Really curious how that will go.
Thanks again!
Would also like to see it for an app
Many thanks for this video, Gary - I was doing my bootcamp capstone project and your video pointed out issues with my design that I was able address. At today's demo day dress rehearsal, the feedback was 'looks like a professional website.' Wouldn't have been possible without your video! Peace!
This video is simply a m a z i n g . I've been searching for a "crash course" like this for days, and I'm so happy that youtube recommended me this haha
Thank you very much! It's very easy to understand and shows really important points to make a good UI design, perfect for beginners like me. Please Keep up!
hi
Thank you for this! I’ve been planning on doing a UX/UI design boot camp and watching this allowed me to make up my mind and just go for it.
I really liked your way of explaining especially with the design fundamentals and examples and carrying those throughout the video. Thanks a lot!
that was the best crash course i've ever seen! i think that's because you used a full example to explain it. thank you.😊
Thanks brother for such a nice and brief intro to UI designs. I got to learn a lot and hope to get similar kind of tutorials on a regular basis.
Thank you for this lesson!
Really appreciate this as a gateway course to the world of design!
This is one of the best and simplest life changing tutorials i have encountered so far.This is very cool and i want to start concentrating on UI design sounds really interesting.
Oo
You are such an awesome coach of UI!!! I love your course, please please continue
This is one of the awesome UI basic tutorial videos I have seen, thank you for your efforts!
First I have watched your video on UX vs UI design because I needed to understand what is better for me to start learning. You have helped me to understand through your video that UI is definitely better for me.
Then, I have watched this whole entire video on UI fundamentals. What I can say is that this one has really pursued me to become an UI designer because you show the actual work which an UI designer would do, even tho here you present only the very basics.
Thank you! I have subscribed to your channel and I will keep watching your videos to get a better insight om the learning process. 😉
As an indie dev who never learned doing UI, this has been a tremendous help to me. Thanks alot
Hey great looking design. I was wondering how do you recreate this design using html css? It would be great if you could upload a tutorial where once you design the webpage, you also recreate using web technologies especially that 3d server icon you built. Thanks!
Super helpful and insightful video, thanks heaps. You've convinced me to make the move from Photoshop to XD, that face plugin is genius! For some reason I had this impression that UI was way more complicated then this, maybe you're just really good at explaining it. Also I was a big fan of Melrose place 😄
Your crash courses and tutorials really helpful, keep it up.
That was awesome...I have learned more in this one hour long tutorial than ever in my class. GREAT WORK. Carry On..
very good tutorials! Love how you deliver the information! It's very good to grasp everything you are saying! Thanks!
Heyo Gary,
i love your content. You are so talented. Keep up that good work.
I already was enable to create a very nice first website planned with Figma after just 1 hour of this video and 5 minutes of another video of you.
Have a nice week.
Loveeee the colour pallete in this and the design itself. Not sure if you made the crash course where you take this design and make it in the browser using html and css. Thanks!
Followed along with this and made my first example project in Adobe xd :) Thanks Gary. Cheers to finding other tutorials/learning more UI design stuff.
Thank you for this video! About font-size, do you have any rule of proportionality between two elements in the same page?
I loved the result super neat and clean, and also well explained detail by detail, thank you so much!
You had moments (like this one in 56:33) while designing and working with typography when you didn't quite knew if the fontsize is enough. You wouln't had a problem if you had switched your view with CTRL+1. This makes you see true fontsizes of your text.
Besides that, good video!
Thank you so much. I am a graphic designer but i just got placed as a UI designer and I have to study all night today. This was the first video I watched! Great tutorial! Thanks a lot!
That is amazing, Gary! I look at it and am stunned how clean it looks, nothing over the top, because I and ofc others try to make super something, overthink, take too much time and end up looking messy. But looking at this video opened my eyes that you don't need much and how IMPORTANT is spacing to make it look clean. Less is more.. usually, I get stuck on a design, because trying to tap into my inner da Vinci spending hours or days and end up with a mess. Thank you.
I really love your channel . It is very helpful for everyone who develop your career . I must say self taught is only thing which is stay with us anytime. So be safe be learn.
Incredible course. Thank you for producing such high quality content.
So as we are talking about design, I would like to make a suggestion ... if you mirror your image, your microphone would come from the corner of the screen instead of floating in the middle of it or maybe put it on the left side of the screen just as it is.
Got yourself a new follower!
Man, you really saved me, i'm studying a lot of programming to be a freelancer web dev, and, i need to hop into web design also. This video, which is free, filled with information, it's a crash course and etc, helped me a lot. Now i just need to get a little deeper to UI Design with time, study UX Design, and Graphic Design, so i can be a Web Developer and Designer :D. Thank You! +1 sub
This was great video and I learned a lot. Can't say how much am I grateful for this.
Easiest way to check your UI: make it b&w and blur it - thats how the human brain processes basicly an image. You will see if you have enough white space, too much, enough contrast etc.
Another tip that may be a little faster... squint your eyes! Reduces hues and focuses mostly on contrast and composition which helps a lot!
Omg that tip has blown my mind!
Thank you!
@Anon Black&White
what is b&w?
Simple, clear and FAB!
Hands down, the best beginner's tutorial for UI design out there.
Your work is amazing. I've learnt more from this video than I did at an institute. All I can say is thank you
" Education makes good employees. Self-education makes good employers"
Would love to see these examples coded & responsive.
This is the best UI video I found so far. I'm a beginner and just getting started with UI world. You explain everything very clear, straightforward and very easy to understand too.
Not skipping any ads, already subscribed and already hit the like button :)
This video is one of the most engaging design courses I've ever watched . Congrats!
Thank you for breaking down the fundamentals into the categories I can memorize and get back to. But I wanted to hear a little bit more about typography here. But I liked it, thank you for your time and work!
Amazing tutorial! Apart from the fact that he basically created a f-ing amazing logo any startup could steal in like 5 min, all the info is super clear for newbies like me. Hat off, and super freaking like! 👌👌
I followed along with this course. My company was called "Snek&Co." My branding colors were Emerald green and secondary was
Pantone yellow. I choose to go with 2 octagon-looking snakes as a
fabricated picture out of shapes. I created a octagon scroll with arrow
in it in Emerald, an Emerald second section with octagon slope and my
portrait-reviews-section was dark grey. My font was Century Gothic (I
haven't downloaded more yet). My Get-Started/Subscribe button was
Pantone with black border in a stretched octagon, with shadow. GOSH, I
am so happy to do something design-wise after 9 years of being lost in
all jobs that don't really speak to me.
Would love to see a video of this mockup implemented to css. Great video! Edit: nevermind, I found it, you are the best.
Loved this! I have just passed my uni course in UX Design and I'm now working on UI to move into freelance. One thing I noticed through this video is there is no consistency with the font sizes. Does this matter? E.g Headers should only be one size... Subheaders another... Body text another. You kinda just slide the font size around till you like it. I'm just trying to learn to ensure I don't get into any bad habits. Also- for all web app designs do you use this 12 column grid? - Thanks
Wow, thank you very much. Good explanation and awesome and easy examples! As you said, I‘m feeling more confident now to make things right in my webdesign :) Thank you!
Thanks bro what an awesome tutorial i have ever found. I am actually Theme designer and developer on Themeforest. And i always used to get problems with Visual hierarchy, Typography Hierarchy, Contrast, White space. You explained things really well which cleared a lot of things in my mind. But you did not explain typography, font sizes, combining type face, and using font weight. I think that could make this video perfect for UI Design. However its still amazing its cleared so many things. Thanks so much! for wonderful work. Good luck! Keep good work going.
Thank you, extremely helpful! (Wish they'd covered more of these principles in my paid course :D)
You answered so many questions that I've been curious about for a while. You answered other questions that I didn't even know I had yet. Thx!
I hope you'll read this! After my graduation from university I felt so lost, I had little to no actual knowledge over modern programming languages, it was like I had no place in this field. I started watching online tutorials on HTML and CSS but I still felt like something was missing. Then I heard about UI and I felt like it was my calling. I've always loved arts and im the one to notice all the details and try to fix them, plus i love photo editing. Sadly I didn't know where to start, how to apply my "talent". Your tutorial was godsent! I have this silly smile on my face watching you creating this website. Everything you add to your design I completely understand PLUS i have the proper knowledge (im still an amateur but hey! practice makes perfect) to actually structure this sketch of a website!
During the pandemic I felt helpless, I felt like I'd forever be unemployed, it's amazing what an ego boost a simple tutorial can be. Thank you, thank you a million times Gary!
@luffytaro 2020 thank you so much!
@luffytaro 2020 😊
You probably dont need to hear this from a stranger
But good job
The progress ur making in silence will be rewarded ✊🏾
The repeat grid tool should also be implemented onto Illustrator. It's gonna make tons of work easier!
Check out Affinity Designer
This video made my day, 06 May 2020. Now moving to the 2nd part - HTML, CSS to implement it. I am an experienced backend developer but I stuck on designing a good looking frontend but at the end of the day, today I am confident enough to do that.
Heyy there! Thank you for quality content. I was always into graphics and web development. UI seem like an intersection and a way to go. How do you see UI design as a discipline in few years? In my opinion it's quite perspective, but I would like to know an opinion of a professional with years of experience.
this Course deserves to be in Udemy
thank you for giving it for free 🙂
I have a question
you used white color for the background
I like to use off white (#e6e6e6) instead of white (#ffffff)
is that ok?
Amongst UX and UI Design there is also Interaction Design... these tend to be a bit more engineering driven in their work focussing on the "mechanics" of the UI ...
Such a nice crash course, i really enjoyed it!
just starting out as a UI designer, to me this was extremely useful!! waiting for the course to come out :D
Finally a complete tutorial about UI Design came out on KZclip. Good job Mate !
You explain well with proper example.....very helpful...thanks to sharing your knowledge with us...🙂
Sticking to the basic patterns really does the job as simplicity makes it easy for all i.e designer, developer and most importantly the user. I am really amazed how complex and confusing designs win on awwwards.
Thank you for taking the time to make this video, I really learned a lot from it.
This video is really fantastic. I realized my UI skills where absolute trash and started taking a course on UI design fundamentals. Its very helpful to see someone mock something up while explaining and demonstrating the design principals I have been learning. Looking back at my previous work makes me literally embarrassed by myself lol Thank you for this and all the other great content.
@Lasith K its absolutely fantastic. Theres no coding so far (halfway through), but principals to design by. Its been really eye opening on why my own designs have been so trash. Since I've started, Ive dove further into topics he touches on, because it is a fundamentals course, and its changed the way I look at front end development
@Edward Nice! I'll find a good time to buy it when its on sale. You liking it?
@Lasith K yes. It was like, $10-14
@Edward did you get it on sale?
So the thing is me and a friend want to build an app. We would need a graphic designer but we don't have any funds for that. I wasn't even sure what UI meant, so this is exactly the stuff I needed. Thank you!
Can you make an advanced series as well ? Thnx for all the efforts btw. ♥️
This is a great video for people that are just getting started. Amazing. I learned a decent amount. Very exceptional.
Amazing beginners course. It amazes me how we who started doing any "web jobs" 15 years ago had to do everything, wireframes and mockups, UI prototyping, and writing front-end code (HTML, CSS, javascript) and that position was just called "Web designer". Today it is a 4-5 people job. I still code mostly for WP, doing the whole front end side, but I see in a lot of new front end devs that they have 0 eye for design (or interest to follow margins and white space rules even if you provide a design - they don't think it is important). The same goes for many UI designers who lack creativity and need wireframes to be able to produce anything. I have a feeling that today's workforce does not want to think nor does enjoy this jobs, a lot of people go in it just for the money. Just a small digression for discussion if anyone else had the same experience on their projects or when hiring. But you sir did an amazing job :) I loved this video!
Great video! A timestamp index would've been helpful if possible!
Nicely done Gary, good to see you're still teaching design ;-)
Love this keep doing more please. Thank you.
I remember your old html and css tutorial
It was amazing
_Excellent_ video! This is the type of training every junior designer should be getting when joining a team. I'm very grateful that you offer this video for free and will make sure I point people over to it when I can.
Real easy to follow and keep up with. Thank you.
Excellent tutorial , the design fundamentals are well explained and the design concept can be implemented by beginners , i am looking forward for your next video hopefully its about admin panel design i'm sure it would be great tutorial like.
Thank you so much for making this video! So helpful!
This was BEYOND fun to do!!! I am self-taught and I've been learning Full Stack for almost a couple years, I am pretty good with HTML, CSS, JavaScript, CSS & JavaScripts Frameworks and Databases...This has been the missing piece to my puzzle! I enjoy the Frontend as a designer/developer and this has reassured me that I need to stay on this route! Thank you so much for the video!
@Celica Green well for my journey i knew i wanted to do to create experiences that i know i would like to see if i visit a website or a mobile app. My curiosity led me down a self taught road where i learned html and css. This was so I could code my own designs without any assistance. The I learned basic JS fundamentals. Using functions to create dynamic actions throughout my designs, whether it's a click of a button or a slide of a navigation menu. I actually learned code first and then learn most of the design tools I mentioned (except Sketch...not a Mac fanboy).
@kodeDev00 can you elaborate a little your self taught journey of ui ux designing?
@Celica Green Not sure how you are asking this, but the pillars of ui/ux stems from HTML, CSS, and Javascript. These are the foundations. As far as JS goes... just the basic fundamentals will do. Some other essential tools would be any of the following design tools: Figma, Adobe XD (personal fav), Sketch (for Mac users only), or Photoshop. Hope that answered your question.
Hey!! For ui design you need html , css,js Basically coding??
Which programming language have you learnt?
Loved it! Great work. Thank you so much!
I wasnt able to find a job right out of art and design school and went into insurance for a year. Now I found UI design as a real path and Im really excited to start working on a portfolio. Heres to changing my career!
Good luck
How's it going?
Hi Nick. It's been over 2 years you started a career in Ui design. How's it going?
@1neflameonyoutube I’m glad I’m here, I’m a junior graphic design student, but have classes in my university that deal with UI/UX design and I’m really thinking of building my UI/UX portfolio now as a student! I would really love to start a portfolio but don’t know where to begin, hopefully this video helps!
dont forget about mobile pages !. amazing crash course! as a frontend developer i understand lot of design and really enjoyed it.
Awesome, can't wait for the front-end crash course
Awesome video! You explained it super clear and simple.
this tutorial, while it was relatively easy to follow, I wish that you would have spoke more about the fonts/sizes etc that you were using, i am doing this for school and I want it to be as accurate as possible. I also noticed that when you started the bottom section, you told us not to follow along, but then you kept going without changing it, so I had to go back and rewatch what I could have been doing already.
Hey man, just wanted to say thanks. This is a great resource and really got me thinking creatively as a beginner.
Question, what tools are usually used paid and Opensource to create Quick Reference Guides? colourful, compact and nicely packed in folded paper (as we see in the Premium Tea, DIY furniture, Electronic Appliance etc)
Thanks, Gary for your tremendous clips, I wonder if you could name a book where all these designing principles are mentioned there?
thanks
Very beautiful and suitable colors for the logo and object! thank you!👍
Amazing Tutorial, followed along and learned a lot. Thank you!!
thanks man , a very great yet simple course , learned a lot and definitely checking out skillshare
Incredible work! Thank you so much!
I'm a full stack developer trying to broaden my skills to design so that I can eventually move into freelancing and this course was so helpful
These visual inconsistencies are something I have always naturally looked for… that’s it I’m going all in on Design as a career 😤
FWIW: An interesting set of UX "laws" that overlap with the UI principals that Gary listed. While this is somewhat of a tangent I went ahead and added it here since I'm pretty sure I would forget to to do so if there was a UX video in the future. LAWS OF UX: lawsofux.com/