In the middle of all of this hard work, I stopped to attend the Web Blast drinks at the end of last week. Although I didn't land any job offers via my lovely new business cards, they did land me a great door prize - a Balsamiq licence! I love new toys :-)
Anyway, I spent a couple of hours on Monday playing with it, and re-mocked up a couple of pages page for the LIF site. I intentionally didn't read any instructions and just started fumbling around with it, to see how easy it was to use. Once I worked out what elements they had and where I needed to look to find them, it was pretty easy stuff.
I’m glad I did it, as it gave me a much clearer idea of how everything would fit on the new LIF page I was planning to build, which caused me to reconsider the proposed layout.
I liked the 'hand drawn' look of it (compared to say, using photoshop) because you could start to include some colour or style elements and there's no way a client would confuse your wireframes/mock ups for final designs. I’m not sure how far you could take adding style (I couldn’t work out a way to change the font type, but then you don’t need that for this stage in the build I guess), but I didn’t want to spend hours taking it through all its paces, as I have a site to build!
I think it would also be dead handy to use for things like user testing. It's also got a fairly good trial use (so long as you don't want to save anything or mind a message popping up every 5 mins asking you if you want to buy it). Anyway, I thought I'd post a couple of examples of what I built with it while I sat on the ferry (before I ran out of Macbook juice)
This is a mock up of the LIF home page (already code built). I practiced adding in colours and images - too easy! One issue I had was I chose to build it within a 'web page' element. This gave me a lovely image of a browser window (I could even edit the http: address) but it also added an inexact number of pixels to either side of the page and made it hard for me to judge exactly where things aligned (which is important as I’m using the 960 grid build). I don’t think the browser window added a lot of value (although a less savvy client might like seeing their site in a window). I think the better way to use it would be just to build the page on a blank screen, then group the finished piece and copy/paste it into a web page element before showing it to a client...
This is the mock up of the second page, training.html. Once I'd plotted out the images and took the grid sizing into account, I realised the text in the middle was going to have to stick to one column instead of the two I imagined in the PowerPoint mock up (see the grey shading in the middle). This saved me a lot of pain as I coded it this way directly.
I chose to use PowerPoint for my original mock ups as I am extremely familiar with it and can whip something up very quickly. I found Balsamiq offered a lot of the same controls and functionality (like easy access aligning tools), but had the added bonus of accurate scaling and very easy to use drag/drop controls. I would really have liked to have a ruler on both axis to work with (I know a window pops up when you resize objects, showing the dimensions but it’s not the same! I felt it was a bit too guess work/blind luck for my liking. I didn’t feel like I had enough control). This being said, I managed to get a couple of useful mock ups, very quickly, even though I was completely unfamiliar with the package. I look forward to trying it out again on the next new site build project...
No comments:
Post a Comment