An app may be a simple blog interface or a much more complex user interface with multiple functions. If you are planning on designing an app for iPhone that has a simple blog interface and needs it to be updated for iOS 7, read ahead. As you are designing an app for your Iphone, we suggest to find an app developer to make sure that new design concepts are technically feasible from the coding perspective.
Table of Contents
Designing an App for iPhone
If you want to design an app for the iPhone, you can do this by using Photoshop. You can begin by creating a new document. Design it to a width of 640 pixels wide and 1136 pixels tall. Most apps have a bottom navigation bar.
(Source : Google Images)
You want to design this in such a way that it does not take up too much space and pull away from the attention from the content on the screen. If you have several options for tabs, you can go ahead and eliminate the tab bar itself.
Instead, you can use a slide-out panel for the navigation. This ensures that the navigation is seen only when needed, and it will prevent it from taking attention away from the crucial content on the app interface. This is a key element of designing crisp interfaces.
Using Templates
To design an app, you don’t have to do it all from scratch. There are several great templates available for you online. By using templates like those from Teehan + lax, you will be able to design your app much better. They offer a giant Photoshop file, which has several templates that are necessary for many elements of the app you may want to design.
(Source : Google Images)
This will include sliders, buttons, and other design elements. From these templates, you can see the status bar and the address bar. You can simply drop the status bar and address bar, and you can get started.
Label
You can pick the label template up from the template options. Here, you can go ahead and add the name of your blog. You can use the alignment tools to ensure that your label is centered.
Color
Pick the colors that you want your app to have. If your app is an extension of a blog you already have, you can add the same colors to your app. You can go ahead and set the bar to this color.
Toolbar Icon
It is a good idea to add a toolbar icon next to the label on your app. You can pick this icon up from the templates by copying it using Command + C. Once you do this, you can paste it next to your label.
If you pick the entire toolbar icon and it has a background color, you can simply change each horizontal stroke to a shape. This can then be duplicated and made into three horizontal stripes so that it can become your toolbar icon.
In the layers tab, move the icon over the label tab so that it stands on top.
A good idea to order your content is to use just one single feed on which you can customize your content as you like. You can also go ahead and change the background color at this point. For instance, the popular background color for apps is light grey.
This is because a grey background will let you draw white shapes on top of the backgrounds. These elegant white shapes will then stand out. Color schemes become much more complicated if the backgrounds are left white.
Adding Shapes to Your App
You can now go ahead and add any shape you like to your app’s interface. When you are creating a shape, you will have to pay attention to the corner radius. Pick a smaller corner radius for a shape that looks natural and fits seamlessly with the background.
You can then go ahead and add a drop shadow to your shape. You can choose 90 degrees as the shadow if you want the light to fall at a 90-degree angle from the top. The shadow will appear right at the bottom of the shape as a line.
You can go ahead and call this first shape a content container. If you are going to show your content in this box, you can add an icon next to it to indicate the kind of content you would like here.
For instance, the first shape may indicate a podcast that you want to have. You will want your app users to know that this is a podcast. You can use a Glyphish icon to indicate this. From this, you can pick a microphone shape and place it next to the shape.
(Source : Google Images)
For a podcast, you will also want to add the date of the release. You can add this date in a color similar to that of the icon just below the icon. Adjust the font shape and size so that it does not overpower the
Filling Content into the Shape
You can begin by first creating a text box on the Photoshop interface. Paste or type the relevant content. Once you do this, you can go ahead and change the font and size of the text so that it complements the rest of your design.
You can also place an image with the text. Use Command + T for Free Transform to place and modify the image as per your liking. Scale and place the image as you like. You can also adjust the shape box so that it holds your content right.
As you design, pay attention to the spacing between the icon and the content. Too much of a gap can make the app look disconnected. Catch any spacing issues early as will have to undo other design activities later on. This is because it is difficult to scale the image if you don’t.
(Source : Google Images)
When you design an app, you will also need to work with several layers. Make sure to name them in the layers tab so that you won’t be confused later on as you work. You can also add the first podcast layers and make a group out of these.
Adding More Blog Posts
You don’t have to create a new shape and order your content each time you need to add a new blog post to your app. What you can instead do is duplicate the same content box and customize it with new text and images.
(Source: Google Images)
If your blog posts don’t have images, you can go ahead and eliminate this in the design you like. Depending on the post you are designing for, you can also go ahead and change the icon.
You can use the Glyphish icons to pick one that suits each post best. For instance, you can use a feed icon for a blog post. At this point, you may have room for three post types on your app. This may be true for any given point.
You can similarly duplicate to create the third post. You can group all of these three content spaces into a single one and call it ‘Content’ or anything else you like. Save this current content interface as it looks so that you can then go ahead and work on the menu.
Creating a Menu
At this point, you can scale the entire group down on the screen and move it over so that you can begin working on the menu. You can now choose a new background, say a dark grey one.
You can now draw a new shape to imitate the part of the group that is still on the screen. You can clip this to the background. Now, you will see a small content area with the toolbar icon on the right side of your screen.
You can also go ahead and add a drop shadow to this image. You can increase the size of the shadow so that it is visible against the dark grey background.
You will also need a background image here that will look blurred sitting in the background. Because the image will sit blurred, you can go ahead and scale it up without having to worry about the conventions.
You can drop the opacity of this image, to say 3. You can go ahead and do this in 2 layers. Keep the first layer, the scaled-up image, and the second layer can be the blurred image. You can then go to Filter and then pick Gaussian blur for this image in the background.
You can then use Command + Option + F so that you can change the settings of the blurred image to make it more or less blurred. You can now fill the space with black. You can click on E to bring a giant eraser on screen.
You can choose the pixels as you like, such that the circular eraser covers the center of the image. Using the tool, you will have a good blur on the background right where you need it. You can name all of these layers the Menu Background.
Creating Menu Content
To create menu content, you will first need to narrow down the font you like. You can pick different post types as menu options. These can be a blog post and podcast. You can also go ahead and add other menu options if you like.
Adding Icons
To make your menu content engaging and visually appealing, you can go ahead and add icons to the menu items. You can begin by creating a new shape, perhaps 50 by 70 pixels or any size that fits with your font size.
(Source : Google Images)
You may want to create a page-turning icon for the blog post. Now, you can play with the rectangular shape you have created to do this. Use the pen tool to click on the anchor points towards the top right of the rectangular image.
You can then shape this corner to make a 45-degree slope. You can then take down the fill opacity and add a stroke of 2 pixels. You can then add a triangular shape to fit the top eight corners facing inward. Change the stroke to the outside, and you can then copy-paste layer style.
With this, you will have a page icon ready next to your blog post item. This is a great idea if you are looking at Glyphish icons, and they don’t happen to have the ones you want. You will then have to create an icon for the podcast
You can begin by using a rounded rectangle tool. Draw a tall rounded rectangle to make the body of the microphone for the podcast icon. You can use the same layer style from the previous icon and paste it to this one. You can duplicate this rounded rectangle and scale it up so that it forms the outline of the microphone.
(Source : Google Images)
You can add a layer mask to halve the outline so that it cups the inner microphone shape from the outside. You can create a 2-pixel line across the middle so that you have a horizontal separation in the microphone.
You can then use two rectangular shapes to create a stand for the microphone. You can then use alignment tools, and you have your shape ready for the podcast icon. Name the layers of this icon so that navigation is much easier as you go.
This is especially necessary if you plan on changing the dimensions of the icon once you finish designing. Naming the layers will make the process that much easier for you. Don’t forget to center align the icons as you design them.
You can now go ahead and space the icons and the corresponding text so that they are lined well. You can then use Command + T and Command + Option + T to create evenly spaced menu items that appear as options below the blog post and podcast main menus.
Through this, you will be replicating the buttons on the dashboard on this menu. You can create icons for each of these menu items to make them more visually appealing. If you like, you can also use Glyphish icons to do the same
(Source : Google Images)
For social media channels, you may want to use the vector icons of the respective brand. For instance, you can use the Twitter icon from their brand assets for a menu item that is linked to Twitter conversations. The same stands true for Facebook.
When you bring a Twitter or Facebook icon in, you want to ensure that it is scaled down to about the same size as the other icons. You can do this by placing the icon close to the other icons on your menu. This will help you scale it down to the right size.
You can then bring these icons to look like the others by giving them a fill opacity of zero. You can give a stroke of 2 pixels and turn it to white. You can do this for any other social media icons you bring in.
If the size is small and cannot be scaled up, you can use a pen tool to recreate it and then scale the new vector image up.
Choosing the right colors will have a big, big impact on the overall feel and cohesion of your app design.
Redesigning Apps for iOS 7
(Source : Google Images)
If you’ve looked at Apple’s design for iOS 7, you will see loads of white and high contrast on the interface. With some apps, however, you can go ahead and be a little adventurous in mixing up the color scheme as you redesign the app.
For instance, you can get inspiration for color from all the aspects of iOS 7. For instance, you can get access to the same from the caller screen on iOS 7. Once you pick out this design sensibility, you can go ahead and begin designing it.
iPhone 5 App
If you are redesigning for iOS 7, you will have to think about the screen size as well. For instance, you may be designed for iPhone 5. In this case, you can opt for a width of 640 pixels and a height of 1136 pixels.
(Source : Google Images)
You will first have to pick a background color of your choice. Dark midnight blue is an innovative color and works well if you want to replicate the caller screen on iOS 7. You can now recreate a few major elements that are present on the app before you redesign it.
This can be done by using the shape tool and recreating the major shapes. You can now try to bring in a few colors from the old app to the new background color that you have added. You can also use the same font or even play around with it if you like.
For text in the same app screen, you can duplicate the layer as you design. In this way, you won’t have to pick a new design each time. Use the alignment and distribution options through the move tool to align your text just right.
Replacing Text with Icons
(Source : Google Images)
When you redesign an app, you may want to replace some of the text with icons. This makes the screen smarter and the interface more aesthetic and visual. It also removes any unnecessary clutter.
You can add these either by using Glyphish icons or by creating your own using shapes. Text like the Edit button and the delete button can simply be replaced by icons instead of the text. Play with the opacity and strokes so that you can get your icon to look just as you want it to.
IF you have any alignment issues with the icons, you can go ahead and use the alignment tools to get them sorted. To align the entire design right, use Command + A to select the whole design.
Now, it will align the entire thing based on your selection. You can also use elements of visual hierarchy here to make some elements stand out more than others. You can do this using color, font, and the like.
Creating a Series of Shapes for the App
For recording some operations like the number of days for which you have done an action, you can use a series of lines. To create this, you can make the first line and then use Command + J to replicate it.
A good option would be to make a couple of lines in a series. Select all the layers on the layer tab and then add then duplicate these so that you can replicate a group of lines instead of one. This does the job that much quicker.
Once you have filled half the page with lines, you can duplicate this entirely to fill the entire page. In the layer tab, you will now see many layers. You can select all of these and click on Command + G so that they are grouped, and you have a much cleaner interface at hand.
You can then change colors and mix them up so that you have the right colors ready for your interface. You can use a landscape image and add it as the background for your app. You can use Gaussian blur so that it is barely visible but does give the touch of an iPhone screen background.
You can rotate the image that you have chosen and hence, let the best part of it shine through the background for better aesthetics. You can then experiment with overlay and opacity for some interesting textures and details.
Try experimenting with many images for the background until you find one that works best for you.
Endnotes
When you switch between versions of iOS, it is also important to redesign the apps. This leads to better aesthetics and functionality, and you will be able to make the design compatible with the current version you are using.
If you are using iOS 7, it is important to get the design right for this interface first. You can look at several designs that Apple has used for this specific version and make your design compatible with this.
Do pay attention to the dimensions of the screen that you are designing for. For instance, iPhone 5 will have different dimensions as compared to other versions. You can go ahead and use Photoshop to get the dimensions just right.
Do you need help with graphic design for a project? Here’s more information about the unlimited graphic design service that we offer to businesses, organizations, teams, and for all sorts of different projects.
