This is a step-by-step look at my mobile UI design process, where each phase of the process is outlined and explained, from initial rough sketches all the way to final design.

Mobile UI design step 1: rough sketches

I usually start with some rough concepts on paper. I have a bit of a thing for fancy sketchbooks and markers, so I tend to do my mobile UI design sketches in a Moleskine sketchbook, using a Copic Multiliner 0.2 pen, and a Y&C Stylist marker. I prefer using graphed paper, as it tends to work a little better for planning structured, organized layouts. I usually keep these sketches loose and scribbly – the idea is to view and compare ideas quickly, not to make it look pretty. Typically, I’ll spend less than 5 minutes per sketch. For these sketches, I tend to not draw them to-scale. I just start drawing in a box that’s drawn vaguely to the approximate proportions.

Mobile UI design sketching

Mobile UI design step 2: refined sketches

This is where I start to work at the correct proportions. I start by printing out a few pages of blank UI sketch templates (I use a mobile UI design sketch template by Envis Precisely). If they made notebooks with these templates as pre-printed pages, I would buy a hundred of them. I look through my rough sketches and consider the things that work or don’t work in each, and use those elements to make a more refined set of sketches. This step is really optional, since wireframing, which is the next step, is where I start to really nail down the layout and structure, but I like to use the refined sketches as an opportunity to begin working on an information architecture and content hierarchy strategy before moving forward.

Mobile UI design refined sketch

Mobile UI design step 3: wireframes

Wireframes, in my opinion, are the most important part of the process. This is where I start to establish the weight of visual elements in the mobile UI design. Scale is determined for visual elements, such as buttons, etc., so I try to draw the elements as accurately as I can with regards to shape and size. I also use wireframes as an opportunity to start planning the contrast in the interface, picking which elements will be darker, heavier, lighter, and how they will visually interact with surrounding elements. This helps control the audience’s eyeflow and determines how they browse and use the site, and gives me the opportunity to plan how to visually highlight and create focal points of any call to action or primary content that needs attention drawn to it.

There’s a lot of different sites out there that allow you to create wireframes online, using pre-made UI elements, but I honestly prefer to just draw these out manually in Adobe Illustrator, as I’m very comfortable with this software, and can work very quickly in it.

Mobile UI design wireframe

Mobile UI design step 4: prototype

This is the most time consuming step in the mobile UI design process, but by far the most fun! Now that the mechanical and technical steps are finished, the creative step begins. With the layout and site structure finalized, I can focus on the visual design concepts. Using the wireframes from step 3 as a guide, I develop the interface design, incorporating color, textures, contrast, and visual weight into the interface systems and elements. This is also where typography, photography, imagery, buttons, etc., brought into play to accurately represent how the final site will look.

Mobile UI design mockup

Mobile UI design step 5: file optimization for development

Typically this is the portion of the mobile UI design process that designers are not responsible for, but that doesn’t mean this is where our work ends. Handing off files to a web developer to be coded just means that the next step, bringing the site live, requires a bit of extra organization on the designer’s part. Take a look at the screenshot below, specifically at my layer structure. All layers are named and grouped accordingly, buttons have extra layers for mouseover states, all design elements are vector smart objects so they can be easily resized if necessary, etc. This makes it easier for somebody who is unfamiliar with my file to slice it up and prepare it for web, create CSS sprites of buttons, combine all the effects that make up a visual element, etc.

Mobile UI design file organization

A customizable Facebook timeline cover template

In order to be able to more easily present options to clients for branded Facebook page design, I’ve created a fully customizable Facebook timeline cover template, which I’ve made available to download for free. I use this Facebook timeline cover template to mockup concepts that allow myself and my clients to preview exactly how the elements of their Facebook page will interact visually, and just as quickly generate ready-to-upload images.

Easy to use layers

The Facebook timeline cover template set up as an easy to use layered PSD file. The layer structure makes it perfect for even beginning Photoshop users to work with. The masked and labeled folders inside the PSD file allow you to design directly in the Facebook timeline cover template, while staying within the 851 x 315 framework. Add your imagery into the folders labeled as “Profile pic” or “Cover pic” and you’re done! When you’re ready to create an upload-ready JPG file, just flatten the contents of that folder, make a selection of the layer mask, and copy to a new document.

If you like this, please reshare!

Social Media Poster

This is a huge poster (1′W x 4′H) that I designed for a client to be hung in their regional offices to encourage employees to engage in social media marketing. The poster was requested to be designed in the styles of popular infographics that are going viral all over Pinterest and other sites.

