Icons and Shapes

Fonts

Fonts play an important role in design and communication. Different fonts styles can evoke different emotions and affect the overall tone of the text. An appropriate font can improve readability and make the text more accessible. Fonts can add visual interest and aesthetic appeal to a design. Consistent use of a specific font can help to establish brand identity.

Google Fonts

You can add a custom font to Sketch by installing it on your Mac and selecting it in the Sketch text styles menu. Sketch also supports Google Fonts, which can be accessed directly from the text styles menu, and third-party plugins allow you to import and use other font formats, such as web fonts. The default font for iOS is San Francisco from Apple. I’m going to use a different one which is Nunito Font from Google Fonts.

Icons

Icons provide visual clarity to quickly and effectively convey a message or idea without requiring written text. They take up less space than text, making them useful in compact interfaces such as mobile devices. Icons may make interfaces more intuitive and easier to use by reducing the need for written instructions. They add visual interest and aesthetic appeal to a design.

Sketch App Sources

Google also has delightful and beautifully crafted icons for everyday actions and items. Also, you’ll find everything you need in Sketch App Sources, like the Eva Icons and Coolicons.

Shapes

Shapes are one the most common type of layers in Sketch documents which you can add and edit pre-made shapes or create your own using the Vector tool. We usually use it for layout, cards, and content. What is interesting is that we can create a beautiful pattern using shapes.

Editing Mode

You can customize your shape by editing it. To edit a shape in vector editing mode, double-click or select it and press the Enter key. When you enter vector editing mode, you’ll see circular points connected by paths. Click on any circular points and drag them to change the shape. To add a new point, hover over a path between two points and click to insert. To delete a point, select it and press the Backspace key.

Curved Path

The paths between different points on your shape are straight lines. You can also curve it. Double-click on a point connecting straight paths to change it to a curved path. When you change a point to create a curved path, you can use the two handle control points that appear to edit the curve.

Rotate Copies Tool

The Rotate Copies tool takes a single shape and rotates copies of it around a single point. It is an excellent tool if you know how to use it correctly. You may combine several shapes, then rotate copies of those shapes to create a beautiful mandala-like pattern.

• Go to "Layer" in the menu bar, click on "Path," and then "Rotate Copies." Enter the number of copies you want in total. Use the handle that appears to set exactly how you want your copies to be positioned. When you're done, press "Enter.”

Boolean Operations

Boolean operations allow you to combine multiple shapes or paths into a single, more complex shape. Boolean operations include Union, Subtract, Intersect, and Difference. It can help create intricate designs and shapes that would be difficult or impossible to create using basic shapes alone.

• Union combines multiple shapes into a single shape representing the area of all the shapes.

• Subtract removes the area of one shape from the shape beneath it.

• Intersect creates a shape from the area where the selected shapes overlap.

• Difference creates a shape from the area where the original shapes do not overlap, it is the opposite of Intersect.

Masking Shapes

Masking shapes allows you to hide certain parts of an image or layer and reveal only the specific areas of the image you want to show. To do this, we use a mask layer placed on top of the image or layer that we want to hide. The mask layer is usually a shape that defines the visible area of the underlying layer.

Music Player Design

Let's go into practice mode, and we will create our first screen, the music player. I will show you how to insert icons, create shapes for your avatar and use the mask tool—to create the circular volume controller with the gap and dash. Make the audio wave with a line and then how edit a shape to create a curved shape.

New Document

Let's open a new document and start designing our music app. A new document in Sketch provides a blank canvas. You can set the Artboard number and choose the device model to build your design.

Artboard

Artboard is where you create your design, and you can also design it on the canvas if you don't need a fixed frame. Artboard is a fixed frame for design elements such as shapes, text, images, and more and can be customized in terms of size and background colour. They're handy if you design for a specific device or screen size.

• Go to “Insert” in the menu bar, click on “Artboard,” or press “A” on your keyboard. Choose iPhone 13 Pro. Then, add a background colour #130E3C.

UI Kit and Library

Sketch is a perfect design tool since Apple provides the UI Kit and Library. You’re going to need the iOS UI Kit from Apple for Sketch.

Adding Shapes

To start using Shape, you can easily add any predefined shape and edit it. You can combine multiple shapes using Boolean operations to make your Shape more interesting. For more unique designs, vector editing tools can create custom shapes.

• Click the "Insert" in the menu bar and select "Shape." Then, choose Oval or press "O." Create an oval of 300 by 300.

Gradients

Gradients are a visual effect that transitions colours from one to another. It allows for smooth colour transitions within an element or design. They can be applied to shapes, text, and other design elements to create a more exciting and dynamic look.

Linear

