Working with words

Typography

Week 5

This week we put down the letters and glyphs of the last few weeks, took a step back, and started to consider whole words. This was one of those lessons, where you learn proper stuff, like that leading used to be the space between lines, so you’d have 24/12 for example. But now it is the measurement from baseline to baseline, so the same layout would now be 24/36.

The space between words (or ‘wordspacing’ – shocking) should be the width of a lower case ‘i’ of the same font you are using;

Checkioutithisiperfectlyispacedipullquote

Also ‘tracking’ which is the inter-character spacing on a chunk of content – a word, sentence, paragraph etc. I always though this was kerning – I didn’t realise kerning only refers to the adjustment of space between individual letters. Larger tracking should always be applied when using all caps, or if you are reversing light copy out on a dark background, including back-lit signs.

We played a bit of hand-kerning, with some tricky combinations. The rule is, find the trickiest pair of letter to sit together, sort them out and then take that spacing as your lead for the rest.

IMG_4201 copy

These were my attempts… the feedback was that the W is too far away and the S too close,  but not too bad on the whole apparently. Interesting looking at the letters so closely, and fun to stick them down with glue… no second chances! Or deleting and starting over.

Obviously the Kerning Game was mentioned. But also mentioned was a critique of the game by Paul Shaw, which I haven’t read yet but will.

Rendering, Hinting and Aliasing

Typography
Week 4

This week was about selecting a typeface that suits your needs. As well as picking the right face for your content/paper/message, we touched on picking a typeface for a digital context. Useful info about licensing etc, we also learnt about the process of rendering, and the use of hinting and aliasing in web fonts.

I hadn’t realised that OpenType fonts actually hold more data in the font file than postscript and truetype. And apart from the sales pitch at the end there is a nice little animation here. And I guess that’s why it’s often larger than other font file types.

Rendering
Having learnt the basics of how type is rendered on a screen, we had a go and colouring the pixels by hand. A piece of tracing paper with a 2cm grid – the ‘pixels’ – overlaying a letter. If the centre of a square overlays the letter it gets coloured in, and so you end up with an aliased, un-hinted glyph. The beginning of rendering a typeface.

IMG_4139 copy

Hinting is more about the even width of lines in a glyph – certain strokes are matched with others and will render at the same width. Hinting data is stored in the font file.

Readability
I was very interested to learn about what makes a typeface readable, or not. Everything from the x-height (bigger is more legible) to the heights of the ascenders and capitals (the more difference the better… within reason) have an effect on the clarity. For example, with a typeface with too much conformity, eg Helvetica, the eye first simply sees a rectangle and has to work harder to identify letters.

Right typeface for the right context.
As well as choosing a typeface because you like it, or it has the right ‘mood’, it’s necessary to think about the functionality. If you are styling a headline, ensure that the face works well at a large size – or use a typeface designed specifically for this person – a display/titling font, for example Big Caslon. There are faces that work well for both body copy and headers, eg Spiekermann’s Meta and JT Enigma.

We talked a lot about pairing fonts – successful when harmony is found in the contrast.

IMG_4133 copy

The variations in shapes, curves, geometry and contrast within the glyphs need to be considered when using multiple typefaces.

References
‘So you need a typeface’
‘Meet your type’ – Font Shop
Lost font
DS Type
Type-O-Tones
Our type

Understanding the Design of Understanding

Conference
24th January, London

When I first read about the Design of Understanding, I wasn’t sure what to expect – the title is pretty general, and there wasn’t much information about the speakers‘ topics. But some interesting people that I follow were going, and it sounded like it was worth taking a chance on. And I thought I’d make some notes about the day for others thinking about going next year… if there is one, which there should be.

The talks were very mixed in style and substance, some speakers deliberately staying away from talking about digital, or their day jobs. It was a pretty chocka schedule – 11 speakers, each having about 20 mins, with a couple of questions here and there. I always find it hard to pick a favourite – I think I got things from all the talks – even the ones I didn’t enjoy that much.

