Bad habits way back in the days, when we would acquire new project ideas and user requirements documents from our clients, Perhaps Sketch out few ideas and jump into intriguing Photoshop designing.

Our reasoning for that methodology was to hit design gate run right out immediately to allow time for revision.

After some time, we came to realize that we spent a lot of time designing, why? Revisions took all the time. The revisions were complicated; we had to adjust layouts, Graphics, and typography. Everything was frustrating, disastrous for project timelines, worrisome for clients and wearisome for us. It took a while before we realize we need a different approach. We decided to go back to “Square One” initial process we ignored earlier “Wire-framing.” We started with Gray-boxes wireframes included it to our design process, then moved to another process and added it to the design process. At the end the model was falling in place, thanks to “Wire-framing”, it saved our time and helped us address problems earlier. For that reason, I vote wire-framing as the “first Gate” in the design process.

Wire-framing User Experience Designs

Who knows, at the earliest stage you can recognize potential usability challenge in your designs. Sometimes great project concept with strict (URS) user requirements, during the initial process they seem to fall in place. Again worse happen when we start laying plans for papers, “What happened?” we ignored wire-frame which takes only a few minute to sketch a plan than colorful Photoshop. Better start adjusting earlier than later.

Wire-framing as a Time Management Tool

Time management is an important technique for every successful project if a project is on a tight timeline; you might think “why to waste my time Wire-framing, so I better skip to colorful Photoshop.” We made that mistake initially, but instead we ended up revising the whole concept of which it was time-consuming and a waste of resources. Revising Gray Boxes and sketches are much easier than reviewing full-color designs incorporated with several complex elements.

The wireframe is used to create an actual and correct dimension of a page. Once approved by the client, we only need a graphic remedy for boosting its appearance. The trick is if the wireframes, sketches, and gray boxes are in order, then we won’t have time for revision. Instead, we will skip to the next process “visual” part.

Wire-framing for client bonding

Page layout with colors sometimes happens to be a distraction to our customers; maybe a client loathes color “Purple” the customer’s emotions find it hard to focus on the plan. Their feedbacks may be negative due to their feelings. They might end up asking for “Start over,” the designs might be okay, but the only thing irritated the client is the “purple” color. Therefore using gray boxes and sketches is an effective way, because it will eliminate the distractions of elements.

A wireframe will help in getting feedback regarding sizing, layout without client focusing on appearance only. Using wireframe approach also helps us know more about a customer, what they like? The styles, Typography, etc., Wire-framing presentation, is like a bonding time, their feedback and interaction makes you know about them and their designs and what to expect in future phases of the project? When you are sketching a rough draft on paper, the client will keep on commenting about icons, buttons, fonts, etc. They will end saying they prefer larger buttons than smaller etc. Eventually, a designer learns from the clients and begins to watch for feedback patterns and learn, having knowledge could save your time, energy and resources.

7 Fascinating Things About Wireframes

1. Boosts Team Work Experience

The wire-framing process brings different groups of people with various skills together; everyone is part of the project process. Project managers, designers, developers all come together to accomplish a goal. This is valuable because it improves teamwork and makes teammates understand each other more. With “waterfall” model, projects can be broken actually.

2. Transparent Communication

Smooth communication flow, we used to suffer where some team members like developers not included in the project discussion. By including every single person in the wire-framing process then the problem is sorted. A developer can spot a problem earlier that may be missed on emails and chats. On the other hand, specifications are elegant and beautiful but harder to visualize.

3. Engage Clients

Page layout with colors sometimes happens to be a distraction to our customers; maybe a client loathes color “Purple” the customer’s emotions find it hard to focus on the plan. Their feedbacks may be negative due to their feelings. They might end up asking for “Start over,” the designs might be okay, but the only thing irritated the client is the “purple” color. Therefore using gray boxes and sketches is an effective way, because it will eliminate the distractions of elements.

A wireframe will help in getting feedback regarding sizing, layout without client focusing on appearance only. Using wireframe approach also helps us know more about a customer, what they like? The styles, Typography, etc., Wire-framing presentation, is like a bonding time, their feedback and interaction makes you know about them and their designs and what to expect in future phases of the project? When you are sketching a rough draft on paper, the client will keep on commenting about icons, buttons, fonts, etc. They will end up saying they prefer larger buttons than smaller etc. Eventually, a designer learns from the clients and begins to watch for feedback patterns and learn, having knowledge could save your time, energy and resources.

