Before you even decide to start the actual website design, it is critical to understand the requirements and establish the scope of work. Your understanding of the requirements will give you clarity (in approach and in the execution). Also it will help you estimate the amount of work and time that will go into the project. This will help you budget accordingly. It would also help to go back to the previous part in this series and see the context of this post: 10 Difference Between A Cutting-Edge Rock Solid Business Website And A Free One.
The technical scoping seems quite tedious and redundant but it has a critical purpose — to plan things out, be prepared for things to come and to stick to the plan.
Most clients do not have a technical understanding of what goes into a website. Most of them struggle to identify the requirements. That’s because website design is a service, not a package. That’s exactly like having interior design done to your house. “I need interior design. How much?” translates to “I need a website design. How much?”
That’s not simple at all. If you are a service provider, establishing a scope of work protects you from surprises during project execution.
In general, the first task is to establish the category or the type of the project:
Is it a website design or is it a website redesign?
A website design perhaps means that the client is new to website design. They would usually not be familiar with what design is all about. They wouldn’t know the difference between domain registration and a hosting plan either. On the other hand, if it is a website redesign, expect the client to be familiar with common terms. The reason they’ve chosen to go for a website redesign is because they’ve identified the shortcomings with the existing website and want to improve upon things.
Chain of simple customizations or a larger design revamp?
Sometimes you wouldn’t need a website design per se but actually small incremental improvements like making your logo retina-ready, making your website mobile-friendly, adding optin form to the site and similar list of to dos.
At other times, you may want to go for a design revamp. This is useful if you want to change the look and feel and user-experience of the website. At a bare-minimum this involves changing the WordPress theme for a new one that fulfills the design goals as well as is ready to power your site for the long run. The theme has to be flexible, customizable and also adhere to WordPress coding standards lest you’ll have trouble adapting it to your requirements and it may not work with some plugins or implement some functionality of WordPress properly.
Full Website Design from Scratch (Custom Website Design)
Full website design from scratch involves identifying the business goals and mapping them to the requirements for a functional website. This involves keyword research and content mapping, identifying the market segment, customer profiling and a host of activities pertaining to the discovery and competitive research.
As per the website goals thus identified the implementation process begins with the creation of Wireframes.
Wireframing and Mockup
Wireframes is an elementary sketch representing the layout of various elements that will be present on the actual design or the user-interface. This means identifying the optimal placement of the logo, header elements, content and imagery, the widgets in the sidebar, footer, etc. This visual representation allows you to assess and optimize the design for usability.
Creation of actual design in a graphics application like Photoshop
Once the wireframes for key views are finalized, it’s time to start picking up the color palette, the choice of fonts, jotting down what kind of look and feel you want for the design and start creating the actual design.
The color palette and choice of fonts typically is decided by the branding creatives at hand.
Graphic design is done in Photoshop or Illustrator. Sketch and Gimp are other options. The designer will start by reviewing some of the existing website designs that you like (and what you like about them).
Implementation of the design into an actual, functional website
Project requirements help in understanding the technical scope at a more granular level. It’s basically the features and functionality expected from a website.
- Logo Design: For small websites, the logo design often comes through as one of the requirements. What’s a better time to touch up the logo while you are already into the site design?
- Landing Pages: Landing pages are pages that are optimized for one single goal — conversion. Landing pages are the pages on your website where visitors from search engine land while they are searching for your product or service. Landing pages are optimized for this specific visitor segment and have the focused objective known as Call To Action. As an example, let’s say that you are running an ad campaign on Google Adword or Facebook Ads. Clicking on this ad will lead the visitor to a landing page on your website. This page must be optimized so that the visitor will actually sign-up for your product or your service. If this doesn’t happen, you are losing the money into the ad campaign. Even if the clicks are coming from the search results (instead of ads), you have to make sure that the visitors actually sign up. You are leaving money on the table.
- Portfolio, Sliders, Image / Video Galleries: A portfolio page shows your body of work. The portfolio pages often make use of sliders and image grid or video galleries.
- Newsletter Subscription: These are required to build up your email list. It is important to capture every visitor and every lead. Most of the visitors otherwise go away, never to come back and you lose your chance to impress upon them the merit of your product. Most conversions happen after the fifth touch so it’s vital to establish a communication channel wherein you can establish communication and help your product reach more customers.
- Social Media Integration: Integration of social media elements and function is common these days. It’s common to see social sharing buttons, login using social profile / credentials, integration of social widgets into the website, social-proof like comments etc. and similar functionality like pulling photos from Instagram and having them show on the website. The social signals are also accounted for better search ranks (this is termed as the referral traffic in website analytics data).
- Contact Forms: Contact forms are the communication channels between you and your customers. Contact forms come in all sort of functionality from simple to complex like a simple text submission to a more complex thing like ticket or support request submission which may be further integrated into a third-party CRM solution.
- On-Page SEO: On-page SEO is the search optimization that you do on your own website, while off-page is something that you do off page like building links to your website from other websites etc. While WordPress and WordPress themes are pretty strong at on-page SEO level, the problem is almost everyone seems to have it. Where is the competitive edge? Is it really as simple as setting-up the Yoast SEO plugin and forgetting it? Not really. SEO is not a plugin, it’s a process — a larger strategy for the long term. On-page SEO means content architecture, implementation of the right set of schema specific to the business profile and content types and elements on the website. Strong on-page SEO has a ripple effect — your website gets better visibility in the search results causing more people to link to it which results in further improvement of search ranks.
- Content Migration: When redesigning or moving the site, you will want to migrate your entire content to the new domain. Special care has to be taken not only about moving the complete data but also on its integrity. WordPress uses serialized data and simple search and replace ends up breaking things. The option is to do it via wp-cli or a custom script which ensures data integrity.
- Content Restructuring: Often times you’ll want to organize your content better as a part of the larger design exercise. Content organization is the strong on-page SEO signal that can help in improving your search ranks. Well-organized content is also easier for the visitors to navigate and find the relevant information. Here’s an excellent article on how to reorganize content on your WordPress website using SILO content architecture.
- Membership Website: Membership websites implement a paid platform for members to pay and subscribe to a service or premium content. Often membership sites are used for selling ecourses, premium content, product support, etc. Membership websites are an evergreen source of income.
- Ecommerce Website: Ecommerce websites allow you to sell products and services online. This involves setting up and configuring an ecommerce platform by using plugins like WooCommerce, EDD etc or using third-party tools like Samcart, Amazon, etc.. Also you will need to provide the content and images for the products in the store and the details of the desired checkout process. eCommerce websites are complex in nature since there’s more to it than what meets the eye. You need to do technical SEO for your products, product categorisation, integration with one or more payment gateways etc. And then you also need to set up and analyse KPIs to study conversion.
- Event Management / Registration: Event management functionality allows you to create and manage events from your own website and allow members to register and book tickets online. This comes in handy for authors and speakers who want to display their speaking schedule and allow people to register for their presentations.
This post gives a general overview of some of the common requirements that come along in a website design project. The point is to communicate, question, explore the needs and establish technical requirements based on the design goals.
There could be other requirements like inclusion of a learning management system, ad integration (for blog monetization), integration with niche third party tools / services (like Healthie ERM system for nutritionists, IDX for real estate websites), forums, custom content types or custom taxonomies (for ease of content management and organization) — like creation of a custom post types called Courses / Books / Recipes / Holiday Packages / Case Studies / Projects, etc.
It’s best to know in advance to avoid surprises. It is of prime importance to set the expectations right and be prepared for the proper execution of the project.
UX & Frontend Design, Diy-design