MA Web Design + Content Planning materials for applied art for the web • major project

Typography for the web.

Web Design is 95% Typography.

This article was published in 2006, and caused such reaction that a follow-up article was published. I would highly recommend you read them both, plenty of food for thought.

Though this is a bold statement which you might, or might not, agree with – there is no doubt that carefully crafted typography will not only ensure good legibility of text and therefore accessibility but also greatly enhance the design and impact of any given website.

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Oliver Reichenstein, ia.net
type illustration

If you are curious about type back at the early days of the web - check out my article typography for the web from 2011. While we're now spoilt for choice, it's important to understand how web type works, and which options we have to use fonts on the web.

Webdesign is all about typography. Period.

Oliver Reichenstein, ia.net

If you are very new to typography it will be well worth your time to read up on some of the basic design principles involved in both type design and typography for the web. While there is much to read online, it used to be more difficult to find the right resource for those new to the subject.

But no longer — I am proud to present to you this brilliant site to help you get to grips with all the basics and more: Typelab.co.uk. Created as major project by our very own Hannah (who graduated 2016) – thanks, Hannah :)

typelablogo

This is the celebrated new miscellany of
Mr. Simon Collison A.K.A Colly

This is version 4 of the site of designer, author, speaker and event organiser Simon Collison. His website has since had a major update but luckily Simon is keeping this version online for our enjoyment :)
Let's have a look at this little gem of webdesign.

screnshot of v4 website, Simon Collison

This is one of my absolute favourite sites of all time with its very British charm, its beautiful content and delightful design. Best of all, it really does perfectly reflect Simon — one of our 'peple of the web'.

His eye for detail and the rich typography are something to aspire to. This is a perfect example how fine-tuned typesetting will add to the feel of a website.

Links

Let’s take a look at some established as well as popular graphic design principles and their possible inspiration for design for the web. While working on your first mini project, start your initial design process by considering how some of these established concepts might contribute to your design.

sculpted paper spiral

design principles I

  1. balance
  2. gradation & contrast
  3. repetition & rhythm

site references I

sculpted paper spiral

design principles II

  1. dominance
  2. unity & continuation
  3. proportion

site references II

PLEASE NOTE:
some of the examples shown in the slides have since been updated, or no longer exist. I’m keeping the references as this now allows us to compare their previous to their current design, and recognise the relatively temporary nature of some websites.

debating web type

While the web increasingly features different kinds of media such as images, videos and interactions - the core content remains text. We never access any webpage without reading ~ be that titles alone, summaries or introductions or long form text. As web designers, it is our job to ensure that the inherent tone of the page fits its intention and to make reading a pleasure not a chore.

Our task is to express the intended message and deliver a layout that supports our typesetting ~ all with the goal of allowing everyone to easily skim the page and read its content. If you are very new to laying out text, looking at classic principles and applying them to your designs can help guide you to produce original, engaging pages which make reading a joy.
Read the article: Debating web type.

profile project

This is your first little project - for which you are to create a single page profile design.
Check project briefs for details and examples from students in the previous years.

CHECK LIST #1

  1. write/edit/collect the information you’d like to feature on your profile
  2. work with your given content to plan for effective layout
  3. sketch out your ideas in your sketchbook, experiment/iterate/refine
  4. produce a digital mockup/wireframe of your design (black/white only)
    you might want to try out Whimsical (you can find the invite link under 'try tool: Whimsical') for digital wireframing :)

feedback threads on Slack

To get us all used to sharing our work, our process and giving and receiving feedback, let's take this project as a warm-up. I've taken the list of your names and put this through a generator to form 4 teams.

Remember the threaded conversations ~ read a quick reminder
The idea is that each group will have their own thread and share and discuss the work on the various stages of this project. There's one week between each stage, one week for the teams to collaborate on all phases, from brain storming and ideas, revisions and iterations and onto the final piece.

By working in smaller teams, we can hopefully have productive chats. At the same time, the threads are open to read for all, and join in by anyone as well. Hopefully this will work nicely.

And each week, there'll be a re-shuffle of teams to give everyone a chance to work with everyone else ~ well, in theory anyway ツ

speechbubble + hello

Feedback groups

To allow us all to view each other's work in progress - each group is to put together one image - a summary or collage of each person's work, to be shared via slack for quick discussion in class. I've used a random selector to pick one person per group, marked by an asterisk ✱, to be responsible for putting this up. This will change each week as the groups arrangements.

26/10/2022 work progress of checklist #1

Standardistas

Standardistas - I
  1. Adi
  2. Bukie
  3. Jessica ✱
  4. Natalie
  5. Sophie
Standardistas - II
  1. Andre
  2. Emil
  3. Lipi
  4. Paula ✱
  5. Vidhi
Standardistas - III
  1. Anumeha
  2. Harideep
  3. Mona
  4. Peter
  5. Ye-Seul ✱
Standardistas - IV
  1. Armani ✱
  2. Ibrahim
  3. Muhammad
  4. Qu

Codepoets

Codepoets - I
  1. Aleyna
  2. Eddy
  3. Jeena
  4. Rohith ✱
  5. Zara
Codepoets - II
  1. Amrutha
  2. Gopika
  3. Larmie ✱
  4. Sabbu
Codepoets - III
  1. Brikena ✱
  2. Jagatheesan
  3. Miri
  4. Sukhi
Codepoets - IV
  1. Devjan
  2. Jaanvi
  3. Prachi ✱
  4. Sushan

Join the design4web workspace
If the link does not work, let me know and I'll send you an invite.

what is it?

"... a unified workspace for thinking and collaboration."
It's an online tool for creating/editing flowcharts, wireframes, mind maps and notes via sticky notes.

whimsical logo whimsical logo

