Life's easy with Medialoot.

Unlimited access for only $14/mo.

How to Design an iOS 7 inspired iPhone App Screen

How to Design an iOS 7 inspired iPhone App Screen

In this tutorial we will be walking through the steps involved to create a thin and flat, iOS 7 inspired design concept for a user profile app screen. By using these simple techniques you too can create stunning, minimal app interfaces. A preview of the final result can be seen below:

What We Will Be Creating

how to design an ios 7 inspired app screen

Step 1

Begin by launching Photoshop and creating a new document. In this tutorial I am using Photoshop CC, older versions may look a little different but should be able to achieve the exact same results.

how to design an ios 7 inspired app screen

Step 2

When designing custom interfaces for apps, it is always important to bear in mind Apple’s user interface guidelines. Not doing so may result in your app looking unprofessional or completely out of place. Create some new guides to mark out the status bar and title bar areas.

how to design an ios 7 inspired app screen

Step 3

Draw a solid rectangle using the rectangle shape tool

how to design an ios 7 inspired app screen

Step 4

Creating a simple diagonal linear gradient can make an otherwise plain background appear dynamic and exciting.

how to design an ios 7 inspired app screen

Step 5

Borrow the top status bar from this free UI kit. The status bar is not actually editable on iOS (other than the colour) so leave it as it is once in place.

how to design an ios 7 inspired app screen

Step 6

For the title I have used the beautiful Hero font.

how to design an ios 7 inspired app screen

Step 7

To draw the back arrow, start with a thin rectangle .

how to design an ios 7 inspired app screen

Step 8

Rotate the rectangle 45 degrees (holding down the shift key to constrain) .

how to design an ios 7 inspired app screen

Step 9

Duplicate the rectangle shape and flip it vertically.

how to design an ios 7 inspired app screen

Step 10

Place the two rectangle together to form an arrow shape.

how to design an ios 7 inspired app screen

Step 11

Similar process for the plus icon, draw a thin rectangle.

how to design an ios 7 inspired app screen

Step 12

Duplicate the rectangle shape and rotate it 90 degrees. Or simply draw a new rectangle.

how to design an ios 7 inspired app screen

Step 13

The top section of your screen should now look something like this:

how to design an ios 7 inspired app screen

Step 14

Draw a circle as shown below by using the Oval tool and holding down the shift key.

how to design an ios 7 inspired app screen

Step 15

Now for a little trick which will allow you to get the appearance of two stroke styles on the same object in Photoshop, with the outer stroke also being offset from the shape! (It is not actually important which colour you use for the stroke in this first step and we are setting the Opacity to 0).

how to design an ios 7 inspired app screen

Step 16

Inner Glow:

how to design an ios 7 inspired app screen

Step 17

Outer Glow:

how to design an ios 7 inspired app screen

Step 18

Optionally, you can place an avatar photograph in the document and create a clipping mask using the circle we just made.

how to design an ios 7 inspired app screen

Step 19

Add some text for the name of the user:

how to design an ios 7 inspired app screen

Step 20

And their location or profession etc. in smaller type below the name:

how to design an ios 7 inspired app screen

Step 21

Draw two smaller circles, one on either side of the user avatar. Note: they have slightly different background colour values

how to design an ios 7 inspired app screen

Step 22

Place an icon inside each of the circles to complete the buttons. I am using icons from this set.

how to design an ios 7 inspired app screen

Step 23

Draw two equally sized rectangles immediately below the orange background. Use a slightly lighter and slightly darker shade of the same orange background colour. This subtle touch create a nice visual effect.

how to design an ios 7 inspired app screen

Step 24

Add the text for followers and following stats:

how to design an ios 7 inspired app screen

Step 25

For the section below we want to create a minimal list (or “Table View”) of contact information.

how to design an ios 7 inspired app screen

Step 26

Draw a simple 1 pixel light grey line from the right hand side of the document to the left, leaving about 40 pixels blank on the left.

how to design an ios 7 inspired app screen

Step 27

Duplicate the last section a few times and update the text as appropriate.
how to design an ios 7 inspired app screen

Result

how to design an ios 7 inspired app screen


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Marin

    Marin

    Big thanks!

    Jan 19, 2014 at 12:44 am
  • Reply »
    Ankur

    Ankur

    Well made tutorial. It was easy to follow along. Thank you!

    Feb 23, 2014 at 7:00 pm
  • Reply »
    Amrit

    Amrit

    How do you convert this design for retina display of iPhone 5/5s and new version iPhone 6?

    Nov 25, 2014 at 10:05 pm

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all