iOS App Icons

Featured

Designing a tiny little app icon for a mobile device can really be a challenge. It seems like such a small thing and therefore should take mere minutes to create, right? Well, it’s not as easy as it would seem.
Designing an app icon reminds me of trying to create the little favicon for a website, which is just the tiny little thing next to the URL in your browser. Years ago that little favicon graphic was only 16 x 16 pixels, and it’s hard to get any sort of detail with that kind of resolution so the favicon had to be as simple as possible for it to be legible or recognizable as an image. The app icons on an iPhone are HUGE in comparison, but the same theory applies to their design.

The typical size for an app icon on an iPhone 3G or and iPad is 57 x 57 pixels. The iPhone 4s retina display’s app icons are 114 x 114 px. When you think about it, that 57 x 57 size doesn’t give you much more to work with than a favicon! Even though the app icon on the retina display is twice as big, any design you create has to work on the older phones and the smaller sizes. This is what makes designing an app icon a challenge.

The App Store is saturated with apps already, and if you’re just browsing through “What’s Hot” or a category, an app is more likely to get looked at if the icon is clean and simple, designed well and stands out. I find myself checking out apps just for the icon design to see if the rest of the app is designed as well. Chances are if it’s something I’m already in the market for anyway, I’ll download it or buy it just to play with it. It’s basic marketing tactics beginning with a simple eye-catching graphic.

I try to keep the design of an app icon as simple as possible. It’s the equivalent of a logo in the App Store world, and it’s the simple designs that are recognizable and memorable. Sometimes the nature of the app is difficult to define in a simple graphic and it ends up being more complex than I would like, and sometimes the developer wants to tell a story with this tiny little graphic, so I have do my best to include what’s necessary, what’s important, what’s requested, and still try to keep it clean.

As I was organizing my files yesterday I was looking at the number of app icons I’ve designed in the last year or two, and decided to put a little slideshow up here containing a few of the apps just to show the process in designing some of these app icons. Some are quick and painless, and some we revise and revisit numerous times before we arrive at the best option. Most of the designs in this slideshow are just comps and early versions or variations of icon designs. The final icons used in the apps can be seen in my portfolio.

anymusicdownloader_icon_01

anymusicdownloader_icon_01

anymusicdownloader_icon_02

anymusicdownloader_icon_02

anymusicdownloader_icon_03

anymusicdownloader_icon_03

anymusicdownloader_icon_04

anymusicdownloader_icon_04

anymusicdownloader_icon_05

anymusicdownloader_icon_05

anymusicdownloader_icon_06

anymusicdownloader_icon_06

anymusicdownloader_icon_07

anymusicdownloader_icon_07

anymusicdownloader_icon_08

anymusicdownloader_icon_08

anymusicdownloader_icon_09

anymusicdownloader_icon_09

evil_app_icon

evil_app_icon

iblabber_icon_01

iblabber_icon_01

iblabber_icon_02

iblabber_icon_02

iblabber_icon_03

iblabber_icon_03

iblabber_icon_04

iblabber_icon_04

iblabber_icon_05

iblabber_icon_05

iblabber_icon_06

iblabber_icon_06

iloader2_icon_01

iloader2_icon_01

iloader2_icon_02

iloader2_icon_02

iloader2_icon_03

iloader2_icon_03

iloader2_icon_04

iloader2_icon_04

iloader2_icon_05

iloader2_icon_05

iloader2_icon_06

iloader2_icon_06

iloader2_icon_07

iloader2_icon_07

iloader2_icon_08

iloader2_icon_08

iloader2_icon_09

iloader2_icon_09

iloader2_icon_10

iloader2_icon_10

iloader2_icon_11

iloader2_icon_11

iloader2_icon_12

iloader2_icon_12

iloader2_icon_13

iloader2_icon_13

iloader2_icon_14

iloader2_icon_14

iloader2_icon_15

iloader2_icon_15

ios_flashlight_icon_01

ios_flashlight_icon_01

ios_flashlight_icon_02

ios_flashlight_icon_02

ios_flashlight_icon_03

ios_flashlight_icon_03

ios_flashlight_icon_04

ios_flashlight_icon_04

ios_flashlight_icon_05

ios_flashlight_icon_05

megadownload_icon_01

megadownload_icon_01

megadownload_icon_02

megadownload_icon_02

megadownload_icon_03

megadownload_icon_03

megadownload_icon_04

megadownload_icon_04

megadownload_icon_05

megadownload_icon_05

megadownload_icon_06

megadownload_icon_06

megadownload_icon_07

megadownload_icon_07

megadownload_icon_08

megadownload_icon_08

project365-pro_app-icon

project365-pro_app-icon

qsettings_icon_01

qsettings_icon_01

qsettings_icon_02

qsettings_icon_02

qsettings_icon_03

qsettings_icon_03

qsettings_icon_04

qsettings_icon_04

qsettings_icon_05

qsettings_icon_05

qsettings_icon_06

qsettings_icon_06

qsettings_icon_07

