—
31 items in the library
Last updated 09 April 2024
By Jake Dow-Smith
Self-publishing on the internet is a rewarding and powerful experience – you can very quickly produce work that is accessible to billions of people for very low cost.
Building websites is often seen as an uncreative, mathematics-based task undertaken by coders. This library encourages you to learn how to design and build interactive experiences and to consider this a tool in your design toolkit. A person is only a coder as much as you are an InDesign-er or Microsoft Word-er.
This library will introduce you not just to code resources, but also to examples of alternative forms of screen-based interaction and the technologies they are based on.
If you’ve ever searched ‘how to make a website’, you’ll have come across tutorials that seem unnecessarily complex or demand you use technology you’ve never heard of. The aim of this library is to showcase accessible, straightforward resources that you can use to build a website.
Every web page on the internet consists of three elements: HTML, CSS and Javascript.
Because every web page you visit on the internet uses these same three core languages, learning the basics of how they work is extremely valuable. You’ll find them useful in a variety of design situations – without understanding the basics of how to put a web page together it can be difficult to imagine what’s possible, even if you’re unable to build it yourself.
Because you need software developers to make software, a lot of software used in web development is open-source and distributed freely. Because web pages are created using text, as a minimum you’ll need a a plain text editor such as TextEdit installed on your computer. If you want to make your life a little easier you can use a programming text editor such as Visual Studio Code which will do things like highlight where it thinks you’ve made a mistake and provide autocomplete with common programming words.
If you want to publish what you’ve made to the internet, you’ll need somewhere to store those files online. For that, you’ll need a server which will typically cost around £30 per year. Having the files hosted somewhere is great, but in order to look at them you’ll also need a domain which will tell the browser requesting it where to find the server. A good host and domain registrar is Gandi. Hosting, servers and domains are complicated and generally boring – don’t worry if you don’t understand at this stage, most hosts provide an interface where you can click through these steps.
To publish your creation to a server you’ll need FTP software, like Cyberduck. You’ll enter a username and password that your host provides and drag your files to the server which will publish them publicly. Most web hosts look for a file called index.html which is the one that will be shown when you visit your domain.
Using the example of this website:
Within the last ten years, typographic customisation on the web has changed drastically. Less than ten years ago there were only a handful of typefaces you could use on the web, these included:
Arial
Arial Black
Comic Sans
Impact
Lucida Sans Unicode
Tahoma
Trebuchet
Verdana
Courier New
Times New Roman
Lucida Console
This website works within these constraints and uses Times New Roman and Menlo, which are two typefaces found on most computers. They’ll render differently on a Mac and PC, even Chrome and Safari.
A designers’ ability to use typefaces on the internet impacted the design of the internet considerably. It’s likely that Ikea changed their branding from Futura to Verdana, a typeface designed for screen use, because they couldn’t use Futura on their website – you can read more about that here.
Now, you can license almost any font for web use. For a selection of free typefaces, look at Google Fonts or to purchase a commercial font use a service like TypeNetwork or go direct to a foundry like Klim, Grillitype or Swiss Typefaces. Here’s a Type Directory of many independent foundries.
Although you may be used to lots of flexibility when using software such as InDesign, there are lots of typographic constraints when designing for the internet. Although you can adjust letter spacing, full kerning is still not possible in most major browsers, and rudimentary columns have only recently become a usable feature. One area where typography is enhanced by web technologies are Variable Fonts which allow you to adjust a series of variables to customise the appearance of a typeface to your needs.
For a full, in-depth look at typography on the web, read The Elements of Typographic Style Applied to the Web.
Web pages are infinite in proportions – try to think of the browser as a canvas. You don’t control the context in which your work is viewed – a computer and browser simply interprets the instructions you supply, and every browser interprets them slightly differently. Websites are able to be modified and adjusted. A user could be using an ad-blocker, or they might have changed their browser settings to enable Comic Sans for all web pages they visit. The user could have smashed their screen and be viewing your website behind sharp shards of glass.
When designing for screen, it’s useful to use software optimised for the task. InDesign is made for print, but Figma and Sketch are made for designing and prototyping websites. One key difference is when opening a new document, you’re not asked to choose a size, because a website can be an infinite size at no additional cost or complexity – start with an infinite canvas and try to experiment with new forms of navigating it.
The personal computer.
One meter³ occupying your table, not as a piece of furniture or decoration, but a tool. Like a boiler on a wall or air conditioning unit on a window, digital interfaces making analogue noises without asking permission.
My favourite sounds:
Cargo is a self-publishing platform that uses pre-built yet heavily customisable templates for… anything. The majority of their users are publishing in a creative capacity (designers, photographers, cultural events), and to build a website using Cargo needs no code knowledge, though knowing some will allow you to create a more unique design.
Central Saint Martins GCD students receive free access to their premium service for the duration of their studies, please contact Jaap or Jake for more information on how to access this.
Solar Magazine is a website powered by the sun – it’s designed to consume as little energy as possible. That means if there’s not enough sun the website goes offline, so you’re encouraged to plan your visit to the website based on the local weather conditions.
When we type a letter in to the address bar of a browser it’s likely the browser pre-requests the website it thinks you’re likely to load. If you don’t continue typing what it thought you would, that request is wasted – somewhere on the other side of the world a server woke up from sleep, spun up it’s hard drives and transmitted for thousands of miles what was requested, only for it to be refused. When we browse the internet, we often don’t consider the extensive resources involved in transmission of invisible data.
In the 80’s and 90’s a computer monitor was typically powered by cathode ray tubes (CRT) which used vast amounts of electricity. Unlike modern LCD screens found in modern laptops, CRT monitors used only small amounts electricity to show a black screen, but lots of electricity to show a white screen. Blackle was an early solution to a unique problem – the most popular web page, Google, was a big white screen, and Blackle with it’s black background was estimated to save 750 Megawatt-hours of electricity a year.
Finding and interacting with interesting website designs is an important part of learning and understanding what’s possible with the internet. Here are a few websites that collate new, experimental and alternative forms of web design.
Raw, HTML-focused website design – no animations here.
Experimental website design – much of the work on here is pushing the boundaries of how we interact with computers. A number of GCD alumni have had their work published here.
The complete opposite to the previous two – minimal, typographic, modern website design, – usually with a white background.
Heavily customised Cargo templates, people pushing the limits of what’s possible with pre-defined templates.
A combination of all of the above, selected by GCD Associate Lecturer Gemma Copeland.
A huge catalogue of modern website design.
Modern website design, highlighting on-trend typeface pairings.