The first step in creating a UX design for an ecommerce website development project is to know the scope, it’s business logic and the users who would be using it. The second important step is to create wire frames also known as ‘UX Wire framing’.

So what is a Wire Frame?

A wire frame is a rough basic presentation of a User Interface without any design elements. An easy way to understand what a wireframe is to think of a floor plan that architects create before they start constructing the actual building. In the floor plan the location of each part of the house such as room, toilets, hallway etc is mentioned based on the standard practices and the expectations of the users. In the same way a wire frame is a floor plan of the structure of each page of the application showing where and how the content and various features of the app would be displayed. It can be a pencil sketch to a well commented diagram.

A wireframe is created for a number of reasons:

  1. To help the visual designers a base to create designs.
  2. For functional specs consultation.
  3. Showing the features to the investors/clients without going too deep in actual design.
  4. For testing out ideas at early stages.

Simple wireframes can be created using just a pen/pencil and paper. More professional wireframes can be created using tools like Axure and some online sites like Balsamiq, UXToolbox, Indigo Studio  etc.,