qsettings_icon_07

qsettings_icon_08

qsettings_icon_08

recordnow_icon_01

recordnow_icon_01

recordnow_icon_02

recordnow_icon_02

recordnow_icon_03

recordnow_icon_03

recordnow_icon_04

recordnow_icon_04

recordnow_icon_05

recordnow_icon_05

recordnow_icon_06

recordnow_icon_06

recordnow_icon_07

recordnow_icon_07

recordnow_icon_08

recordnow_icon_08

recordnow_icon_09

recordnow_icon_09

recordnow_icon_10

recordnow_icon_10

recordnow_icon_11

recordnow_icon_11

siri_settings_icon

siri_settings_icon


* These images belong to clients and are copyright protected. Please do not download or copy any of the images in this gallery.
[wpdm_package id=2]

CCAS Website: Another work in progress

For the past couple weeks I’ve put my own website overhaul on the back burner to design and develop another site for CCAS (Cloud Computing Advisory Services). Using WordPress for the CMS, I killed one of it’s default themes and resurrected it as a child them for the CCAS design.

This has been one of the most fun web development projects I’ve worked on so far. I’ve mostly had total control over the design except for the usual obstacles like the kind of content and the amount of content, but it’s been no problem so far compared to what I get to do along the way.

Except for my own site (the blog part), this is the first chance I’ve had to play with all the new HTML5 elements and CSS3 selectors and the possibilities that now don’t seem so far off. My favorite thing to make it into common web development over the past year has to be the @font-face web type stuff. As a designer that’s worked mostly on the print side of marketing & design for the last couple decades, the ability to choose fonts other than Arial, Courier, Helvetica, Geneva and Verdana has given me a reason to live! I’ve played with several on my own site but really had a chance to explore on the CCAS (Cloud Computing Advisory Services) project.

Since the site is still a work in progress, I’ll follow up with what I’ve learned along the way when I’m closer to the end of the job. Learning how to make WordPress 3 work for me is what I’m spending most of my time on with this project, and a few of the things I’ve been able to do with functions and templates may be worth mentioning. I had a hard time finding information about WP functions and template tags when I ran into problems getting them to perform the way I wanted, so I may cover some of those topics when it’s over.

That’s all for now. Back to the drawing board.

20111107-201145.jpg

20111107-201218.jpg

iLoader app for iPhone

Have you ever had a bunch of photos you wanted to post to Facebook on your iPhone only to get absolutely frustrated going about it one at a time through Facebook itself? It can be quite a pain in the ass. I went searching through the app store and finally found an app that does it all in one stroke, and the app is iLoader.

iLoader by Tektrify is an iPhone app for batch uploading photos and videos to Facebook. In addition to allowing you to select several images at once to upload, it also gives you the option to write captions on each image. When you’re ready to go, you can also choose to post with a comment and actually select any one of your albums to upload to. It sure makes life easier for people like me who don’t want their photos automatically going into the ‘mobile uploads’ album.

I always get excited when I find something that works well and makes my life easier. iLoader is one one of those things. If you have been looking for a way to batch upload photos to your Facebook page, I would definetely recommend checking out iLoader by Tektrify. You can also find it in Apple’s app store, just search for iLoader, and it’s cheap.

Project 365

