7:50 am on February 26th, 2015

Creative Approach to Web Mockups

As a startup founder, I wear a lot of hats, but I'd say the one most comfortable is as product owner... which in a small company comprises everything from product management to development. I spend a lot of time listening to feedback and designing the UI/UX... and I spend another big chunk of time managing my other developers so we create a consistent experience for users and also have a reasonably well maintainable code base.

My favorite Mockup Tool at the very beginning of a project tends to be Balsamiq Mockups because it's quick and easy and everyone gets a picture in their heads within minutes. But I find that as we get further into development and especially post launch - we get better consistency when I have more accurate mockups. That is typically when I switch to my shortcut approach of using web debug tools. The rest of this post is just a step by step of how I am creating a new feature on a page mockup using only the snip tool and Chrome inspect tools.

NOTE: this work requires a basic understanding of HTML, CSS and browser debug tools like Chrome developer tools or Firebug. That said - it truly is the basics because most of what you do to accomplish this work is copy & paste.

In this view - which is used in slightly different contexts in two areas of our web app, we are encouraging users to invite friends to recommend music for the user's upcoming wedding or event. The feedback we've received is that the user doesn't recall who they sent previous messages to, so we've just been requested to put a list of names to whom the message has previously been sent.

This is what the page looks like now:

Screenshot 2015-03-01 12.37.31.png

The first thing I want to do is add a background and footer to frame the page - because that will just be more appealing to users. I already have pages like this - so I go to my login page - and click on the background and select inspect element:

Screenshot 2015-03-01 12.38.19.png

Now in the debug tools I can see the styled background. I am going to copy the html and css from this page to the html in the debug tools for the page I am creating the mockup for.

Screenshot 2015-03-01 12.38.41.png

Below is the debug window where I am adding the background. Note that I just need to right click and edit the HTML.

Screenshot 2015-03-01 12.38.58.png

After I paste in the div that has the styling already configured, I just click to the side of the content in the developer window and then look at my screen. Now I have a background.

Screenshot 2015-03-01 12.41.59.png

I do the same thing to add in the footer color and then I begin working on the content area I want to add. Directly next to the text area where the user can input email addresses, we want to add a block of content that displays the emails to whom they have already sent invitations. I begin by copy pasting the same block of content - then tweek the css classes and the inline styles until the content is what I want. I often have to add spans or paragraphs with sample content so that it takes up the space on my page to display to my developer the 'end-result'. Below is the final markup in the debug tool - you may notice that I added a link to view more and floated that over to the right. When I create my ticket for the developer - I have to be sure to explain what should happen when that link is clicked. I often will create a separate mockup for any popup or other views that I am linking to.

Screenshot 2015-03-01 12.54.25.png

And below we have the final mockup.  All of the images here were pulled with the system snip tool that comes built into the Mac OS. I have done the same thing on windows machines using the Snipping Tool which comes pre-installed.

Screenshot 2015-03-01 12.54.37.png

Hope you enjoyed my little tutorial. For me this is simply using the tools that are at my disposal to quickly demonstrate what I want. It emerged from me using the debug tools to tweak and test my CSS - and over time has evolved to be a major productivity process.