UI Design: Redesigning & Preparing Alignments

November 5, 2015| destructive
UI Design Mockup

Recently Townske released it’s new iOS app and I thought of re-creating the design in Photoshop. Going through the design was fun and figuring out the type, colors and layout was interesting into knowing the design thought that goes to it.

When it comes to redesigning another app, there are some tips I would like to share that will help rapidly prototype your UI. First, is take screenshots of the app on your phone and upload it into Photoshop. Secondly, open up tabs (I suggest you bookmark it in a folder) on your web browser of Stock Photos, Font Finder and Icon Finder.

Once you have this set up, it’s time to bring up your iPhone template and start aligning by creating Guides. Check Preferences if your units and rulers are set to Pixels and Points.

Using Grids

View > New Guide

Bring in the screenshot you had snapped and use the rectangular marquee tool if you like to scan how wide and high is the elements. Once you have found the measurements, write it down on a piece of paper and go back to your redesign file to enter the guides.

You can always re-adjust the guides by using the move tool and check if it’s how you want it to be. There are a few mandatory guides you need to set, and that is the side borders (30 to ~36 pix) and Top Nav bar (128 to ~142 pix).

Here is a list to keep in mind when creating a new guide in Photoshop for iPhone 6(2x):

Vertical Guide:

  1. Sides – 36 & 714 pix
  2. Centre – 375 pix

Horizontal Guide:

  1. Nav bar – 142 pix
  2. Centre – 667 pix
  3. Bottom Tab – 1220 pix

A good designer always keeps his/her alignment right and consistent. If you need more help on alignments, I have provided a .psd template which you can download and use it for your reference — Alignement-Template.psd

Categories: iOS, Redesign, UI Design

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe and Get 25% OFF!

Join our mailing list for cool freebies and updates. Promise, no spam :)

%d bloggers like this: