Resources and tips to develop a nice looking graphic user interface.

 
 
 

Mockups and scenarii

My favorite application to create mockups and to illustrate UI use-case scenarii is Photoshop. It provide very fast results and thanks to an extensive use of Layer Comps and Smart Objects it is easy to create variations and interations of visuals and specification sheets.

In some specific cases it may be required to create a functional prototype of a user interface. To do so I found that Expression Blend, from Microsoft, is really a nice piece of software. It is so much powerful and well-designed for building application GUI that you wonder why some market-leading technologies such as QT don't have something like that.

 

Best icon resources

  • Icon Finder (iconfinder.com)
    An icon archive website with many different styles
  • Large Icons (large-icons.com)
    Many icons of different styles, at various sizes

Icon creation software

Photoshop

Manufacturer: Adobe

By far the most obvious and efficient choice to create icons and visuals.

Very complete, efficient and well thought, Photoshop is where I do all my icons and GUI sketches.

The more it goes and the most powerfull Photoshop is with vector shapes. Almost everything you need for icons can be done with vertor graphics and layer effects. No more need for Illustrator since Photoshop CC 2014 2, which is able to export in .svg format.

IconWorkshop

Manufacturer: Axialis

Dedicated to pixel-based icons, IconWorkshop is a complete drawing package. It is especially interesting for creating favicons and mipmap OS icons has it handles very well their multi-resolution. Personnaly I only use IconWorkshop for that :D

Expression Designer

Manufacturer: Microsoft

Expression Designer is a standalone version of a nice bigger UI design application called Expression developed by Microsoft and now part of Visual Studio 2012.

Since summer 2013 Expression Designer is now FREE. It allows the creation of vector-based icons as well as interactive prototypes of user interfaces.

 

Expression Designer can be downloaded on the page of Microsoft Expression:

http://msdn.microsoft.com/en-us/expression/default

Example of how to create an icon for Windows 8:

http://templarian.com/2011/08/06/tutorial_creating_an_icon/