Concrete Canvas

Since we’re in the heart of tornado season here in the Midwest, I thought that this would be an appropriate bit of design news to share. Talk about an interesting solution to a common problem in the disaster management field!

Curiosity and Innovation

I’m clumsily typing this post on our new iPad (we’ve been getting requests to develop apps for the iPad, so I thought it was a good enough excuse to buy one to see what they’re all about!). But this post isn’t specifically about the iPad–it’s about Apple…

I bought my iPad from an Apple store. I didn’t order it online, and I didn’t just run down to the nearest big box electronics store. Both of these options would have been easier and more convenient. I specifically held out until I could make a trip to an Apple store because every time I’m in one I have a great experience and I learn something new.

This time was no different. I learned about their in-store ordering and delivery system, which allows the “genius” who you get assigned the minute you walk through the door, to complete the order on any of the available devices in the store and get it hand delivered to you in a matter of minutes by a runner from the back warehouse. And while you wait the minute or so to get your new equipment, it leaves a perfect opportunity to ask any last minute questions or shop for the must-have accessories.

Once the equipment arrives, and you have your accessories picked out, they scan your loot with tricked-out iPhones that process the order and credit card payment. And then you’re on your way, with the sales person who guided you throughout the entire process and never left your side for one second, walking you out the door.

Talk about seamless. And reassuring. Exciting. Addicting. Profitable!

Basic Wireframe Tool – Free PDF Download

(website) wireframe

- a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages – Wikipedia

Wireframes are a great way to get ideas out into the open quickly for discussion.  You obviously don’t need anything fancy to create a basic wireframe or idea sketch (heck, a stick and patch of dirt work fine!), but we’ve found that adding a little browser chrome really helps to facilitate the process and communicate the rough ideas more clearly to a broader audience.

You can download our tool for creating wireframes for free here:

FHD Wireframe Tool – PDF

And here are a few basic principles for creating successful wireframes:

  • Take a layered approach. Start by thinking about the general flow of your website or application, outlining the main actions and user experience first. Then move to more detailed sketches, creating basic layouts for each of the individual pages.
  • Don’t be too literal. Your wireframes will provide the most value if they are quick sketches done in succession–broad strokes to capture main ideas, not detail oriented designs. Your pixel-perfect designs will come later.
  • Embrace the power of iteration. Paper is cheap, and although you don’t want to be wasteful, going through a few sheets at this stage of the process will save boatloads later on in the process. Don’t be afraid to sketch out a half-baked idea to see where it leads.  Ask for feedback, then incorporate that feedback into your sketches. Read about usability, and follow best practices for those techniques which are commonplace and need to be recognizable and easy for users. Build upon early sketches.
  • Remove all unnecessary elements. Once you’re happy with the direction things are headed, look back over the designs to see if you really need every part of the design. Chances are you have an unnecessary feature or two that doesn’t add enough value to justify keeping.  If this is the case, remove it early on (trust me, it will be much easier to start development, and, surprisingly, your users will thank you later when you give them a simple interface!).

So start sketching! You don’t have to be an illustrator, or even in the design business to gain from sketching out your ideas. If you’ve got a website and sense that some aspect should be made simpler or easier to use, use this basic wireframe tool to communicate your idea to your web developer!  They’ll thank you for the clear communication.

Next Page »