Now that you have created a style guide for your app or website, you can start to create the actual content that will be used in your app. This step combines the sketches and assets you have gained to start to bring your vision to life.
An easy way to do this effectively is with photoshop. The layers in photoshop will show you each individual asset being used in your composition.
- Create a photoshop document in the size that the phone/tablet screen of your app or screen size for your website will be.
- This will make sure that your elements are the exact size, color mode, and resolution they need to be to bring into Adobe XD for your prototype.
- Make sure your document is in RGB mode and your elements are 72 pixels per inch.
- Recreate your sketches, using the elements from your style guide.
- Recreate each page in your sketches, using text boxes, shapes, images, icons, textures, and colors to bring your ideas to life.
- Make sure that you use guides to make sure that elements that are in the same place in more than one page are in the right spot. You can use the paste in place option to make sure that elements you copy from one page are in the same exact place in another page.
- You will not be able to add your videos or sounds at this time but you can save those in a specific folder so that you know where they are. Make sure that all your images, videos, and sounds are made by you, royalty free from online, or properly credited to the person who made them. For things like a keyboard for mobile apps, you can just go online and find an image of the keyboard that will be used to simulate what it will look like when it pops up. There are certain icons that you will be able to get from Adobe XD UI kits, or you can make them yourself.
- You may want to create separate documents for each page of your app or website, or create them on multiple art boards within the same document.
- Add all your elements to a new shared library, specifically made for your app or website.
- This will help you access your assets easily.
- Shared libraries in Adobe can be used across different apps.
- Name all the elements in your library as you go so that you can easily find them later. Do not skip this step! it will help you stay more organized and save you time down the line.
Once you have your content designed in Photoshop, you can easily import the files into Adobe XD.