why whimsical?

A mere suggestion, nothing more. There is a plethora of options out there. You should keep an open mind, and a watchful eye, on available options and find what suits you, your mindset and workflow best.

In our field, it's best to be flexible and ready to learn new tools. Worth trying out at least - it could be great collaboration tools for us ~ or not ¯\_(ツ)_/¯

background

Recently, I've had to plan out a complex project and explored Whimsical. And I think it is lovely. A quick and easy tool for idea generation, project planning and best of all: collaboration. It's super simple - very easy to use and I think you will like it too. Feel free to ignore it, of course, if it's not your cup of tea ;)

Whimsical offer an education plan which I applied for and which now gives us a workspace we can all use. You will have full access for 2 years and can create an unlimited number of boards. Please just sign up and have a look around.

Go ahead and create a folder for yourself and use this for your project work or anything else :)

summary

  1. create new wireframe under 'My Boards'
  2. name your file
  3. add elements via the toolbar
  4. create a copy for iteration
  5. get used to including versioning in your file name
    (for yourself)
  6. get used to including your name in your file name
    (for team coms / collaboration / submissions)
  7. share your file for comments and feedback
    add into folder: design4web-22/23 > profile layouts

collaborative feedback

Hopefully you'll all having fun experimenting with wireframes, and so I thought Whimsical might be handy to prepare your ideas for feedback within your groups. Whimsical is only one tool to try but we have to start somewhere :)

As you can also upload images, please add your layout ideas in any fitting form, sharing your link within your group's thread. To get into the team spirit, check on ideas of your fellow designers and leave comments, feedback and suggestions for each other.

NOTE: I'd suggest we try out Whimsical for this project and see how it goes. It's been very popular with our students in the past. If you like it, great - you've got another tool in your box! If not, explore something else - there are other options out there :)

Andy Clarke

Typography Can Be As Exciting As Illustration And Photography

Andy is a a designer, speaker, and writer - and one of my favourite web people :) He's a designer who codes and his talks and articles are always full of inspiration. He is currently writing a series—which I would highly recommend—of design-focused articles on Smashing Magazine.

typelablogo
U&lc (Uppercase and lowercase) magazine by Herb Lubalin.

Expressive typography needn’t need fancy fonts.

This particular article is the eighth issue and Andy introduces designs by American graphic designer and typographer Herb Lubalin which lead him to explore some very engaging approaches to designing with type. You'll find lovely example of designing with type as well as some CSS code insights.

Tim Brown describes himself as "a designer, author, speaker, and maker of tools" (quoted from his site). He is Head of Typography at Adobe, has written a book on Flexible Typesetting and has created a few tools which can help you learn more about setting type for the web.

While there is much to read about type design and setting, it can be difficult to envisage how this might look in a browser on whichever device or screensize. It is easiest and most efficient to experiment with this using your own content and CSS ~ but while you are learning, this is easier said than done.

Please do watch the video and take on board Tim's advice. Don't be shy to experiment and play, break things to see what's wrong and then work towards finding the right approach.

screenshot

Go ahead, have a look and try it for yourself :)
Typesetting demo

book cover

Tim has published a nice little handbook for combining typefaces - now available as free PDF download. More and more resources change or go offline and so—while the link is still on the now old Typekit blogo—I've downloaded it and added it to our resources here, just in case :)

Web Typography

Richard Rutter is a designer, author and speaker and one of the co-founders of Clearleft - and yep, you guessed it, one of our people of the web.

Around 2005 (i.e. before web fonts arrived), Richard published a site aiming to translate the principles covered in the famous typographer's "bible", Robert Bringhurst’s book The Elements of Typographic Style, to web typography. This site is still online, now open sourced and open to contributions on GitHub, too. In 2017, Richard wrote the book on web typography which I'd very highly recommend.

book cover

view slides

Richard is a bit of a font geek - and this talk certainly reflects this, you will learn a lot about the intricacies of setting type for onscreen display.

learn by playing ;)

Created by Mark MacKay, this is a beautiful way to train your eye. Even if you've never before considered the details of typesetting, or kerning in this case, this little game will will one way to focus on the spacing of letters.
Play Kerntype

more type games - for later!

Play Kerntype

kerntype game screenshot
Kerntype a kerning game

typography project

type icon

This is your first main (+assessed) project - for which you are to create small website to present your chosen text. Check project brief for details and requirements. Proposal to be submitted by 2/11/22.

core criteria

  1. minimum of 3 pages + site navigation
  2. design specs: focus on type, colour and layout only
  3. NO images permitted: not as background or decorative nor content!

DEADLINE: 09/12/2022

reminders

  • No images whatsoever!
    Your submission can only include images for the project/design planning - the website folder itself is not to include any images, nor link to any online visuals either.
  • No icon fonts!
    The same applies for icon fonts (which we will talk about soon for other aspects). In the past, some people have tried to out-smart the brief requirements by using font sets which include images - this is not acceptable! ;)
    You can use typographical symbols, such as elaborate ampersands, or reference marks if fitting. Any other visual representations are to be avoided.
  • Choice of text:
    No favourite song lyrics or poems as your selected text. This is quite a deliberate restriction as it is incredibly difficult to create a layout for poems and lyrics for an audience which might not be familiar with the rhythm of reading such pieces of literature require. Our focus is on a nice reading experience for standard text - this might be from a book you like, an article you read - or even a piece of writing you're recently read for your studies.
good content for the web

We've been talking a lot about the 'content out' approach, this article aims to help you consider how to produce good content. Before you start on any of your projects' design - begin with your content, write or edit your text first and then move onto the design and development work.
Read the article: Good content for the web

Content precedes design.
Design in the absence of content is not design, it’s decoration.

Jeffrey Zeldman