This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

PMG Digital Made for Humans

Stop Wireframing and Start Sketching Your Mockups.

2 MINUTE READ | February 28, 2017

Stop Wireframing and Start Sketching Your Mockups.

When creating a new feature or building a new piece of software from scratch, one of the first steps in the software development lifecycle is always mocking up your design and bringing your vision to life. Sometimes this requires working with a graphic designer or UX specialist, but really, who can design what you have floating in your head better than you? That is typically where wireframes come into place. Without being a graphic designer, the consensus is that it is really hard to mockup software. Enter the pen and paper wireframes (or Balsamiq if you are like me and do not carry a pen and paper). It makes thinking of layout very easy:

However, what these wireframes do not do is allow you to think about every issue before starting development.

This is where a program called Sketch comes into play. With Sketch, and one of the numerous real-life web templates (most popular being the Twitter Bootstrap themes), you can customize all of your elements, and have code exported that your developers can use to create a very similar experience. It is also very responsive design friendly if mobile UI is your thing as well.

Stay in touch

Bringing news to you

Subscribe to our newsletter

From this example, it is very easy to see that the save button is the primary action for this page and we are inside the “To Do Lists” navbar menu item. Now in your design/product meetings, three fewer questions need to be asked and discussed, thus improving the speed that new features are designed and implemented.

Posted by: Chris Alvares

Related Content

thumbnail image

Get Inspired

How We Built and Tested a New Website in Five Days

7 MINUTES READ | May 6, 2016

thumbnail image

Get Informed

The Switch: Flash to HTML5

5 MINUTES READ | July 22, 2015

thumbnail image

Get Informed

The Redesigned PMG Website (Part 1) : My 5 Favorite Things

4 MINUTES READ | August 15, 2014