Material and Dark Mode

Dark Mode

The system may use more contrast to help foreground material stand out against the darker backgrounds. Dark Mode uses a colorr scheme with darker background and lighter foreground tones.

• Make sure your application looks great and that your content is readable in both appearance modes
• Make every appearance have enough color contrast
• Use SF Symbols wherever possible
• Use the system-provided label colors for labels
• Favour the system's background colors

Material

Material adds transparency and blur to the background, giving the impression that the foreground and background layers are separated visually. To make the interface more visually appealing, materials can be combined with vibrancy to enhance the sense of depth.

Visual Hierarchy

As the name implies, it is the principle of arranging components in ascending order of importance. It makes it easier for users to navigate the menu and find information quickly.

With visual hierarchy, it will inform what the page is about, arranges your data, and helps you navigate. It is convenient because information is delivered in the sequence the user wants it. Through colors, fonts, and images, the design creates an emotional connection with the audience.

Base and Elevated

The system uses two sets of background colors in dark mode in order to enhance the perception of depth when one dark interface is layered over another. As a result of the base colors being dimmer, background interfaces appear to recede, and the elevated colors being brighter, foreground interfaces appear to advance.

Material Sheets

Keeping context of the background, UI shouldn't compromise the clarity of your content. Blurring the background not only allows you to keep its natural colors, but also brings focus to the foreground. Blurring isn't an invention, it's something that already exists in real life; as you focus on something, everything else become blurry.

Screen 3

Let’s finish our design with the third and last screen. We will build different beautiful credit cards using radial, mesh and linear gradients. First, let’s duplicate the Statistics screen and delete all the chart cards.

Debit card

• Create a rectangle of 358x224, corners 22 and add smooth corners
• Add shadow, color black,16% opacity, X: 0, Y: 20 and Blur 40
• Align layer to center and margin top 40
• Select the layer, press Command+G to group and rename it Debit card
• Insert an 80X80 polygon with 8 sides, rotate it 22° and flatten the shape (toolbar top center)
• Align layer center, press on Return key to edit

We will transform this polygon into another shape. Change the points as follows:

• First point; X: 99, Y: 170
• Second point; X: 291, Y: 170
• Third point; X: 291, Y: 176
• Fourth point; X: 262, Y: 176 and set corner 12
• Fifth point; X: 256, Y: 212 and set corner 12
• Sixth point; X: 134, Y: 212 and set corner 12
• Seventh point; X: 125, Y: 176 and set corner 12
• Eighth point; X: 99, Y: 176

Select the rectangle and the shape layers using a subtract operation. Group the combined shape by pressing on Command+G. Let’s create a rectangle with a background blur

• Insert a rectangle of 164x37, align center and margin top 40 and place it under the combined shape layer
• Add fill color black, 50% opacity, border with width 1, inside, color white, 16% opacity
• Add background blur 20 and rename it Notch

• Select __Combined Shape __layer, duplicate by pressing Command+D, right-click to remove the mask
• Inside__ Card__ folder, move this layer at the top and rename it Border, add border with width 1, inside
• Add a linear gradient, color 1 white, 20% opacity, color 2 white, 80% opacity, color 3 white, 30% opacity, color 4 white, 10% opacity and overlay

Mesh Gradient

Mesh gradient is a beautiful way to create a background gradient for the hero section on your site or app. We will use it for the colorful card. They also have a plugin for Sketch to free to try and visit their website.

There is another website that I really like. You can use it directly on their website and export in PNG format.

Let’s go to meshgradient.com to explore the tool. Click on the Get started button. You will see 2 frames.

First frame is your colors, you can select up to 4 colors and you can move the dots to play with the colors. You can also use a dropper to clone a color of your choice outside the website.

Second frame is where you edit the gradient. When you move 2 points closer, it will create a sharp blur. When you are satisfy with the result, click Export and it will be saved in your Downloads folder.

• Copy the image, go back to Sketch and paste inside the card
• Resize the image to around 600x600

Let’s fill the card with some content.

Title

• Add title inside the Card layer, write DEBIT CARD in uppercase, SF Pro, semibold, size 13, color #EBEBF5, 60% opacity
• Align layer center and margin top 8

Card number

