Michael Gaigg: Über UI/UX Design

5Apr0

Esri Redistricting App on Frontpage of ArcNews (Spring 2011)

Posted by Michael Gaigg

Redistricting app featured on ArcNews, Spring 2011

Redistricting app featured on ArcNews, Spring 2011

It's always exciting to see your designs come to life but it's even cooler to be featured on the front page of a ArcNews Spring 2011, one of Esri's main publications.

"Esri Redistricting is a Web-based solution for state and local governments, legislators, and advocacy groups to create political and geographic redistricting plans." The app is hosted by Esri and delivered as software-as-a-service through annual subscriptions (30 days free trial available).

Mockups in MS PowerPoint

First of all I want to mention that the project became a success only for the dedicated and hard work of so many talented people, my part was really only the literal drop on a hot stone.

Very early on I had the feeling that this project would benefit from higher graphical fidelity (maps, charts, colors were important) so I decided to use Microsoft PowerPoint to communicate the designs. Using my wireframe stencils to draw the UI elements we iterated through multiple versions and approaches.

Main Lesson: Use slide master layout as background

Mockups in MS PowerPoint

Mockups in MS PowerPoint

My biggest lesson was the need to create a new layout to the Slide Master which would serve as the background. This layout included the banner (logo, user information), the menu (ribbon) and the map area.

Advantages:

  • Changes propagated to all slides (e.g. modify a label)
  • Easy manipulation of elements on top of static background
  • Remove source of errors (forgot to update a slide)
  • Cleaner in general 😉
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 🙂