App Designer Series: Icon and Interface Design – pt. 1

An important part of having a successful app is having a well thought out interface and icon design. In order to do that it is important to see what other people have done and where to find resources to make the best icon/interface possible. In order to do so FYA is going to release a series of “design” related posts geared towards interface and icon design. These posts will break down the designs, show where to find inspiration as well as give your great resources to learn from the great icons that have already been established so you to can make your app have an amazingly effective user interface as well as a stunning icon design. These are few resources to get you started on your icon & interface design journey.

Picture 14Apple Human Interface Guidelines

Aqua offers a photo-illustrative icon style—it approaches the realism of photography but uses the features of illustrations to convey a lot of information in a small space. Icons can be represented in 512 x 512 pixels to allow ample room for detail. Anti-aliasing makes curves and nonrectilinear lines possible. Alpha channels and translucency allow for complex shading and dimensionality. All of these qualities allow you to create lush, vibrant icons that capture the user’s attention.

Picture 13

40 Tutorials for Creating Highly Detailed Icon Designs

As icons appear in larger sizes through appearances in Mac applications and rich user interfaces the icon designs themselves are becoming more and more detailed. Check out this collection of 40 of the best icon design tutorials from across the web, each covering the process of designing a highly detailed icon graphic in Illustrator or Photoshop.

Picture 12

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

Designing a good interface isn’t easy. Users demand software that is well-behaved, good-looking, and easy to use. Your clients or managers demand originality and a short time to market. Your UI technology — web applications, desktop software, even mobile devices — may give you the tools you need, but little guidance on how to use them well.

Picture 11

Designing Interfaces: Patterns for Effective Interaction Design

The title of the book is its chief personal design premise. All of the tips, techniques, and examples presented revolve around users being able to surf merrily through a well-designed site with minimal cognitive strain. Readers will quickly come to agree with many of the book’s assumptions, such as “We don’t read pages–we scan them” and “We don’t figure out how things work–we muddle through.” Coming to grips with such hard facts sets the stage for Web design that then produces topnotch sites.

Picture 10

42 Amazing Photoshop and Illustrator Icon Design Tutorials
This article is a compilation of the best Icon Design Tutorials, I think everyone will be able to learn something new from these tutorials.

The title should have been 41 Amazing Photoshop and Illustrator Icon Design Tutorials and also not Forgetting the Single Gimp Icon Design Tutorial. (A little long, don’t you think).user’s attention.

Picture 9

30 iPhone Apps with Sexy Interfaces -

The iPhone is a wonderfully designed device, sporting sleek curves and oozing minimalism. Fortunately, the great design doesn’t need to stop there. Ever since the App Store went live, we’ve seen some incredibly attractive software released for the platform..

Picture 8

[Fireside Chat] Icon designers (Part 1 of 3)

This is Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago. Visit the Product Blog for more information on our products.

Picture 6

iPhone Apps Design Mistakes: Over-Blown Visuals

We want to take a closer look at the design of iPhone applications and showcase some good and bad examples, best practices as well as useful ideas and recommendations for your next iPhone app design. This article is a first post of a new series related to the design of iPhone applications.

Picture 5

10 Tips for Effective Icon Design

Translating the ‘iconic’ features of an object into something that is metaphorically meaningful and instantly recognizable is no easy task — particularly when the design needs to be as effective at 48×48 pixels as it is at 256×256!

A memorable and functional icon is beautiful, iconic, meaningful and functional. Here are ten wise tips on how to create outstanding icons.

Picture 4

We Love Icons:

We Love Icons is a joint project by Guifx® designers Dan Wiersema and Nando Albuquerque. We started We Love Icons because, well… we love icons!

Our sole purpose is to provide you with ONE place to go to find links to the BEST freeware icons on earth.

Picture 3

10 Mistakes in Icon Design

It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

Picture 2

25+ Fresh Icon Designers & UI Ninjas

We recently needed an icon designer for a quick job and it was far more time consuming that we thought to find a good freelancer portfolio for this kind of work. So we spent a few more hours and came up with this awesome list of icon designers and UI professionals.

Picture 1Icon Resource:

Let yourself be taken by the hand through the world of visual interface design, and learn how to design icons for your own application, website, or company. Here a few reasons why it’s worth checking out; Learn all and even more about icon design in full HD quality Quicktime format movies.Icon Resource provides iPhone / iPod ready videos to load into iTunes and watch on the road.

Designer, Maker of Things | Creative Director – @boomtownroi


If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote