Web101: The Design & Development Process
Thursday, June 9, 2016 - Nathan Walasek
The process of building or re-designing your company’s website can be a daunting task. Part three of the five-part “Web101” series explores the steps you’ll encounter during your site’s design and development.
Website Design
Wireframing – the process of creating a structural “blueprint” for your site – is probably the most vital step in the design process. These skeletal drawings benefit the designer by allowing them to focus on the layout and usability aspects of the site, and their simplicity allows for rapid changes and variations in the design. It also benefits the client by offering an easy-to-digest look at the website’s structure without being distracted by its look and feel.
After several iterations and reviews with the client, a good wireframe should solve the biggest design hurdles facing the new website and prevent any major setbacks requiring a restart of the process.
Once the wireframe is finalized, it is translated into a comprehensive visual design where the designer can consider the website’s aesthetics. This is the point at which the client’s branding and style come into play, and the designer will use these in creating a realistic representation of how the completed site will appear. The visual design also goes through several iterations until it conveys the proper messaging and attitude: professional and clean, quirky and stylish, or flashy and cutting-edge, for example.
Website Development
The development stage is when the actual website really starts to take shape. The web partner should provide the client with a testing URL used to preview and give feedback on the work being done.
A front-end developer (whose job is to program the visible parts of the site) builds out the visual design using common web technologies such as HTML (HyperText Markup Language), CSS (Cascading Style Sheets) and JS (JavaScript). These programming languages are used to set the site’s structure, visual style and interactive elements.
The front-end developer will also be concerned with making sure the website works on a variety of desktop and mobile devices, all having different screen sizes and ways of interacting with them (touchscreens versus mouse pointers, for example). They will also ensure your site is accessible to search engines and people with disabilities, and optimize it so that it loads quickly.
A back-end developer handles many of the behind-the-scenes tasks which compose the guts of the website. They will incorporate a CMS (Content Management System) which communicates with a database and allows the client to easily manage things like page content, storefront products, blog posts, photo galleries and the like. There are countless technologies available to a back-end developer, and it is up to them to determine which is appropriate for the task at hand.
The back-end developer is also often tasked with the site’s security and maintaining the hosting. This means staying on top of bug reports and security alerts, as well as keeping the server’s software up-to-date.
Both of these developers will work closely with one another throughout development and will perform quality assurance testing to ensure the requirements and functionality of the site are realized.
What’s Next?
In part four of the “Web101” series, we’ll talk about ways to make sure you’re prepared to launch your shiny new site.
Did you miss the last post? Get caught up: Web101: How to Organize & Communicate Your Content
{{cta(’71f40708-607c-4413-96e8-cee3f364239a’)}}