Setting your color profile and preferences for UI design - Affinity Designer Tutorial

- [Instructor] Affinity Designer is a great tool for a multitude of creative projects. But in this course, we'll focus solely on UI/UX design. Since we're designing for the web, as well as a multitude of handheld devices, there are a few things you need to change in your preferences. So let's take a look at the preference panel. If you go over here to the top left hand corner and click on the Preferences option, you'll be presented with this window. Let's start with the General settings. In the General settings, you'll see that there are a few items selected by default. What I'd like for you to add is the Copy item as SVG. The reason being is sometimes when you copy an item, it will rasterize that item, and we want to make sure that it defaults, if there's vector information, we want it to default to SVG, so make sure that's checked off. Also, if you move down here to the bottom, it says Insert filler text as text. Let's go ahead and check that as well too. This will allow you to take the filler text that is placed in by the text box and actually make it editable text. If not, it'll just put in a image placeholder of texts rather than actual editable text. So let's make sure that's checked off. Go back to the main menu, and let's take a look at the colors. I have the color display already set up to Display. You may have a defaulted at sRGB down here at the bottom by default. Make sure it's set to Display. The other options are okay. There's nothing else here unless you see something specific, but they're more wrapped around imagery and working with the graphics part of things for print. Now, if we go back to the main menu, let's take a look at the User Interface option. Under the User Interface, you can see here, there's a few options that you could change. One that stands out, if you don't like the dark interface, you may prefer a lighter interface. Just go ahead and click on that, and you'll see that the whole display changes to a light display. I like dark so I'm going to leave it there by default. Also down here, what I'd like for you to do is make sure that your Pixels are set to 1 so that we only have one decimal place for pixels. So 1.0, 1.3, something like that, but we want to work close to whole pixels as much as possible. We don't want like 0.0135. In design, that's going to be really hard to deal with in code, so make sure that it's set to one pixel. Now down here below, you'll see Show lines in points, Show text in points. We want to make sure that we uncheck Show text in points because we want it to show in pixels, not points. We're dealing with the web most of the time, we'll work with pixels. If you're working with some applications, as far as designing for Android or designing for iOS, they may work with a point system, then you want to make sure that's checked off. So it really depends on if you're working for the web or if you're working for app development specifically. Okay, let's go back. Under Tools, I want you to make sure that, if you go down to the bottom here, I want you to make sure that you have it set to 1 pixel, or Modifier Nudge Distance, 10 pixels. So the modifier is when you hold the Shift key and hit the left or right arrow or up and down, it'll move it 10 pixels rather than 1 pixel. So make sure that that's set to those two numbers. And that's it. That's everything you need to know about the preference panel. You should be all set up to do UI design, and now we can move on to the next section.