--- title: Construction Before Coding description: By Kristin Rielly When redesigning a website, the first and most important step that is so often ov... image: https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-14-59-8738-PM-Apr-10-2023-01-59-58-5849-PM-Apr-25-2023-03-49-02-7289-AM-May-01-2023-10-25-15-5047-PM.png --- [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) [![Website Magazine Logo](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x-1.png?width=586&height=145&name=gradient-regular@3x-1.png "Website Magazine Logo")](http://Website%20Services,%20Inc.) - [About](https://www.websitemagazine.com/about) - [FAQs](https://www.websitemagazine.com/about/faq) - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial Staff](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Resources](https://websitemagazine.tradepub.com) - [Newsletter](https://www.websitemagazine.com/newsletter-sign-up) - More - [Contact Us](https://www.websitemagazine.com/contact) [Log In](https://www.websitemagazine.com/_hcms/mem/login) [Subscribe](https://websitemagazine.tradepub.com/free/w_webk05/prgm.cgi) Search - [Latest](https://www.websitemagazine.com) - [Design](https://www.websitemagazine.com/web-design) - [Development](https://www.websitemagazine.com/web-development) - [SEO](https://www.websitemagazine.com/seo) - [Ecommerce](https://www.websitemagazine.com/ecommerce) - [Content](https://www.websitemagazine.com/content) - [Marketing](https://www.websitemagazine.com/marketing) - [Advertising](https://www.websitemagazine.com/advertising) - [Email](https://www.websitemagazine.com/email) - [Infographics](https://www.websitemagazine.com/infographics) - [View All Topics](https://www.websitemagazine.com/channels) # Construction Before Coding ![Pete Prestipino](https://www.websitemagazine.com/hubfs/Pete%20Prestipino.jpeg) [by Pete Prestipino](https://www.websitemagazine.com/web-development/author/pete-prestipino) 07 Apr, 2009 - - - [mailto:?Body=https://www.websitemagazine.com/web-development/construction-before-coding](mailto:?Body=https://www.websitemagazine.com/web-development/construction-before-coding) - Link Copied! ![Construction Before Coding](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-14-59-8738-PM-Apr-10-2023-01-59-58-5849-PM-Apr-25-2023-03-49-02-7289-AM-May-01-2023-10-25-15-5047-PM.png) **By Kristin Rielly** When redesigning a website, the first and most important step that is so often overlooked is constructing the wireframe. I know, because I skipped this step for my first website redesign project (which contained almost 200 pages) and it resulted in major and unnecessary complications. Thankfully, with the help of my friends and the Internet, I have mastered website wireframing. Now I will share this knowledge, to hopefully prevent hours of frustration for other website owners. **Decide on Content** Sit down with your client and decide what content is needed. Thoroughly review the current site and decide what content needs to be removed, kept or added. Although the client will probably change his or her mind several times throughout the redesign process, you have to start somewhere. Write down headings or short descriptions of all content to be included and organize it into categories. By determining the amount of content in the beginning will make it much easier to decide how many pages you will need later. *SEO Tip: Meta tags and descriptions should match the copy on each page.* **Map it Out** ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/textwireframexample-4-1-1-1.gif?width=242&height=374&name=textwireframexample-4-1-1-1.gif)Remember when you wrote an outline for that college research paper on string theory? Same concept. You can now use all your content notes and new categories to create an outline that will be used for the structure - or wireframe - of the entire website. This outline will not only establish the content layout, but also the positioning for global and secondary navigation. The wireframe structure will also ensure that any changes required once you begin rebuilding can be easily placed into the correct area of the site. *SEO Tip: Keep all index pages for every section of the site in the root folder. Only put secondary pages in their own folders.* **Template and CSS** Once you have all your content mapped into the wireframe, you can build your template and cascading style sheets (CSS). Keep in mind that branding is of the utmost importance, so the website design needs to clearly communicate the product or service of your client. Also, make sure your design allows all the content to fit within the wireframing while at the same time is visually consistent, so the website flows from page to page without any enduser confusion. *SEO Tip: On each page, make sure the ALT tag, page title and HTML* **Navigation** Finally, use your completed wireframe to design the site's navigation. This should always be done as a last step, because until your wireframe and template are finalized, there's no way to tell if your navigation will make sense to the end-user. Remember that for the end-user, the navigation style, content and position are the most important. Make sure the navigation is uncomplicated and easily recognizable on every page to maintain branding and consistency throughout the site. Depending on the size of the website, the addition of simple navigation, such as quick links and a search box, can be an asset to the functionality of the site. **SEO Tip: Create an XML copy of your sitemap and submit it to search engines.** Although there are many programs available for purchase to assist in creating wireframes, I'm pretty confident you won't need them. To give you an idea of simple wireframing, take a look at the two examples; one a text wireframe and the other a diagram. ![](https://www.websitemagazine.com/hs-fs/hubfs/Imported_Blog_Media/diagramwireframexample-4-1-1-1.gif?width=545&height=178&name=diagramwireframexample-4-1-1-1.gif) ![Pete Prestipino](https://www.websitemagazine.com/hubfs/Pete%20Prestipino.jpeg) [Pete Prestipino](https://www.websitemagazine.com/web-development/author/pete-prestipino) Digital marketing executive with proven experience in all aspects of search engine optimization (SEO), performance-based advertising, consumer-generated/social media, email marketing, lead generation, Web design, usability, and analytics. - 20-year Internet marketing veteran, currently serving as the Digital Marketing Campaign Manager at Antenna Group (formerly Chicago Digital). - Former Editor-In-Chief of Website Magazine, and a regular speaker on Web technology digital marketing strategy - Author of several books on digital marketing Including Web 360: The Fundamentals of Web Success; Affiliate 360: The Fundamentals of Performance Marketing; Domains 360: The Fundamentals of Buying & Selling Domain Names, and SEO 360: The Fundamentals of Search Engine Optimization. - - - [mailto:peter@websitemagazine.com](mailto:peter@websitemagazine.com) #### Popular Post ### [How to Embed AI in your Enterprise App ![How to Embed AI in your Enterprise App](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-41618c-2-1-1-1.gif)](https://www.websitemagazine.com/web-development/how-to-embed-ai-in-your-enterprise-app) ### [How to Use Plugins in WordPress ![How to Use Plugins in WordPress](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/WordPress-Logo-1.png)](https://www.websitemagazine.com/web-development/how-to-use-plugins-in-wordpress) ### [Top 10 Tips to Build a Google-Friendly Site ![Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-1015568-1-1.jpg)](https://www.websitemagazine.com/web-development/top-10-tips-to-build-a-google-friendly-site) #### Subscribe to Our Newsletter! [![](https://a.impactradius-go.com/display-ad/13053-1438301)](https://semrush.sjv.io/c/3976891/1438301/13053)![](https://imp.pxf.io/i/3976891/1438301/13053) #### Latest in Web Development [![How to Use Plugins in WordPress](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/WordPress-Logo-1.png) How to Use Plugins in WordPress](https://www.websitemagazine.com/web-development/how-to-use-plugins-in-wordpress) [![Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/pexels-photo-1015568-1-1.jpg) Top 10 Tips to Build a Google-Friendly Site](https://www.websitemagazine.com/web-development/top-10-tips-to-build-a-google-friendly-site) [![STAT WATCH: The Shift to Cloud](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/cloud-icon-Jan-23-2023-02-15-00-5888-PM-3-2-2.png) STAT WATCH: The Shift to Cloud" is Nearly Complete"](https://www.websitemagazine.com/web-development/stat-watch-the-shift-to-cloud-is-nearly-complete) [![Amazon Enhances Alexa Skills Kit Developer Console](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/amazon_200x200-Jan-23-2023-02-23-45-6129-PM-1-1-1.png) Amazon Enhances Alexa Skills Kit Developer Console](https://www.websitemagazine.com/web-development/amazon-enhances-alexa-skills-kit-developer-console) [![How Serverless and ReactJS are Changing the Rules of Web Development](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash122117-Jan-23-2023-02-14-59-5570-PM-1-1-1.png) How Serverless and ReactJS are Changing the Rules of Web Development](https://www.websitemagazine.com/web-development/how-serverless-and-reactjs-are-changing-the-rules-of-modern-web-development) [![How to Embed AI in your Enterprise App](https://www.websitemagazine.com/hubfs/Imported_Blog_Media/unsplash-41618c-2-1-1-1.gif) How to Embed AI in your Enterprise App](https://www.websitemagazine.com/web-development/how-to-embed-ai-in-your-enterprise-app) [![gradient-regular@3x](https://www.websitemagazine.com/hs-fs/hubfs/gradient-regular@3x.png?width=128&height=128&name=gradient-regular@3x.png)](https://www.websitemagazine.com/) 999 E Touhy Ave, Des Plaines, IL 60018   [info@websitemagazine.com](mailto:info@websitemagazine.com) [(888) 7WEBMAG](tel:18887932624) [(312) 313-6576](tel:13123136576) About - [Advertise](https://www.websitemagazine.com/about/advertise) - [Editorial](https://www.websitemagazine.com/about/editorial-publishing-staff) - [Contact Us](https://www.websitemagazine.com/contact) Resources Membership - Login - Subscribe Signup for our newsletter © 2026 Website Magazine. All Rights Reserved - [Privacy Policy](https://www.websitemagazine.com/about/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Pete Prestipino", "url" : "https://www.websitemagazine.com/web-development/author/pete-prestipino" }, "dateModified" : "2023-05-01T22:26:17.646Z", "datePublished" : "2009-04-07T05:00:00.000Z", "headline" : "Construction Before Coding", "image" : [ "https://www.websitemagazine.com/hubfs/Imported_Blog_Media/gradient-regular-logo-mark-Jan-23-2023-02-14-59-8738-PM-Apr-10-2023-01-59-58-5849-PM-Apr-25-2023-03-49-02-7289-AM-May-01-2023-10-25-15-5047-PM.png" ], "mainEntityOfPage" : { "@id" : "https://www.websitemagazine.com/web-development/construction-before-coding", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.websitemagazine.com/hubfs/gradient-regular@3x-1.png" }, "name" : "Website Services, Inc." } } ``` ```json { "@context" : "https://schema.org", "@type" : "NewsArticle", "author" : [ { "@type" : "Person", "name" : "Pete Prestipino" } ], "headline" : "Construction Before Coding", "publisher" : { "name" : "Website Magazine", "url" : "https://www.websitemagazine.com/" } } ```