![]() Keep focusing on the transactions bar and make sure that the Rectangle tool (R) is still active. Using the same tool, create a 30 px square and place it as shown in the second image. ![]() Move down to the right side of the transactions bar. Using the Rectangle tool (R), create a 60 px square and place it as shown in the first image. Step 3įocus on the left side of that categories bar. Using the same tool, create a 240 x 150 px shape and place it as shown in the second image. Pick the Rectangle tool (R) and remember to hold down the Shift key to easily create a 30 px square. Move down to the top-left corner of the cards bar. Use the smart guides to place this new shape exactly as shown in the second image. Hold down the Option and the Shift key and simply drag a copy of your selection to the right, as shown in the second image. Make sure that this square stays selected. Use the same appearance attributes for the rest of the objects that will serve as controls. Place it as shown in the following image, disable the Border and set the Fill color to #646E83. Pick the Rectangle tool (R) and hold down the Shift key to easily create a 20 px square. Take a new look at your paper sketch and let’s add the controls to this app UI design. How to Add the Controls to the Finance App Design Step 1 In the categories bar you will add a row of transaction categories while the transactions bar will be used to list the transactions history for the selected card. Below the navigation bar you have the cards bar where you will add the available cards and the relevant information for each card. These will be the main components of your financial UI design.Īt the top, you have the classic navigation bar where you will add the control buttons for your app. Using the same tool, create a 414 x 83 px shape and place it as shown in the second image, and the create a 414 x 446 px shape and place it as shown in the second image. Make sure that the Rectangle tool (R) is still active and create a 414 x 150 px shape. Establishing the proportions and the spacing between each section. At this moment your only worry should be the overall structure of the app UI design. Disable the existing Border using that check box and then click the Fill color well and change the color to #646E83.ĭon’t waste time stylizing objects or adding too much text content in this initial phase. Use the smart guides to place your shape as shown in the following image and then go to the Property inspector. Pick the Rectangle tool (R) and create a 414 x 70 px shape. Take a look at your paper sketch and start with the four main sections (or patterns) of the app design. Now let’s start the work on the wireframe. Let’s open Adobe XD and select the iPhone XR/XS Max/11 (414 x 896) template to create a 414 x 896 artboard.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |