My Recipe for Success
Recipe for success
In a large bowl, add the original user need. Stir in business strategy, market and technology opportunities. Add a pinch of sponsor-, cost-, and lifespan-considerations. Bring to a boil, then reduce heat. Let it simmer for 1-3 sketch iterations, or until mockups thicken. Season with images, jQuery animations, and cascading stylesheets. Bake in pre-heated development environment until golden brown. Serve while still hot.
Redesigning my Personal Homepage using Balsamiq Mockups
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?
Including Tweets into your Webpage
Very simple and effective. I started off researching into php libraries for twitter before I settled on a very pragmatic approach which I'd like to share here. I separated the code into smaller bits for clarity and better understanding.
Somewhere in your code include this HTML snippet (style the HTML using CSS id selectors):
<div id="twitter-container"> <div id="twitter-container-content"> <!-- tweet retrieval in here --> </div> </div> |
Copy and paste the actual PHP tweet retrieval code into the section above. Don't forget to rename the screen_name to whatever your twitter handle is 
print("<h2>Latest Tweets</h2>"); error_reporting(-1); ini_set('display_errors', true); $user = new SimpleXMLElement('http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=michaelgaigg&count=3',null,true); foreach($user->status as $status){ print("<div class=\"twitter-entry\">"); print("<div class=\"twitter-entry-text\">".renderUrls($status->text)."</div>"); print("</div>"); } |
Add this PHP helper function (maybe you have a tools class) that will parse the tweet and detect hyperlinks which are then wrapped into the HTML A tag so that they become clickable.
function renderUrls($originalString) { $returnString = ""; $stringToArray = explode(" ",$originalString); foreach($stringToArray as $key=>$val) { //$URL_Validation = ereg("^[^@ ]+@[^@ ]+\.[^@ ]+$", $val, $trashed); $returnString .= (substr($val,0,7) == "http://") ? "<a href='".$val."' target='_blank'>".$val."</a> " : $val." "; } return $returnString; } |
That's it, no magic!
Highlights of Week 02/2011
Happy New Year and welcome back. After a wonderful family vacation in Austria, Europe (and white Christmas) I'm back and pleased to share my insights and what I'm learning for myself on a daily basis with you. As always, if you have an interesting article or link you want to bring to my attention, post it in the comments or tweet @michaelgaigg.
- 7 Essential Red Flags to Watch Out for in New Clients (by John O’Nolan) - look out for these red flags, they really can turn your job into a nightmare.
- Blogging Maps: The Design Galaxy (by BuySellAds) - discovert the galaxy of design in this interactive map.
- 10 Practical Ways to Bust Through Web Designer’s Block (by Sacha Greif) - Some nice tips what you can do when your brain is fried
- Christmas Design Resources: Santa Claus (by Bellefoong) - plenty of the good stuff here.
- 7 Tips for Building a Better Branded App (by Sarah Kessler) - Branding is important and Sarah offers some really nice tips.
- 10 Ideas for Creating Innovative and Unique Web Designs (by Jason Gross) - keep the ideas popping.
- Debunking User Experience (by Dean Schuster) - You can do it! Have a read..
- 10 Things You Can Do to Become a Better PHP Developer (by Raphael Caixeta) - use a PHP framework? uhm, yeah, right! coulda, shoulda..
Esri World Cup 2010
From left: Monika Nientiedt, Joseph Vargas, Evelyn Guido, Diane Samu, Val Dotchkov; Francisco Perez, Alexei Olekh, Ventislav Korichkov, Selim Dissem, Michael Gaigg
Yesterday we played the first Esri World Cup, an Esri internal co-ed soccer (football) tournament with 10 teams and players ranging from super-athletes to old-time veterans and resurrected dinosaurs (myself included).
It was a ton of fun, we saw some great moves and exciting games and best of all - we made second place - whoohooo!
We won our group in a sovereign manner and beat the second place team of the other group 7:2 in the semi final. Moving to the final we faced the expected opponent - GiS (Geeks in Soccer) - the strongest team of the tournament and anticipated winner just by looking at their roster and experience.
We held the 0:0 for quite some time until a long pass outmaneuvered our defense which led to the 0:1, followed minutes later by a disputable penalty kick (0:2). We managed to shorten to 1:2 just before half-time and basically played power-play in second half when GiS changed their strategy to holding the result with an ultra-strong defense and counter attacks, one of which resulted in the final 1:3 and secured their win. Congrats!
Highlights of Week 48/2010
- What is an Experimental Typography? Trends and Examples (by Aimee Sway) - beautiful typographic examples.
- Human Behavior Theories That Can be Applied to Web Design (by Alexander Dawson) - what did you say about zombie's?
- What Every Web Developer Should Know About Front-End Performance (by Joel Sutherland) - don't let optimization slip under the table - it's to be taken seriously - start here...
- Access Ability (by the association of registered graphic designers of ontario) - A Practical Handbook on Accessible Graphic Design.
- 24 Ways (by Drew McLellan and Brian Suda) - Holiday season is here and 24 ways gives you 24 articles written by industry leaders. Enjoy.
- Silverlight 5 Plans Revealed (by Tim Heuer) - exciting new features ahead (beta in spring, release probably in Q3 2011) - XAML databinding debugging
- 15+ Free Holiday & Winter Vectors: Winterize (by Chris McConnell) - right in time, 17 vector graphics for the xmas season.
- The Digital Marketer's Master Library (by Mitch Joel) - marketing is part of our daily job/life and this list is incredible - so check it out.
- Australian DDA moves ahead (by Shrirang Prakash Sahasrabudhe) - Australia is now officially WCAG 2.0 for accessibility conformance.
Highlights of Week 46/2010
- 10 Intermediate and Advanced Tips from PHP Masters (by Jolie O'Dell) - experts offer their advise; nice compilation.
- Beautiful (Free) Fonts for Titles and Headlines (by bellefoong) - niiice.
- Ways to Horrify Website Designers (by Alexander Dawson) - right in time for Halloween
- Design is Choice (by Dmitry Fadeyev) - Dmitry's take on Google removing the "http://" portion in Chrome's address bar
- The Seven Deadly Sins of Design (by Rob Bowen) - a funny take on seven deadly sins.
- Google Chrome Extensions for Web Design Students (by Julia May ) - Ctrl/Cmd + Shift + J ... that's all I say...
- How to Design the Perfect Business Card (by Rob Bowen) - Great article that serves as categorization and motivation at the same time.
- jQuery 1.4.4 Released (by Addy Osmani) - may I introduce: .fadeToggle() - with 1.5 coming next year.
Anything I've missed?
Post it in the comments or drop me a note.
World Usability Day 2010
Today is World Usability Day. Check out online events and all the other events worldwide.
Why?
So many things are broken nowadays. We learned to live with it, blame ourselves and just fit in. But it doesn't have to be like that!
What?
Raise awareness for making things (and by things I mean pretty much anything that surrounds us, not only technology) easier, more self-explanatory, working. Technology has to serve us not the other way around!
How?
Teach your children to solve problems! Teach them to understand what they are doing, saying, arguing, using. Teach them to make educated decisions, to be critical about anything shiny, fancy, to not follow a hype blindly. Teach your children to think in the people they work with and to communicate well.
Teach our children what we are doing today and tomorrow will be (even) brighter.
Web GIS: Principles and Applications [Paperback]
Web GIS
I'm happy to introduce a new book which was co-authored by my colleague Pinde Fu: "Web GIS: Principles and Applications".
I'm really excited about this, not only because good GIS resources are scarce but also because he used screenshots of applications that I have designed over the past years, e.g. geodata.gov, GeoPortal Toolkit, Loma Linda Medical Center Response System, HydroViewer.
How much better can it get when your design ends up in a book?
Audience
While the content of the book is targeted at readers at all skill levels I can see it as a great teaching source as well as invaluable resource for managers and aspiring GIS developers to understand the principles of web applications.
Content
The content of the book is focused on the conceptual level (you won't find code samples) by trying to be systematic and as comprehensive as possible which I believe was done superbly. Nevertheless the authors do cover important new developments like geospatial Web services (REST), geobrowsers, cloud computing, geoportals, mashups, mobile GIS, Gov 2.0, geotagging, ArcGIS APIs for JavaScript, Flex, and Silverlight.
Table of Contents
- GIS in the Web Era
- Technical Basics
- Geospatial Web Services
- Geospatial Mashups
- Mobile GIS
- Geoportals
- NSDI in the Web 2.0 Era
- Web GIS Applications in E-Business
- Web GIS Applications in E-Government
- Hot Topics and New Frontiers
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- 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
- Dashboard Design
