Skip main navigation

£199.99 £139.99 for one year of Unlimited learning. Offer ends on 28 February 2023 at 23:59 (UTC). T&Cs apply

Find out more

Components of Web Design

This step explains each of these components along with their associated tasks and activities.
So now, we’re going to talk about the components of website design. So, there’s four main areas we’re going to cover in this section. Architecture, design, content, and optimization. So, with architecture, there’s a lot of steps involved, and this is kind of the bones, the house that your website is built on. So, you’re going to choose a hosting provider, a CMS, also known as a content management system, and then a domain name, so the address of where your website’s going to live. Next, you’re going to install a CMS and the required plugins and features that go along with that. Maybe it’s a slideshow viewer or a plugin for SEO. They have that for WordPress.
Anything that’s going to help your website work better. You’re going to build out the layout and design. So, that’s the actual look and feel of the site. You’re going to add elements like buttons, graphics, text, and then the SEO of the site. You’re going to test the site. So, build it on a fake domain until it’s ready to go live, a staging domain. And then, you’re going to finally launch it. And then, as the launch rolls out, you’re going to look for bugs. So, anything that isn’t working that people notice that you didn’t catch during the test phase, you’re going to fix that after the launch comes out.
So, the design is basically what a website looks like, what it looks like on the front end. You don’t see the code. You see the blocks of the website. So, the way that works is, first, there’s a mock-up of a site. So, it’s basically a long form wireframe drawing that shows all the pages of the site, and examples of what it’ll look like from the designer. They’ll get feedback from the developer and the marketing team, just to say, hey, this isn’t going to work with the code, or this could be done in this color, or could be done with a larger button. Just feedback like that, to make sure that it looks the best it can.
Once that is turned into code in an actual website or a theme, if you’re on a CMS, you’re going to implement the changes that the feedback was given to you, and it’s going to go into a live design with the developer. So, after that’s done, you’re going to work with the team to finish the site, and hopefully put it on the staging platform before it goes live. So, the content on your site is all the information, all the written words, and that includes downloads as well. So, PDF guides, infographics, blog posts, about pages, those are all included in the content.
So first, what you’re going to do is create a list of pages, and you can use the wireframe from the original website design that the designer was using to go off of that. And then, you’re going to fill that in with the website content. So, the homepage content, about us, contact, every interior page, you’re going to be writing the content for, and you’re going to make sure that it’s SEO optimized. And then, you’re going to copy-edit the content, so that’s going to be someone else different from the writer. They’re going to look for grammatical errors, spelling mistakes, flow, making sure it makes sense, checking statistics to make sure they’re correct. That all goes into copy editing.
And then finally, adding the content onto the built website. So, once the designer and the developer have built the website, then the content will be loaded in. Optimization is the last one. So, that is going to set up the SEO best practices, like the metadata and the site map that I mentioned earlier. You’re also going to set up the metrics reporting in Google Analytics. There’s other analytics platforms, but that’s my favorite. It’s going to help provide the data for your website for better tracking, conversions, seeing what works and what doesn’t, testing, things like that. And then, finally, you’re going to ask colleagues or outside users for website feedback.
There’s platforms you can use, if you don’t want to use actual customers, like, and that’s just making sure that your website is working correctly.

The four key components of website design are: architecture, design, content, and optimization. This step explains each of these components along with their associated tasks and activities.


Do you access websites on your phone? What do you do if the site doesn’t work well on your phone?

Please submit your answer in the comment section below and take a look at what other learners are saying about their experience.

This article is from the free online

Getting Started with Digital Marketing

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education