4. Different Approaches

Brainstorming allows people to come up with the various ways of tackling projects. They are easy to produce and sketch especially in papers, all you need is a pencil and a piece of paper, and we tackle problems from different angles and draw them on a piece of paper. You can combine and delete assignment until you have two or four that make sense.

Various approaches include Technical Approach-New and trending technological features, users experience and usability testing how users are going to accomplish a goal and a task quickly before getting bored, hence leads to task abortion, again environmental Approach-who are the stakeholders? Which fields are we targeting? What kinds of features are important that can easily fit in with a particular stakeholder and focused field?

5. A basis for Testing

With 3 or 5 prototypes, you can test a project sketch with real users. There is a perception that we can only test using completed HTML prototype, but this is not true. Also, the hand-drawn wireframes can be used for testing. You can ask user’s suggestion about buttons they would like to click; they can also get feedback on naming tags and finally they can help check whether they have the right visual hierarchy. Testing via wireframe helps identify problems earlier.

6. Faster project produced

It takes a small time and money to prototype a wireframe based project, this is because different groups of people were involved in the wire-framing process. Therefore unforeseen errors that might cause revisions are dealt with before real project. Again the project layout has been seen by clients and so the final design signs off is done. This reduces time for multiple concepts.

Wire-framing with Photoshop

Gray boxes and sketches with photoshop.

Step 1: Gather additional requirements from clients, then “fire up” to color full photoshop and start wire-framing.

Step 2: Create the document based on 960 grids system, (1100 pixel wide and 760 High) you can learn this in “setting Grid in Photoshop.”

Step 3: Paint Bucket Tool (G) is used in filling the background with a light gray color to explain that there will be a background color or image.

Step 4: Pick the Rectangle Tool from the toolbar and draw a box to symbolize the content area. We are using the 960 grid system; my box drawn will be 940 pixels wide. Make the foreground color white using “Paint Bucket Tool” so that it shows up against our gray background.

Step 5: To make the process much faster, just (type letter D) to set the foreground to black or any color that suits you and the background to white or any color. Then draw black boxes to represent the content areas, Again you can opt to change the opacity of the backgrounds to make them appear gray or any color.

Step 6: Inside the grid, add a rectangle to represent anything. In this case ”Login Button” , Type opacity Value (“30”) to Lower the opacity of the rectangle (“30”) after the rectangle is drawn. You can, add text using the Type Tool (T) in the type tool bar to add the text “LOGIN” over the box. Add another rectangle to create the navigation area, again, lower the opacity value to make it gray.

Step 7: Add rectangles create the content column areas. Use a two-column layout with a slightly larger main content column and a smaller column for the home page image. Set the opacity to 10% for the columns, and also added another rectangle to represent the footer at the bottom of the page.

Page 8: In the content area add dummy texts using Photoshop’s Type > Paste Lorem Ipsum command.

Other Applications

Other application for wire framing that can be used by Non-Graphic designers to build interactive and beautiful wireframes.

OmniGraffle

It is like Micro-Visio, it has very nice stencils that can be used for high tech designing, and the features are amazing. This is the best.

Ninja Mock

My favorite, FREE to use, it has very nice features and stencils that can be used to build an interactive project concept. It allows users work offline and online.

Lovely Charts

This is good for beginners, it is FREE and interfaces are easy to understand.

Balsamiq

A quick way to convey designs concepts to a client, it has free demo that allow users save the final product. Has all elements needed for sketching as well as hand drawing look that is unique.

Google Drive Drawing

Can be used for screen mock-up, it is not entirely wire framing type, but it has features like good collaborations tool, fast, Free and easy to use.

Gliffy

Gliffy It is easier to use, it is slicker and offers diagrams features like flow charts and plans, it has Venn diagrams with network processes and UML that has exports to SVG,PNG and JPEG.

Lumzy

It is a flash application, it provides collaboration platform, it is Free, fast and lastly it has different type of controls that are easy to use.

Moqups

Free, fast and easy to use, I doesn’t need a browser-plug in, linkage of screen and button are done flawlessly so a person can publish a demonstration for the clients to view and use. Exportation of images according to specification is allowed. Apart from this, standard HTML5 and JavaScript has been integrated in Moqups.