A definite highlight for me was Durrell Bishop’s Marble Answering Machine – and essential watch for anyone that has anything to do with interaction design/UX/anything that actual people actually use. As well as the lovely video, he had great hand-drawn slides, always a bonus.

“Designers are good when content makes sense, but crap when it has no form”

He noted that designers need to find a vocabulary to explain the products they are designing – and that buttons with icons are often not the best way of doing this – even though that seems to be the default.

David Sheldon-Hicks spoke about a world that I had never considered before – user interface design for feature films. I suppose it’s obvious that somebody designs the UIs in films like Minority Report, Island and Prometheus, but I really had never thought about it. David is lead designer for Territory Studios, and mostly spoke about his work and experience of creating Prometheus, and working with Ridley. Using real data supplied by NASA, they are free to create UIs that have no dependencies on the current capability of technology – complete freedom!! Being a developer, I was dying to ask how they select a language for the lines of code that is so often displayed onboard spaceships, in sci-fi films. David’s term was ‘dummy code’ and from the sounds of it, so little thought goes into to what the code actually does (if anything) it’s the programmers that spend the time looking for that meaning that the joke is on. Still, it’s funny to see jQuery ‘launching rockets’.

Andy Kirk was talking about visualising data, and the service that visual.ly is providing by creating a space for the popular infographics that often don’t follow best practices, and so

‘all the junk is in one place’

But offered a list of tools that allow anyone to create visualised data, hopefully in a more accurate and sensible way – definitely one for the ‘to try’ list.

Jo Roach told the story of Makie Labs, and the challenges they have met and overcome in the development of the product – dolls that don’t follow the trend of super tall, skinny, un-jointed dolls that exacerbate stereotypes like ‘girls like pink’. The 3D printed dolls are customisable and can therefore be a 3D avatar. Jo made a really valid point that I hadn’t consciously thought about before, that Barbie dolls and similar never had moveable limbs, and couldn’t stand up as their feet were designed to wear high heels. And yet Action Man was ‘posable’ and so could do all kinds of things, I think this explains why I always enjoyed playing with my brothers’ action men more than the boring, static dolls aimed at girls. Also cool to see a business model based around 3D printing.

Matt Sheret, currently of GDS, gave a run down of the state of comics, and the challenges they face – similar to that of general digital publishing – in that they now need to be responsive, as they are consumed on a wide variety of platforms. And warned that “We all need to build our own digital attic” as content on the web won’t be there forever – using Myspace as an example. His own write up here.

Nic Newman on the future of news. It’s mobile and social.

Andrew Webb gave a very entertaining talk of the current foodie scene in London. The abundance of burger places and self proclaimed ‘foodies’, as well as the state of cookery books. Apparently we don’t cook recipes that are not accompanied by a lovely picture, and only ever cook 10% of the recipes in a book.

Simon Esterson opened with explaining the difference between magazines and daily newspapers – magazines are much more design based. A more considered format that can rely less on grid and conformity as there is time to think the design through. I’d hoped to hear more about Simon’s thoughts on digital publishing and how he thinks it will evolve, he didn’t give much away, but he did mention something about Adobe DPS being ‘over’.

Tony Quilan spun us a tail about storytelling, and how to baffle by using abstracts and loose faith by over-engineering the company story/history/policy. Don’t write your company ethos on the wall, it means it’s already broken.

I enjoyed Will Hudson’s (founder of It’s Nice That) talk, highlighting some advice for digital projects;
– prototype quickly
– think “outside the box”
– be consistent in your communication with clients/customers/readers

The day was rounded off by a Q&A between Russell Davies and event organiser Max Gadney. Discussion focussed on how to actually “get things done”, with one company’s solution being hire 10% more ‘getting things done’ people.

Bit of history, bit of writing

Typography: Week One

I’m very excited to be studying typography. I feel like I’ve picked up quite a lot from working with print and graphic designers, but to be able to concentrate on it and try things out for myself is going to be great.

