The 4 main components of creating a website
Understanding website design concepts and language
How to ensure you and your web designer are speaking the same language
Before you start building your own website or working with someone like me to help you build one, it’s a good idea to learn the language of websites so you can understand what you're dealing with and articulate what you want.
Broadly speaking, there are 4 components that go into creating a website. Each component is distinct, but some are closely related to one another, and it’s easy to mix them up. The sum total of all the components together makes up the process of designing and building a website.
Now, there are lots of different names and ways of defining each component, and in fact, some people in the web industry will disagree with my very basic breakdown of things. However, I have found the following definitions work well when communicating with clients, who normally don’t consider themselves “techies” and don’t care about the difference between “information architecture” and “interaction design”. So, let’s keep it simple…
Structure
Structure refers to the way in which the different elements of a web page or web site are put together. In the web industry, we often use tools such as sitemaps and wireframes to define a site’s structure. A sitemap defines the structure of a website at a macro level, and is simply an outline showing the hierarchy of web pages in terms of navigation. You can think of a sitemap like a table of contents in a book, or an organisational chart.
Wireframe, courtesy of andreas.trianta
A wireframe defines the structure of an individual web page (micro level) and is a schematic drawing of a web page, showing where the main elements of the page sit. Wireframes show only the relative size and position of content and functions; they do not include visual elements like colour or images, nor do they contain real blocks of text. You can think of a wireframe like a pencil sketch.
A wireframe may include structural elements that repeat across multiple pages, such as:
header - the strip that runs across the top, usually where a logo and navigation go
footer - the strip that runs across the bottom, usually where utilitarian links or info go (such as copyright notice or contact details)
sidebar - skinny vertical column, mostly used on blogs, containing the same elements no matter which post/page you are on.
In most website building systems (web platforms), these types of elements form part of a template. A template normally sets the repeating elements on a website, not necessarily an individual page layout. In other words, a layout is the structure of a single page; whereas a template tends to apply to multiple pages.
In the old days of web design, wireframes were an integral part of the website planning process. Today, many web platforms are so easy to use with drag & drop real-time design, that some web designers don’t use wireframes anymore, as it slows the process. Instead, they build rapid prototypes within the actual web platform instead of working from wireframe sketches.
Function
A function is an action-oriented part of a website: for example, a shopping cart, enquiry form, or download button. Functions always relate to actions that we want our website users to perform, and it’s important to know what these are, and what priority each function has, from the beginning. Functions are enabled and restricted by the technology we use. So unless you are a web developer, the set of functions available to you is normally defined by what is allowed on the web platform you’re using to build your website. If you use WordPress, Squarespace, Wix, Weebly, Drupal, Magento etc, then the functions you can have on your website will need to be one of the functions offered by that platform.
In some cases, you can embed functions from other systems into your website. For example, you may be able to embed the YouTube video player into a web page, or you might embed a newsletter signup function from MailChimp. These types of portable functions are often called widgets, plugins or embeds.
Content
You’d think this one is pretty self-explanatory: the content of a website refers to the text, images and other media (such as PDFs or videos), that sit within each web page. However, it’s not quite that simple, because there is a fuzzy line between content and design. Photos are content, but they also play a big role in how a page looks. Having a lot or a little bit of text on a page also plays a role in the page’s appearance.
It’s for these reasons that I try to avoid using the term “design” whenever I can, because it’s very broad and doesn’t help with communication in most cases. For the purpose of building a website, it’s usually easier to classify text and images as “content” and use more precise language instead of the vague/confusing word “design” when referring to the appearance of a page.
Aesthetics
As mentioned, many people would refer to this last element as “design”. However, as other components such as structure (the size and placement of things) and content (photographs or length of text) also play a role in “design”, I prefer to use the term “aesthetics” to narrow our focus down to the way things look and feel. This means we are talking about colours, fonts, and graphic elements such as lines and patterns, not content or structure.
The “feel” part of look and feel is quite important, but harder to define. This is the tricky bit: it refers to how the website appeals to your emotions. Authoritative, refreshing, playful, vibrant or Zen are just a few examples of emotive words that can describe a site’s “feel” or overall impression. These words can be critical in helping you choose colours, fonts and other visual elements to fit with your desired impression. They will also play a role in content choices, such as types of photography, tone of voice, and writing style.
So what is web design, then?
When it comes to websites, there are actually many types of design; “design” can refer to planning and implementing components to make a visually harmonious appearance, or it can refer to planning and implementing the experience that a user will have when interacting with a website. In fact, there are actually many specialisms within web design, especially when you start talking about large commercial websites and the agencies and teams who support them.
But broadly speaking, for small sites/projects, a good web designer will be able to artfully combine 2 or more of the 4 main components into a visually pleasing web site or page that serves the needs of the website user well. If you work with someone like me who has lots of experience working across a range of website projects, I can help you with all 4 components, collaborating with you to ensure that they are all working together in the optimal way.
Even if you decide to build your own website, it's important for you to consider the 4 components and their relationship to one another. Doing so can help you recognise some things you may not have considered, and also some areas where you might need help. If so, you'll be able to clearly communicate what you need help with, either to your colleagues or a web professional.
Considering building a website with Squarespace? These concepts are explored in more detail in my book, Building Business Websites with Squarespace 7.