ĐIỀN TÂN ITC: Design a Sleek, Dark Mobile App Website

Posted by vkdt at Friday, May 22, 2015

In this tutorial we'll be using Adobe Photoshop to design a sleek web interface that can be used for any mobile app website. We'll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

Republished Tutorial

Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in January of 2011.

About This Design

This tutorial is based on the dark, clean website design for Leaflet, an iPhone app designed for Envato marketplace publishers. Eric Alli of Trilab Media helped design and code the site, so he'll be walking us through the step by step tutorial. Whether you're looking to use a similar design for your own projects or just want to see how it was made, there are plenty of excellent tricks and techniques in this tutorial that you'll be able to pick up on. Enjoy!

Step 1

Let's begin by creating a new Photoshop document by selecting File > New.

Set both the canvas Width and Height to 1100px, Resolution to 72, and the Background Contents to White.

Next, we need to create two guides that will act as the container for our page.

Select View > New Guide...

For the first guide, set the Orientation to Vertical and the Position to 70 px.

For the second guide, select View > New Guide... again and create another Vertical guide with the Position set to 1030 px.

We should now have an outlined space that is 960px in width for our page.

Step 2

Next step is the background. Select the Paint Bucket Tool (G) and set your Foreground Color Swatch to "1e1e1e". Then, click anywhere on the canvas to apply the color to our Background layer.

Let's also add a bit of texture to our background by selecting Filter > Noise > Add Noise...

Set the Amount to 2.5 and click OK.

Step 3

Next we're going to create a spotlight that will help add focus to the top area of our page.

Select the Brush Tool (B) and change the Master Diameter to 400px and set the Hardness to 0%.

Create a new layer by selecting Layer > New > Layer... and give it the name of "Spotlight".

Change your Foreground Color Swatch to "FFFFFF" (white) and create a circle near the top of the canvas using the Brush tool.

To help blend the spotlight into the background, lets add some noise to the spotlight layer by selecting Filter > Add Noise...

Set the Amount to 20, check Monochromatic and click OK.

To smooth out our spotlight, select Filter > Blur > Gaussian Blur...

Set the Radius to 50.0 and click OK.

Finally set the Opacity on the Spotlight layer to around 25%.

Step 4

Next we're going to be adding our phone graphics. For this tutorial I will be using the iPhone graphic from the superb Vector iPhone 4 PSD from Psdtuts+ which can be downloaded for free here. Also keep in mind, you may use any phone graphic that suits your particular needs (Android, Blackberry, etc...).

Once downloaded, open the PSD in Photoshop. Expand the "Phones" folder in the Layers panel, right click the "FRONT" folder and select Duplicate Group... Here, give the group a recognizable name (I used "iPhone"), set the destination to "Leaflet" (or whatever it is you named your PSD for this tutorial), and click OK. Once you're finished, close this PSD.

Position our first iPhone touching the left guide and around 100px from the top of the canvas.

This is also a good time to customize the screenshot within the iPhone.

An easy way to do this is to expand the "iPhone" folder in our layers panel then click on the "SCREEN CONTENTS" folder. Now select File > Place, choose your screenshot from the browser, then click Place.

Drag your placed layer over the iPhone and resize to fit into the screen. Once finish, click Enter to save the changes.

Duplicate the "iPhone" group by selecting Layer > Duplicate Group... name it "iPhone 2" and click OK on the dialog.

Select Edit > Transform > Scale and expand the duplicated iPhone to 107.0% width and height. Position this iPhone around 50px from the top and 200px from the left guide.

Repeat the step mentioned above to replace the screenshot within the "iPhone 2" folder.

Step 5

The final touch for our iPhones is to create a reflection of them. Lets start by selecting both iPhone groups ("iPhone" and "iPhone 2") then select Layer > Duplicate Layers... and click OK. Then select Layer > Merge Layers.

Next we need to flip our iPhones upside down. Select Edit > Transform > Flip Vertical, then position the flipped layer directly under the original iPhones.

Add a Layer Mask by clicking the Layer Mask icon in the Layers Panel.

