Free Map Controls for Balsamiq Mockups
Posted by Michael Gaigg
Map Controls for Balsamiq Mockups
Download the Map Controls for Balsamiq Mockups on mockupstogo.net.
The collection includes a wide variety of map controls like zoom bars, pan controls, scale bars, overview map, logos, pins, rings. All of them are symbols that you can add to your assets directory.
Enjoy and let me know if I missed something… and like it or re-tweet it 
Redesigning my Personal Homepage using Balsamiq Mockups
Posted by Michael Gaigg
I've been working for quite some time with Balsamiq Mockups now and it truly made my designer life easier especially because I'm able to:
- Work through an idea and communicate it and iterate it
- Use incompleteness to identify holes and relationships
- Record and reflect what I am hearing and seeing
- Capture my results and document them
Sure, smaller projects - like my personal homepage - might not benefit as much from mockups than larger ones, but it still helps me to settle on a design quickly (and rather inexpensively) before I get into the hassle of coding.
What is a Sketch?
A simply or hastily executed drawing, especially a preliminary one, giving the essential features without the details.
Beginning
Step 1) Sketch after some initial iterations
First and foremost comes the concept. It grew in me over time, a little aha moment included.
I then sketched it using Balsamiq and refined it until I felt happy. Looks pretty much what I had in mind.
At this moment I'm not worried about color schemes, fonts or implementation specifics. I might have something in mind and almost certainly I know technical implications of my designs, e.g. can I include my tweets, even though I sometimes disregard them in favor of not limiting myself.
Most important at this time is that I sketch the WHAT I want to achieve, the HOW comes later.
Evolution
Step 2a) Including my tweets
Step 2b) Adjusting the tweet element to be less obstructive
I rolled out my personal webpage and was happy... until I strongly felt that my tweets need to appear to give the page some dynamic flavor.
So I went back to the drawing board (my Balsamiq) and sketched out some possible locations for the tweets on the screen.
My goal was to keep the page simple and uncluttered.
Well, something has to give (or maybe not?). I wrestled with myself and convinced the purist in me that tweets would actually add value to the page by showing who I am and what I have to say which in turn could be attractive to whoever visits my site. The objective stayed the same: KISS, keep it simple, stupid.
So I had to find a location and a metaphor to include the tweet section without obstructing the page and overwhelming the message. I found that a speech bubble pointing from my name to the tweets to be the best metaphor.
Result
Step 3) Implementation... the result
So this is what it boiled down to: http://www.michaelgaigg.com.
Ok, the mockups didn't help me to communicate ideas to my client or convince somebody of a better design choice, but they helped me to iterate through some samples before I dove into coding. It kept me from some of my frustrations of earlier days when I was more concerned about the looks before I actually knew where I wanted to go. It kept me on track and I hope that can be seen.
What do you think of my new personal homepage?
Beware of the Frankenstein Design
Posted by Michael Gaigg
Frankenstein Design
"It was already one in the morning; the rain pattered dismally against the panes, and my candle was nearly burnt out, when, by the glimmer of the half-extinguished light, I saw the dull yellow eye of the creature open..." (Chapter 5). Sounds familiar to us geeky programmers out there? Yes, and the root of all evil are clients that design their webpage from a sushi menu, picking whatever they like.
Usually I encourage my clients to look around, get inspired and show me what they like. It gives me a sense of how they think and into which directions they want us to go. But never forget: Clients identify problems, designers provide solutions! Understand why the client shows you a specific page or design element and what exactly they like in it. Don't feel pressured to include every detail in your final design otherwise you wake up at 1am facing a yellow-eyed creature and you'll end up with a Frankenstein Design.
Warning Signals
What are warning signals that your project might face a Frankenstein Design?
- Client mentions Stakeholders too often. Money makes the world go round, but will eventually ruin the user experience.
- Client fell in love with a bad design. Try to build solid knowledge about good and bad design principles so you can explain the pro's and con's of a particular design.
- Client needs to please too many interests. It's understandable that every party involved wants to see their logo on the page, but honestly, one is enough
- Client decides on a color scheme. Besides corporate colors clients feel strongly about certain colors that either clash with your design, psychological theory or existing color schemes or are simply bad taste altogether.
- Client has no idea at all. That means trouble! Not now, but once you are done. Guaranteed.
- Got more?
What you can do
- Listen. Hear what the client tells you and try to understand why they say it.
- Feel. Sense what the underlying need is and translate it into design elements.
- Talk. Speak up, don't shut up, don't wait until it's too late.
- Fight. Pick your battles, don't let rules overrule what you think is right, at least voice it.
- Reconsider. Don't get hooked to an idea too strongly, be open to erase your white-board drawings and start over.
- Document. Make notes, sketch ideas, capture screens, summarize. Send these notes out.
- CYA. Cover your ass, seek consensus and approval, set it in stone through written acknowledgments (mockups help).
Send me your experiences? What is missing on this list?
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 the Homepage of 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 
About Me
I'm Michael Gaigg, Lead UI Engineer at Esri's Prof. Services.
I have over 8 years of experience in designing map interfaces and can't stop thinking about improving them.
Help me by sharing your thoughts, ideas and comments.
Categories
- Accessibility (16)
- Code Samples & Tips (8)
- Conclusions (4)
- Design Guidelines (11)
- Designing Map Interfaces (3)
- Go figure (9)
- Good News (19)
- Here and there (21)
- Map Applications (7)
- This Week's Highlights (53)
- Usability & UCD (22)
- Web Design (21)
Popular Posts
- ColoRotate – 3D color scheme generator with social component
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
Latest tweets
- Awesome resources for website designers http://t.co/oB77As8O 2 weeks ago
- I just contacted Rep. Jerry Lewis to oppose #SOPA #PIPA - Join me! http://t.co/BuFcgvqf #wikipediablackout 2 weeks ago
- Awesome #login #form #sample http://t.co/hob6dtvF 3 weeks ago
- Photo: Dude, just don’t pin the place you’ve been… ;) http://t.co/lwf3gIU8 3 weeks ago
- Photo: Who wants to buy a church in Los Angeles? http://t.co/0SJrYxCv 2011-12-31
- More updates...
Posting tweet...
