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.

Author's headshot

Chris Alvares, Head of Technology

Chris Alvares has written this article. More details coming soon.

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

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy

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.

Related Content

thumbnail image

The Switch: Flash to HTML5

5 MINUTES READ | July 22, 2015