Become a UI/UX Designer | Pierluigi Giglio | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Welcome to the Course

      0:59

    • 2.

      What is UI and UX Design

      3:02

    • 3.

      Design Softwares for UI UX

      2:33

    • 4.

      Wireframes 101

      6:55

    • 5.

      Learn from the Pros

      1:55

    • 6.

      The Importance of a Design Portfolio

      2:21

    • 7.

      Android and HIG Guidelines

      3:49

    • 8.

      UI Kits 101

      5:26

    • 9.

      Further Resources

      6:38

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

621

Students

--

Projects

About This Class

In this getting started in UI UX for beginners course you will learn essential UI and UX design concepts from the ground up.

You don’t need to have any prior experience with UI/UX design as this course will cover all the basics in a beginner-friendly way.

You will learn everything you need to know in order to get started to become familiar with the world of UI/UX design and the tools you’ll need to become a UI/UX Designer.

In just a bit more than 1 hour you will be able to understand basic UI/UX design workflow, key user experience design principles and interface design essentials to kickstart your career in the world of UI/UX Design.

But why should you learn UI UX Design from me?

I’ll briefly introduce myself: my name is Pierluigi and I’m a full-time designer with over 8 years of experience.

After graduating with a BA Graphic Design from one of the top Design Universities in London I worked and managed hundreds of design projects for companies of all sizes and tech backgrounds, from Fortune 500 companies to Million-Dollar Companies that needed to raise their next round of funding.

On the side, I have also designed over 20 design products and my designs have been downloaded over 50000+ times

I also have a design channel on Youtube with over 300 videos and I’m active on Dribbble and Instagram with over 30000 followers.

I had a deep passion for design ever since I was in high school and since this industry gave me so much I want to give back by sharing the knowledge I gathered as a designer over all these years.

So join me today in this course and we’ll learn more about the exciting field of UI/UX design, so that you can bring your design career to the next level.

Meet Your Teacher

Teacher Profile Image

Pierluigi Giglio

Sr. UI/UX Designer & Consultant

Teacher

Hello, I'm Pier and I am a Sr. UI/UX Designer and Consultant with over 8+ years of experience working with Fortune 500, large enterprises and funded startups.

I have been working remotely and recently earning six figures in a year as a designer and entrepreneur while occasionally traveling to different countries.

Design have been my main passion and focus since I was 14 years old and since this field gave soo much to me I believe it’s now my turn to give back and share my knowledge (plus shortcuts/secrets) to become a successful designer who can craft the life and vision that they desire.

On top of that I love to teach and help others grow and achieve their goals.