A linear gradient allows you to apply a gradient effect along a straight line with adjustable start and end points to a layer. It is the most frequently used gradient option. If you want to add another colour to your gradient, click anywhere on the gradient line to add a new point.

• Click the Color in the Fills section, choose the Linear option. Starting point colour is #6700AF, and the ending point colour is #1678DB. Reduce the opacity to 50%. Duplicate the circle and change the starting color to #9600FF and ending color #00E4FF. Duplicate again, change to a solid color #7748A5.

Background Blur

The Background Blur function reproduces the blurring effect behind layers. The content behind your layer will appear blurred, and you can adjust the saturation and amount of blur via the Inspector.

• Create a rectangle the same size as your device, 390 by 844. Remove Fill and Border, and add background blur value to 50. Group the three circles and the rectangle in a group and name it “BG.”

Adding Icons

Once you have downloaded the icon libraries, to have access to it, click on the icon Symbol in the toolbar and select the icon file you have downloaded.

Top Navigation

We need a navigation function to access other screens as we do not have a tab bar. A common solution is to create a modal transition that slides from the bottom to the top and back up again on closing. This transition is widely used in user interfaces that display information or options related to the current page, as it provides a smooth and user-friendly experience.

• We will need two icons, the arrow down and the plus icon. Place them in a container of 44 by 44 using a rectangle and put it in transparent.
• Take the down arrow icon and place it on the left side with 16px spacing from the edge of the device. Then, take the more icon and put it at the right and the same spacing.
• Write a title between the two icons "Now playing" using Bold, and the size is 20. Group all the element together and name the layer by Top Navigation.

Masking Shapes

Now I'll show you how to use the mask. First, have your artist's photo ready on your canvas. Masking shapes allows you to hide certain parts of an image or layer and reveal only the specific areas of the image you want to show. We will create an oval shape that will be the picture's visible area.

• Create a circle of 300 by 300 and bring your singer's picture to the canvas. Place the photo layer on top of the circle, then right-click and click on “Use as a mask.”

Scale Tool

We're going to use the scale tool to adjust our image. The Scale tool allows you to resize and proportionally scale objects, shapes, and text in your design. It lets you resize the selected elements in proportion, maintaining their original aspect ratio or non-proportionally, by specifying different scaling values for the width and height.

• Select the image and press Command + K to activate the Scale tool. Resize your image to fit in the circle. Then, a group will be created. Name the group by Artist and name the circle by Mask.

Outline

We’re going to add outlite around the oval shape using the color white and we’re going to reduce the opacity.

• Duplicate the mask and name it by outline, change the size to 330 by 330, color white 20%. Duplicate again, name by outline and change the size to 376 by 376 and reduce the opacity to 5%.

Volume Controller

The fun part is that we're going to design a circular volume controller using a border and play with the dash and gap. Users have to rotate their fingers to set the volume.

• Create a circle of 340 by 340, remove fill, and add border colour: #00F5FF, position: center, width: 10, dash: 530, gap: 640, border end: Round cap. Duplicate, change the color to #151644, change the gash and gap value to dash:180 gap: 900.
• Create a circle of 20 by 20, Linear #8252FF and #00F5FF, add border colour white, position: center, width: 2, add shadow colour black Y:10, blur: 20.

Play Button

Let's design the play button, create a circle of 50 by 50, linear #24C8FF and #5214BD, opacity: 40%, border, white,20% and add the play icon on top for the circle. Add them to a group and name them Play Button.

Music Player

We need shuffle, Repeat, Forward and Backward icons. Place them in a container of 44 by 44, the same thing that we did for the other icon. Position them: Shuffle X:48 Y:471, Repeat X:298 Y:471, Forward X:238 Y:523 and Backward X:108 Y:523.

Adding Text

We will add more information about the music, and we will add the name and the title of the song.

• Press on T to active the text tool, write the title of the music using bold and the size is 17. The text color is white and reduce the opacity to 87%. Duplicate the text, change to the name of the artiste, regulier, 15 and 60%.

Audio Wave

We will create an audio wave using the shape of the line and play with the length.

• Press on L and create a line. Duplicate 35 mores and play with the length. Select everything and click on Tidy with the spacing 8.

Lyrics Button

We will create the lyric button that we will position at the bottom. A lyrics screen will appear at the top as a modal by clicking on this button.

• Press on R and drag a rectangle of 390 by 90. Linear #3A3098 and #08051D, border white 50% and the position is center.

Conclusion

We learned how to effectively use fonts, icons, and shapes to help designers create visually appealing and functional designs. Fonts convey tone and message, enhance legibility, and create visual interest. Icons offer optical clarity and save space. Shapes are versatile elements to create visual interest, define areas, and provide structure. Most importantly, you have designed your first screen knowing how to use colour gradients, background blur, dashes and spaces and masks.