From the course: Principle for UX Design (2019)

Creating and adding artboards - Principle Tutorial

From the course: Principle for UX Design (2019)

Start my 1-month free trial

Creating and adding artboards

“

- In this exercise, we look at using artboards. by selecting file, new or Command + N. Every microinteraction you create needs to appear on an artboard or between artboards. and you're on the right track. Right now you have a default artboard showing. To choose a specific size artboard, click on this little pop-down here Size Presets. And when it opens, a world of choice opens up to you. You get everything from smartphones, to TV, and even artboards you can use to send ideas or concepts to Dribbble, Twitter, and Instagram. For me, a major oversight is the non-inclusion If you are developing for Android, use the custom sizes to create the artboard. A common Android size, is 360 wide 640 high. And if use my scroll wheel, I can scroll up and see the artboard itself. Another major oversight is Android tablets. And if you want to use an Android tablet you can probably go with the iPad 768 by 1024. You can select an artboard and press Command + D Or you can do this. So I'm just going to If I click on an artboard, Command + C and then just Command + V and I have another artboard. is mix and match artboards. so I'm just going to move this over so you can see. So I've got three artboards here which are basic iPhone size and I decide, you know, I want this first one to be a Apple Watch. So I'm just going to select Apple Watch and you notice they all change. Now you may be also thinking "Hey Tom, what about resizing one artboard?" If I do that, here's what happens. They all change. Okay, so I'm going to undo that. Now if you want to move the artboards around to change the flow, you can't just move them to change the flow, you can't just move them around inside the interface around inside the interface you can see I can't grab one. You have to move them inside the properties You have to move them inside the properties panel by changing the order. So there you have it, artboards. The bottom line is you can only prototype for one screen The bottom line is you can only prototype for one screen size per project and you can't move them around size per project and you can't move them around on the canvas to accommodate flow changes. on the canvas to accommodate flow changes. What this should tell you is Principle is aimed What this should tell you is Principle is aimed more toward prototyping microinteractions more toward prototyping microinteractions and screen transitions then prototyping an entire project with complex interactions. an entire project with complex interactions. This is not a bad thing because Principle is ideal This is not a bad thing because Principle is ideal for element level prototyping. for element level prototyping. As you have seen by using just a couple of artboards As you have seen by using just a couple of artboards you can rapidly evaluate and iterate your ideas before investing in valuable development time.

Contents