Website wire framing , why?

If you never heard of a wire frame and you are a designer, please stop over working yourself. A website wire frame is a visual guide that represents the skeletal framework of a website. Wire frames are created for the purpose of arranging elements to the best way possible, also helping you to immediately determine visual hierarchy.

There are many different ways to create a wire frame. Some may want to stick to pencil and paper while others rather a whiteboard. A wire frame usually lacks a typographic style and color, and uses boxes to replace images. You don’t want to waste a long time here, but you don’t want to miss this step. Still want to skip this stage ? Here are some things that wire framing achieves :

  • Defines the page’s structure and layout
  • Tests and refines navigation
  • Organizes the content layout
  • Highlight’s the hierarchy
  • Gives you knowledge of programming work required

There are three basic wire frame types: Lo-fidelity, Mid-fidelity , High-fidelity.

1) Lo-fidelity wire frames: Many designers begin by sketching initial rough layouts. Sketching can take place with a pen and paper, or by using digital software. The point of lo-fidelity wire framing is to get as many ideas down as possible, and to see what has the potential to work and what doesn’t.

  • Can begin life as pen and paper
  • They usually lack color. This avoids distractions.
  • They’re quick and ideal for ruling out weak layouts.

wireframe-example-from-balsmiq-screenshot.jpg

2) Mid-fidelity wire frames: The mid-fidelity wire frame is the next logical step in the process. Once an initial idea has been formulated in the lo-fidelity stage, the designer may choose to further develop this idea by adding and refining certain details.

  • A mid-fidelity wire frame is, or can be the refinement of an initial idea or concept.
  • While adding certain elements, the mid-fidelity wire frame is still a loose enough concept to encourage feedback from your colleagues.
  • Mid-fidelity wire frames allow you to see your web site or service as more of a finished product.
  • Mid-fidelity wire frames while traditionally grey, may contain elements of color.

wireframe3_screenshot.jpg

3) Hi-fidelity wire frames: At the hi-fidelity stage, you’ll see something more akin to a finished website. The use of color will more than likely form a part of the upgraded wire frame, and you may also see real text and images.

  • Visually, hi-fidelity wire frames can appear to be a nearly finished product (at least structurally.
  • Hi-fidelity wire frames may be in full color.
  • They can include real images and meaningful text.
  • They can be at 100% scale, sometimes even pixel-perfect.wireframe4_screenshot.jpg

 

TOP 5 WIRE FRAMING RESOURCES 

So we talked about wire framing, some advantages and even the different types. Now let’s get into different online web services that can help you make these. Here are my top 5 of the most useful services to get you started :

  1. Canva : Canva makes it easy to generate an effective web wire frame to get the ball rolling and lay the foundation for a clear, polished design. With powerful tools for rapid development and a vast collection of drag-and-drop widgets and web design mainstays, you can put together an impressive web wire frame in no time at all. In this website you can easily share your wire frame via email or link to anyone. Others can also collaborate and edit your design, so its great for collaboration projects.
  2. Mock Flow : Mock Flow is an online wire frame software for designers planning, building and sharing work. Mock Flow provides users with a large library of mockup components, icons, stickers and other shapes to quickly and efficiently build clean looking interface mockups. Mock flow also has an in-built template store within the editor with endless amounts of wire frames.
  3. Wireframe.cc : You don’t even need an account to start using this bad boy. It supports copy-pasting and inserting images. Now if you want extra things like multiple paged elements, you can upgrade to the monthly subscription. But even without a subscription, the free version provides shareable links.
  4. Google Drawings :  Yes google! With just a google account that’s free, you can create simple wire frames and share it publicly.  It allows users to collaborate and work together in real time to create flowcharts, organisational charts, website wire frames, mind maps, concept maps, and other types of diagrams. Google Drawings is also available as a Chrome app that works offline, available from the Chrome Web Store.

 

So why wire frame? Hopefully now you can answer this question for yourself. Instead of bombarding yourself with every design aspect at once such as colors and fonts and images to be used, wire frame a structure for your website! Tackle the first important part of creating a website such as “What do I want the user to do when on my site?” which is an essential question. Check out some of the websites I provided and find one that fits your needs and liking’s, and happy wire framing! Until next time.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: