We do wireframes for more smooth and creative processes

© baldiri/Flickr

Hi everyone,

For my first collaboration in here, I am going to talk about the very beginning of our Magento Design phase – the wireframe.

Some may call it unnecessary when using Magento, as it is a well polished off solution. A good designer is often able to get a quick briefing about a project just moments before pulling their sleeves up and jumping right into putting together full colour layouts. Nevertheless, I would like give to you some of our views and why we do it prior to designing storefronts on Magento.

It’s the project foundation

The wireframe stage is the best moment to assess and make decisions in regards to design, content planning and development. By planning the website features prior to design, it gives the developers a bigger picture of the modules that are coming on the scene, customisation, and it helps to spot potential problems and prevent scope creeps.

From the design perspective, the wireframe presents the site structure and information by separating design from the user experience. It makes it easier to avoid the emotional deviations caused by styled colourful elements, and helps the client, developers and all involved to keep the focus on the information architecture and in solving user experience issues.

Wireframe developed for Mountain Made

It’s time saving

Although not doing the wireframe sounds like a cut back on the project timeframe, doing it on the other hand, is a good way-out of tons of revisions that can be terrible for the project schedule. It’s much easier to change contrast, order, size and importance between grey boxes, rather than elements in a sewn up photoshop design ready for the front-end to start his job.

It enhances the creativity and collaboration

When skipping the wireframe phase, we lose the opportunity of going further and excelling the client’s expectations. Usually we mimic previous solutions not giving a chance for new ideas. Furthermore, it chokes collaboration; a project in is just another project out.

Doing the wireframe generates inputs, from the client and from the team itself, it is a stage where ideas can be easily thrown around. It also creates a valuable opportunity for learning about the client. You would be surprised of how the knowledge acquired by your client during the wireframe phase translates in faster communications, more empathy and confidence. In the same way, you get to understand the client much better, saving you a lot of back-and-forths.

It’s scalable

I must agree that some projects need the wireframe more than others, which is not to say that smaller projects do not need wireframes. It’s common sense to assume that little sites require little wireframes, which don’t add much to the project timeframe. Therefore, if you do a little wireframe for a little project, you save just a little time. Saving little time in the long run turns out to be a lot of time and money. The equation is still the same for big projects.

Not doing the wireframe is a risk that we believe it’s not worth taking.

All the best, see you next time!

Lyssandro Reis

You made it all the way down here so you must have enjoyed this post! You may also like:

Reinventing the running game for a German retailer shop4runners Maja Kardum
, | 0

Reinventing the running game for a German retailer shop4runners

(Why) should your designer be Magento certified? Aron Stanic
, | 0

(Why) should your designer be Magento certified?

Your Magento shop deserves a custom tailored theme! Ivona Namjesnik
Ivona Namjesnik, | 3

Your Magento shop deserves a custom tailored theme!


  1. Hi Lyssandro,

    Wireframe is very crucial part of any type of projects. It saves lot of time and one can get much information and Idea from the client.

    At the time of wireframe creation, one must consider usability aspect of the site. How can you identify and implement usability aspect at the time of wireframe creation of particular site?

  2. Hi Lyssandro,

    Good to point out, seems to be a step in the proces that is forgotten most of the time. It get’s skipped because it’s seen as unnessasary time consuming step. But in hindsight, most agree it would’ve saved time instead of wasted it.

    Would you also like to share your favorite wireframing tools?

    1. Hi Guido, I have tried the balsamiq, which I find quite cool and easy to use. However, I am used to do my wireframes on photoshop myself.
      I have a simple grey UI kit with all elements, like boxes, buttons, form fields, that I like to use. I just drag and scale them into a grid that I am thinking about using. I just find it easier and works better for me.

      I’ve seen people that like to hand drawn them. The most important is the thought on doing it.

      Please have a look at this group on flickr: ilovewireframes, it’s quite cool to see how people do it in so many ways. Thanks for your comment, cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.