Colors and Gradients

The Color Wheel

Starting with a vibrant, pastel color that is Primary or Secondary is highly recommended. In general, use colors only to draw attention to a button or element of importance.

Neutral Tones

Perhaps the most important aspect of colors are the neutral tones. These are the neutralizers and as such these keep your designs from feeling too heavy. Most importantly, the neutral tones are easy on the eye and defer the user's attention to the content. You can use these as backgrounds.

Monochromatic

A monochromatic color is created when we use one strong color with multiple variations of that one color. The most common scenario is to have one main color and then, applying a 10-90% white or black layer on top. Sticking to one main color can prove to be a wise decision, especially for those who are not comfortable with colors yet. Simplification always helps new concepts.

Analogous

Analogous colors refer to colors that are next to each other on the color wheel like red, orange and yellow. Although it is a difficult color paletter as colors can end up overpowering each other, an analogous color scheme is very pleasing to the eye as it can be often found in the nature such as the sunset.

Complementary

A complementary color palette consists of two colors that are opposite on the color wheel such as red and green. Since there is a strong contrast of complementary colors, it is useful to select one color that is dominating and another that highlights other important elements in the page.

Cool and Warm Colors

Cool colors are generally associated with peace, serenity or calmness. These include shades of green, blue and purple. Such colors are not very overpowering and are soothing in nature. Warn colors are in turn associated with energy, brightness, action and warmth. Such colors include shades of yellow, orange and red.

Guidelines for Light UI

• The content should be lighter than the background. Objects in focus are usually better lit than the background
• Don’t overuse colors. They really grab your attention. Use colors to give importance to buttons and highlighted states
• Avoid average colors. 90-100% white is usually the best range

Guidelines for Dark UI

• Don’t use absolute black. It’s very hard to see the details in pitch black and the contrast can be too high against white
• If you must use black, make sure to have variations of dark gray to alleviate the high contrast
• Avoid grays when using blue. Dark blue complements blue better than gray

iOS Palette

These are the colors used by Apple in their native apps. Blue is used system-wide as the universal color for buttons, icons and actionable items. But other colors can be used to set the brand like yellow for Notes , pink for Music , green for Messages , etc.

Keep in mind that red is generally used for destructive actions and green for successful actions.

System Colors

A set of dynamic system colors that adapt to both light and dark appearances based on the color schemes of standard UI components. Choosing colors that blend well with different backgrounds is important as most people are familiar with system colors and they automatically support both appearances, it is a good idea to use them to provide a good user experience.

Accessibility and Inclusive Color

When communicating important information or distinguishing between objects, don't rely solely on color. To help everyone understand, mix colors with text labels or glyph shapes to convey information.

Make your content easy to perceive by avoiding colors that are hard to read and take into account how other countries and cultures may perceive the colors you choose. For example, it is well known that red communicates danger in some cultures, but a positive connotation in others. Ensure your app's colors convey the right message.

Color Blindness

If you need to distinguish between two states or values, do not rely solely on color combinations. It is often difficult for people with color blindness or other visual disabilities to distinguish blue from orange, red and green, red and black, and either red or green combined with gray.

Whenever possible, include additional visual indicators to ensure everyone can understand states or values communicated by a combination of colors. For example, use a red square and a green circle instead of red and green circles to indicate offline and online.

Contrast

It is important that colors don't hinder legibility. Having good contrast ensures comfortable reading and immerses viewers in the story. For good contrast, use opposite ends: white against black, light blue against dark blue, high brightness against low brightness.

The lack of contrast can make it difficult to see content and cause logos and buttons to blend into the background. Using a color contrast calculator can help you analyze color contrast accurately. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

Good practices

• Avoid overusing colors in non-game apps because they can distract users and hinder communication
• Colors are often used to draw attention to important details and connect different elements of an interface
• Maintain consistency throughout your interface when using color to convey information like status or interaction
• Avoid interpreting a colour in multiple ways
• System colors are preferred for text as it respond correctly to accessibility settings like Invert Colors and Increase Contrast

Dos and Don’ts

Colors shouldn’t be in the way of legibility. Contrast is needed to allow comfortable reading and to immerse the viewer. For good contrast, use opposite ends: white against black, light blue against dark blue, high brightness against low brightness.

Gradients