Th first class was an introduction. What is typography, what is not typography and a bit of the history. Like, that Gutenberg didn’t actually invent movable type, but he was the first to do it in the western world. Homework was to watch a good documentary – Stephen Fry’s ‘The Machine That Made Us’. Lovely story about making a similar machine to Gutenberg’s.

An introduction to uncials, minuscules and gothic letters followed. Concerntrating on how to write the letters, using the angle of the ‘pen’ – two pencils taped together, with the points level. The idea being that we experience what it was like to draw the outlines of some of the letters, that in the old days would have then been carved out in stone.

w1

Creating the different shapes by hand was lovely, and it provided context for how the uppercase and lowercase letters we know today evolved from Roman characters like those used on Trajan’s Column.

And then the fun part! Using a piece of balsa wood, and watered down ink, we painted the letter shapes we had just learnt on a larger scale. Using multiple strokes to create the curves and lines, and overlaying the glyphs created a colourful, layered ink mass of letter forms that stretched down the table.

IMG_3984

Looking closely at the glyphs and figuring out how to draw them. Forcing us to look at letters as shapes rather than the meaning of the letter. It felt like a worthwhile exercise. Like the beginning of an adventure, when you know you need to journey through places you already know, before finding new and exciting things to see.

It’s been a while…

Yeah, so I think I did quite a classic thing of getting a job, being busy and stopping writing things. But I have been thinking about it more and more, so here goes again.

Over the last couple of years I have been working with creative directors/art directors/print designers/digital designers on their hybrid publishing apps. Explaining the process, requirements and restrictions and helping them realise their publication in a digital format.

The HTML content we create is fully responsive, and generally fully templated to allow integration with a CMS. As you can imagine, this creates a whole load of issues, when working with print designers that are used to a fixed format – no orientation change, no text resize, no million Android devices. It’s a steep learning curve.

I heard an art director ask a great question recently (not to me, thankfully);

“Where is the fun in web typography?”

Typography is such a massive part of editorial design that I think it’s almost the hardest thing to come to terms with, in digital. Yes we have webfonts now, and can control the line-height and letter-spacing etc, but what we can do looks like nothing when compared with InDesign. Which is what print designers are used to.

When working on the digital version of UK Grazia, we used a Google Doc for them to ask questions/make feature requests/raise bugs about the CMS. Thinking this was the easier option than introducing and supporting their team on our formal PM tool, it actually ended up with them requesting “the rich text edit functionality of Google Docs” in their CMS editor. It came from a desire to recreate what they had done in InDesign, but for the digital version. Which is kind of fair enough really, just not completely possible yet.

So back to the question about typographic fun. I reckon it is possible to be playful with type on the web, but in my world it needs to be responsive and template-able, which is where the difficulty comes in. But I like a challenge. I’m taking a primarily print based Typography course at Central St Martins at the moment, which I will be using as a starting point for experimenting with web type. I’ll take the excersizes we do in the class, and see how a digital version would work.

I’m not exactly sure what the classes will entail, or what the focus of each digital version will be, but it’ll be fun. And I guess the overarching aim is to find the fun in web typography.

I wrote my first JavaScript!! (and got a job…)

Well, well, well. What a three weeks I’ve had. Went on a Web London boat cruise, met some nice people, tweeted one of them and now, 22 days later, I have finished my first web project for The Kaldor Group and am getting stuck into the next.

A fluke meeting and perfect timing have landed me in an amazing position. Part intern, part tester, part developer and part designer, I have the opportunity to be involved in a variety of interesting work, learning and contributing, with the benefit of clever colleagues on hand for when I run into difficulty.

The project I have just finished is a Facebook app, raising money for the famine in East Africa, through an innovative calculator designed by The Social Practice. The project, run by 50/50, is based around the horrible truth that a child dies every 6 minutes in East Africa, and so our handy calculator works out how much you earn in 6 minutes, and you decide how many lots of 6 minutes you would like to donate. A great cause, and a chance to work out how much your tea/fag/Facebook break is costing your boss.

