5/21/2023 0 Comments Responsive resize in xd![]() Let me keep building this part of the page out. Using hex codes instead of randomly picking a color allows me to make sure that I'm using the same color throughout my mockup. Finally, I'll adjust the color to a mustard yellow using hex code E0D15C. ![]() Next, I'll change the font to Bely Display and make the size 48. I'm going to create a textbox and type in WCL, which stands for Wisconsin County Library. For my mockup, I don't need to drop in an image though, because my logo is just simple text. Here's a quick pro tip: Adobe XD lets you add images really easily by creating a rectangle first and then dropping the image inside of it. Next, I add the logo to the far left side of the navigation bar. I'll set the background color of the navigation bar to black by clicking the "fill" option and "draw appearance" in the Property Inspector. ![]() I'll draw a rectangle for the background. I personally prefer to work from the top of the page down, but you can design your pages in any order you like. Now I'll move this second artboard below the first one so it's easy for me to track the flow of my work. This makes it a little easier to refer to the wireframe when I'm making the mock. So I'll pop over to the toolbar and I'll pick the artboard tool and add a "web 1920" artboard directly below the homepage wireframe. Because my wireframes are all neatly lined up, I'm going to create a new artboard below the wireframe that I'll be using for reference, which is the homepage in this case. It's always a good idea to have the wireframes in front of you as you create mockups. First, I'll open Adobe XD and select the artboard that has the wireframe of the library website homepage on it. I'll go through steps to create a mockup from my library website homepage based on the wireframes I created earlier in the course. It's time to start using what you've learned to create your own mockup in Adobe XD.
0 Comments
Leave a Reply. |