Just recently I came across another neat little app for the iPhone that I think is worth sharing. The app is called “Project 365″. It’s basically a calendar that allows you to add a photo and comments for each day.
It doesn’t sound like much based on my simplified description, but it really is a cool way to log what you do every day and be able to look back later and see what you did. Visit their website for a better description and details (http://content.photojojo.com/tutorials/project-365-take-a-photo-a-day/).
One of their suggested uses is mainly for photographers and a way to practice and develop your style. I use it to track what I’ve done all year. I couldn’t tell you what I did or what I was working on two days ago and Project 360 has helped me see just how productive I have been. I’m always busy with work or one of my many projects but I still feel lazy. After a couple weeks of tracking my days with this app, I realized just how much I actually do and couldn’t believe how many projects I had worked on in that time. Now I don’t feel so bad about taking a day off!
It’s a good learning tool for new photographers and it’s great for a visual diary of your past. I would recommend checking it out if you’re like me and have trouble remembering yesterday.

Update to Free Graphics

Symbols-radialgraphics

zip zip
1.06 MB

Ai Symbols Radials

1.0 Categories:
vector

Download File

After my post about the Adobe Illustrator Symbols earlier today, I decided to give away a couple more. Actually, they are on my Graphics Downloads page, but for the sake of making things easier on my friends that don’t like to click much, I am adding links to the downloads right here. You can download the Radials Symbols zipped file by clicking here or just click on the image.

One of the libraries is a set of Illustrator Symbols. I created a whole bunch of radial designs one day while trying to come up with something else entirely for a client project. In the process I ended up with a series of different radial graphics that actually make interesting little pieces of art on their own, and with a little help from some other designer who sees things from a different perspective, they could become something really interesting. They are symbol instances, so use them as I described in my earlier post and do with them what you want! Break the symbol link (control + click on a simple that’s on your artboard, select the “break link to symbol” option) and they are fully editable vector graphics that you can pick apart, rearrange, merge into other stuff, or whatever. Knock yourselves out.


zip zip
52.13 kB

Ai Swatches Carbonfiber

Categories:
Patterns

Download File

The next one, as long as I’m in a generous mood, is a bunch of patterns that I created for my website backgrounds. Several of the patterns look like a carbon fiber texture (same as the background pattern of my site), some are dot patterns of varying frequencies, and there’s a diamond plate pattern also. Here’s the link to the zipped file: Patterns, or click on the image to get the download.
The same process applies for installing the pattern swatches into Illustrator: just drop the .ai file (after you’ve unzipped it of course) into your Illustrator app folder > Presets > en_US > Swatches. Notice the only difference is that it goes into “Swatches” rather than “Symbols”. You can also drop it into your User > Library > Application Support > Adobe > Adobe Illustrator CS4 (or CS3, or CS2) > en_US > Swatches. Activate it by going to your Menu > Window > Swatch Libraries > Patterns or User Defined (depending on which folder you put them in), and you’re good to go.

One more time in case you missed it; to get into all of my free vector graphics, vector textures, photo textures, and Adobe Photoshop/Illustrator Presets, just jump over to my Graphics Downloads page and take what you want. It’s all free. One day I’ll have enough money to pay the extra fees to get my ecommerce shopping cart active on my site and I will be charging actual American dollars for some of the more complex stuff. If I were you, and obviously I’m not, I would loot the whole damn page while I’m still mentally ill.
Who knows when I’ll come to my senses? It could be tomorrow (but the improbability factor there is very high), or it could be next month. Don’t be like me; do it before it’s too late!

Learn as you go.

Sure, I went to college. Absolutely, I took as many art & design courses as I could. When I got out into the real world and began to look for work however, I found that half of what I had been taught was 10 years out of date. Fortunately for me, I am curious.

My favorite method of learning how to do something is the “let’s see what happens when I do this” method. I’m mostly referring to digital arts and computers because any artist who sketches, paints, or sculpts does everything that way. There was no IT/tech support team around our house, so when I would experiment there was always a chance that it could have a devastating effect on my system. Like a kid with a toy, I had to pick apart Photoshop and Illustrator to see how they worked, and it would give my computer fits on occasion, but that’s how I figured out how my graphics apps work and how they work within the system. The mistakes I made were responsible for how I learned the workings of the operating system and the hardware as well. I’ve been my own tech support since the early 90′s and have learned enough to be able to diagnose nearly every issue that pops up. My friends seem to like this too.

Nowadays there’s a ton of information out there, all of which can be easily tracked down by anyone with a simple Google search or two. The forums available online these days can guide a person through just about any problem without having to take your system or software to some expensive repair shop. That only works if you are willing to learn and do a little work yourself. Anyone who does knows it’s not really that difficult. Troubleshooting and repairing your own stuff isn’t like climbing Everest anymore; if you have ambition, you can do it.

Recently I’ve been spending lots of time working on my websites, blog and all of my other online profiles (Facebook, Flickr, Google, etc.), trying to link as much stuff together as I can in an effort to generate some income from my sites. Until now they’ve mainly been for displaying my work (portfolios) and communication. I began the search for advertisers a few months ago knowing that there are other designers out there making money from their services but supplementing their income with advertisements on their sites. I’ve always wondered how these guys hook up with these resources.

There are a few magazines I read every month to keep up with what’s current in the industry. A couple of my favorites are .net magazine (Practical Web Design in the USA) and Computer Arts. There’s something useful and relevant to what I’m working on in every issue. For example, right in the middle of my seemingly hopeless search for advertisers, an article in .net magazine (Practical Web Design in the USA), issue 196, jumped right out at me and there in big print was the answer to my problem. “Sell .net via your website” was the article, and I couldn’t have been more excited. Practical Web Design always has an article, or a tech tip, that makes me get up and run to my computer to try it. It’s easy to advertise for something you believe in and more importantly, use every day. I began the process of setting up my account immediately.

The service that provides these merchants and affiliates is called AffiliateWindow. The article provided a brief version of how to set up your account. It takes some time to go through the whole process but it’s worth it. There are tons of merchants with content relevant to nearly any business so it’s easy to find relevant content. I spent a little time selecting merchants complimentary to my own services and soon had what I needed. You’ll see them in the list on the sidebar.

I’ve purchased several books on CSS, XHTML, PHP and Javascript to get to where I am, but there’s still so much to learn. That’s the one thing I love and hate the most about design for the web: constant change. As you go about learning some language or technology, a new one is being developed. It sometimes seems like an uphill battle but it’s never boring. Most things I pick up on my own by doing research and practice, and up to this point that’s true for everything I know about web development. With more and more stuff being driven by PHP and Javascript however, I think I’ll be taking a course this summer to give myself a little bump ahead. Until then, it’s back to the books and Google!