Internet, Networking, & Security Web Development How to Create Website Wireframes Focus first on structure to streamline website-development projects by Eric Miller Writer Eric Miller is a former Lifewire writer, freelance graphic designer, and owner of a web development and graphic design studio established in 1998. our editorial process Twitter Eric Miller Updated on May 11, 2020 Web Development Web Design CSS & HTML SQL Tweet Share Email Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead trying to build a complex design on-the-fly later. Using wireframes is a great way to begin a website project, as it allows both the designer and the developer to focus on the layout without the distraction of color, type, and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs. What to Include in a Website Wireframe All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include: Navigation: Buttons for users to visit the main sections of your site.Company logo: Can just be represented by a box.Content areas: Where will your different sections of content appear?Search boxesUser login areas How to Create Website Wireframes OmniGraffle There are a variety of ways to create a website wireframe. They include: Drawing It by Hand on Paper This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where. Even easier? Use a whiteboard then snap pictures of the final-agreed layout. Using Adobe Photoshop, Illustrator, or Other Software Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes, and text (to label your elements) are all you need to create a presentable wireframe. Using Software Created for This Type of Task While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at Graffletopia, which gives you more elements, such as common web buttons, to work with. The Benefits With website wireframes, you have the benefit of tweaking a simple line drawing to achieve the desired layout. Rather than move complex elements around a page, it can take very little time to drag a couple of boxes into new positions. It is also much more productive for for the members of the project team to focus first on structure, with thematic elements coming later. The Drawbacks For most people, it's usually easier to use a content-management system like WordPress rather than designing a website from scratch. Wireframing is ideal for those larger, more costly design projects. With a CMS, the overall design is largely not negotiable.