Search Optimized Website Design Process

Search Optimized Website Design Blog 1The graphic design and technical development of a search optimized website is a multifaceted and complex process that involves both aesthetic and user interface functionality considerations. This is an overview of a few key elements of a development project.

Understanding the Project Objectives

– Client Briefing: To understand their site requirements, end objectives, target audience, and competitors.
– Market Research: Visit their competitors’ websites, the specific audience behaviors, and current design trends relevant to their marketplace.

Site Structure & Planning

– Site Map: Define the main navigation structure and determine which pages and features the site will include. Typically, this will be a chart indicating all pages and functionality of the website and how they are linked.
– End User Flow: Determine how site visitors will click through the site and the ‘call to action’ functionality and placement.

Website Content

– Alongside the design wireframing of the pages, it is important to have an understanding of the amount of copy that each page will be representing as this can certainly affect the layout of a page.
– Who is writing the optimized forward-facing copy and developing the SEO meta data typically would have been discussed prior to the signed development proposal.

Design Wireframing

– Wireframe: Create low attribute, basic layout structures for each of the web pages to understand the placement of elements without design details. Determining a set number of design templates to represent the web pages.
– Approval: It is important at this milestone, to obtain the approval from all that are involved in the project of each page’s layout and functionality so there will be limited to no rework later in the development process.

Graphic Design

– Design Elements: Present colors, fonts, images, icons, and other visual elements to gather opinions, likes and dislikes.
– Plugins: Determine all unique functionality of the website, thank you pages, forms, submission boxes, video players, and consistent elements like buttons and input fields.
– High-Res Mockups: Create and submit the colored, detailed representations of how the HTML coded web pages will resolve in a browser window.
– Approval: Again, at this milestone, all project leads should (must) sign off on the designs before being moved to the development team.

Development Phase

– Development Server: A development (staging) server should be created on the client’s host account. This will provide testing URLs for all to review each page, and functionality, in a browser window as the pages are coded.
– Content Submission: All finalized page copy, images and SEO meta data should be submitted at this juncture in the project.
– Page Review: Each page, as completed by the development team, should be tested and ultimately approved by the customer’s team.
– Designer Review: It is essential for the designer to stay involved and also approve of each finished HTML page to ensure the final design mirrors the original graphic design and functions as agreed.

Review & Launch

– Quality Review: Prior to going ‘live’, all aspects of the website need tested including submit icons, website email, anchor links, payment processing, and other plugins to ensure consistent appearance and functionality.
– Website Content: Using grammatical checking tool like Grammarly, all pages need scrutinized for any grammatical errors and typos.
– Launch: If this is a website redesign of an existing company domain, it is recommended to launch the website late at night or early morning as there will be some server downtime as the new files are propagated across the Internet.

Post Launch Activities

– Website Analytics: Pre launch, it is recommended to install both Google Analytics and Search Console.
– Monitoring: Review the analytics data daily for the 1st week to determine if there are any unseen errors such as 404 errors, bounce rates, page load times, end other issues that may generate alerts.
– 30-Day Support: Based on client and user feedback, or analytics issues, make repairs and updates as required. If the client has access to CMS, it is suggested a warranty window is determined.


Remember, the above steps can be modified or expanded based on the project’s complexity and specific requirements such as eCommerce projects have additional challenges and have a much longer project scope. Effective communication between the designer, client, and development team will make for a successful project outcome.