Now that we have gotten a general idea of our layout with our wireframe, it is time to add some visuals to our app.
Colour Palette
nearly every major app has a distinct colour palette: Youtube is red, white, and black while Snapchat is yellow, blue and white. to strengthen the appearance of our app we can also choose a colour palette for our apps.
As a quick way to generate a colour palette I recommend using Coolors.co. Here we can generate colour palettes by pressing spacebar until we get one we like.
Once we are happy with the colour palette, we can copy the individual colours by clicking the codes at the bottom and using cmd+c. This is called a Hexcode which turns the exact colour into numbers and letters.
We can now make an object in out Adobe Xd document this colour by selecting it, clicking the colour block next to “fill” or “border” and pressing cmd+v.
Inserting Images
Rather than creating every image in our app from scratch, we can use online images from places such as Google Images. When we find and image we like we can copy the image by right-clicking and selecting Copy Image.
We can then insert the image into Adobe Xd with cmd+v.
We can also use a shape to mask our image by right-clicking and selecting Paste Appearance.
We can also change the appearance of other elements in out app using the following panels:
Appearance Panel
Here you can change the fill colour, border colour and roundness of object corners.
Transform Panel
Allows the height, width, angle and position of the objects to be changed.
Text Panel
Here you can modify font type, size, text alignment, and other text options.