Select the Gradient Tool (G) and choose a black to white swatch. Draw a line from top to bottom on the flipped iPhones that is around 50px in height.

Finally, lower the opacity on the layer to 30%.

Step 6

Next is to add our app's main details to the right of our phones. Before we start, lets add another guide to keep things aligned. Select View > New Guide... select "Vertical" for orientation and 550 px for position.

At around 100px from the top of our canvas, we're going to add in our logo. I'm using a logo I've previously made, you can simply use text or insert your own logo here.

Below the logo, we're going to add a paragraph of text for our app's description. Select the Horizontal Type Tool (T) and draw a rectangle between the center guide and the right guide. Set the character settings as follows:

Font Family: Helvetica Neue
Size: 16 px
Style: Regular
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF

Step 7

Next we'll create a button for visitors to purchase our app. Using the Rounded Rectangle Tool (U), draw a 240x75px rectangle with a 4px radius. Align it so the left side of the button touches the center guide and it's 45px below the text.

Now we'll apply some layer styles. Double-click the right side of the layer in the Layers Panel and use the below image for reference.

To add the Apple icon, draw a small text box inside the button using the Horizontal Type Tool (T), then copy and paste this symbol:  into the text box and set the character settings as follows:

Font Family: Helvetica Neue
Size: 50 px
Style: Regular
Anti-aliasing: Crisp
Color: #000000

Finally, change the opacity on this layer to 30%.

Create another text box to the right and add 2 lines of text (ex: "Download now on the App Store"). Apply the following character settings:

Font Family: Helvetica Neue
Size: 11 px (first line) 24 px (second line)
Style: Bold
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF

Add a Layer style to this text using the following image for reference:

Next, we're going to add a separator to the right of the text we've just added. Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the top of the button to the bottom, then change the line's color to "FFFFFF" (white).

Change the opacity of this line to 15% and duplicate it by selecting Layer > Duplicate Layer... and click OK. Change the color of this duplicated line to #000000 (black) and change it's opacity to 10%. Then, move the duplicated line 1px to the left.

The last element to add to this button is an icon that indicates download. Begin by selecting the Ellipse Tool (U) and creating a circle that is 25px in diameter.

Then, add the following Layer Styles:

