Tutorial 3: An Introduction To Basic Shapes And Dimensions

Introduction

Welcome to day three of your UI design short course! Yesterday, we got familiar with the wonders of wireframing—and got stuck in with drawing our own wireframes for our chosen app screens. Now that we’ve laid the foundations for our app interfaces, it’s time to get creative! 

Today, we’ll return to our Adobe XD artboards as we learn the basics of shapes and dimensions. We’ll create our login and sign up buttons, and—here’s the best part—design our very own app logos! Don’t forget: if you still have your paper wireframes from yesterday’s tutorial, keep them handy. They’ll serve as a useful reference for your digital app screen layout. 

Let’s look more closely at what we’ll be learning today: 

1. Understanding basic shapes 
2. Boolean operations 
3. Creating buttons for our app screens
4. Creating the logo for our app screens 

Day three, comin’ in hot—let’s get stuck in!

1. Understanding basic shapes 

Aside from the text, color, and imagery, most of what you see on an app screen is composed of various shapes. Shapes make up the core elements of an app screen, and most interfaces have more of them on the screen than meets the eye. Shapes are created using points and lines. Together, points and lines form paths that have a beginning, end, and direction. 

In Adobe XD, shapes can be drawn two ways: with the pen tool, or with the built-in shape function. The pencil tool allows you to draw shapes digitally in the same freeflow way as drawing a shape with a pencil and paper. For now, we’ll be focusing on the latter, creating shapes with the built-in function.

Adobe XD comes with four default shapes:

1. Rectangle
2. Ellipse
3. Polygon
4. Line

Notice some shapes missing? Good eye! Squares and circles aren’t listed among these options. This is because squares are created using the Rectangle tool, and circles using the Ellipse tool. With the shapes listed above, you can create almost anything.

Remember XD’s interface from tutorial one? You’ll find these default shapes, as well as the pen tool, in the toolbar on the left hand side.

2. Boolean operations 

So, we’ve covered the basic shapes to master in Adobe XD. But what if you want to create something much more complex than the choices listed above? 

Let’s think about some of the most well-known logos. If you look closely, most complex shapes can be reduced to basic shapes, like circles and rectangles. The YouTube app icon is simply a rectangle and a triangle combined. The iOS weather app icon is a combination of circles and lines. To combine the right simple shapes to create your logo, you’ll use something called a Boolean operation. 

A Boolean operation is a powerful geometric tool found in most UI design applications. There are four main types of Boolean operations: Union, Subtract, Intersect, and Exclude Overlap. These options will pop up in your property inspector once you’ve selected two or more shapes that are overlapping. Using Boolean operations, you’ll combine basic shapes to create the logo for your chosen app.

Let’s look a little more closely at each Boolean operation, and what they achieve: 

• Union combines shapes together to create one solid shape.
• Subtract takes whichever shape is on top and will delete it from the shape below.
• Intersect only displays overlapping areas.
• Exclude Overlap will show everything but the overlapping areas.

Considerations when creating shapes for your app

So, we’re all up to speed with basic shapes and Boolean operations! Before we jump into the practical part of this tutorial, let’s quickly look at some key considerations to be aware of when designing buttons and shapes for your chosen climate change app. 

Remember yesterday, when we talked about touch targets? Here’s where touch targets really matter. When designing buttons, it’s always better to go too big than too small. Smaller buttons are harder for users to tap on than larger ones, and—at the end of the day—you want all your users to be able to tap on the buttons you’re creating with ease. To learn more about optimal touch target sizes for buttons, we recommend giving this set of guidelines by UX movement a read. 

Another consideration is text. What text will be on your buttons, and how big will the text be? It’s a good idea to leave some room for experimenting with different fonts and spacing, as we’ll be exploring in tomorrow’s tutorial. For now, make sure your buttons are big enough to ensure the text can a) fit on the button comfortably, and b) be read without strain. For guidance on this, don’t hesitate to refer back to the screens presented in tutorial one.

3. Creating buttons for your app screen

To create a new shape, click on the “Insert” button in your toolbar, go down to “shape,” and select any shape you’d like. Alternatively, you can use any of the keyboard shortcuts, like R for rectangles, to define which shape you’d like to create. 