I really enjoyed the task of being given a design and converting it into functional mark up – a challenge my coding has not previously faced. With a few helping hands and a bunch of JavaScript (including the first ever line I wrote and it works and everything!!) the app went live yesterday and at point of writing has raised £326.73.

Find out how much 6 minutes is worth to you and DONATE HERE!

I faced my first real IE issues, a web development rite of passage I suppose, but resolved them to a reasonable standard.

And so now I’m on to my next project… a little more design, a little more intimidating and inevitably a little more exciting.

My first two weeks at Kaldor have flown by, more to learn everyday – CSS, Facebook development, a little JavaScript and the importance of not keeping a Bluetooth keyboard in your drawer. The folks are real nice, and willing to share their precious wisdom with me. What more could I want?

dConstruct 2011

Well, last week I attended my second web design conference, and this week I hope to see my second site go live. Exciting times!

The conference, dConstruct by Clearleft in Brighton, involved a series of talks considering the connections between the physical world and digital design.

I think my favourite talk of the day was Craig Mod talking about the Future Book. I got swept up, up and away in the fantastical story-metaphor about the 5km long book, and although I couldn’t tell you exactly what, I definitely learnt something. And let’s be honest, every talk is improved by the inclusion of an animated information nipple.

The day started with designer-thinker Don Norman – the author of “Design for Everyday Things”, one of the books on my reading list that I actually have got round to reading. Norman explained the way PC  screen scrolling systems were originally designed (that you move the window rather than the contents) and how the widespread introduction of touchscreen has questioned this early decision (you move the contents with gestures), to the extent of Apple gunning for the alternative scrolling option in Lion. Norman also discussed the idea that we should design for memory rather than actual experience, using Disneyland as an example – it’s not the experience of crowds and queues that you remember, but the magical, memorable, moments.

Continuing on the subject of memory, Norman outlined the varying interface formats that PCs have been through – from the initial command line, to graphical interface and now we are in the era of gestures. He remarked on the differences these variables mean for the user – from needing to know the commands to input, to it being the norm to rely on graphics with no prior knowledge. And so we find ourselves in the world of gestures, which Norman argued forces us back to a situation where we must memorise how to effectively use the system. And talking of systems, one of Don’s most interesting points was how important it is to design in systems rather than individual products/services, using the iPod+iTunes and the Kindle+Amazon as his examples. Creating usability in buying, uploading and updating the products and therefore effective connections has guaranteed them success. This point was reflected in Kelly Goto’s ‘Mapping Emotion to Experience’, as she described the importance of considering the space in between things. Kelly went on to point out that when we feel attached to our devices and possessions, it is in fact the connections that they allow us to make with one another that we are attached to.

I enjoyed Frank Chimero’s talk, mainly I think because I have had the same thoughts and not yet found a solution. Talking to a fellow attendee afterwards, who consistently tags and archives his bookmarks, made me think I’m just lazy, but he then informed me that he was a archivist for 5 years. I think it’s a personality thing, and some of us just need more help than others.

My main conclusion of the day was that essentially it’s about connections. We need to design for the space in-between as well as the apps/sites/services/products themselves. In the same way that the great type-designers consider the white space around the glyphs they design, as much as the do the inked area. It is because the white space is considered that the type faces sit so well – they are fully supported by their surroundings.

Things to research further:

  • 3D Printers
  • Kansei Engineering
  • Tom Armitage
  • Marshall McLuhan

Learner.

So I made my first website (clarelisbeth.com) and seeing it go live was as exciting as I thought it was going to be!

Learning about the elements that make up web design is so rewarding because the progress is so obvious. Going from not knowing what HTML stands for to being able to code an entire website that functions and looks alright in a couple of months is really exciting. Not to say that web design is easy – just that with a basic level of knowledge, a relatively large amount can be achieved.

I have found learning how to learn about web design really interesting. Finding the great sites that I can spend hours reading and also those that I close after not having instantly found the information I need. I also discovered, maybe not surprisingly, that I learn about new topics most effectively through video. A video with clear instructions and live examples allows me to understand a new topic within minutes, whereas an article about can take a while to get through, and not be as informative. Then, when I have a base of understanding I go on to read various other sources of information.