• Add 16 random digits, SF Pro, expanded semibold, size 18
• Add shadow, color black, 60% opacity, X: 0, Y axis to 1, Blur: 2 and overlay
• Align a layer center and margin top 132

Date

• Create a rectangle of 104x28, corners 8, fill color black, 30% opacity and don’t use border
• Group this layer, press Command+G, write Valid thru 06/24, SF Pro, regular, size 12 and color white

Logo and icon

• Copy and paste the Visa logo from the Finance Screen, margin right 30 and bottom 22
• Copy and paste the chip icon from the Finance Screen margin right 30 and top 30
• Select the rectangle of the chip icon and change the colors white and #8F876D and set 60% opacity
• Add border of witdh 0.5, outside, color #E5E0CA

Rename this card Debit Card and add shadow to the folder, color black, 30% opacity, X: 0, Y: -40 and Blur: 40

Apple Pay Card

For this card, we will use Apple Pay logo. Duplicate the previous card and position it on X: 16 and Y: 361. Delete the mesh gradient as we will replace it by a radial gradient.

Select the Combined Shape layer, Go to the inspector and add a radial gradient. Make a big oval, drag the center point to the top right and 5 colors.

• Color 1 #FFE281, color 2 #FF7D21, color 3 #D52B19, color 4 #5C44D9 and color 5 #5246E9
• Go to Assets to use Apple Pay logo
• Inside Notch layer, replace text by Apple Pay logo and resize to 44x18
• Align layer center horizontal and vertical
• Change the digits and valid date

Credit Card

For the last card, we will replace the gradients with a pattern. Sketch have an amazing feature that can copy and rotate shapes to create an interesting shape pattern. Copy the previous card, change the content to Credit Card and change the digits.

• Change the gradient to black colour
• Align folder to center, Y: 542

Grid Block

Now let's create an interesting pattern. Go to the Page Patterns, add an artboard with black color of 400x400. Go to the top menu, click on View/Canvas/Grid settings . A pop-up will appear, set Grid block size to 20px, set Thick line every to 10 blocks then Confirm. I will use a grid to guide us through this progression.

Shape Pattern

Let’s create an oval and style it using a linear or angular gradient with colors of your choice. Insert an oval of 224x224 at center of the artboard as guide.

1. First oval: 4x4, X: 86, Y: 198, duplicate, X: 310
2. Second oval: 5x5, X: 91, Y: 163, duplicate, X: 304
3. Third oval: 7x7, X: 103, Y: 135, duplicate, X: 290
4. Fourth oval: 11x11, X: 120, Y: 112, duplicate, X: 269
5. Fifth oval: 15x15, X: 140, Y: 95, duplicate, X: 245
6. Sixth oval: 18x18, X: 162, Y: 85, duplicate, X: 220
7. Seventh oval: 24x24, X: 188, Y: 76.

Select all 13 ovals, go to the top center toolbar, click the Union icon and it will combine everything into one shape.

Select the Combined Shape layer, go to the top menu, click Layer/Path/Rotate Copies . A pop-up will appear, use 20 copies and click on Rotate . You will have 21 copies and see an anchor point. Move the anchor point until you are satisfied with the pattern. Click ESC keys when finished.

This is my final pattern. I pulled the anchor point down and to the right. Select all the layers and group them together.

We can also select all the layers, click on Union icon to combine into one shape. We can add gradient and change colors.

Copy you pattern and paste on the Credit Card folder. Because of the pattern, the digit loses contrast. Let’s fix that.

• Create a rectangle of 298x32, place it behind the digits
• Set corners 9, black color, 30% opacity, add background blur 10, X: 47 and Y: 658
• Align the digits to the center horizontal and vertical
• Select the rectangle in the Valid folder, add background blur 10 to have a better contrast
• Align text center horizontal and vertical
• Create a rectangle of 64x28, add background blur 10, place it behind Visa logo and align logo center horizontal and vertical

Let’s fix the TabBar and move the selected tab to Wallet.

• Select the Selected folder, X: 237 and Y:756
• Change Tab2 to color white and Tab1 to color white with overlay
• Change large title to Wallet

Final Design

Here is our final and colorful design. We have completed our 3 screens from scratch. If you made it to the end, congratulations. I hope you have enjoyed this course and learn new things. See you on the next one!