The Periodic Table of Web Design Process

Great websites make a strong visual impact and offer a fantastic experience with creative flair. But far more is happening behind the scenes. Follow our Periodic Table of Web Design to understand the process from start to launch and beyond. PERIODIC TABLE OF WEB DESIGN PROCESS BRIEF BRIEF PLANNING DESIGN DEVELOPMENT LAUNCH MAINTENANCE DEVELOPMENT Don't underestimate the power of a good brief that covers the client's expectations. Make sure you have a transparent meeting to ensure the project begins on the right foot. The web development phase converts the creative vision into reality. This is where the developer builds the website's functionality based on feature requirements and goals. Understanding what the project is about ACCESSIBILITY & AWS WEB STANDARDS PROJECT Establishing full accessibility and web standards such as AODA PrD DEFINITION TARGET AUDIENCE Defining and understanding website users and personas PrD RC CS AWS Te STr Choosing a development framework and/or CMS TA Fr FRAMEWORK Designing the database structure needed for website content Go GOALS Setting up clear target goals Db DATABASE Implementing functionality for required features TECHNICAL Defining specifications such as browser resolutions TS Fu FUNCTIONALITY SPECS Establishing the required content to be featured on the website TA Br Lo Fr PrL AB CONTENT CI Integrating the client content within the website Co CONTENT INVENTORY Evaluating available client assets, such as fonts or images SITE PERFORMANCE Ensuring proper website access speed and performance Re RESOURCES SP Defining projecilotment required time PrT PROJECT milestones and Se Implementing security features SECURITY TIMELINE PROJECT BUDGET defining overall budget Establishing necessary costs and Implementing required markup for SEO, Social Media and others PrB Mk MARKUP Go IA Ar Db WA DUp PLANNING LAUNCH The research and preparation done in this step sets the stage for the entireproject and will be the foundation on which the design and development work is based on. The launch phase covers making final touches and moving the project to the client's live server. The design company will also hand off any available deliverables and documentation. TS La VE Fu QA FUp Carrying out preliminary research and creating initial concepts RESEARCH & RC Te TESTING Final testing of website features CONCEPTS Performing team brainstorming sessions Transferring website to the live Br BRAINSTORMING LS LIVE SERVER server Performing quality assurance tasks such as proofreading INFORMATION Defining website structure and content navigation QUALITY IA QA ASSURANCE ARCHITECTURE Establishing the layouts for the different types of pages required CI Us Ty Co DI CUp Integrating web analytics software into the website PL PAGE LAYOUT WA WEB ANALYTICS Ensuring ease of use through proper presentation of content Handing off client deliverables such as source files Us USABILITY DI DELIVERABLES Creating initial wireframes and mockups TRAINING DOCUMENTATION Providing website documentation and client training WIREFRAME & WM TD MOCKUPS Re WM RM SP TD DESIGN MAINTENANCE This is where the visual look of website starts to take shape. The designer will envision a variety of creative artwork prototypes to allow the client to choose the look they want. Ongoing manteinance is a must, both for ensuring technical support but also to allow for optimization existing and new design elements, features and content. Choosing a relevant color scheme based on client brief and research SUPPORT & TROUBLESHOOTING Ensuring technical support and troubleshooting issues Performing website optimization through A/B testing Providing and implementing CS COLOR SCHEME ST PrT UX Se Creating the logo and other branding elements Lo LOGO AB A/B TESTING Desiging artwork such as sliders and header images DUp DESIGN UPDATES Ar ARTWORK design updates Providing and implementing functionality updates Providing and implementing content updates VISUAL ELEMENTS Designing the website's visual elements such as buttons FUNCTIONALITY VE FUp UPDATES Choosing appropriate font families, sizes and other properties PrB Cdc Mk CONTENT CUp UPDATES Ty TYPOGRAPHY Creating required rich media such as animations RM RICH MEDIA UX USER EXPERIENCE Testing design's user experience SOURCES: Designed and developed by: Testing design's compatibility between different devices http://www.smashingmagazine.com/2011/08/22/following-a-web-desig n-process/ http://www.utexas.edu/learn/designprocess/ http://www.newdesigngroup.ca/blog/web-design-process-infographic CROSS-DEVICE PT NEWdesignGROUP COMPATIBILITY PROTOTYPE Creating prototype templates for dient presentation PT TEMPLATES www.newdesigngroup.ca