Today I have a special treat for you, an awesome piece of Esri's history (thx Jayson for pointing this out to me):
1994 - www.esri.com launched
Gotta love this!
Reminds me of my first homepage made in 1993, unfortunately I don't have any screenshots or code anymore (one of my biggest regrets). All I remember is that I used frames, lots of beveled buttons an an animated GIF for the email link.
Can't believe how far we've come in only 20 years.
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.
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.
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.
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.