Now hit CTRL-V to paste the name layer again, hold shift, and drag it over to the right. Again, pay attention to good white space you want a good amount of distance between the top of this subtitle and the bottom of the name.
Change the font size to 18 and the weight to regular. Just select it and hold shift to drag it down. Initially, it will show up directly on top of the previous copy. With the select tool, select the name type layer you just created and hit CTRL-C to copy, and then CTRL-V to paste. I'm using the free Open Sans font at size 32 and bold. Give yourself and your UI elements room to breathe. In UI design, it's always advisable to follow good white-space practices. Now select the Type tool on the left sidebar and left click where you want the first letter to start. This should give us enough room and size to design our website mockup on a large viewport. But for this, we'll simply left click and drag out an artboard with the size of 1200x900. It gives you the option on the right to choose from a list of predefined artboards for different devices. The first step is to click on the Artboard tool on the left toolbar. View his portfolio here and personal website here. Note: I received written permission from Dennis Schäfer to use his Behance portfolio and creative works as the example portfolio for this project.
Adobe xd prototype tutorial download#
So with that said, if you prefer to watch video tutorials instead of reading written tutorials, you can watch everything I'm about to teach you below:Ĭlick here to download the project assets Reason being: it's very feature lacking and the only features I used are ones that should remain present in future builds. While I wrote and recorded this tutorial at a time when Adobe XD is still in beta, you should be able to follow along perfectly fine for years to come. Adobe XD (Experience Design) is Adobe's response to the popularity of Sketch.
I'm exclusively a Windows guy, so I haven't had a chance to experiment with Sketch. As someone who has spent the last 15 years using Adobe Photoshop for designing websites, Adobe XD is a breath of fresh air.