I love good web design. To be a good web designer though is not just about visual aesthetics, it’s really a collection of skills that come together: it’s mixture of creativity and problem-solving; it’s about understanding how things can/should behave when laid out on screen (and understanding that screen-based design is different to print and other ‘static’ design approaches); it’s about understanding how colour is represented in different ways; how images and other visual media is encoded, represented and manipulated; how type is styled (for purposes of legibility or playfulness); and finally it’s about having a grasp on the languages for structuring information and altering its appearance.
We’ll get to the fun parts of working with design apps, colour and imagery soon, but the latter point about structuring information is where we’ll begin, as it underpins everything that we’ll do.
<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />
Learning anything new can be confusing at times, but as we go through this content together, if you ever feel that any of it is difficult to understand, complicated, overwhelming, or otherwise vexing please let me know. Perhaps you could:
Don’t be shy. You won’t get in trouble. There are no silly questions. Asking questions shows me that you’re engaged, and talking through an idea is a bit more friendly than battling your way through a dense wall of text.
</aside>
Before we begin today, you’ll need a code editor. We’ll be using Sublime Text in class, but you are welcome to use an alternate editor if you have a preference. It’s already installed on the lab machines, but go ahead and download it if you are working on your own computer. Shall we begin?
<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />
By the end of this chapter you will:
OK. Upfront, let's get something that has the potential to be kinda dry out of the way: Writing text. When we think of the word ‘design’ we tend to think of its visual connotations, but it relates fundamentally to the presentation of information. We all write text to convey information: as essays, e-mails, messages, birthday cards, fan mail, shopping lists, social-media posts.
Where and how we write shapes the kinds of things we write, as well as the ways we write. Sometimes what we are able to write is constrained to entering text into an input area, or limited to a certain character count.
For things like university assignments (or when we want to organise content to be presented in a certain way) we typically use a word processor to help us with the task of writing, editing, and organising content, as well as making it look pretty. A word processor is typically something called a WYSIWYG editor. (With that ridiculous sounding acronym being short for What You See Is What You Get.)
Developer writing HTML code with a green matrix-style background hacker-like aesthetic by wudu_8, Adobe Stock #952667323
A WYSIWYG editor is something that makes text look how you intend it to look. You select some text, click the bold button, and the text looks bold. If you were to render a copy of your message in hardcopy, eg. print it out on paper — it would look like the way it was written. The way it looks when you write it is the way it looks when it's viewed by others.
HTML, or HyperText Markup Language — the thing we are going to learn about today — is not like that. HTML uses short descriptors (called 'tags') to define what purpose something serves: eg. a heading, a list item, a blockquote, and so on. HTML is written in plain text, and most often written in a monospace font. In this Orwellian world of creative expression, every typographic character is the same size and has the same width.
<aside> <img src="/icons/fire_orange.svg" alt="/icons/fire_orange.svg" width="40px" />
“But I've seen <insertname>, and that lets you create webpages just like you're writing in Word. I could make a website without learning anything of this stuff! Work smarter not harder I always say...”
</aside>