Web Design Articles -- Wire Frame Your Site

If you implement a few simple steps carefully in planning your site, before creating the graphics, you can eliminate a lot of headaches. We believe that a very useful method. Is the creation of a framework of wire or "white site" model. Let's describe the benefits and the process of developing this article.Focus wire on the main issues: To better understand the world of wire drawing up a website, might consider that the famous cartoon character? Pokemon?. In the initial phase of this? Pokemon? it was just a wire. In the world of 3D animation, a wire is a working model of a character without color, skin, hair or clothing. In this way, the animators could test the model and make changes before a large amount of money spent on the development of its finer points. This principle can also be very valuable for the construction of a Web site. Wire drawing up a website involves the construction of a text-only version of the page, with links of work, but without graphic detail. Within this model of working on your site, links can be followed through, providing a real feel for how the information on your site and how it connects the current site. It allows you to identify potential problems that may arise later, once you've added content to site.We find this technique extremely useful in keeping me focused on the content first. Once we worked it, we can then begin to add to the thread under the skin (ie, the graphic content), which supports the content.Let 's start. At one point, takes you through the process of elaboration of wire that we found useful in the planning of my sites. But first, let's create a site map.Prepare your site MapBefore even begin to work with our model of a wire frame, it's a good idea to sketch a quick signal flow diagram of the pages listed on the site. Draw simple boxes representing each page and write the title page inside. Use lines to indicate how the sections of the site link together. For most professionals in the web out there, this is probably a pretty basic step, which is very likely, as it is already doing you a site.Your plan map of the site can be hand-drawn, or you can use a program such as Microsoft Visio, Adobe Illustrator, or Macromedia FreeHand. The purpose is to provide a single-page overview of your website which will act as a guide for the construction of the structure of wire. Advisably, you must have the impression and keep it with you for my reference as to build the wire frame model. Create your Wire frame ModelStage 1? Create the FrameNow Wire is the time to open the HTML editor of your choice and begin piecing together under its standard wire. It is important not to get too far at this time. Try to eliminate any design ideas you have and focus instead on the skeleton of the site. Start by creating a simple HTML page for each of the blocks, which you outlined in your chart site. Include the title of the page and to serve the page. Once you've built around the site, you can upload it to a secure area of your server and the client must sign, or send updates to its wire frame. This will help remove any misunderstanding about the way that pages and site work. It also gives something tangible to demonstrate that the client is relatively quick and easy to create. You can also use the cable as part a checklist to gather content. The more complex the site, that is, the more useful the wire frame becomes.Stage 2? Add your ContentOnce you have all the pages and created his client has approved the page titles, effects and titles link, you can begin to fill in the content of each page. We suggest you leave the purpose of the page at the top and the fall in the content below. In this way, you can always refer to their original plans. Keeping track of each goal page is also useful to help guide the customer, as they make decisions about what kinds of content should appear. Often, a client wants to add something he or she may have seen elsewhere, but you believe this content is not in conformity with the purpose of the page. The problem is easily solved: to remind the client page of the purpose and ask how they would like to proceed. When faced with the larger picture, most customers will realize that the content does not comply and, at least, be willing to compromise on the proposed inclusion. Stage 3? To lay the pages using the image PlaceholdersIn Stage 3, which complements our model of a wire frame. At this point, we have to create a rough layout of the site using the placeholder images, or the creation of separate layers. Layers work best because they are easier to move around as you discuss the design with the client. However, if the site is not too complex, a simple table based on the design should serve the purpose. ConclusionWire frameworks are definitely not the most exciting part of designing a website. They are like a sleeping giant. When implemented as part of its design process, which can be very valuable. It will help you, the designer, focus on the marketing message you're trying to communicate through the site, a site more efficient and open channels of communication with his client. It could also save a truck of time.
Source: http://www.articlesbase.com/web-design-articles/web-design-articles-wire-frame-your-site-570238.html