In this tutorial we will show you how to design a detailed user interface for an audio-themed web application. Let’s get started!
Tutorial Assets
The following assets were used during the prodction of this tutorial.
Step 1
Create a new file. Set Width to 1590 and Height to 838 and the resolution to 72 PPI.
Step 2
Make a new Group and name it Background. Inside that group create a new layer and using Rectangle Tool (U) make a white #ffffff vector shape to cover the whole
canvas and apply the Layer Style.
Step 3
Create a new Group and name it Body. Using Rounded Rectangle Tool (U) set the Radius to 5 px and draw a shape exactly like the one in the example, afterwards apply
the Layer Styles.
Step 4
Inside the Group Body create a new Group and name it Horizontal Devider. Using Rectangle Tool (U) set the fill color to #dfdfdf and make nine horizontal lines
just like the ones in the example.
Step 5
Make another Group inside the Body Group and name it Blue Devider. Using Pen Tool (P) draw to shapes like the ones in the example. Set the fill color to
#8dc5fc and apply the Layer Styles.
Step 6
Using Horizontal Type Tool (T) set the Font to Arial , Bold and the Font size to 17,63 px and type down the words "General" and "Maintenance" exactly like in the example
and apply the Layer Style.
Step 7
Usint Horizontal Type Tool (T) set the Font to Arial and the font size to 11 px, and write down the text in the example. Remember to change between Bold and Regular
on the subcategories. Set the fill color to #557590.
Step 8
Create a new Group and name it Dots. Using Elipse Tool (U) make three shapes like the ones in the example. Set the fill color to #98cbfc and apply the Layer Styles to the shapes in front of "Daily" and "Weekly". For the shape in front of "Monthly" using Ellipse Tool (U) make another small circle inside of the blue one and set the fill color to #ffffff.
Step 9
Make a new Group and name it Pop up. Using Pen Tool (P) draw a shape just like the one in the example. Set the fill color to #90c7fc and apply the Layer Styles.
Afterwards set the Fill to 12%.
Step 10
Now using Horizontal Type Tool (T) write down the following text inside the Pop up shape "Perform maintenance services once a month and display the following message: “If you are seeing this error message, please clear your cache at exactly 4pm and hit the Refresh button.” Set the fill color to #557590 and apply the Layer Style.
Step 11
Create a new Group and name it Switch. Inside that Group using Rounded Rectangle Tool (U) set the Radius to 50 px and make a shape like the one in the example. Set
the fill color to #7cb9fb and apply the Layer Styles.
Step 12
Using Rounded Rectangle Tool (U) keep the Radius to 50 px and make a white #ffffff shape just like the one in the example and apply Layer Styles.
Step 13
Now we will use Horizontal Type Tool (T) to write down "OFF." Set the Font to Arial, Bold and the Font size to 11.79 px and the fill color to #ffffff. Apply the Layer Style and this step is done.
Step 14
Following Step 11, 12 and 13, make six more Switches.
Step 15
Create a new Group and name it Drop Down. Using Rounded Rectangle Tool (U), set the Radius to 2 px and draw a shape like the one in the example. Set the fill color to
#8fc6fc and apply the Layer Styles.
Step 16
Using Pen Tool (P) draw a triangle facing down just like the one in the example. Now select Horizontal Type Tool (T) and write down the word "Low" and apply the Layer Style.
Step 17
Duplicate the last step or simply duplicate the Drop Down Group and place it in the bottom just like in the example.
Step 18
Make a new Group and name it Save Button. Using Rounded Rectangle Tool (U) set the Radius to 2 px and draw a shape like the one in the example. Set the fill color to
#90c7fc and apply the Layer Styles.
Step 19
Using Horizontal Type Tool (T) write down the word "SAVE" using the Font Arial, Bold and the Font size 10 px. Set the fill color to #ffffff and apply the Layer Style.
Step 20
Create a new Group and name it Discard Button. Using Rectangle Tool (U) draw a shape like the one in the example, set the fill color to #ff5656 and apply the Layer Styles.
Step 21
Using Horizontal Type Tool (T) write down the word "DISCARDS," set the fill color to #ffffff and apply the Layer Style.
Step 22
Create a new Group and name it Additional Text. Using Horizontal Type Tool (T) write down the phrase "No changes have been made!" and set the fill color to #ff6161.
Step 23
Make a new Group and name it Footer. Inside using Rectangle Tool (U) draw a shape at the bottom of the canvas just like the one in the example. Set the fill color to
#58a1fa and apply the Layer Styles.
Step 24
Now using Horizontal Type Tool (T) write down the words "Sound System Website | Privacy Policy | Terms of Use", set the fill color to #ffffff and apply the Layer Style.
Step 25
Create a new Group and name it Header. Open the IconSweets2 psd and import the Headphones glyph from the Media Folder inside the
PSD. Keep it at it's original size, place it on the top left corner and apply the Layer Styles.
Step 26
Using Horizontal Type Tool (T) set the font Arial, Italic and the Font size to 18 px and write down "Sound System." Afterwards using Horizontal Type Tool (T) again, keep the Font but change the Font size from 18 px to 10 px and write down "3.0" just like in the example. Apply the Layer Styles.
Step 27
Make a new Group and name it Info - Logout. Use Horizontal Type Tool (T), set the Font to Arial, Regular and the Font size to 14 px and write down "Welcome" just like in the example. Set the fill color to #70818f. Now using Horizontal Type Tool (T) set the Font to Arial, Bold and the Font size to 14 px and write down "John Doe Logout" keeping the same fill color #70818f.
Step 28
Create a new Group and name it Navigation. Using Pen Tool (P) draw a shape like the one in the example. This will represent the first tab in the navigation menu. Set the fill color to #ebeff4 and using Rectangle Tool (U) draw five more shapes just like the ones in the example. Apply the Layer Styles to all six layers.
Step 29
Now using Pen Tool (P) draw a shape like the one in the example. This will represent the selected tab plus a sub menu space. Set the fill color to #58a1fa and apply the Layer Styles.
Step 30
Now we will add text inside the unselected tabs. Using Horizontal Type Tool (T) write down in each tab the words indicated in the example. Set the Font to Myriad Pro, Regular and the Font size to 14 px using #557590 as a fill color. Using Horizontal Type Tool (T) keep the previous settings, change the fill color to #ffffff and write down the word "Options" inside the selected tab. Apply the Layer Style only to the "Options" layer.
Step 31
Open once again the iconSweets2 psd and import the glyphs indicated in the example. Place each and every one corresponding to the number indicated in the example. Reduce the size to 50% and set the fill color to #4d5969 and apply the Layer Styles to all the glyphs.
Step 32
Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the word "Comapny:" using #ffffff as a fill color. Now
using Horizontal Type Tool (T) set the Font to Myriad Pro, Bold and the Font size to 14 0x and write down the word "Company Name". Apply the Layer Style to both layers.
Step 33
Make a new group and name it Submenu.Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the words "Time&Date",
"Display" and "Language". Apply the Layer Style.
Step 34
Now we will make the selected button of the Submenu. Using Rectangle Tool (U) draw s rectangle shape just like the one in the example. Set the fill color to #b8dbfd and apply the Layer Styles. Using Rectangle Tool (U) make another shape this time at the bottom of the previous one, just like shown in the example.
Step 35
Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 14 px and write down the word "General". Set the fill color to #2e3b47 and apply the Layer Style.
Step 36
Now to make the sub-submenu. Using Pen Tool (P) draw a shape just like the one in the example. Set the fill color to #eaeef3. Make another one to mirror the previous one, set the fill color to #ffffff and apply the Layer Style to both layers.
Step 37
Using Horizontal Type Tool (T) set the Font to Myriad Pro, Regular and the Font size to 12 px and write down the word "Settings". Set the fill color to #2e3b47 and apply the Layer Style. Use Horizontal Type Tool (T) keeping the same settings, except this time we will change the fill color from #2e3b47 to #ffffff and apply the last Layer Style.
Final Image