I’ve always wanted to design infographics, and although this social media poster isn’t technically an infographic in the traditional sense, it was close enough that I was excited to be working on it. I enjoyed working on it enough to where I may try my hand at an actual infographic in the future, as soon as I can find a topic I’d like to work on (suggestions welcome!).

Anyway, I’m pretty happy with how it turned out! Take a look:

Below are the three sites I came up with. I was super happy with the results!

Web design for luxury lofts in Atlanta

Web design for an Atlanta apartment community

Web design for a luxury apartment community in Atlanta

I shall name thee The Newest iPad - at least until you're not

It seems like since yesterday’s presentation by Apple, the tech community is buzzing about the new iPad. One of the points that new Apple CEO Tim Cook stressed during the presentation was that the new iPad, which now sports an impressive HD retina-display screen, has no official name. It’s not the iPad 3, it’s not the iPad HD, it’s not the iPad Retina, it’s not even the iPad 2.1, or any of a plethora of actual names that would adequately brand the product. It is simply the new iPad.

To me this seems very poorly planned out, and a totally missed branding opportunity. It’s just not very forward thinking, as it doesn’t particularly allow for future expansion on the name and the naming conventions that consumers have come to expect. If and when a newer iPad is released, will this still be known as the new iPad? Even the new iPhone 4S had a name that slightly distinguishes it from previous models in the consumer’s eyes. It will be interesting to see how Apple refers to “the new iPad” when it is no longer the newest model available.

It reminds me a lot of the tragic naming of the Final Destination series of horror films:

In retrospect, not quite so final

The first three films of the series followed logical naming conventions – Final Destination, followed by Final Destination 2 and 3. For the 4th film in the series, they picked the name “The Final Destination” – the implication of course being that this is the culmination of the series, the grand finale. It turned out a poor choice, as the 5th film returned to the original naming convention as Final Destination 5, leaving audiences confused on the order of the films. For the next films, I’m thinking The Finaler Destination, followed by Final Destination 7 and then of course, The Finalest Destination.

Some of the new features in Photoshop CS6 seem really amazing. The new “content aware move” functionality seems to be leaps and bounds ahead of the current abilities of content aware editing. I’m really looking forward to seeing what other new features in Photoshop CS6 are included in the upcoming months.

A brushed steel button

The internet is saturated with tutorials on how to create web buttons in Photoshop, and if you’re anything like me, you’re probably ready to scream if you ever see another tired and dusty old tutorial showing how to make a “glossy” or “gel” button. If that’s the case, hopefully this tutorial is a bit different from those and will give you some helpful tips.

We’re going to be creating a stylish, detailed and realistic brushed steel button, reminiscent of steel dials on old fashioned stereo equipment. These are really fun and simple to make once you know the techniques and steps used to create them, and you’ll be able to modify or customize the steps to your liking to achieve the effects you prefer. As a bonus, I’ll also show you how to add a symbol or logo to your brushed steel button as an inlay, in this case I’ll be adding a “play” symbol as a brass inlay.

Step 1 – Set up your document space

This step is really up to you, and will depend on the project you’re working on. For the purpose of this this tutorial, I’ve created a document that is 630 pixels wide by 333 pixels high. I’ve filled it with a mid-gray background, with darkened corners (I used the gradient tool on radial gradient setting). Then I added a slight noise effect (filter > add noise) to create a subtly textured background for my brushed steel button.

Background for my brushed steel button

Step 2 – Creating the base of the brushed steel button

Create a circle in the middle of your document. Any color will do, because we’re going to use layer styles to colorize it to give it a brushed metal look. Name this layer “brushed steel button base” or something that will help you identify it as the base layer, as that is how I will be referring to this layer in this tutorial.

Create a circle

Double click on the circle layer preview to open the layer styles palette. Check the “gradient overlay” button. Next to “style” be sure the gradient is set to angle mode. The red arrows below show the settings you need to pay attention to and adjust.

The layer styles palette

Click on the gradient preview to change the colors to something like the settings shown below. The exact shades you use aren’t important, as long as you’re using dark grays and light grays / white in the order shown here. It’s important that your first color and last color are identical in order to avoid an awkward line where the two colors meet, so copy and paste the hexadecimal value for these two points on the gradient.

Set up your gradient like this

So now you should have something like the image below. The angled gradient created a very sleek silver circle that captures the highlights and reflections for our brushed steel button.

Adding highlights and reflections

Step 3 – Texturing the brushed steel button

So what we have now would be great if we were just making a steel button, but since we’re looking for a brushed steel button, we’re going to push it a bit further to create the brushed, scratchy texture we need.

