We do wireframes for more smooth and creative processes

Featured Image

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

4
Top

Care to rate this post?

Author

Lyssandro Reis

Operations Manager

Lyssandro has taken part in a wide range of projects working hands-on with user experience, user interface design, front-end and project management. His broad skill-set and proven capabilities has accredited him as our Operations Manager for the Australia and New Zealand region.

Other posts from this author

Discussion 4 Comments

Add Comment
  1. 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?

  2. 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!

  3. Hi Lyssandro,

    It is great to see your first blog post. Very pleasant surprise upon arrival to the office. :) Thank you!

  4. Yash

    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?

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top