Jason Chee

Stick to the wireframe

2019-01-12


Creating wireframes is one of the starting blocks to product design. When we wireframe, we are laying out the blueprint of a product. This includes user interactions, content population, layouting, feature designing, etc.

After the core features of a product are defined, we move right into the product design phase. We always start with wireframes.

Start on paper

I always starts with a pen and paper. I find pen and paper more suitable because ideas are just easier to sketch out. I don't suggest starting out with software, especially to anyone who is just learning how to design products. Although it may seem more professional, the process zooms-by when you can trash an idea, and start over on a new page. It's great to have a ruler handy as well.

Whiteboard
Whiteboards are cool too.

Moving onto software

Once I have my wireframes collected, I migrate those ideas onto sketch 3. What software you use is not really important. But what is important is making sure that you're designing wireframes at a rapid pace.

Why rapid? Because afterwards there's styling, hardcoding the mockups, prototyping, and if need be, iteration.

Before I layout shapes onto the artboard, I always have my layer styles ready. You will slow yourself down, when you have to continuously change the properties of a rectangle, or circle. It doesn't take long, so consider setting your layer styles before you begin.

Leave notes

If I work on a wireframe that I feel may give me some trouble later on, for example, marking it up as html, I will leave notes right on the wireframe.

Notes like questionable design patterns, html, which css class helpers to use, even the thought of nuking the wireframe, will help you out later on as you develop your product. Sometimes, I even write out the html on the wireframe.

To deter from slowdowns, I always stick to my pen and paper wireframes.

Wireframing

Use codepen

Once my wireframes are finished and if the project doesnt have a tight deadline, I will experiment on codepen. I will start building out the components, and only then, will I fiddle around with different approaches.

See the Pen Understanding flexbox for xiaohu by jason (@jschee) on CodePen.

Closing thoughts

I almost wireframe all my work. It's incredibly difficult to start from scratch without actual ideas laid out. Don't be so lazy. Anyways, you'll naturally get better at creating products because of it.

Many of the patterns, skills, practices I picked up within these 2 years of programming are from readings, or self-discovery.

I'm open to crit and appreciate anyone who can help me open my mind's-eye to different approaches.

Thanks for reading. If you would like to be reminded about new writeups from me you can subscribe to my newsletter below.

Your e-mail address is for my eyes only.

⟵ Back to articles