Transcripts
1. Class Intro: Hey designer and my name is Alex and welcome to this Skillshare class about working with images in your UI design projects. I'm founder of web doughnut, where I created or 500 design products. I'm also a teacher and so far I have created more than 20 courses and a half, more than 40000 students enrolled in those courses. In this class, we're going to talk about what are some of the best ways for you as a UI designer to use images in your project. We are going to talk about why images are important and what should you pay attention when you are choosing which images you are to use in your projects. We're also going to discuss what are some ways for you to find images as a UI designer and how you can integrate them in your projects. We are going to discuss how some images can be taken by external photographer and how client can deliver those images to you. And then we're going to compare additional findings like free and premium images. What are the differences between them and what are some differences in licensing of those free in premium images. We're also going to discuss importance of image sets, how to choose image sets, and how to work with them. And then we're going to discuss how easy it is for you to find images in different niches. Why are different niches important for finding your images for your UI design projects and how you can proceed about finding these images and integrating them into your design projects. Then we're going to talk about image optimization on both Mac and Windows, why it's important and how you can go ahead and proceed with this image optimizations. How they are going to help you in your work and how they're going to help you with working with developers and how they are going to improve your speed in working with developers and especially working in these design tools like Adobe XD. Finally, we are going to discuss naming structure, why it's important, and how you can choose to work with naming structures that work for you and your developers. Your class project for this class is to choose images from different niches. I will leave it up to you to choose images that you want. These images can be either free or premium. It's all up to you. And just to put these images combined into one document, and you can pick a team and explain this further in Skillshare class project video. And I will really like you to save that as a JPEG and upload it to class project for me and other students to see. And I'm really excited to see what you guys can come up with. I'm really excited to share these tips and tricks with you. And I look forward to seeing you in class.
2. Why are images important: You know what they say, that picture says a thousand words. Well, it's the same story in paintings as it is in design, especially in graphic design, but the same thing can be said in web design and AB design. So choosing the right images can really determine the pace that the viewers are looking at your project, whether it's an app project or our website design project. It can also determine the tone at which you are speaking to your visitors. So that can be either serious or fun, playful. It can also determine the pace at your viewers can look at your project. So what that means is, are going to use smaller images, are going to use bigger images. Are you going to use full-screen images for width images and so much more? They're also going to determine how playful or serious or website is. And there are also going to determine the colors that you're going to use it your design, because the tone of your images is going to really determine that. Because if you are using, for example, really dark images, then you're going to use some colors, which is going to contrast much better to those dark images. Or if you're using really light and airy images, Dan, you're going to contrast that by using something a lot darker. For example, either a dark black or dark gray or dark green or something like that. So images are really the key factor in creating your designs and choosing the right images for your designs is going to make or break your design.
3. 3 types of project images: When it comes to project images, there are really three main types. Number one is images staking by the photographer. So these are images that your client already has any has taken to our premium photographer who has taken those images in sets and created really the whole story for your client, and then delivered those images to your client. And then your client is going to deliver those images to you and you in turn are going to use them in your designs. Two is free images. So those are the images that you're going to typically find on websites like Unsplash or Pixabay. And these images here really one huge flaw and that variety. So what that means is you can find one great image from one great photographer. And that's basically it. So you cannot find another image, for example, model in a different pose or a sunset from a different point of view, or a town street from a different point of view as well. So you cannot find those. And usually those images are really not that great quality. Usually there are something like 1920 by 1080, so full HD or at least 2k in size. And finally, number 3, our premium sets. Now these are the websites that you can find online. Typically, I like to use Envato elements and their own website 2020, which means that they have over 50 million images to choose from. And what that means is these premium photographers are creating scenes. So just imagine, for example, seen in the office and then they're setting that scene. They're setting that office. They are paying for the models. And they are taking hundreds of different images from all different angles of with different models doing different things. And the key benefit of those images is they're all taken in a controlled environment by a single photographer under a single lighting source with the same models, with the same team in the same room. So you get the idea. These images can easily be used in your projects. And for example, if you have to make a slight change with, for example, brightness, then you can do it in something like Adobe Lightroom. And then you can take all of those images that you download the four-year project, you can make a single tweet, for example, to the brightness or to the obesity, or to the vignetting or whatever you are doing with that first image. And you want to apply that same change to all of your images. For example, you've downloaded the set of 50 different images. Then you can simply apply that first change to the first image and then apply it through are a lot of your other images from the same collection. You can simply sync those changes. And for example, adobe Lightroom is going to apply those changes. You don't have to use Lightroom. I really like to use it because I'm an Adobe user. I use Adobe XD, I use Adobe Photoshop, I use Premier, and I of course uses Lightroom for all of my images. And I really liked that function, but it's not just in Lightroom. You can find it in other tools and software as are there. Just make sure to browse for it, but it's going to save you a bunch of time. So whether you're using client images, perhaps you're going to have to tweak a few things here and there. Because usually these photographers are taking fantastic images, but perhaps if you're creating website design for our slightly darker tone, let's say, then you're going to apply some of those changes additionally to those images. Usually photographers like to leave those images pretty raw. So therefore, designers are going to in turn make those changes. So for example, Saturation, Brightness, contrast and stuff like debt to those images. Once again, if you're using free images, deaths great, especially for low budget clients, because they don't really care how their blog looks like. But if you're working with clients who have reasonable budgets, then you can easily integrate these premium sets of images into your work from sites like Envato Elements for example. And I would really recommend because you can find millions of these different images. And in turn, they're going to make your work will look much more professional, much more polished than if you're just using these three images.
4. How to choose niche images: There are many different ways for you to choose niche images, but I'm just going to give you some tips and techniques about how I do it and how I've done it in the past almost 20 years. So depending of the niche where you're working in, there is a certain tone. So for example, if you are creating a website for men's suits, for example, there is a good chance that, that is a premium looking website. And they're trying to portray a tone of professionalism, of a clean design, of certain lifestyle that those suits are going to portray. So obviously you're not going to use something like bright yellow or a bright red doors and delight that you're going to most certainly use. These light gray color is dark gray colors, possibly a hint of blue, maybe even golden few places if you're working against the black color. So it's going to allow you to stand out, obviously white colors. So when you're choosing your images, make sure to have those things in mind because you're not going to choose your models against this yellow background and against the background, which is going to ruin the look of your suit. Obviously, you are going to adjust yourself to the tone. So what that means is you're going to look for models who are in these positions on, for example, properly exposed white backgrounds because it's going to be much easier for you to integrate those images into your work. Also models against the black background because you can use something like a screen obesity and then you can reduce that black background against your design. So therefore, you can easily extract your model from your background and easily adapted into your design. So this is obviously just one of the examples. Make sure to set the tone and see which tone your niche is. So therefore, you are going to look for images who are in that niche and in that town, which is really important because your visitors are going to align themselves much more easily if they see things that they understand, rather the things they don't. So for example, let's go back to that suit example. Just imagine that you are this gentleman looking for a suit for your wedding, for example, or for your friend's wedding or something like that. And you're looking for really high-class, something really upmarket, something really expensive, because you want to show up for that day and you want to look good. Then you visit this website, which is all screaming colors and all, I don't know, red, green, blue. It doesn't give you that feeling. It doesn't give you that wipe or the website which is selling these expensive suits. So something is not going to feel right. Something's that going to look right? Perhaps at the first glance you're not going to think about it too much. But as you start browsing, you're going to obviously notice that something is not good here. It's not going to give you that confidence to purchase that suit, because it's not giving you that vibe that you usually expect from the suit website. Then you go to the competitors website, who has all of these things that we spoke about for this particular example, you're going to feel much more at home there. You're going to feel much more comfortable with your purchase decision and you're going to feel much more at home, so to say, because your expectations are met by this website rather than this previous website with all of those screaming colors. So this is why it's really important when you're choosing images, make sure that you choose niche images, that your audience is going to relate easily. Therefore, your website in return is going to be much more relatable to your users and mobile apps as well for that matter, because your users are going to recognize these clues, these images, these colors, these styles, because they are used to them. So don't try to experiment too much and go wildly with your images. Make sure to stick to what you know and make sure to stick to what works, which is the most important thing. After all, make sure that your users feel comfortable when they visit your website or a mobile app. Because in return, that's going to bring in more conversions.
5. Free VS Premium: In this video, I'm going to show you some main differences when you're searching for images yourself. So these are the examples when your client does not have any images. So you have to search for images for that particular project. And I'm going to show you some key differences between free and premium images and what you suppose to look for when you're browsing for images. So here we have our website called Unsplash.com, which is usually what these designers are using nowadays. And there is also pixabay.com and many of these other websites. But usually Unsplash and Pixabay are the websites which are typically going to search for. So if we type in a suit, for example, like I showed you in previous examples, and like we talked about in the previous video, I'm going to just show you and compare differences between free and premium website. So as I said, we have a suit right here and I'm going to copy this text and I'm going to come to this website which is in vital elements, which is a premium website. And I'm going to simply paste it in right here. Search for the photos, but you can search all of these different things. So stock video, video templates, music, sound effects, graphic templates like printing plates and UI, UX kids, graphics presentation, dopants, photos, fonts and answer web templates, 3D and much, much more. So we adapt in suit. And there also have this website called 2020 width, 50 million additional images. Yes, that's 50 million additional images. And all of those images are really high-quality uploaded by all of these independent photographers. So if we go to that website which is 2020 stock and type in suit right here. So we have the exactly the same search query on all of these websites. And what we have right here on Unsplash is when we hover, we have this hunters race. We have another photographer, are neither photographer, another photographer. So all of these are different photographers. So let's go with, let's see, this is Benjamin Roscoe as well as this sort. Let's visit their profile. As you can see, they're taking images or skylines, bars, rivers, details. Right here we have some images of this person in a suit. But that's basically it is. You can see we have just three or four different images. And once again, these bar images all the way down. Once again, if I click on this image, for example, what I have right here is I can click, Read More to see all of these different details. And I can type the info and we can see that the camera is Sony, ISO 400. And these are the dimensions. So these are actually quite good at this stage. And you can see how many downloads and views this image had. But if we go back and click on this image, for example, then go to info. You can see it's five K. But once again, we have the same problem. So when I click on this profile, for example, you can see that we do have these many different images, but There is just one image of a suit. So let's just imagine that you want to use this particular color of suit, for example, and you want to use it in this environment. So let's say that indoors against these stairs and stuff like that. So you can just imagine that your model is going to be photographed indoors. For example, let's say inside of the shopping mall, making a shopping trip or Sunday lie dead. So you have to find images of that nature. Well, this is just one image and you're basically stuck. You don't have any other options. So if we go back and take a look at all of these other images of a suit. As you can see, there is not much more. Perhaps there is this one, but it has a Christmas tree inside of it. So it's not going to work for all of your occasions. And as you can see, there is not much option right here for your particular project. So we can go to some of these websites and we can find something which is going to work for us. So let's say that this is the shopping mall and this is the store inside of the shopping mall. So let's open that inside of a new tab. Let's quickly notice that this is eight K in size, for example. And you can further read this information. You can learn more about it. And we can see that it's four, requires tailoring designer workshop. But if I scroll here, you can see it's all from the same series. So you can see this same model, same sort of backgrounds, same lighting, same photographer. So you can see about images is a photographer. So all of them, and what's great about it is if I click, See More and open in new tab, you can see how many of these different images we have. So you can clearly craft a story from all of these images. So you can start on your page by, for example, welcoming your user to your shop, then explaining to them the quality of your suits and how they are made, how much time it takes for each person to saw a particular button, for example, and stuff like that. So you can really zoom in on the details with these images because they are 8 K quality and they're really huge. You can then tell them about how fitment is going to work when they tried to suit, how it makes them feel. When were the materials for the suit are sourced and so much more. So you can do that with these premium images. You can really tell a story rather than just showing a singular image. What that's going to do is it's going to make your website look much more professional, much more polished. Because once again, you can immerse your viewer into that experience because you have all of these different images from the same set. So let's take a look at them one more time. You can see that they are drinking coffee. We have fitment right here. We have testing of the material. We have fitment right here. We have, for example, agreement here we have some different materials. We have how the ti's going to fit. So you can clearly see just from one example alone for this suits, how many of these different images we have. So you can just imagine zooming in on these details and how much you can actually do with all of these different images rather than just with one single image. Finally, we can do the same here. So if I type in suit and I open it up, you have these different collections and inside of these collections. So if I open them up, you can find different photographers. So for example, I really like this suit. Maybe I can go in and browse for it, or maybe I can even take a look at this one. So these are the collections. You can open these collections from these different photographers and then you can explore additional images. So here we have this image and this model. So if I click right here and open up their collections, we have these different photos, we have different lobes, we have all of these different things right here. So we can explore and see all images from this photographer. You can clearly see that we have a bunch of these different images. But once again, if you don't fancy 2020 and all these different images, you can always go back to Envato elements because these two are the part of the same collection. So when you get this subscription to Envato Elements, which is a yearly subscription, this is going to be included. So if you cannot find an image here, then perhaps you can try on 2020. You can see it says by Envato. So those are just some different comparisons between free and paid images. Just make sure to understand that you cannot do high polished professional work with free images because of these limitations which I just mentioned, you have to use professional assets like images from, for example, Envato Elements. You don't have to use Envato elements. They are bunch of different websites out there. But because as I showed you what's included inside of your subscription, I really like them and I use them every single day for my projects. This in the return is going to make her projects look much more polished, much more professional. And if you're trying to sell you your designed to your client, for example, if you're trying to pitch them, are design a DEA, a design change, complete redesign, or Sunday lie dead. Doing that with these professional and polished images is going to be much more simpler than just by slapping some different images from different photographers with different exposures, with different models onto a page and then trying to sell them dead.
6. Image Optimization: One more key part when you are creating projects using these images, especially these huge images, is image optimization. What that means is software of your choice is going to reduce the size of the image, which in turn is going to upload much faster to the server, for example. So that in turn is going to load your website much faster and giving it a better Google ranking, which means better SEO. So basically this SEO optimization is extremely important, especially on a website design projects, on mobile design projects, It's really important as well, especially if you're pulling from the same database. So optimizing your images is going to give your users much better experience without losing any quality of these original images. So if I take you back one more time right here to Envato Elements. And then you can see, for example, this image that we were looking at previously. So as you can see, almost 8 K in size. So when I hit download, it's going to pull up all of these different class projects. So for example, I'm going to call it Image project, or our image project, for example. And I can simply create this project. Now what this means on Envato Elements is I can add all of these different elements to this particular project. So you can just imagine that I'm going to use all of these different images. I'm going to use different icons, perhaps even a WordPress theme. Maybe I need some music from my videos. So all of those different items that you downloaded from Envato Elements you can simply put into this project that we created. Just now, what this means is it's going to be much more simpler for your clients to license all of these items in case that such a thing is necessary. So for example, you can use one subscription for unlimited number of clients in each client can have their own projects, which means that licensing can be as simple as just simply copying one license and then sending them to your clients and danger and are going to contain this license and they're going to keep it. So there is no need for you to update these licenses every single year. Basically, once you pay for it, once you download it, That's it. So you can easily license all of these different elements, including images on Envato Elements for your projects. So if we go back to here, I can simply click our image project to create this project. Then I can simply add and download. And it's going to start downloading right here. Now you can see that this image is quite huge. It's actually almost 18 megabytes in size. So once it downloaded, now it's time to optimize our images. Now, image optimization is nothing really new. It's done by developers for decades now and by designers for a few decades now as well. Basically what it is, is it's going to simply reduce the number of pixels inside of your image. It's going to contain the size of your image is going to contain sharpness, is going to contain quality. But in turn, it's going to give you a much smaller file size because all of these different cameras are simply adding the file size, especially depending of the lens you're using and the camera model you're using. So not to bore you with too many details, I'm going to show you that in practice. So because I'm on Windows, I'm using something called riot. And if you're on a Mac, you can use something called image optimum of a lived a PDF file. And you can simply click the link to download whichever one you need annual want. And there are many different tools out there for both operating systems, both Windows and Mac. It's really all up to you to decide which one you want to choose. I choose, right? And I use it for years now and it worked fine for me. So if I take you back, you can simply see how the riot looks like. And there it is. It's really a basic tool and really want that you can easily learn to use and basically what it does. It, it has these two Windows and if I drag and drop my image inside, so this is the image that we've chosen. You can see that you can open image, you can batch import images, which once again is really important, especially if you're working with these collections. So not to lose any time. Just imagine you have, for example, 50 different images that you download it. And that's the great wave. For example, from Envato Elements. You might not even use all of these images, but it's great because they are there. You can simply select them all, download them all, put them into same collection, and now optimize them all using, right, for example. So right here I'm going to simply use one image. And what I'm going to do is I'm going to click and drag it to here. Then once it loads, it's going to prompt me this. So this file contains a high-resolution image. Rad can handle such images, but processing can be quite slow in this situation. They want to resize it for us. It's recommended the original image will not be modified. So just notice what was going to happen when I click Yes. It's going to give us this original size. So it's going to scale it new size, 100 by 100. So keep the aspect ratio. This is in percentage because you can see right here and you can lower it down into specific pixels. But I would recommend you to keep this percentage alike. So n is going to simply thought where it down basically to 100%. What this means is when I click OK, you can see the initial image right here. So 17.5 megabytes in size, and the new image is 3.4 megabytes in size. Now it's going to load much slower. So when I click right here and hover, you can see 17.5 megabytes. And this is the image right here. But when I optimize it, it's going to be 3.4. So when I hit save right here, I do want to replace it. I want to type in yes. Ends are going to basically replace this image. So when I click now and hover 17.5 megabytes, so let me refresh it. And you can see it's 3.4 megawatts. So basically we started with 17.5 megabytes. We are now at 3.4 megabytes. And what's most important of all, if I hover right here, you can see 79, 52 with 53, 04. And if we take it back to here, you can see these aren't exactly the same dimensions as they were with the original image. It just reduce the size of the image over all. So what this means for you basically is going to give your developers much more play room because you reduce these file sizes, you can go even further. For example, I'm using Adobe XD on a daily basis to design all of my projects. So you can just imagine that I'm going to put this AK image into something which is, Let's for example, say 1920 by 1080. And then I'm going to export it from exile in that particular resolution. So 1920 by 1080, which is going to even further reduce the space required. N is going to even further reduce the size of this image. So you might say, why not just use it like that straight away? Well, because you're pulling all of these huge images into your software of choice. In my case, Adobe XD is going to lag massively because these are huge files as you saw. So just this particular image alone is 17.5 megabytes. Majority of my files are around 20 megabytes. So you can just imagine entire design file is 20 megabytes, and this just one single image is 17.5 megabytes. So just keep those things in mind when you're creating, especially for web, because you're trying to make Google Optimize this website. And you are trying to make as many people find this website as possible. So it's really important for you to optimize these images. And when you're working with mobile design project, it's important as well because then the operating system and the app itself, it's not going to pull all of these huge images from database is going to just pull a singular image which is quite small in size. And it's still going to contain this huge quality debt originally had it went photographer, took that image.
7. Naming Structure: Same like with optimizing your images, it's really important to name your image is properly because that way they are going to be displayed properly on your website or on your mobile app. It's going to be much more simpler for your developers to find these images, to include them in code. And it's going to be much more simpler for code to pull these images from data bases. So let me just show you what I mean on the image that we just downloaded. So if we take a look at this image, I went ahead and downloaded it again in the same project. So you can see the name until year, dash PA to VMs, C4 or whatever. And this is the reduced the image. So as you can see once again, 17.5 megabytes, so original size and you can see the title right here. And if I take your right here, you can see that we have a name like so. So what we can do with this image because it's going to be taken into our software of choice. In my case, Adobe XD. In your case, it might be Sketch figma Photoshop Illustrator doesn't really matter. So what you can do with this image is you can right-click on it and rename it that way. That way, when you drag it and drop it into your software of choice, It's going to remember that name and then when you export it, it's going to export it like that. The other thing you can do is you can go to something like Lightroom for example, and you can add it metadata of this particular image, which is going to give you much more detail about when this image is, has been shot with which camera, with which lens, with which exposure and so on. So this might be required from you if you're working on some type of graphic design project, for example, for editorials and stuff like dad, especially if that image is going into print on huge canvases. So some huge high-end clients are going to require all of those information for him, you. So just make sure to understand that no matter which kind of project you're working on, there are some requirements from you, but for majority of these web projects and app design projects, simply rename your file is going to be good enough. So if I take you back one more time right here to our image, what you can do is just imagine that this image, for example, is going to be located in your hero section. What you can do is right-click Rename and simply call it hero, IMG. Or if you're a developer wants to add dashes, then add hero, dash, IMG, or underscore like this. So here underscore IMG. So this really depends from developer to developer. So when you're starting your design, if you have access to your developers contact information, perhaps simply ask them this or simply ask your clients so they can ask your developer. So this in turn is going to be much more faster for you when you start creating so that you can rename all of these images and assets, for example, like icons in illustrations before you start working, then later when you start working. And then you have to rename all of these files once you actually include them in your software of choice. I know that in Adobe XD it's really a huge pain when you include images like with this name saw till the arrow, 58 to whatever. And then when you try to export them to your desktop and you want to send them to our developers, then you have to manually rename all of them in your export folder, for example. And especially if you share them with something like sapling, for example, with your developers, then you have to rename them in Zeplin. So it's really a hustle. If you can rename all of your images or at least some of your images up front, because that way is going to be much more simpler for you to design and also make sure to ask your developers what kind of abbreviation due day like. Also, if you, for example, are using this hero image and just imagine then if I take you right here, perhaps this is going to be about us. This going to be product 1, this is going to be blog section one. This is going to be testimonial one or whatever. Makes sure to rename all of your images properly. So for example, if you're a testimonial has four images, then ask your developer about abbreviation. So for example, testimonial dash one, testimony, dash two, dash three, dash four and whatever or underscore or without any dashes, underscores and so on. So just testimonial for all of them combined. Make sure to ask them, do they like caps, Caps Lock turned on. But majority of developers don't. Majority of developers at least that I know, like to use images with small letters and numbers so they don't like them to be caps look for example. So these are just a few tips and techniques I like to share with you guys because I think it's going to improve your time with these projects massively, and it's going to improve the quality of your delivery to your clients massively.
8. Your Class Project: Your class project for this class is to create some kind of image combination so you can use either free or premium images. It's really all up to you. What I just want you to do is to use your favorite software of choice. So you can use Photoshop, Illustrator, XD, sketch, Figma, whatever software you are using, perhaps even Canva, if that's your thing and you're like using Canva. But basically what I want you to do is to create a project of your own, using your own images so that those can be either free images from websites like Unsplash or Pixabay, premium images from websites like Envato Elements and like I showed you, basically what I want you to do is to create images that relate to each other. So that can be either in color or in class or in style, or in basic format or whatever else you want. So like for example, I showed you with the TI example, perhaps you can use something with those suits. Maybe you can combine colors of the suits together just to put some kind of a mood for that particular project of yours. You can use car images and you can use particular car style. So for example, if you want a luxury, then you're going to use limousine. And usually those limousines are black color. But even further from that, is that car on the road, is that car parked, for example, on some fast in place like Monaco for example? Or is somebody getting out of that car like celebrity. So just make sure to pay attention to those tanks. Choose whichever niche you want, whichever format you want. But what I want you to do is to put all of those images together. It doesn't have to be many. You can use 56 images, something I did silly to put them on a one document. You can use A4 or letter size if you are from the US. Simply put them together, saved him out as a JPEG and upload them to your class projects Old Lu like to see what you guys can come up with. And I'm really interested to see how do you optimize these images for your projects and how do you create these looks and feels for your own personal projects? Because once again, I'm really interested to see what you guys can come up with and I can wait to see them in your class, projects.
9. Outro: So there we go. We have reached the end of the class. I really hope you liked this class and I really hope that you are going to pick a few things here and there about optimizing your images, about choosing your images, putting them in these different categories, in these different collections and how you're going to move on further with your projects are really encourage you to check out the read me file because I'm going to put a few things in that PDF. You can simply click on the links. It will take you to whichever link you want to go to. And I really hope that you're going to use at least these image optimization tools because I truly believe they're going to transform your work. And there are going to basically improve your relationship between yourself and your developers because they're going to like you much more. Because you optimize all of these images and you saved them a bunch of time that they would lose. Otherwise, I really hope that you are going to take notice. And next time when you start selecting these images, put them into sets and make sure that they're using the same tone, using the same colors, they're using the same model, same lighting. Because just that alone is going to bring much more professionalism to your design and is going to make it stand out and your clients are going to just love you for it. So thank you once again for watching this class and I really hope to see your work inside of the class project and until next time, take care.