[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-664172-105":3,"detail-sidebar-cat-0-en-105":80,"doc-detail-664172-en":130},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":73,"head_meta":75,"extra_data":77,"updated_unix":79},105,"en","what-is-wireframing-an-introductory-guide","What is Wireframing - An Introductory Guide","","Wireframing is a structural approach to designing websites, using wireframes to lay out key page content and functionality in line with user needs and user journeys. Created early in the development and interaction design process, wireframes support stakeholder approval before visual design and content work begins. They also help define global and secondary navigation and support iterations through reviews. Wireframes can be hand-drawn or built with tools such as Visio, and for usability testing they may be created in HTML. The guide outlines both the advantages and disadvantages, emphasizing speed, review efficiency, and communication support.",{"@graph":14,"@context":72},[15,34,55],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/document/","Document",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/document/technology/","Technology",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/document/what-is-wireframing-an-introductory-guide/664172/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/what-is-wireframing-an-introductory-guide/664172.png","ImageObject",300,407,{"name":42,"@type":43},"miraaa_2004","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-30","2026-10-29",true,{"@type":52,"interactionType":53,"userInteractionCount":33},"InteractionCounter",{"@type":54},"ViewAction",{"@type":56,"mainEntity":57},"FAQPage",[58,64,68],{"name":59,"@type":60,"acceptedAnswer":61},"What is wireframing and why is it used?","Question",{"text":62,"@type":63},"Wireframing is a way to design a website at the structural level. It helps establish the basic page layout and interaction elements early so stakeholders can approve before visual design and content are added.","Answer",{"name":65,"@type":60,"acceptedAnswer":66},"When does wireframing happen in a project lifecycle?",{"text":67,"@type":63},"Wireframing takes place early in the project lifecycle. It is often used to support the User Centered Design process and at the beginning of the design phase, including for prototype usability tests.",{"name":69,"@type":60,"acceptedAnswer":70},"What tools can be used to create wireframes?",{"text":71,"@type":63},"Wireframes can be hand drawn, or created using software such as Microsoft Visio. If they are intended for a prototype usability test, creating them in HTML is recommended, and tools like Axure-RP or OmniGraffle (Mac only) can help.","https://schema.org",{"og:url":32,"og:type":74,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":76,"canonical":32},"index,follow",{"doc_id":78,"site_id":7},664172,1793242325,{"code":4,"msg":81,"data":82},"success",[83,87,91,95,100,104,109,114,119,122,126],{"id":22,"doc_module":4,"doc_module_name":25,"category_name":84,"show_sort_weight":85,"slug":86},"Story & Novel",90,"story-novel",{"id":26,"doc_module":4,"doc_module_name":25,"category_name":88,"show_sort_weight":89,"slug":90},"Literature",80,"literature",{"id":33,"doc_module":4,"doc_module_name":25,"category_name":92,"show_sort_weight":93,"slug":94},"Exam",70,"exam",{"id":96,"doc_module":4,"doc_module_name":25,"category_name":97,"show_sort_weight":98,"slug":99},5,"Comic",60,"comic",{"id":101,"doc_module":4,"doc_module_name":25,"category_name":29,"show_sort_weight":102,"slug":103},6,50,"technology",{"id":105,"doc_module":4,"doc_module_name":25,"category_name":106,"show_sort_weight":107,"slug":108},7,"Healthcare",40,"healthcare",{"id":110,"doc_module":4,"doc_module_name":25,"category_name":111,"show_sort_weight":112,"slug":113},8,"Research & Report",30,"research-report",{"id":115,"doc_module":4,"doc_module_name":25,"category_name":116,"show_sort_weight":117,"slug":118},9,"Religion & Spirituality",20,"religion-spirituality",{"id":117,"doc_module":4,"doc_module_name":25,"category_name":120,"show_sort_weight":117,"slug":121},"World Cup","world-cup",{"id":123,"doc_module":4,"doc_module_name":25,"category_name":124,"show_sort_weight":123,"slug":125},10,"Lifestyle","lifestyle",{"id":127,"doc_module":4,"doc_module_name":25,"category_name":128,"show_sort_weight":96,"slug":129},19,"General","general",{"code":4,"msg":81,"data":131},{"doc_id":78,"user_id":132,"nickname":42,"user_avatar":133,"doc_module":4,"category_id":101,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":33,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":26,"language":139,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":140,"faqs":141,"seo_title":142,"seo_description":12,"update_tm":79,"read_time":96},962094249165,"https://ap-avatar.wpscdn.com/davatar_29158cc5080c5b710cf443261637dec0","What is wireframing?  \nShort Answer Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.  \nLong Answer A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process.  \nThe aim ofa wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets under way. Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.  \nA wireframe is much easier to adapt than a concept design It is quicker and cheaper to review and amend the structure of the key pages in a wireframe format. Iterating the development of the wireframes to a final version will provide the client and the design team confidence that the page is catering to user needs whilst fulfilling the key business and project objectives.  \nWireframing takes place early in the project lifecycle Often used to complete the User Centered Design process, wireframes are also used at the beginning of the design phase. A prototype usability test will often be a test of the wireframe pages to provide user feedback prior to the creative process.  \nWireframes can be simply hand drawn, but are often put together using software like Microsoft’s Visio, to provide an on-screen delivery. However, if the wireframes are going to be used for a prototype usability test, it is best to create them in HTML. There is some good software that allows you to do this easily including Axure-RP or OmniGraffle (Mac only) .  \nAdvantages of Wireframing One of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. Users can also review it as an early feedback mechanism for prototype usability tests. Not only are wireframes easier to amend than concept designs, once approved by the client and the users they provide confidence to the designer.  \nFrom a practical perspective, the wireframes ensure the page content and functionality are positioned correctly based on user and business needs. And as the project moves forward they can be used as a good dialogue between members of the project team to agree on the project vision and scope.  \nDisadvantages of Wireframing As the wireframes do not include any design, or account for technical implications, it is not always easy for the client to grasp the concept. The designer will also have to translate the wireframes into a design, so communication to support the wireframe is often needed to explain why page elements are positioned as they are. Also, when content is added, it might initially be too much to fit within the wireframe layout, so the designer and copywriter will need to work closely to make this fit.  \nConclusion Wireframes should be used early in a project to get user and client approval on the layout of key pages and the navigation. This will provide the project team, specifically the designers, confidence in moving  \nforward. Wireframes will also save considerable time and money in the testing and amends phase later in the project.  \n[http://www.experienceux.co.uk/faqs/what-is-wireframing/](http://www.experienceux.co.uk/faqs/what-is-wireframing/)  \nWireframe Example","cbCaikidK0jOiPpm","https://ap.wps.com/l/cbCaikidK0jOiPpm","pdf",190058,"English","# Wireframing\n## Purpose and role in the process\n## How wireframes are created\n## Advantages of wireframing\n## Disadvantages of wireframing\n## Conclusion","[{\"question\":\"What is wireframing and why is it used?\",\"answer\":\"Wireframing is a way to design a website at the structural level. It helps establish the basic page layout and interaction elements early so stakeholders can approve before visual design and content are added.\"},{\"question\":\"When does wireframing happen in a project lifecycle?\",\"answer\":\"Wireframing takes place early in the project lifecycle. It is often used to support the User Centered Design process and at the beginning of the design phase, including for prototype usability tests.\"},{\"question\":\"What tools can be used to create wireframes?\",\"answer\":\"Wireframes can be hand drawn, or created using software such as Microsoft Visio. If they are intended for a prototype usability test, creating them in HTML is recommended, and tools like Axure-RP or OmniGraffle (Mac only) can help.\"}]","What is Wireframing - An Introductory Guide | PDF"]