Make a selection of the circle layer (command-click on Mac, control-click on PC) and then click on Select > Modify > Expand. Enter a value of 5 pixels, and click okay. Add a new layer above your brushed steel button base layer. Fill this layer with a mid gray, and then clear your selection by clicking on Select > Deselect (command-D on Mac, control-D on PC). Click on Filter > Noise > Add Noise. For distribution, select uniform and for amount, set it at around 50%. Click okay. These dots are going to eventually form the brushed scratches on the brushed steel button.

Adding the brushed texture

Click on Filter > Blur > Radial Blur. Set the Amount to 100, the Blur Method to Spin, and the Quality to Best. Repeat the Radial Blur filter two more times (command-F on Mac, control-F on PC). Set the layer blending mode to overlay. Now create a selection of the brushed steel button base layer as you did previously, and invert the selection by clicking Select > Inverse (command-shift-I on Mac, control-shift-I on PC). Hit delete. Clear the selection as you did before. This should clean up the edges so that your texture layer fits perfectly over your brushed steel button layer.

Texture added to the brushed steel button

Step 4 – Adding the beveled edge detail to the brushed steel button

As it stands right now, the texture of our brushed steel button is looking really good and pretty realistic, but it needs some depth to make it stand out more. It’s the details that are going to make this button really shine.

Create a selection of your brushed steel button base layer as you did previously, create a new layer above all the other layers, and fill the selection with a color (any color will do, as we’ll be using layer styles to colorize this layer again). Now click on Select > Modify > Contract. Enter a value of 3 pixels, and click Okay. Hit the delete key to clear the fill in the selection. You should now have a thin bevel around the edge of your brushed steel button. Deselect as you did before.

Open up the layer styles palette for the bevel by double clicking on the layer preview, and go into the gradient overlay settings. Adjust your settings to something like the image below. Note that the gradient used is identical to the one we used previously, except this one is set to linear instead of angle. I adjusted the Scale on mine until I was happy with the way the bevel looked on my brushed steel button.

Adding the gradient to the bevel

The beveled edge of the brushed steel button

Step 5 – Adding the shadow to the brushed steel button

There’s about 20 different ways you could make a shadow in Photoshop, and the most obvious would be to use the drop shadow layer style on the brushed steel button base layer, but I’m not particularly fond of the way that looks, as I prefer a bit more of a realistic shadow.

Create a selection of the brushed steel button base layer as you’ve done previously, and create a new layer behind the brushed steel button base layer, and fill the selection with black. Deselect as you did previously. Click on Filter > Blur > Motion Blur and adjust the settings similarly to the image below – the Angle should be 90 degrees, and the Distance should be a relatively low value.

Creating the shadow for the brushed steel button

Move the shadow layer down until only the bottom portion of it is showing, and the top half is hidden behind the brushed steel button. Drop the shadow layer’s opacity to around 60%. It should now look something like the image below.

The shadow beneath the brushed steel button

If you followed the steps above, you should have a pretty realistic looking, detailed, stylish brushed steel button, perfect to be used in your interface and web designs. Coming soon is the next part of the tutorial, where I’ll show you how to add an inlay symbol or logo to your brushed steel button.

New Coke cans on a shelf with Diet Coke cans

In a previous post I made earlier this month, I mentioned how the new Coke cans look like Diet Coke cans, and wrote up a comparison between the seasonal packaging for the two brands. Since a picture says more than a thousand words could, I snapped the picture above with my cell phone while shopping today, as I feel it very clearly illustrates the points I made. The new Coke cans are on the left, the new Diet Coke cans on the right. As you can tell, the two are almost indistinguishable from one another.

Abstract Organic Forms

I’ve always been a big fan of abstract organic forms. There’s something magical about smooth, fluid, amorphous shapes that I find captivating in art and nature, so I’ve tried out several different methods of creating this effect in digital art. Here’s a simple tutorial that walks through the process I use to create abstract organic forms in Photoshop.

Step 1 – Set up the artboard

Create a document at whatever size you need. For this tutorial, I’m working at 800 pixels by 800 pixels. When I’m starting a new artwork, I typically plan it around standard poster sizes, but to make this easy, I’m working small. Fill the background layer with black.

Create a new document and fill the background with black

Step 2 – Preparing the tools

Select the gradient tool, and switch it to radial gradients. Set the foreground and background colors to their defaults (black and white) by pressing D. Then reverse the foreground and background colors by pressing X. White should be your foreground color, and black should be your background color.

Radial gradients

Step 3 – Layering gradients

