VIEWS: 5,026 PAGES: 8 CATEGORY: Product Development and Manufacturing POSTED ON: 8/12/2009
A beginner's guide to set up wireframes for website design, a crucial early step in designing and developing a website.
Quick Guide to Wireframes A Beginner’s Guide to Website Design Quick Guide to Wireframes Table of Contents How Wireframing Fits into the Overall Process 1 Determine the Flow of Your Site 1 Develop the Site Skeleton 3 Tips for Creating a Functional Website 6 Appendix A: Worksheet for Determining Functionality of Your Website 7 © Copyright 2010 Docstoc Inc. 1 Quick Guide to Wireframes Wireframes are design tools that are used as visual guides to demonstrate the proposed functionality, content and structure of websites. Wireframing is done to give your web design team the ability to see how you envision your users interacting with your website. This treatment will walk you through the basics of developing a wireframe that can be used to develop your website. Site architecture works much the same as classic architecture – a classic architect sees a finished structure, but he or she must somehow convey the specifics of their vision to those who will construct it. Those who have worked in that industry understand all too well why there is frequently tension between the architect and the construction manager. The architect wants everything to work the way it works in his or her head, and the construction manager needs to make it work in reality – these two things are not always compatible. Such is sometimes the case with building a website – you may have dreams of all sorts of features and functions of your site, but the person who actually builds the site must be able to feasibly make them work. This is not always an easy task, and this is where proper wireframing comes in – the architect of the site works with the construction manager to create the dream of what the site needs to do. How Wireframing Fits into the Overall Process The first four steps in the creation of a website are as follows (please see the separate document titled, “Ten Steps to Creating a Functional Website”): Step One: Determine the Functionality of Your Site Step Two: Establish Your Domain Step Three: Obtain a Hosting Site Step Four: Design Your Site Developing a wireframe is going to be particularly important for Steps Two through Four, as the type of domain and hosting site will need to provide the proper capabilities for the site you envision, and designing your site needs to start with an accurate wireframe. Before you even consider a hosting site, you will need to know if it can accommodate what you want to build, and this is where a wireframe can help. © Copyright 2010 Docstoc Inc. 2 Determine the Flow of Your Site The first step in this process is to visualize how you want your website to function. Appendix A includes a worksheet that you can use to determine the functional elements of your website, and a good way to visualize how you expect those functions to work together is to lay out a flow chart that shows the basic components. You can do this with a software program such as Microsoft Word or Excel, or there are other programs that specialize in flow charts, such as SmartDraw (which offers a free trial before you buy). Alternately, you can hand-draw the flow you visualize. Home Page Product 1 Product 2 Product 3 Database Shopping Cart / Checkout Contact Develop the Site Skeleton Rather than focusing on the aesthetics of the site (or the way you ultimately want it to look), concentrate on the bare bones aspects of it. For example, think about your home page and what you want it to include. This is not the time to get fancy, or to think about colors and schemes, but rather to get the bare bones in place. Keep it simple – if you only want one or two buttons on the home page then only include one or two buttons in the wireframe. © Copyright 2010 Docstoc Inc. 3 When you are satisfied that you have the elements necessary for your home page, repeat the process for each subsequent page (based on your flow chart), until you have mock-ups for all pages that your site will contain. TIP: Number your pages! Your designer will thank you for not leaving the order up to his or her imagination. The sample below was created with a trial copy of the software, SmartDraw, which makes it easy to create your wireframe. (You can get your free trial copy at http://www.smartdraw.com/downloads/index.htm?WT.svl=link01 .) There are many methods for wireframing – they don’t all look alike, and some other samples borrowed from the web include the following: © Copyright 2010 Docstoc Inc. 4 Tips for Creating a Functional Wireframe As stated above, simplicity is a key factor. The more detailed design elements will come later, when the actual site is designed. Work in grayscale to avoid falling into designing before it is time. Use a sitemap along with your wireframe. © Copyright 2010 Docstoc Inc. 5 Remember who you want the end user of your site to be, and try to keep things as user- friendly as possible. Create the wireframe in a format that anyone who is not associated with the project can read and understand. Maintain consistency with your functional elements, in other words, if different pages will contain a form to gather the same information, make the forms look the same on each page. If you plan to use affiliate advertising on your site, make sure you leave spaces for those banners and/or ads. If your site will depend on external sources, such as PayPal, find out what those requirements are before you start laying them out, so that you can avoid having to change them to comport with their specific requirements later. © Copyright 2010 Docstoc Inc. 6 Appendix A: Worksheet for Determining Functionality of Your Website Check each box that applies to what you envision your site accomplishing for you. If you are unsure of whether you need a particular functionality, mark it with a question mark until you obtain additional information. /? Function Comments / Notes Allow users to search the site. Allow users to contact you via the site. Allow users to sign up for e-mail alerts. Offer products for sale / shopping cart. Allow users to track orders. Allow users to obtain data from a database or list. Include links to other sites. Use custom or proprietary software. Include downloadable brochures or .pdf files. Allow photo enlargement / zoom. Include audio and/or video streaming. English to [language] translation. Other function: Other function: Other function: © Copyright 2010 Docstoc Inc. 7 r .pdf files. Allow photo enlargement / zoom. Include audio and/or video streaming. English to [language] translation. Other function: Other function: Other function: © Copyright 2010 Docstoc Inc. 7 7 ames 7
Pages to are hidden for
"Guide to Using Wireframes"Please download to view full document