Once you’ve chosen a shape, click, hold, and drag to create it. If you want to create a square or circle, hold down the Shift key while you do so. If you’ve created a rectangle, you’ll be able to see two types of points: hollow points, and points with a dot inside them (see below). You can use the hollow points to change the size of the shape. The points with dots, however, are the radius editing handles. Try clicking and dragging any of those handles, and you should be able to see the rectangle turning into a rounded one.

Once a shape (called a layer) is created, it’ll be available in the Layers Panel, which is on the left of XD’s interface (next to the toolbar). You can select a shape from the Layers Panel to edit it. Right-click on the layer, and you’ll find the option to rename it. Double clicking on the layer will also serve the same purpose. For example, we’ve renamed the layer from “Rectangle 1” to “Login Button” as it’ll be the primary login button of our app screen.

4. Creating your app’s logo 

If you refer back to our original two app screens, you can see that we’ve created two logos; a chat bubble logo for the Activist app, and a leaf logo for the Ethical Eater app. For the purposes of this tutorial, we’ll be showing you how to create these two logos—but of course, feel free to use these steps as a guide for creating your own logo for your chosen climate change app. 

Let’s start off by creating the leaf logo for the Ethical Eater app. If you’ve chosen the Activist App, just skip down to the tutorial below.

Step 1: Use the Artboard tool (located in the toolbar on the left) to draw a small artboard. Resize the artboard to 200 px x 200 px in the properties inspector. Don’t forget to rename your layer “Leaf Logo.”  

Step 2: Select the Rectangle shape from the toolbar, hold down the Shift key (we need a square) and drag diagonally. To start off with, make the dimensions 110x110. You’ll be able to see (and adjust) the height and width of the square in the Property Inspector.

Step 3: Click on one of the radius editing handles of the square and drag it toward the center to turn the square into a rounded square, with a radius of 33px.

Step 4: Right-click the Rectangle layer in the Layers Panel, duplicate it, and position the two rounded rectangles as shown below:

Step 5: Select both “Rectangle” layers from the Layers Panel (press Shift to select both) and apply the Boolean operation “Intersect” from the Property Inspector. You should have something like this:

Step 6: Create a small rounded square as shown in the figure below using the dimensions 38px on all sides. Adjust the corner radius to 14px.

Step 7: Duplicate the new small rounded rectangle and position it as shown here:

Step 8: Now select these two rounded squares and apply the “Intersect” Boolean operation. By the end of this step, you’ll have the leaf logo for your Ethical Eater app! From the Layers Panel, select the larger of the two shapes. Then go to Fill in the Property Inspector. Once selected, you’ll be presented with a color palette to choose from. We’ll discuss colors in detail later on, so just choose black or gray for now.

Step 9: Group the layers by selecting the two shapes in the layers panel, right clicking, and selecting Group from the drop down menu.

And voilà, you’ve just created your first logo! Working with shapes for the first time can seem a little daunting, but understanding Boolean operations in practice is a fantastic skill to have.

Next, let’s take a look at how to create the chat bubble logo for the Activist app. This logo is slightly more straightforward.

Step 1: For a faster way of creating your artboard, start a new project via the Adobe XD homepage and select ‘Custom Size.’ Set the height and width to 200px.

Step 2: Select the Ellipse shape from the toolbar, press the Shift key, and drag diagonally to create a circle. Next, select the Polygon shape, press the Shift key, and draw an equilateral triangle.

Step 3: Position the triangle on the bottom left of the circle as shown in the figure below:

Step 4: Select these two layers from the Layers Panel and apply the “Union” Boolean operation. You’ll end up with something like this:

Step 5: Doesn’t it already look like a basic chat bubble? Let’s go ahead and increase the border width. Select the shape, go to Border present in the Property Inspector, and increase the width to six. 

Your chat bubble logo is now ready! Simple, right?

Summary

So there we have it—day three is done and dusted! Give yourself a pat on the back; we covered a lot today. As mentioned before, don’t be afraid to put your newfound knowledge of shapes to the test by adding a few embellishments to your climate change app logo! 

As you progress through these tutorials, it’s also a good idea to refer back to your most commonly used apps and navigate them with your new UI designer eye. How are they using shapes? What does their logo look like? How would you do things differently? 

Tomorrow is all about text and typography. We’ll take our app screens to the next level with some original copy, and learn the basics of typesetting. See you then!

Daily task

Add login and sign up buttons to your app screen, and design your app’s logo. For an extra dose of inspiration, check out our blog post on the best app login screens on the block: 9 Of The Best Login Screen Examples