A color gradient is a progressive transition from one colour to another and aren't limited to just two shades. Gradients are also known as color transitions. It can blend between colours that are similar or entirely in opposition. There are different types of gradients: linear , radial , conic.

Color Tools

Color palettes generator : https://coolors.co Gradient maker : https://coolors.co/gradient-maker/51c26f-f2e901 Accessibility tool : https://www.getstark.co

Getting Started

We will learn how to design this beautiful iOS 16 app by using great colors, a variety of gradients and mesh gradients, useful layout techniques and spacing rules. We’re going to design awesome graphs using vectors, patterns and effects such as drop shadows, glows, blur and blending modes. The design also comes in dark mode and light mode.

Colors When you start, choose a primary color for buttons, selected states and other interactive elements. Also, pay attention to the contrast to ensure that the text is legible. For example, light text on a dark background. There are many tools to help pick color palettes, gradients and a good contrast ratio.

Spacing and Layout Spacing is equally important to make your app look clean and organized. Use numbers for positions, sizes and distances that can be divided by 4 or 8. The smaller the elements, the smaller the spacing between them. Keep similar elements grouped together.

Dark Mode and Materials Finally, we will cover dark mode and materials, which are translucent blur layers from thin to thick, adding vibrancy and clarity to your content.

To adapt your design for dark mode, avoid using large portions of bright colors such as white. In general, text and background colors are switched and primary colors are slightly darker. Front layers are typically lighter than background layers.

We will put all this into practice during the course. Let’s get started!

Screen 1

Let’s design our first screen in dark mode and make sure you have activated the Apple iOS UI kit for the latest update in libraries. You can download it from the Apple resources.

Open the Sketch app and add a new file.

• Add an artboard of 390x844 or select iPhone 13 Pro. Press on A on your keyboard for the shortcut
• Add a background color #18192B

Search Symbol on the toolbar menu. If it doesn’t show, right-click on you mouse and customize the toolbar. We will need these 3 elements:

• Status bars; select Apple iOS UI / Bars / Status bars / iPhone / Dark, click and drag to your artboard and align left and top
• Home indicators; select Apple iOS UI / Bars / Home indicators / iPhone / Dark - Portrait, click and drag to your artboard and align center and bottom
• Navigation bars; select Apple iOS UI / Bars / Navigation bars / iPhone - Compact / Light / Default, click and drag to your artboard and align left and top

Title

Let’s add a title and name it Finance.

• Use font SF Pro, semibold, size 17 and use white
• Align center, margin top 12 from the status bar

Background Effect

We will design the beautiful background effect from scratch by creating a custom background shape with blobs, gradients and blur.

Go to the top left navigator and add a new page for your shape and pattern. On the top menu, click on View/Canvas/Grid settings. A pop-up will appear, set Grid Block Size to 10px, set Thick line every to 10 blocks and then Confirm. We will use a grid to guide us through this progression.

• Add an artboard of 700x700
• Inert a first oval of 200x200, X: 40 and Y: 260
• Inert a second oval of 280x300; X: 360 and Y: 180

We will connect the two ovals by using the vector tool to draw a trapezoid shape.

• First point; X: 140, Y: 260
• Second point; X: 501, Y:180
• Third point; X: 501, Y:480
• Fourth point; X: 140, Y:460

Let’s add 2 extra points at the top center and top bottom of the shape. Select the trapezoid and press on Return key to edit. Hover your mouse over the line, you will see the vector tool with the plus (+), this means you can add a new point.

• First point; X: 300, Y: 224
• Second point; X: 300, Y: 469

Now let's edit this trapezoid into a custom curved shape. Select the trapezoid and press on Return key to edit. On the inspector on the right, edit the 6 points as follows:

• First point; disconnect point type
• Second point; mirrored point type, X: 300 and the Y: 310
• Third point; disconnect point type
• Fourth point; disconnect point type
• Fifth point; asymmetric point type, X: 300 and the Y: 380
• Sixth point; disconnect point type

Select the 2 ovals and the custom shape. On the top center toolbar, click on the Union icon and it will transform into a unique shape. Rename it Fluid.

• Add a linear gradient; color 1 #F6C6EC, color 2 #EE80D2 and color 3 #4BB8F9

We will continue by creating a blob.

