Getting Started with Wireframing | manyangl.es
Have you ever wondered how is it that most Web Designers have such an organized way of thinking? Mainly how their website layout, content, hierarchy and scenarios are displayed? This is due to several things, but planning may be the most important of all and in Web Design, Wireframing is the perfect planning tool to help get creativity kick started.
Website Wireframes are the core and skeletal representation of what a website could look like and can be used for a wide variety of purposes, but of course you need to follow certain rules and the end result can be used to manage and plan important aspects of a website. According to a book by Jesse James Garrett titled: The Elements of User Experience: User-Centered Design for the Web and Beyond “The skeleton plan of a website can be divided into three components: information, navigation and interface design”.
A Wireframe
A wireframe can help you in several ways to save money, time and properly organize space and elements. There is no doubt that by having everything properly set up before rushing into adding graphic and final aesthetic elements can help you save time by allowing the user to create a demo or draft thus getting a Beta view of what the website will or could look like at the end and minimizing the time that the website needs to be worked on.
A basic Wireframe can contain a large amount of elements but categorizing them and setting labels for them can add order, hierarchy and proper sequence to your site. There may not be rigorous rules to follow on how you do your wireframing, but there are some simple steps and wireframing basics that you need to know. Here are some guidelines that you can follow.
What to Show
Wireframing should show groups of content and should explain what these groups or blocks will contain and where on a page they will be placed. The visual arrangement of the content is explained by saying how the information will be structured, at this point we should have an idea on what information we are going to present to the user and where this information is going to be displayed. One last part of the of the wireframing elements is explaining how the user and interface will interact, this way completing the full process of presenting all possible elements of a web design through a simple but important set of steps.
Visual Elements
By the use of simple shapes and the addition of abstraction through images we can speed up the process of wireframing and still meet user needs of understanding what elements of the website people will be interacting with.
Abstraction & Wireframing
By not placing final elements and/or mock-ups in a Wireframe or a client website proposal we add abstraction and somewhat force the user or whoever is in presence of the website wireframe to imagine and place visual elements where there may be none so far (at least not final visual elements like images or actual content), this may present as a problem to whoever is not accustomed to work in a aesthetic and design oriented environment, but if presented properly, one can achieve a great value of satisfaction and representation through well used elements.
"Getting Started with Wireframing" is an article by Joe Jimenez addressed to people new to the topic of wireframing. Read the full article over at manyangl.es