Design an iOS interface

  • Software: Photoshop CS3 or later
  • Project time: 6-7 hours
  • What you'll learn: Prepare a moodboard, use vector and Layer Styles, Create realistic UI elements

As a designer and user of interfaces, I’ve always liked apps that look great. The better the balance between functionality and aesthetics, the better the experience for the user. Over the following steps we’re going to look at skeuomorphic design: we’re going to make elements of a radio app appear more lifelike using different methods in Photoshop, to help the user better identify each function of the app.

The main functions of the radio app that we’re going to look at here are the ‘browser’, which enables users to browse through different radio stations; and the ‘player’. I’ve modelled my design here on a physical radio – particularly in the colours I’ve used, the shapes and some of the details like the buttons and wooden border. Once you’ve mastered the various techniques for making your apps more lifelike, you can experiment with different methods to get the aesthetic you want.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Latest in UX & UI
A screenshot of the new YouTube UI
Yes, YouTube has a new UI. Yes, it's terrible
Adobe XD logo
It seems Adobe's given up on UI design (for now)
UX revolution
From 2D to 3D: How brands can harness the latest UX/UI revolution
Screenshot of busy webpage full of graphics and different fonts
Designing websites for accessibility: 5 common errors to avoid
Free Figma subscription offer with a UX design course
Get a free Figma Pro subscription with our online UX design course
A graphic saying 'an insider's guide to UX and UI with Figma, on Wednesday 1 November 1-2pm (GMT)
Free webinar: An insider's guide to UX and UI with Figma
Latest in How to
Gesture drawing: all you need to know plus ways to practise in 2 and 5 minutes
How to draw a male figure
drawing of a naked woman with someone drawing it
How to draw a female figure
GIMP in pro work
Making GIMP 3.0 work for pro results: is it possible?
Pejman Rajabi 3D tutorial of Super Mario fan art
“One of the best creative experiences of my life, working with such an amazing artistic crew” – how VFX artist Pejman Rajabi and friends created a heartfelt tribute to Super Mario
Marco Teixeira 3D tutorial
“The challenge was to create a cool character design”: concept artist Marco Teixeira reveals the techniques and inspiration behind his superb 3D character render