
To show this box will be a tappable area, we'll include an arrow icon. For now, use placeholder text, and style it up as you wish. To the right of this, we need a white rectangle (260 x 100, x: 108, y: 238, #FFFFFF with no border) on which we'll include the team member's name as a header and job title as a subhead. Draw a grey square where the team member's photo will sit (100 x 100, x: 8, y: 238, #D0D0D0 with no border). Let's start putting together our list of team members. Mine is Helvetica Bold, 20, #FFFFFF, x: 18, y: 123. ), click to create a header for your team page. If you want to change colours using hexadecimal values, click on the colour icon, and when the native colour picker pops up, select the second tab at the top and change the drop-down to 'RGB Sliders'. To send it all the way to the back, or go to To turn the border or fill on and off, click on the 'eye' icon on the right. ), draw a pink rectangle (#FF2BC2 with no border) in Artboard 1 and set its dimensions to 375 x 230 using the property inspector panel on the right.

Let's focus on Artboard 1 (the team page). To unlock them, you can use the shortcut again or click the 'lock' icon. To lock these status bars in both artboards so their properties cannot be modified.

Then copy and paste it into Artboard 2, so both artboards have the status bar on the top. From Finder, drag 'iphone-status-bar.svg' to the top of Artboard 1 ( I've put together a folder of assets that I'll be using throughout this tutorial. ) selected, you can press the spacebar at any time to pan across your design. Change both Artboards' background colours to black using the property inspector on your right. ) to create a second artboard, then change their titles (by double-clicking on them) to 'iPhone – Team Page' and 'iPhone – Detail Page'. Launch it, take a look at the welcome screen and start a new design with an iPhone artboard template. Start your design by selecting the iPhone artboard from your template options What if there were a single tool that meant you could enjoy a fully connected workflow? Where you could design and prototype your experiences in minutes, share them on the web to capture feedback, then make edits easily without breaking your stride? The goal with Adobe Experience Design CC – or, as we call it, Adobe XD – was to do just that. But instead of making your life as a designer easier, switching between all these tools only decreases your pace. Several design tools each tackle a different part of the problem. From there, you share or test your prototype, gather feedback, and return to the middle of the cycle to iterate, switching from tool to tool as you refine your design. To come up with the best flow, you export all your assets and bring them into another tool to build a prototype. Then you sketch ideas on pen and paper, and later transfer your thoughts to a design tool. If you are a designer creating user experiences for mobile apps or websites, you may be used to using multiple tools for different tasks when Get a 15% discount on Adobe Creative Cloud here
