Tech-focused Marketing Guru

Product Design – Sweat the Details

Being detailed is a helpful attribute when it comes to product design. Detailing each part of a screen will make your specification infinitely easier for your engineer to read. Mockups should always be as precise as possible to what you’d like built. As a colleague is fond of saying, every pixel should mean something; if it’s not working for you, get rid of it.

Let’s play a game. In the two screenshots below, try to find any differences (hint: there are three)…


DetailScreen1     DetailScreen2


  1. The Address 1 and Address 2 textboxes are each a pixel narrower than the other three fields in the column.
  2. The Address 1 and Address 2 labels are two pixels further to the right than the other labels on the screen.
  3. The state abbreviation is a pixel further up in its textbox than any of the other fields.

Did you catch them? If not, don’t worry – it doesn’t mean you’re not detail-oriented. In fact, you could have an above-average eye and still not see the differences. What separates a Product Design Legend, like the late Steve Jobs, from everyone else was his laser attention to detail. He knew that he might have to push back a few releases, but in the end, he would end up with a superior product.

Guys like him were never afraid to sweat the details.


Product Design – Seeing is Believing



When it comes to Product Design, it’s extremely difficult to build something in your head. Concepts are abstract and are easily confused when kept within the friendly confines of your mind. Even during a brainstorm, it is tough to channel every idea into a clear plan unless you have a house stenographer. That said, it’s important to be as visual as possible throughout the planning process.

Here are a few things I’ve found useful in designing a product from scratch:

  • Whiteboarding: sketch out your ideas for everyone to see. List every idea you can think of. Wireframe screens and layouts and garner feedback from your team.
  • Mockups: be as detailed as possible when creating a mockup. Photoshop is ideal, but in a pinch, MS Paint will do the job (it’s actually a very underrated tool for creative-type work). When you’re finished, you can add the mocks to your spec to show the developer what you’re thinking.
  • Proof of Concept: start creating a few of the screens and show them to your group. Don’t do too much without getting feedback, or you may waste a bunch of time and effort on something that won’t work.

None of these has to be perfect, but rather as close as possible without straining yourself. It’s more about showing your team what you’re thinking so you can reach a consensus and deliver a clear, concise spec to your development team.