Michael Gaigg: Über UI/UX Design

24Sep0

Free Materials from User Interface 16 conference

Posted by Michael Gaigg

Free Download! Get 9 featured talks (video/audio/pdf) and 8 workshops (pdf only) from last year’s User Interface 16 conference (by UIE).

Featured Talks

  • Culture You are Soaking In It - Steve Portigal
  • Design Challenges CSS Answers - Stephanie (Sullivan) Rewis and Greg Rewis
  • Designing for Mice and Men - Bill Scott
  • Experience Leadership - Kim Goodwin
  • Input Moving Beyond Forms - Luke Wroblewski
  • Meeting Design for the Design Process - Kevin Hoffman
  • The Business Case for (or Against) UX - Brandon Schauer
  • The Many Uses of Application Maps - Hagan Rivers
  • The Unintuitive Nature of Creating Intuitive Designs - Jared Spool

Workshops

  • Designing Rich Interactive Experiences - Bill Scott
  • Designing with Scenarios - Kim Goodwin
  • Good Design Faster - Brandon Schauer
  • HTML5 and CSS3 What Designers Really Need to Know - Stephanie (Sullivan) Rewis and Greg Rewis
  • Immersive Field Research Techniques - Steve Portigal
  • Kicking Off Projects Right - Kevin Hoffman
  • Mobile Web Design - Luke Wroblewski
  • Simplifying Complex Applications - Hagan Rivers

How to get the free recordings?

It’s easy. Just submit your email by Tuesday, September 25, 11:59 PM ET and you’ll get last year’s UI16 talks and materials for free. No tricks, no quantity limits. We’ll send you an email with details on how to access this bundle of goodness.

30Sep0

Voluntary Product Accessibility Template (VPAT)

Posted by Michael Gaigg

The Voluntary Product Accessibility Template (VPAT) is a tool used to document a product's conformance with the accessibility standards under Section 508 of the Rehabilitation Act.

Download

Download VPAT in MS Word format.

Purpose

The purpose of the document is to assist vendors and buyers in assessing the accessibility of a product/website and formalizing a form of accessibility statement. This is not an Section 508 Certification, such a certification doesn't exist!

Format

From Information Technology Industry Council (ITIC): "The first table of the Template provides a summary view of the section 508 Standards. The subsequent tables provide more detailed views of each subsection. There are three columns in each table. Column one of the Summary Table describes the subsections of subparts B and C of the Standards. The second column describes the supporting features of the product or refers you to the corresponding detailed table, "e.g., equivalent facilitation." The third column contains any additional remarks and explanations regarding the product. In the subsequent tables, the first column contains the lettered paragraphs of the subsections. The second column describes the supporting features of the product with regard to that paragraph. The third column contains any additional remarks and explanations regarding the product."

31Aug0

500+ Free Stunning PC Icons

Posted by Michael Gaigg

Set 'Dortmund' at http://pc.de/icons/

Set 'Dortmund' at http://pc.de/icons/


Download 500+ Free Stunning PC Icons

You'll find 10 sets of 1000 high-quality free .png icons in sizes 16x16 & 32x32 for bloggers and web designers to use in private & commercial projects (Creative Commons Attribution 3.0 License). Loving it!

18Feb0

“Buzz this” for WordPress integration

Posted by Michael Gaigg

Google Buzz

Google Buzz

Christina Warren wrote a really nice blog entry on HOW TO: Integrate Google Buzz Into Your WordPress Blog, this will certainly get you started with your own buzz this icon/button.

I installed Google Buzz Button plugin (by Internet Techies) that allows you to add a “Buzz This” button to each of your WordPress posts (download google buzz plugin).
Yes, that's the nicely colored button right below these words - try it out, right here, right now 😉

23Jan0

Powerpoint Wireframe Stencils as Free Download

Posted by Michael Gaigg

The last couple of weeks were pretty busy for me. We were trying to design an application that has potential to grow beyond national importance and get high visibility. Needless to say expectations are high. Time constraints aside, my focus was to extract the goal of the application and streamline the user experience, do I sound like a marketing person yet?

Powerpoint Wireframes

In order to get quick and accurate feedback from our client I wanted to create visuals as early as possible. That's when Microsoft Powerpoint came in handy. I created wireframe mockups and iterated through the slides via video conference which turned out to be not only useful but essential to the mutual understanding. The client was able to adjust their process, our project managers increased their knowledge about the domain and our developers identified potential issues with integrating our mapping software.

Free Download

Download Powerpoint Wireframe Stencils

During the process of designing the wireframes I created my own set of Powerpoint stencils that covers all common interface elements as well as a set of small icons.

Powerpoint Wireframe Stencils

Example Usage

Just recently I started to redesign www.actress.at, the website of my sister who is an actress currently located in Berlin, Germany.
What better opportunity than this to put the wireframe stencils into work. After talking with her for some time over the phone I got a good sense of what her vision is based on the needs of job. Together with some photos from her agency and videos from youtube I created the following three mockups:

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for the Homepage of Eva Gaigg's redesigned webpage actress.at

Mockup for Eva Gaigg's redesigned webpage actress.at

Mockup for a page inside the navigation architecture, in this case videos but also applicable for photos and other presentation items.

Mockup for the response form, probably a critical part of the application since this will be the butter on the bread.

Next Step: XHMTL Prototype

Following the wireframes exercise we created a color palette and implemented an XHTML prototype which roughly took us 3 days. Screen snapshots fed another set of Powerpoint slides for the big demo and will eventually go into the design doc as well. So far, so good.

Help me to improve the stencils

I really hope the wireframe stencils will be helpful for your work (as they made my life easier). I am interested in your opinion. What is missing? What can be improved? Send me your suggestions, ideas, updates 🙂