()()
^.^
.. ..°

Pattern.
…Design Pattern,
…Interaction Pattern,
…Interface Pattern?
…User Interface Pattern?
…User Interface Design Pattern Libraries!

Software developers know Design Patterns as solutions to certain software design problems.

By the way, originally the idea of a pattern language was coined by the Austrian architect C. Alexander and was later being adopted by the software community.

Meanwhile, UI-Designer may know User Interface Patterns, which play an important role when they are designing user interface for software such as web apps.
Such patterns helps learning about design standards and guidelines, follow some of them, enhance and extend; or if you just need some inspiration have a look!
Goal is to create web-design that is not only technically fully functioning but also appealing to its users!

Below I would like to share some resource links to websites about UI patterns:

• User Interface Design Patterns
• Patternry: Create, Share and Organize Design Pattern Libraries
• Pattern tap: Interface Design Collection for Inspiration and Fun
• Yahoo! Design Pattern Library
• Welie.com – Patterns in Interaction Design
• Patternbrowser: Interface Design Patterns
• Designing Web Interfaces: 12 Standard Screen Patterns and 100 Examples

Be also aware of differences in UI design patterns when creating user interfaces for mobile instead of traditional web.
Though most of the mobile UI development frameworks (like Query, Senacha etc.) already make use or respectively consider most of the important UI design patterns, it is still essential to have a look on the several UI design patterns for mobile UIs:

• Mobile Auto-Suggest on Steroids: Tap-Ahead Design Pattern, Smashing Magazine
• www.androiduipatterns.com
• iOS Human Interface Guidelines
• Mobile Web Programming Blog Article about UI Guidelines

This should be an inspirational collection but not a complete one. There are also several specialized design patterns for special accessibility issues, learnability issues, cooperation software, data visualization, interaction in games etc.

To try it out you only have to follow a few steps:

1. Download & Install RUBY (need for windows; on current osx its already installed)
2. Getting compass & setting up environment on Windows:
[prompt:] gem update --system
[prompt:] gem install compass
   Or alternatively for Linux:
[prompt:] sudo gem install compass

   (Note: Windows may require a console openend as administrator!)
3. Setting up project:
[prompt:] compass create
[prompt:] compass watch

4. Edit the *.scss files in the sass folder with any text-editor.
   If you used compass watch before the SCSS-files will be compiled automatically into CSS.
   Alternaticely just use:
[prompt:] compass compile sass
   Good luck & have fun!
5. Additions to compass: The CSS Parser:
[prompt:] gem install css_parser
   (Compare Rubygems on CSS_Parser)
6. References:

• Compass Official site
• Mashable Tutorial “HOW TO: Get Started With the COMPASS CSS Framework/”
• Thesassway on “Getting started with Sass and Compass”
• SASS official Site
• See also LESS – The dynamic stylesheet language, an alternative js-based version for dynamically compiling CSS with variables, nested rules, mixins…
• See also Closure Stylesheets – Google Project Hosting, anpther alternative js-based version for dynamically compiling CSS with variables etc.
• Additionally, see also – next to SASS – an easy way to create markup code for your HTML with HAML

We also took the chance to take a two-days-tour through the alps, namely starting from Finkenburg and riding to Italy and backwards, riding at least 110km and 4200hm. For planning this tour we used the information given on: http://www.bike-magazin.de/?p=875

Further pictures can be found in my facebook’s “Brenner Trails, August 2011″ album.

My friend Philipp published the tour-description, namely GPS-Track on gpsies.com. There you can see the track’s Altitude Profile, embedded map view and some other information.

See the link to the GPS-Track on GPSIES.com.

I extended it a little bit and updated my blog’s design. Voilà.

Please feel free to leave your comments & feedback.

26-29.05: Biking around the lake of Garda, Italy:

03-05.06: Mountainbiking in Paklenicka, Croatia:

There we were both mountain- as well as roadbiking around the Weissensee, the Millstätter See and the Ossiacher See.

Some of the routes can be found as GPS-Tracks on gpsies.com.