• Create an oval of 224x224, X: 224 and Y: 247
• Select the oval, press on Return key or Edit icon. Play with the points to make like an egg shape
• Add an angular gradient; color 1 #561BBE (purple), color 2 #70E6FB (blue) color 3 #FBF8B3 (yellow) and color 4 #FA8792 (pink)
• Add Gaussian Blur 40 and rename Mesh 1

Let’s add a second blob, we will use the same steps as the first one.

• Create an oval of 236x236, edit it to the following shape, X: 300 and Y: 220
• Add a linear gradient; color 1 #FD8ED8, color 2 #97CFD9 and color 3 #101112
• Add Gaussian Blur 11 and rename Mesh 2

Now we are done with our custom shape. Select Fluid , Mesh 1 and Mesh 2 , group the 3 layers together and name it Background . Copy and paste the folder B ackground to the Finance screen. Set the X: 20 and Y: 60.

Credit Card

Let’s create a credit card by adding glassmorphism style.

• Add a rectangle of 334x200, fill color black, 10% opacity, corner radius 22
• Set X: 28, Y: 112, align center and margin top 112 from the artboard
• Add border with width 1, center and fill color white, 40% opacity
• Add shadow, fill color #2F2828, X: 0, Y: 10, Blur: 40 and overlay
• Add second shadow, fill color black, X: 0, Y: 2, blur: 6 , 10% opacity and overlay
• Add background blur 12 and saturation 40%

Let’s add some details on the card.

• Write Credit Card (in uppercase) using SF Pro, semibold, size 13, fill color white, margin left 24 and top 20
• Add 16 random digits using SF Pro, expanded semibold, size 18, fill color white
• Add shadow, fill color black, X: 0, Y: 2, Blur: 4 and 20% opacity
• Align layer to the center and margin top 112

Let’s add a rectangle with overlay to create more contrast for small text.

• Add a rectangle of 100x28, fill color black, overlay and corner radius 9, margin left 24 and bottom 16
• Write Valid thru 06/24 inside the rectangle. Use SF Pro, regular, size 12, fill color white
• Align center horizontal and vertical
• Add the Visa logo, set size to 52x17, margin right 24 and bottom 22. You can use this logo from the assets

Now we will add a card chip that we will create from scratch.

• Add a rectangle of 30x21, fill color black, 20% opacity, corner radius 4, margin top 18 and right 24
• Add border with width 1, outside, fill color white, 50% opacity
• Create 6 small rectangles of 11x5, corner radius 3
• Add border with width 0.5, inside and fill color white
• Set the margin to 2, vertical space between to 1 and horizontal space between to 4
• Add 3 lines of 4 pixel between each row of 2 rectangles
• Add a Default Page Control Light from the Apple UI kit and set margin 4 from the top

We are done with the credit card and it should look like this.

Action Button

We will create a custom action button.

• Add a 6 sides polygon of 72x60, fill color white, 20% opacity, corners 8 and rotation to 90°
• Go to top-right menu, click on edit and select the Top-Left point and change X: 40 and Y: 372
• Top-Right point and change X: 80 and Y: 372
• Bottom-Left point and change X: 40 and Y: 444
• Bottom-Right point and change X: 80 and Y: 444
• Add a linear gradient of 4 colors; color 1 white, 0% opacity, color 2 white, 40% opacity, color 3 white, 10% opacity and color 4 black, 0% opacity
• Move the points of color 2 and 3 to the center and this will create a separation in the gradient
• Add border with width 1, inside, fill color white, 20% opacity
• Add background blur to 10 and use saturation to 100%

Let’s add a symbol from SF Symbols 4 that will be inserted at the top half of the button.

• Create an oval of 24x24 and add the iPhone icon inside it, use Black Monochrome, SF Pro, regular and size 13
• Set fill to black and use soft light
• Write Top Up in uppercase and place at the bottom half of the button
• Use SF Pro, Compressed semibold
• Duplicate the button 3 more times and replace icon and text with paperplane / SEND, doc.text / PAY and camera.matering.partial / DEPOSIT

Transaction Row

• Write All History, using SF Pro, semibold, size 17, fill color white and margin left 16 and top 36
• Write More, using SF Pro, regular, size 15, color #EBEBF5, 60% opacity, horizontal align right and margin right 16 and top 36
• Create a rectangle of 390x76, fill color #21273D, X: 0 and Y: 516

For the logos you can use from the assets

