Discover the final steps to perfect your website wireframe. The article walks you through the process of making adjustments to enhance user experience and aesthetics.
Key Insights
- The article explains how to perfectly align your cart to the top right corner of your website wireframe using guides and the alignment tool. Working within a 150 x 150 pixel area allows for a neat and balanced look.
- It further details how to adjust and resize your search bar outside of the 150 x 150 square, maintaining proportions and center alignment. This ensures that the search bar does not overshadow other important elements on the page.
- The article concludes with a demonstration of how to fine-tune your design, such as adjusting the stroke of various elements to ensure uniformity, changing the width of the title or the separation between buttons, and rounding out the edges of buttons and other elements for a more aesthetically pleasing look.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
In this video we'll be finalizing our website wireframe. So throughout this video we'll be making a couple changes to our website wireframe, however feel free to make changes as you see fit and really customize this to be your own.
The first change looking at this that I'd like to make is by zooming in to the top right hand side, scrolling up with the mouse, and scrolling down while holding CTRL. And I'd like to move this cart within the top right 150 × 150 pixels corner. In order to do so I'll want to create guides.
So I'll click and drag a guide and release it about 150 in from 1920 or at 1770. I'll release and I'll see that the guide disappears. This is because the guides are currently hidden.
Therefore in order to reveal them I'll right click and select show guides. And we'll see that the guide I previously created was hidden, but once I've revealed the guides it's still there. I'll then right click again to unlock the guides and click this guide.
And within the x value I'll do 1920 minus 150 giving me 1770. This cart is well within 150 × 150 and I want to align it within this area. So I'll go into menu graphics, create a square within the area we've defined.
Clicking and dragging from one intersect to the other so that I can align the cart between the two. I'll then hit v on the keyboard for the selection tool and hold shift as I select the cart as well as the box I've just drawn. Going to my alignment options, I'll go to the control bar and select aligned key object and make sure that my square is selected as the key object making sure that I'm aligned horizontally and vertically.
I can then delete the square I've created for alignment and my cart is now aligned within 150 × 150 as a good parallel to the logo on the top left hand side. Next I want to make sure that our search bar is outside of this 150 × 150 square. To do this I'm simply going to select it and I'm going to drag it over to the left holding shift so that it's still aligned to the center of the title bar.
I'll also resize this search bar so it's the same height as the cart. To do this I'll drag the bottom while holding shift to maintain proportions and drag the top to the top of the grocery cart while holding shift to maintain proportions. As we can see this bar is now far too large so let's zoom out and again drag it to the left while holding shift to make sure that it's outside of the 150 × 150 box and we now need to move these left two points of our search bar shortening it a little bit so it's within these guides.
To do so we'll hit A on the keyboard for the direct selection tool and all we need to do is select the top left anchor and holding shift select the bottom left anchor. We'll then drag to the right making sure to hold shift so that we drag only horizontally and we'll release when we're intersecting with these guides. Let's make one more change hitting V on the keyboard and selecting both the search bar and holding shift selecting the cart to make sure that our stroke for both is set to one and we'll hit ENTER.
Next let's zoom out and looking at our logo on the left hand side it looks like this ellipse or our circle isn't quite one stroke as it looks a little more faint than our right hand strokes. To double check this we'll select the ellipse and sure enough it's less than one point so we'll double click our stroke within our control bar type one and hit ENTER. From here our title bar looks good however feel free to adjust the width of our title and the separation between them.
Additionally if you'd like to make changes to our buttons we can do so and using live corners we can round out the edges and release. If we want to apply the same round edges we can copy the dimensions of these rounded edges within our control bar for the corner radius and we can see it's at 37 pixels and if we click on our other rectangle we can use live corners to release around 37 pixels and simply fix it again within our control bar double clicking and typing 37 and hitting enter. As one final change let's zoom in to our cart and scroll changing our perspective and let's round out the edges of this cart.
To do so I'll hit A and select this middle anchor and then drag the live corner in. Let's do the same thing on the bottom middle point dragging it in so that the cart is a little more rounded. Finally let's zoom out using the zoom tool shortcut Z on the keyboard and holding ALT I'll click.
We've now finished up our website wireframe let's right click and hide our guides to get a better view and we can now save our work using CTRL S on the keyboard to save. In the next video we'll begin working with charts on a new project. See you there!