Understanding website concepts

Before we dive into building your Website Toolkit, let's start by breaking down a website into components so that you can better understand how to make one. 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 put together makes up the process of designing and building a website, which is the final goal of this book.

Structure

Structure refers to the way in which the different elements of a web page or website are put together. In the web industry, we often use tools such as sitemaps and wireframes to define a site's structure. A sitemap is simply an outline that shows 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 organizational chart.

A wireframe 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 such as color or images nor do they contain real blocks of text. You can think of a wireframe like a pencil sketch.

Functions

A function is an action-oriented part of a website, for example, a shopping cart, inquiry form, or downloads. Functions always relate to actions that we want our website users to perform, and it's important to know from the beginning what these are and what priority each function has. Functions are enabled and restricted by the technology we use. So, in our case, the set of functions available to us is defined by what is possible using the Squarespace system.

Content

This one is pretty self-explanatory. The content of a website refers to the text and other media (such as PDFs or videos) that sit within each web page. Sometimes, the content will be provided by someone other than you, such as a marketing or communications staff member, or from a third party, such as a photographer, stock photo agency, or copywriter. Often, the content will need to be reformatted or reworked in order to make it suitable for use on a website.

Aesthetics

Many people would refer to aesthetics as design. However, other components such as structure (the size and placement of things) and content (photographs or length of text) also play a role in design. Therefore, it's easier to keep things distinct if we avoid this term, which can be broadly interpreted, and instead narrow our focus down to the way things look and feel. This means we are talking about colors, 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 will be critical in helping you choose colors, 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.