Create a new layer and set it’s blending mode to lighten. On this new layer, draw a radial gradient anywhere on the artboard. You should have a white glowing circle. Now create a new layer and again set the blending mode to lighten and again draw a gradient somewhere on the artboard, preferably somewhere that it will overlap the first gradient. Keep adding more layers and more gradients (being sure to set each layer’s blending modes to lighten each time), until you have a nice grouping of glowing orbs. You can really make it as complex or as simple as you feel like. I like to layer smaller orbs over bigger orbs to give it a more complex, organic form.

Radial gradients on separate layers with blending modes set to lighten

I like to layer smaller orbs over bigger orbs

Step 4 – Flattening the image to a new layer

Create a new layer, and from the main menu, click on Image and then on the submenu, select Apply Image. A dialog box will pop up with some settings. Make sure that the setting next to layer is Merged and click okay. This will basically create a flattened snapshot of your artwork on the new layer, merging all the visible effects into one layer, while leaving the actual layers intact.

Create a snapshot on a new layer using the Apply Image function

Step 5 – Making the shapes organic

This is where it starts to get really fun and where your abstract organic forms start to take shape. Make sure that your “snapshot” layer is selected, and click on Filter then Distort and then Wave. In the dialog box that pops up, drop the Number of Generators slider down to 1. Adjust the wavelength and amplitude sliders to your liking, until it gives the abstract organic form that you like. You could also click on Randomize until it gives you a result you like. Click Okay. You should now have something similar to this:

The wave filter gives our forms a more organic look

Step 6 – Repeat as desired

When I get to this point, I like to repeat Steps 2 through 5 to get a really nice layering of abstract organic forms, paying particular attention to covering the whole artboard. As you can see, I have several layers of “waved” abstract organic forms, all set to lighten blending mode, layered together to give the effect shown below.

Layering multiple pieces to cover the artboard

Step 7 – Adding color and detail

This is my favorite part of the process, because to me, this is where it starts to feel alive and disgustingly real. First, I colorize the image. There are many different ways to go about doing this, but I find the best way to be using gradient maps. In the layers palette, click on the create new fill or adjustment layer button (the one that looks like a circle that is half black and half white), and select Gradient Map from the list. I’ve used a dark rust color as my dark color, and a very light caramel brown / cream color as my light color. It’s very important that you use colors with a lot of contrast in light and dark, to avoid making your image look flat – it’s the depth of the shading that makes your abstract organic forms look so convincing.

Now our forms are starting to look good, but they appear maybe a little too dry, dull and “digital”. We can make them look wet by using the plastic wrap filter. Use “apply image” on a new layer as before, and then click on Filter, then Artistic and then Plastic Wrap. You can adjust the highlight strength, detail and smoothness levels to whatever looks best to you. Click okay when you’re happy with how it looks.

Using the plastic wrap filter makes the abstract organic forms look wet

 
This gives you something that looks like this:

The plastic wrap filter gives the abstract organic forms a wet look

Step 8 – (Optional) Adding secondary colors

This is a step that I like to do to add a bit of visual interest to the forms, but it’s certainly not necessary. Create a duplicate of your flattened layer (the layer that has your abstract organic forms after they’ve been wave filtered and plastic wrap filtered) by dragging the layer to the new layer button in the layers palette. Apply a wave filter to the new layer, enough to make it distinctly different from the layer beneath it, and set the new layer’s blending mode to lighten. Now on the main menu, click on Image then Adjustments and then Hue/Saturation. Adjust the hue and saturation sliders to your preference, but leave the lightness slider at 0. You’ll see that you have two different colored sets of abstract organic forms that are nicely blended together. If you want a bit more control over how the shapes interact with one another, you can use layer masks to adjust which parts of the new abstract organic forms you want to show or hide.

Use layer masks to control how the forms blend together

Step 9 – (Optional) Sharpening the image

Another optional step. This is a technique that I use a lot in photo manipulations and photo touchups to sharpen the overall image. Create a new layer above all the other layers, and make a new flattened snapshot of the entire artwork using apply image as you did in step 4. Now click on Filter then Other and then High Pass. Drop the slider down to a low number – for this I’ve used 4.7 pixels. Click okay. Now set the high pass layer’s blending mode to overlay. Notice how much it sharpens up the image? It’s usually a pretty dramatic improvement.

The high pass filter is used to sharpen the image

 
And there you go. If you followed the steps above, you should have something that looks somewhat similar to this:

My final abstract organic forms

 
Play around with the settings and try modifying your abstract organic forms your own way to come up with new and interesting results. Using this technique, I’ve created some pretty crazy imagery, including this really gorey artwork:

The Compounded - an artwork I created using this technique