Having worked on hundreds upon hundreds of design projects, collaborated with 40+ clients ... See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome to the Course: Hello, my name is pretty easy and I created this course in order to help you get started in the world of UI UX design. Now I myself, I've been a UI UX designer for the past eight years and having worked with over 40 clients from startups to Fortune 500 companies, understand that it can be challenging when you're first starting out. But we, the right path for which I'm going to lay out for you, It's going to be an easier journey. And it's one of the most exciting career paths in say, you can work both locally or remotely with no problems at all. And this field is experiencing a lot of growth. So it's definitely a very good career choice. And in this course you're going to learn all the basics of UI UX design and how to get to the next level with further knowledge and further informations which are going to make you a successful UI UX designer. So let's get started and let's learn all about UI UX design. 2. What is UI and UX Design: In this video, I want to talk about the difference between the UX design and UI designer and also what the IPO of figures and that job roles or available at the moment in the market than what you would usually do if you're actually focusing more on one end or the order of the spectrum. Now, UX designer usually involves the creation of wireframes, prototyping, doing a research about the product or service, or a company, or even analyzing the data. So it's more data-centric and it's going to be focused more on high level elements. While UI design is going to be essentially focusing on that, the visual design, so what the screens, what the project is actually going to visually look like. So it's going to be more about figuring out the colors, the layout, the right, the iconography or even illustration elements, or any visual element which is going to bring the brand identity and the project that to life. So usually when you're going to work in this field, you're going to be doing either one or the algebra, but most of the times, especially for working on smaller projects. So our first molar clients and companies, you're going to essentially do both on or at least there's going to be some gray area where you're going to work and you have to understand the both side of things. And that usually whenever you're working or whatever decision that you make upon that if you want to focus more on the UX design side of things or the UI design side of things, it's always good to understand the context. So let me give you a brief explanation or example of this. Let's say that you wanted to just focus on the visual design. So you'll want to create the UI designs from Grant wireframes, which is going to be savvy that we're going to talk about in a future video. But just for the moment that a wireframe, you can see it, the alza, a skeleton structure of a website run out. And they're essentially for one to create a good UI designer, which is going to accomplish the goal of the company or the client. You want to have an understanding, also, the UX design. So essentially, what are the whys behind that, that wireframe? What is the company trying to achieve? What does the company wants to communicate visually and emotionally to the user. So as you can see these elements, we're going to be interrelated with one another. And it's really important to understand the things that from a high level, how the contextual understanding of what the goals are or what pain points are. And essentially go from there. 3. Design Softwares for UI UX: In this video, I wanted to briefly talk about the design softwares, which are the best design software is available at the moment in order to get started in UI UX design and worker on small or large projects. Now, at the moment that there are a lot of design softwares. And the design softwares are essentially just the tools. So pretty much each and every one of them, or at least the most, the majority, are going to enable you to create the projects of any kind. But the top ones, or at the moment, Figma, Adobe XD and sketch, and that is just my personal opinion. There are also other design softwares which are up in gaming. And by the time you're going to see this video, maybe new ones are going to be coming out with because it's constantly evolving and the design softwares or just moving forward each and every man for new updates, then there's a lot of movement going on. But one thing that they wiggle wanted you to keep in mind is that no matter what design software you're going to learn, you can essentially translated the same knowledge and also the same methodologies and workflow from software to software. And usually they don't really take a lot of time in order to learn once you already have a grasp on the basic foundations of one, since F, for the most part that they are similar in their essence of. But my recommendation would be to either go with Figma Sketch or Adobe XD, since that those were the most seek the outer required and the required softwares it from agencies and also clients. And that there's definitely a lot of opportunities open LPA once you understand them. Now there's also a lot of different ways to learn these design softwares. For example, on YouTube, there's a lot of video tutorials where you can learn about them. There's also amazing courses here on Skillshare or also are all sorts of different audio courses. So the way that you're going to learn to design software, it is totally up to you and you can make that decision. But the most common places in order to start it is usually on the official website, since they're going to have some really good research says that to get started and learn also advanced features of this altar itself. So my recommendation would be to simply select one, go with it, and you're going to be in a good position to continue. 4. Wireframes 101: In this video, we'll dive deeper into an important concept which we previously discussed in one of the past videos, and that is wireframing. We will also discuss the tools which I suggested to create wireframes in a fast and efficient way. Now wireframing is an essential stage of the design flow and that you'll do it very often in your design career. So let's get started talking about the basics of wireframes. So as a refresher on what is a wireframe, wireframing is a way to design a web Rapa at the structural level. And the, a wireframe is commonly used to lay out the content and functionality on a page which takes into account a user needs, the end user journeys. Wireframes are used early in the design process to establish the basic structure of a page before visual design and content audit. Now, the aim of the wireframe is to provide a visual understanding of a page early in a project to get clients end up project teams approval before the creative phase gets under way. So that will be the design phase and the further stages. Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used at 40 side or APA meets that user expectations. Now, one of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. Users can also review it. An early feedback mechanism for prototype usability tests. And not only or wireframes, easier to amend than concept designs. Once approved it by declined to end the users, they provide confidence to the designer. For a practical perspective, the wireframes and ensured the page content and functionality or position correctly based on user and business needs. And as the project moves forward, that can be used the Azi, a good dialogue between the members of the project team to agree on the project vision and scope. Now, let's discuss so wireframing tools. So there were many wireframing tools out there and I tried the dozens and dozens of them and my best recommendations that would be the following. The first free, probably you're ready and know that they are very famous design softwares and the softwares which you're going to learn all about in the dedicated courses. So there's entire dedicated courses on Sketch, Adobe, XD and Figma, which I created. So you can dive deep and really learned the ins and outs of this software via discourses and even just the first lessons are going to give you all the basics needed in order to create the wireframes efficiently in those softwares. And personally, I not those are the software is of my choice when it comes to wireframing together with another element, which we're going to discuss in just a moment. Whoever, another very good option to create wireframes and especially for one to share the MO with clients or you want to have clients involved in the wireframing stage will be freehand. And also wireframe CC, which is literally a website. So you can. But the thing that browser and that's going to be the actual wireframing tool. Now, freehand, it is really good because it allows multiple people to actually be on the same page as soon as it's called works on the Cloud and live. So you can easily create wireframes. The tools in freehand are pretty intuitive. There's not much going on, so it's a very simple op amp. And wireframe dot cc is another really good option. I use the for quite a bit in the past the button nowadays I'm really focusing on just creating the wireframes. I doing sketcher or there'll be 60 or Figma whenever I need the real-time collaboration features which are slowly going to be integrated the also the outer yourself to leave. Now, another great option is simply using BATNA or pencil and paper. And as you can see, there are lots of great tools for drawing wireframes today. However, I still like my good old paper. To create the quick wireframes. I feel it is perfect for quick sketches and melting. Now, personal wireframe ideas. However, keep in mind that you will usually have a harder time translating the wireframe into digital as you will lose the ability to end. You also lose the ability to easily collaborate with larger teams or keep a high level of organization on the wireframes of scale. So just keep in mind the scalability aspect and the collaboration aspect. But I believe band on pencil and paper, or really good to note it down like just very quick ideas and quick wireframes and then translating them into digital. Now, as we saw, wireframes are really good, but there's also some disadvantages. And the other wireframes did not include any design or account for technical implication. It is not always easy for the client to grasp that concept. Designer will also have to translate to the wireframes into design. So communication, so bar to the wireframe is often needed to explain why page elements are positioned as they are. Also when content is added, it might initially be to match it to fit within the wireframe layout. So designer and the copywriter will need it to work closely to make this fit. Wireframes should be used that early in a project. Get the user and client approval on the layout of key pages and navigation. This will provide the budget Dima, specifically, designers confidence in moving forward. Wireframes. We'll also save considerable time and money into testing and the men phase later in the project. Alright, now we know and understand more about wireframes. We're now ready to move on to the very next lesson. 5. Learn from the Pros: In this quick video, I want to simply remind you of the importance of downloading assets and the UI kits or even designed files which have been created by experienced designers. And the reason being is that you want to sort of analyze them and maybe create a, another screen or a set of screens that basin those designs and the traits to make the design consistent. And I think that this has been one of the exercises in one of the things that really helped me out in bringing my visual design skills next level. But also you understand the somewhat the u likes complexities and the dynamics which go on. Because sometimes if we're just creating designs from scratch, as a beginner, you're going to, it's going to be difficult to really capture those nuances that advanced users are going to use in their design. So this is one of my personal recommendations for you. Download designs which have been made by professionals and do it today and just the experiment and play around with them. Because this is really going to enable you to speed up your learning process, since you're going to learn from the masters themselves. And this is just something which is difficult to explain by words. It's not one of those things that you can explain a theory, but it's more of a practical approach to the design process. And it's really going to help you out. So keep it in mind and take action right now. Go on your favorite website, download the your UI kit or a zip file from a designer which you admire and try and recreate a screener based on their current design. 6. The Importance of a Design Portfolio: In this video, I want to talk about what should you do once you have a basic understanding in some basic knowledge about a UI UX design. And you might actually want to get your first job or your first experience in the field. Now, I always recommend you to start by working on a side project or working for family and friends, since usually those are going to be the easiest clients to land. So that's going to be a great start and blind since at the very beginning, all you want is to gather experience because then we've experienced you are going to progress your career and opportunities are just going to open up. But in order to do that, you wanted to always focus on your portfolio. The portfolio is the holy grail of a designer, meaning that it's going to enable a potential client to see about and learn about your experience. Since the portfolio is going to consist in a few selected projects where you're going to show some as nip at some visual of the project and also a brief explanation of what the project a goal and how you manage to get to that solution is essentially going to enable you to sell yourself and your expertise in order to find that those opportunities. So usually nowadays that you can have a digital portfolio which can be either a personal website which I personally strongly recommend you to hover eventually. But you can also start to honor social media platforms such as Dribbble or Behance, since those are going to enable you to create a portfolio absolutely, for free. And you can add as many projects as you want. So the core focus at once you have the basic thing is to really focus in your portfolio. And at the start you can simply have it either side projects or projects that you made for friends or family. And then those are going to enable you to get the real clients. And then you can start auditing real client work to the portfolio and literally go from there. And then it's going to, the opportunities are just going to open out as the experience, as time passes. 7. Android and HIG Guidelines: Now this is going to be an important video because if you're looking to get into UI UX designer, you must be familiar with material design guidelines and also the human interface guidelines if you're designing named for iOS devices. Now, my very best recommendation in order to learn this guidelines is to simply have a look at them, read them, and treat them as a theory book. There's no way I can create a single video going through all of the elements that all these guidelines. And to be honest, it's much more efficient to just read them through. So my very best recommendation is for you to take some time in the upcoming weeks and allocate a small amount of time each and every day to go through one by one the elements in these guidelines. So starting from the IRS's things and there's going to be some sections which are not going to be as relevant. So just keep that in mind that it's not, don't need to also memorize all of these interface guidelines. So don't treat it as a school assignment where you have to memorize each and every element. But you just want to go through the entire documentation, read it through, and highlight the most important concepts. So maybe they can note so with pen and paper as this is going to enable you to memorize it and really absorbed in oceans even more. And just go through one by one. And if you're seeing that some sections may be are not going to be as relevant. Feel free to skip them or just read through them faster. About my very best recommendation is to just go through because you're going to learn a lot not only about the specific US guidelines and the material and guidelines, but the very most important lesson which are going to learn is actually how to create the UI and UX design as a result, because there's a lot of golden nuggets in here which are going to really help you out no matter what the type of project you're working on. But that being said, if you're going to work, uh, for example, in Android the project, you definitely want to keep these guidelines in mind that since you want to be compliant with the guidelines themselves, so definitely keep this in mind and this is going to be amazing, amazing resources. Please take the time to really go through all of these elements, see the examples, and revise them. And that should take you a few weeks. Just a little bit of work and reading each and every day. And again, it's really going to help you out. So, so much. I myself, I went through them many years ago and I still do from time to time, especially when I'm dealing with a specific part of the project. But I can tell you these guidelines are done in a really, really good way. And learning the concepts, learning these principles and really seeing a excellent that UI UX is going to help you bring your knowledge and also your career to the next level. So please go through these and I'm going to leave it de-linking or descriptions. And I'll see you next video. 8. UI Kits 101: Now I wanted to take a moment in order to discuss a UI kits. Since that these can be really useful elements, the assets to have in your toolbox. So essentially you like It's what the R is. Kits that which already contains UX and UI elements. So you can either drag and drop them into a current project or user. Then ATSIC bays in order to kick start a new project from scratch in a fast and efficient way. Now sometimes they can really help you and make wonders. Other times it is best to start a project from scratch. And we're going to discuss this in more detail in the next video. But for the most part to, in this video, I just want to go over some ideas when it comes to work to find UI kits and which are the best places based on the ulna. The past years which I had the experience inside the lauded this point that must be hundreds or even thousands of UI kits and both free and premium and have a clear idea. So the very first thing that I want to recommend you is to simply this UI kits from sketch called the elements. So you can start playing around with a very first UIKit and seawater. Well down UIKit that looks like because this one is really good in my opinion and it has all the things we were looking at in the UIKit. Really clean state, the clean layering design, and it looks amazing. And this would be the very first base. So I would, I would recommend you to actually download it and start just playing around it briefly and maybe create a few screens. But nonetheless, let's continue on with, why don't my favorite, my favorite place to find the both of you I guess, and also elements for Sketch and that is SketchUp sources. Let's call them out of all of the websites which there are out there when it comes to sketch, freebies, especially this has to take the k cube because the other, a lot, a lot of freebies and essentially user uploaded the material. So this can be a fraud, deceit can also be a con, because you don't have really a quality guarantee or consistency between different users. But I think this is really cool and I find myself using the feature or actually the search feature quite a bit. So we file, for example, I searched for web APA. You can find the, you can see like all the different web apps available. And if I look for something such as Dashboard, you can see over here, you can find the all sorts of different dashboards really. So there really is a lot of ideas or this one is mine. Way as funny. And yeah, that's pretty much it when it comes to sketch up sources, really, really good research. And also noticing they also have the premium designs. So yeah, just, just check out. I think that free resource definitely have a lot of elements which are going to be useful. Now, let's move on to the very next one is u i star design. So this is another cool website where you can find all sorts of different assets for SketchUp. There'll be extremely also PSDs and much more. So definitely on all the wrong, which I recommend you to check out the really cool. And now let's go to UAA to where it's the place where it's one of the places where I also have my personal UI kits. As you can see here about the Apart from my store, I, you can literally see that there are like so many premium UI kits. And if you're willing to invest some money to the UIKit, would you get some premium ones? I think you to is the best place to go because the 3D have a lot of premium UI kits that just looks stunning. Their event, event, just like the website and the presentation is amazing. It's easy to browse through and you can find the very best when it comes to UI kits. You can browse it easily from here, you can select from for UI kits, for example, or even wireframing kits and all of these other elements or other products really. And yet they really did a great job of collecting the very best the dots out there. So this would be my recommendation when it comes to UI kits. And then now in the next video we're going to discuss some of the pros and cons of UI kits and where it makes more sense to use them. 9. Further Resources: Congratulations for getting to the end of the course. Now, as you might imagine, UI UX design is a world that in of itself. And it's really difficult to cover all of the angels are and learn all the basics that in a short amount of time. So what I want to give you is some further books and resources in order to learn more about UI UX design and really go in depth. And these are some of the books of which actually read the many years ago when they first started out and they steal, revise them from time to time because there's always something to learn from them. And these are going to gave you a great foundation when it comes to learning both UI UX design and especially the thinking behind the strategy behind the projects and the things that they're going to Dachau. So let's get started with the very first one, which is a master hover, in my opinion. And that is a project guide that to UX design. Now this is a great book by Ross anger and the choline Chandler. And it's going to give you the basics of UI, UX, of UX design that in a clear and easy to understand way. Now, another great book which I always recommend, no matter the type of designer that you want to become in the digital realm, is don't make me think by Steve Krug. Now, this book really helped me shape my mindset when it comes to UX designer and web design because it's going to essentially drive a very important point. And that is that you want to remove as much thinking for the user as you can, meaning that the interfaces should be as clear and easy to understand as you can possibly craft them. And in this book you're going to learn a lot of channel and tips in order to do that in an efficient and fast way. Now, another great book which I recommend you to check out it is The Design of Everyday Things. Now, this book is going to give you an overview of the design thinking and principles around the design as a whole, but it definitely applies as well in UI UX designer. And some of the principles in this Booker are really going to shape your mindset when it comes to designing solutions. Now, talking about designing solutions, you want have to miss a leaner UI UX. So because this book is really going to help you out when it comes to learning about the limit theologies, which is something quite common that you're going to approach it your career. And it's a great introduction to how you can approach it UX projects in a efficient way, both for yourself and also in the team. Let's move on to this book right here, which is a 100 things that every designer needs to know about people. Now the great thing about this book is that you really dives into the psychology of designer and the people because the two are very much related. And since you're designing for people, It's definitely call to understand that these principles and they're really going to help you out in the strategic and a high level view. Now another great book which I highly recommend that is emotional design, that is why java everyday things. Now this is going to drive some further points are similar to the Design of Everyday Things and also the previous book. But they really like the examples and the how the book explains why we actually enjoy the things that we do and the reason why we don't when it comes to great zines. So definitely a really, really good book and I would highly recommend you to have on your bookshelf. And now let's move on to the very last one, which is UX strategy and how the divisor, innovative digital products that people want. And this brought this book, as you might imagine from the title. It's going to give you a great overview when it comes to UX strategy and the high level view and picture when approaching your projects. So def at the highly, highly recommended you to check out. And on top of that, I also want to recommend you to check out Facebook groups because those are incredibly useful. And so for example, you can go on Facebook, search for UI UX design, and you're going to find a lot of groups I highly recommend you to check out are the ones with the most amount of members. Since when you're going to write a question, those are going to be the one with the likelihood, the higher likelihood of you receiving a response because they're populated by a lot of both students, but also a lot of practicing UI and UX designer. And asking questions there can really help you out because it's almost like having mentors at times. So it's definitely a hacker which I recommend you to check out a filter if we takes a few minutes. And then whenever you have a question, just to interact and engage with the group. And you're going to receive some amazing insights from industry professionals. And it's one of the things which is the most underrated in my opinion. But Facebook groups can really become a goldmine for further education and great research overall. Now on top of that, I would also check out YouTube videos or other courses on Skillshare, since these are going to definitely help you out in improving and bringing your education and work career to the next level.