• Create a rectangle 44x44 with margin 16
• Add a linear gradient; color 1 #0F55E8 and color 2 #9DDFF3 and make a diagonal line from top-left to bottom-right
• Add border with width 1, inside, fill color white, 50% opacity and overlay
• Add corner radius to 12
• Add the Sketch logo, size 26x24, fill color white, align center

Let’s add details to the row and since it is dark mode, we will use white color.

• Write Sketch Payment, SF Pro, semibold, size 17, horizontal alignment left, margin left 16 and top 18
• Write 18 June 2022 in uppercase, SF Pro, semibold, size 17, fill color #EBEBF5, 60% opacity, horizontal alignment left, margin left 16 and bottom 16
• Write -$9.00, SF Pro, regular, size 15, horizontal alignment right, margin right 16 and bottom 28

Let’s add a separator at the bottom of the transaction row.

• Insert a line 0x390, align bottom
• Add a linear gradient of 4 colors; color 1 #D6D2EA, 0% opacity, color 2 #D6D2EA, 50% opacity, color 3 #D6D2EA, 50% opacity and color 4 #D6D2EA, 0% opacity
• Change the line opacity to 20%
• Group everything and rename it Row

Now that the transaction row is done, duplicate it 3 more times and change the icon, gradient colors and details of the transaction. Replace icon and text with fuelpump.fill / Fuel Payment, figure.indoor.cycle / Gym Payment and YouTube logo you can use from the assets.

Custom Tab Bar

Let’s create a custom tab bar using glassmorphism.

• Create a rectangle of 390x88 and align bottom

We will edit the rectangle by adding 3 new points to have a custom shape. To edit, you can select the rectangle and press on the Return key or go to the top right toolbar and click on the Edit icon. Here are the position of the 3 points.

• Top-Left point; X: 153, Y: 756
• Top-Right point; X: 237, Y: 756
• Bottom point; X: 195, Y: 816
• Select the 3 points and change corners to 30
• Select the top-left and top-right points of the rectangle and change corners to 16

Let’s add some styling to the rectangle.

• Add fill color white, 10% opacity
• Add first border, fill color white, 50% opacity, width 1, inside, overlay, click on Multiple icon
• Add second border, fill color black, 10% opacity, width 1, center
• Add shadow, fill color black, 10% opacity, X: 0, Y: -10 and Blur: 30
• Add background blur 20 and saturation 100%

We will now create the Plus button.

• Create an oval of 44x44, align center and margin bottom 54
• Add an angular gradient; color 1 white, color 2 #FA8792, color 3 white and color 4 #70E6FB
• Add a second gradient and select Radial to hide the sharp part; color 1 #D783A8 and color 2 white, 0% opacity
• Add border, fill color white, 30% opacity, width 1, inside
• Add shadow, fill color black, 15% opacity, X: 0, Y: 1 and Blur: 2
• Add + from SF Symbols, SF Pro, bold, size 18 and fill color black

Let’s fill the tabBar by adding tabs. We will create the first one for Finance.

• Create a rectangle of 48x49, margin left 15 and top 4
• Press on Command+G to create a folder group
• Search for banknote in SF Symbols, copy the symbol and paste inside the rectangle
• For the selected tab, use SF Pro, medium, size 18 and fill color white
• Align symbol center and margin top 7
• Write Finance, SF Pro, medium, size 10, fill color white, horizontal alignment center and bottom margin 3
• Add auto-height 48 width and margin bottom 4 and rename the group Tab1

Now, let’s duplicate it 3 more times for the remaining tabs.

• Duplicate Tab1, rename the group Tab2 and add overlay
• Set the spacing between to 30 from Tab1 and Tab2, change the symbol and text to Wallet
• Duplicate Tab2 and rename it Tab4, change to ellipsis.circle / More and margin right 15 and top 4
• Duplicate Tab2 and rename it Tab3 and change to chart.pie / Stats
• Set the spacing between to 30 from Tab3 and Tab4
• Hide the rectangles of each group

Let’s add some highlight when the tab is selected.

• Create a 6 sides polygon of 70x70
• Add linear gradient; color 1 #00B9EF and color 2 #BC00FF
• Move the polygon behind the tab bar, set X: 3 and Y: 756
• Create a group for this layer and rename it Selected

We are done with our first screen!