A wireframe is a blueprint of sorts that serves as the initial design of a website. In web development, the main purpose of wireframing is to provide an optimal and efficient design for a website without being hindered or affected by visual aesthetic design. The primary considerations in creating a wireframe are functionality, navigation, and content.

Here's how to get started on wireframing.


1. Prep Yourself
What makes it challenging is that your experience as a developer and designer will prevent you from prioritizing the most crucial element in wireframing: user perspective. Always remember that a wireframe needs to be designed with the best interest of the people who will use the website. In fancier terms, you must focus on UX (User Experience) design.

2. Become Familiar with UX Design
UX, or short for User eXperience, is the collection of factors on how users perceive your website.
Is your website useful? Is it easy to navigate? Do the pages load fast? Are the content, features, elements, and functionalities of the website cohesive? Those are some of the questions that you must ask if you are putting UX as your top priority when creating your wireframe.

3. Find Templates To Inspire You
Fortunately, it is easy to get an idea on the things you need to do in order to have a good UX design for your wireframe. At this point, you might have already noticed that websites often have similar elements, functionalities, and layouts. That is because UX norms and expectations have already been established.
You do not need to start from scratch. You just need to check out some templates or websites, take your cue from them, and improve on them with your own site.

4. Start Wiring Your Frame
You already have the idea; now it's time to start doing your wireframe. Remember that you need to forget about putting colors, setting font attributes, and placing images. Think of it as if you are creating a website during the 1990s without the complicated client side scripts and styling sheets.
Just indicate the placement of the content and elements of your site and you are good to go.

5. Make a Prototype
A wireframe is not enough for you to know if your users will have a good experience while browsing your website. You cannot just look at it and simply imagine a mouse cursor moving about. You must create a prototype!

Again, forget about style and script libraries. Just put the web elements on a blank HTML page. Then put some lorem ipsum (i.e. filler text) here and there. Of course, you will need to do some styling to make sure that the elements are in their correct position and size.

6. Test It Out
The prototype is done. The next step is for you to test your "basic" website. Expect that you will find some kinks in your first design. Take note of them. Once you've exhausted all sorts of test scenarios, rebuild your wireframe and prototype with those considerations in mind. Rinse and repeat.

Once you get a good feel, present your design to your colleagues, bosses, or clients. After it has been approved, you can proceed to the next step, which is designing.

Related posts:

  1. Why You Need A Simple Yet Dynamic Wireframing Tool
  2. Professional Tips For Building Mockups For Web And Mobile
  3. Wireframe User Guide for MockupTiger
  4. Wireframing or Prototyping: Which One to Use
  5. Introduction to MockupTiger Wireframes

Posted in Other | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,