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.

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.