Finally, grab the Custom Shape Tool (U) and choose an arrow shape (I'm using a default shape called "Arrow 9"). Create a small arrow 10px in width inside the circle and change the color to "FFFFFF" (white).

Step 8

Now to create a small box to display our app's price. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rectangle that overlaps our download button and is 52px in height and any width greater then 100px.

Change the color of this box to "2B2B2B" and move it below the download button in the Layers Panel.

Next, add a Stroke Layer Style to this box with the following settings:

Now we can add the actual price information. For this we're going to create two separate text boxes since the content within requires different styling.

For the first text box, add some text (I used "ONLY") and apply the following character settings:

Font Family: Helvetica Neue
Size: 19 px
Style: Bold
Anti-aliasing: Crisp
Color: #FFFFFF

For the second text box, add your price (I used "$1.99") and apply the following character settings:

Step 9

Moving on to the bottom portion of our page, we need to create some separation. For this, we'll use the two-line technique we applied earlier on the download button to give the separator an "inset" look.

Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the left guide to the right guide, then change the line's color to "000000" (black).

Change the opacity of this line to 80% and duplicate it by selecting Layer > Duplicate Layer... and click OK. Change the color of this duplicated line to "FFFFFF" (white) and change it's opacity to 10%. Then, move the duplicated line 1px down so it's under the black line.

Step 10

In the section below the line separator we've just created, we're going to be adding two columns, for screenshots and a list of features.

Starting with screenshots, begin by importing your first screenshot by selecting File > Place. Choose our screenshot from the file browser and click Place. Resize the screenshot to 80% width and height, then move the screenshot near the left guide and click Enter.

Select the layer in the Layers Panel and click the "Add Mask" button twice to add a Vector Mask.

Now select the Rounded Rectangle Tool (U) and change the radius to 6px and create a rectangle over the screenshot with the size of 175x120px.

Lastly, we're going to add a Stroke Layer Style with the following settings:

Repeat the above steps for all of your screenshots and give them 35px of space between each other.

Step 11

To separate our screenshots from the features, draw a 1px line from the top of the first screenshot to the bottom of the last screenshot that is around 55px from the screenshots.

Change the line's color to "FFFFFF" (white) and set it's opacity to 5%.

Step 12

Let's add a title that will describe our features (I used "Leaflet Features"). Position the text 55px from the left separator line and use the following character settings:

Font Family: Helvetica Neue
Size: 24 px
Style: Regular
Tracking: -10
Anti-aliasing: Crisp
Color: #FFFFFF

Now let's create our list of features and position it below the title. Create a text box and add five or six lines of features and give them the following character settings:

Font Family: Helvetica Neue
Size: 15 px
Style: Regular
Leading: 28 px
Tracking: -10
Anti-aliasing: Sharp
Color: #8d8c90

Repeat the above steps to add the app's requirements.

Step 13

To make our list of features stand out, let's create some simple, custom bullets.

Start by shifting the list of features text box 25px to the right.

Now select the Ellipse Tool (U) and create a circle that is 9px in diameter to the left of the first feature. Change the circle's color to "bce086".

Add the following Layer Style to the circle:

Step 14

Now we need to duplicate our bullets and align them to each feature. Start by duplicating the circle layer by selecting the layer then clicking Layer > Duplicate Layer...

Next, move the duplicated layer down 28px (the amount of Leading we applied to the feature list). Repeat the above steps three times.

Step 15

Moving on to the footer portion of our page, we'll once again apply the two-line technique we applied earlier in Step 9 to add some separation.

Step 16

Now we can add some useful links to our footer area. First we need to create four text boxes, side-by-side, that will hold our links.

Start by creating a text box that is around 160x40px. Add some text to it and repeat 3 times. Here is some sample text you can use:

Box 1: Follow @mycompany on Twitter for news and updates.
Box 2: For help & support head to our Support area.
Box 3: Download our press and media kit.

Use the following for the character settings:

Font Family: Helvetica Neue
Size: 12 px
Style: Regular
Leading: 20 px
Anti-aliasing: Sharp
Color: #5555552

As you may notice our boxes are uneven and not aligned properly, don't worry, we'll be fixing this in the next step.

Step 17

To fix our alignment issues, begin by placing the four text boxes we've created above into a folder and name it "Footer".

First, position the first text box 55px from the left guide and the last text box touch the right guide.

Now select the four text layers in the Footer folder and grab the Move Tool (V). Click on the Align vertical centers button, then click Distribute horizontal centers button from the Move toolbar.

Step 18

Now we can add some custom icons to accentuate our links.

Select the Ellipse Tool (U) and create a circle that is 36px in diameter next to our first text box. Change the color of this circle to "FFFFFF" (white).

Now select Layer > Rasterize > Layer.

Next up is to add our icon to this circle. For the first icon, I'm using the Twitter "t" that i've downloaded for free here.

Once downloaded, select File > Place in photoshop to import the icon into our document. Once imported, resize the icon to 28% width and height, position it over our circle, then click enter.

Next, right-click on the thumbnail of the Twitter icon in the Layers Panel and click Select Pixels.

Now select the circle layer in the Layers Panel then select Edit > Clear.

Delete the imported Twitter Icon by selecting it in the Layers panel and click or drag it to the Trash icon.

Finally, lower the opacity on the circle layer to 15%.

Step 19

For the rest of the icons shown above, repeat the steps in Step 18 by using other icons or with custom shapes in photoshop.

Step 20

To add a finishing touch to our footer links, lets give them a hit of color to help them stand out.

Using the Horizontal Text Tool (T) highlight a part of the text in each text box and change it's color to "83b546".

Conclusion

That's all! I hope you've enjoyed this tutorial and have found some useful techniques that you can adapt / apply to your next design.

Design a Sleek, Dark Mobile App Website