Going Mobile Series
Recently, Michael and I got an amazing new tool â€“ AxureRP. Simply put, this tool allows us to quickly mock up websites with a technique called wireframing. Wireframes are not real websites, but can be thought of as blueprints for a website. Theyâ€™re rough sketches of both layout and interaction which allow us to focus on the functionality of the website before we worry about minute design decisions. Wireframes donâ€™t contain the full functionality of a web site, nor are they going to be complete mockups of every single page. Rather, wireframes are mockups of the most important interactions between the user and website, and to hammer out tricky structure or functionality. In fact, using Wireframes to mock up too much of a website can actually be a detriment, as it can become a game of diminishing returns.
And when I say â€œquickly,â€ I really mean it. The Wireframes Iâ€™m about to show you only took me about 3 hours to create, starting with some sketches and the ideas that had germinated after writing the first two parts of this series, and this is my first set of Wireframes Iâ€™ve ever done with AxureRP. That agility is what attracted me most to the program.
What Iâ€™d like from those of you following along with this series is to please really play around with these wireframes. Hop onto your mobile device and check em out for me on there. Let me know what you think of the interaction. Is it easy to navigate? Does the structure seem logical? Is it hard to accomplish a task? Can you get back to the home page easily?
Show me the wireframes!
Ok, Iâ€™ve done enough bloviating, just a couple of caveats: I wouldnâ€™t recommend navigating the site with tree structure provided by AxureRP (which is handy to make sure youâ€™ve looked at all the pages). To get the most out of the demo, it would be best to just use the navigation Iâ€™ve built into the wireframes. Iâ€™ve highlighted the linked buttons in yellow, so it should be obvious which buttons actually go somewhere.