And talking of learning I just read an interesting post on the UX of Learning on A List Apart:

http://www.alistapart.com/articles/the-ux-of-learning/

Tyler Tate considers how we learn and how that learning process should impact our designs. An apt article to read after a conversation I had yesterday about a website I’m designing for a puppeteer who’s not a huge web-user. I feel like the website needs to be very owner-friendly as well as user-friendly.

So now I’m at a point in my learning where my lists of things to read and watch are literally endless. It’s clear that the learning process is an unending where web design is concerned, so I guess I need to get used to it, huh?

Some of the things I like to read:

http://www.alistapart.com/

http://boxesandarrows.com/

http://mashable.com/

http://meyerweb.com/

http://scrunchup.com/

http://www.smashingmagazine.com/

http://thinkvitamin.com/

You gotta love progress.

It’s been an exciting week in my little web design world. I’ve built my first functional website that I think is also quite beautiful (but not yet live), encountered some of the IE issues that I’ve heard so much about, started learning PHP, got stuck in to ‘Hardboiled Web Design’ and finished ‘Don’t Make Me Think!’ from my reading list.

I have been making regular use of my favourite source of web information, that has also provided a structure for my studies – Think Vitamin (.com). Concise, clear and super-understandable videos, divided into logical chapters that have evolved from being a reference point when I had a question, to a full blown syllabus. It is with these videos that I hope to gain a solid grounding in all things code, to then build on by designing and constructing sites. The more I learn about the tools and techniques, the more excited I get about the possibilities, and considering the relatively small amount I currently know, they seem pretty endless.

So alongside the reading, video watching and note-taking, is the most important part: giving it a go.

I have continued with the cake business site discussed previously. Having been relatively happy with the wireframing, and with a whole bunch of actual content to use I started building the site. Using HTML and CSS I eventually got something that resembled a webpage…

Cake Company Webpage

It’s a start.

I also built myself a little portfolio site which will hopefully be up in a few days. But now it’s time to learn about browser testing, which I’ve heard can be testing. But I guess it’s really rather important.

So with a couple of sites on the go, and another couple in the pipeline, it looks like I may have the beginnings of an actual web design portfolio. Yay! Also I booked a ticket to dConstruct Conference in September, which looks like it’ll be another day full of new design aspirations and plenty of inspiration.

See you there?

Why Wireframe? Well…

A while ago my brother advised me to give wireframing a go, he suggested Mockingbird as a free and simple tool and I was keen to try it out. Many layout ideas and the realisation that there actually are endless possibilities later, I decided I needed more information.

A Smashing Magazine article on this subject (http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/) seemed a good place to start and with an abundance of links providing varied advice, it resembled a wireframing gold-mine.

The article is almost two years old, but I’m guessing that the basics remain relevant, and as always when reading articles and blogs, the links lead you on an unplanned path in to a world of information. At one point I found myself on Jason Santa Maria’s old site reading about his Grey Box method (http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php) which has some interesting comments both in the article and from readers. My favourite article however explained one company’s use of paper wireframing – http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php. I guess this is unsurprising considering my passion for paper cutting (see previous blog posts).

From what I have read the wireframing stage serves to ensure no time is wasted on visual designs that are then scrapped, and to allow the client/designer to ensure that the UX is appropriate and optimised. So theoretically no time is wasted – sounds good to me!

My design experiments are carried out on a new site for my Mother’s cake business, and as she has never been a client before and I have never designed a website before, it should be a pretty interesting process. The site will have two main purposes, to allow potential customers to view my Ma’s cakes and to find her contact details. I began by paper wireframing the home page.

Paper Wireframes

I really found myself thinking through how people will use the site and although I hadn’t labelled the buttons and images on the paper I actually have a clear idea of which is which. And once I had paper wireframed and thought through the designs a little more I had a go at wireframing in Photoshop.

Photoshop Wireframe

Now I guess it’s time to see what the client thinks…