d

Reversed Logotype

This image shows a particular optical illusion that confronts us every day. Notice the difference between the black text on a white background and the reverse. With reversed type — light text on a darker background — the strokes seem bolder.

Black text on white is very familiar, so we can be forgiven for thinking it correctly proportioned. For familiarity’s sake we can say it is, but there are two effects happening here: The white background bleeds over the black, making the strokes seem thinner. With reversed type the opposite is true: The white strokes bleed over the black, making it seem bolder.

Punched, backlit letters on a sign outside the Nu Hotel, Brooklyn.

One of the most obvious examples of this is with signs where the letters are punched into the surround then lit from inside. In his article, Designing the ultimate wayfinding typeface, Ralph Herrmann used his own Legibility Text Tool to simulate this effect for road and navigational signs.

One might say that characters are only correctly proportioned with low-contrast. Although objective reality hails that as true, it isn’t a good reason to always set type with low contrast. Type designers have invariably designed around optical illusions and the constraints of different media for us. Low-contrast text can also create legibility and accessibility problems. Fortunately, kind folks like Gez Lemon have provided us with simple tools to check.

As fascinating as optical illusions are —  the disturbing, impossible art of Escher comes to mind — we can design around reversed body type. On the Web, increasing tracking and leading are as simple as increasing the mis-named letter-spacing and line-height in CSS. However, decreasing font weight is a thornier problem. Yes, we will be able to use @font-face to select a variant with a lighter weight, but the core web fonts offer us no options, and there are only a few limited choices with system fonts like Helvetica Neue.

Reversing a logotype

For logotype there are plenty of options, but it makes me slightly uncomfortable to consider switching to a lighter font for reversed type logos. The typeface itself is not the logotype; the variant is, so switching font could be tricky. Ironically, I’d have to be very sure that that was no perceivable difference using a lighter weight font. Also, with display faces, there’s often not a lighter weight available — a problem I came across designing the Analog logo.

The original Analog logo seen here is an adapted version of Fenway Park by Jason Walcott (Jukebox Type).

The logotype worked well when testing it in black on white. However, I wanted a reversed version, too. That’s when I noticed the impact of the optical illusion:

(Reversed without any adjustment.)

It looked bloated! Objective reality be damned; it simply wouldn’t do. After a few minutes contemplating the carnage of adjusting every control point by hand, I remembered something; eureka!

(Reversed then punched.)

Punching the paths through a background image in Fireworks CS4 removed the illusion. (Select both the path and the background then using Modify > Combine Paths > Punch.) Is this a bug? I don’t know, but if it is, it’s a useful one for a change!

Modify > Combine Paths > Punch in Fireworks CS4.

N.B. I confess I haven’t tested this in any other Adobe products, but perhaps you will be so bold? (’scuse the pun. :)

Matthew Kump mentions an Illustrator alternative in the comments.

I grinned. I was happy. All was well with the world again. Lovely! Now I could go right ahead and think about colour and I wouldn’t be far from done. This is how it emerged:

A final note on logotype design & illusions

Before we even got to actual type for the Analog logo, we first had to distill what it would convey. In our case, Alan took us through a process to define the brand values and vision. What emerged were keywords and concepts that fed into the final design. The choice of type, colour, and setting were children of that process. Style is the offspring of meaning.

I always work in greyscale for the first iterations of a new logo for a few simple reasons:

  1. The form has to work independently of colour — think printing in greyscale or having the logo viewed by people with a colour-impairment.
  2. It allows for quick testing of various sizes — small, high contrast versions will emphasise rendering and legibility issues at screen resolutions, especially along curves.
  3. I like black and white. :)

I realise that in this day and age the vast majority of logos need to perform primarily on the Web. However, call me old-fashioned, but I still think that they should work in black and white, too.

Brands and display faces emerged with consumer culture during the 19th Century. Logotypes were displayed prominently in high streets, advertising hoardings, and on sign boards. In many instances the message would be in black and white. They were designed to be legible from a distance, at a glance, and to be instantly recognisable. Even with colour, contrast was important.

The same is true for the Web today; only the context has changed, and the popularity of logomarks and icons. We should always test any logo at low resolutions and sizes, and the brand must still have good contrast (regardless of WCAG 2.0) to be optimal. A combination of colour and form works wonders, but in a world of a million colours where only a handful are named in common parlance, having the right form still seems a smarter choice than trying to own a palette or colour.

A final word

This article was prompted by a happy accident followed by a bit of reading. There are many references to optical illusions in design and typography books. The example image at the start of this article was inspired by one found in the excellent Stop Stealing Sheep and Find Out How Type Works by Erik Spiekermann and E.M. Ginger. There’s also plenty of online material about optical or visual illusions you can dive into. There’s also more on . Oh, and don’t forget the work of M. C. Escher!

Human eyes are amazing. In two sets of watery bags we get a wide-angle lens with incredibly sharp focus and ridiculous depth of field. Apparently our brain is even clever enough to compensate for the lag in the signal getting from retina to cortex. I know next to nothing about ocular science. Spending a morning reading and thinking about optical illusions, and contemplating my own view here in the garden office is pretty awe-inspiring. If only my photographs were as good as my eyes, illusions or no.




d

Web Fonts, Dingbats, Icons, and Unicode

Yesterday, Cameron Koczon shared a link to the dingbat font, Pictos, by the talented, Drew Wilson. Cameron predicted that dingbats will soon be everywhere. Symbol fonts, yes, I thought. Dingbats? No, thanks. Jason Santa Maria replied:

@FictiveCameron I hope not, dingbat fonts sort of spit in the face of accessibility and semantics at the moment. We need better options.

Jason rightly pointed out the accessibility and semantic problems with dingbats. By mapping icons to letters or numbers in the character map, they are represented on the page by that icon. That’s what Pictos does. For example, by typing an ‘a’ on your keyboard, and setting Pictos as the font-face for that letter, the Pictos anchor icon is displayed.

Other folks suggested SVG and JS might be better, and other more novel workarounds to hide content from assistive technology like screen readers. All interesting, but either not workable in my view, or just a bit awkward.

Ralf Herrmann has an elegant CSS example that works well in Safari.

Falling down with CSS text-replacement

A CSS solution in an article from Pictos creator, Drew Wilson, relies on the fact that most of his icons are mapped to a character that forms part of the common name for that symbol. The article uses the delete icon as an example which is mapped to ‘d’. Using :before and :after pseudo-elements, Drew suggests you can kind-of wrangle the markup into something sort-of semantic. However, it starts to fall down fast. For example, a check mark (tick) is mapped to ‘3’. There’s nothing semantic about that. Clever replacement techniques just hide the evidence. It’s a hack. There’s nothing wrong with a hack here and there (as box model veterans well know) but the ends have to justify the means. The end of this story is not good as a VoiceOver test by Scott at Filament Group shows. In fairness to Drew Wilson, though, he goes on to say if in doubt, do it the old way, using his font to create a background image and deploy with a negative text-indent.

I agreed with Jason, and mentioned a half-formed idea:

@jasonsantamaria that’s exactly what I was thinking. Proper unicode mapping if possible, perhaps?

The conversation continued, and thanks to Jason, helped me refine the idea into this post.

Jon Hicks flagged a common problem for some Windows users where certain Unicode characters are displayed as ‘missing character’ glyphs depending on what character it is. I think most of the problems with dingbats or missing Unicode characters can be solved with web fonts and Unicode.

Rising with Unicode and web fonts

I’d love to be able to use custom icons via optimised web fonts. I want to do so accessibly and semantically, and have optimised font files. This is how it could be done:

  1. Map the icons in the font to the existing Unicode code points for those symbols wherever possible.

    Unicode code points already exist for many common symbols. Fonts could be tiny, fast, stand-alone symbol fonts. Existing typefaces could also be extended to contain symbols that match the style of individual widths, variants, slopes, and weights. Imagine a set of Clarendon or Gotham symbols for a moment. Wouldn’t that be a joy to behold?

    There may be a possibility that private code points could be used if a code-point does not exist for a symbol we need. Type designers, iconographers, and foundries might agree a common set of extended symbols. Alternatively, they could be proposed for inclusion in Unicode.

  2. Include the font with font-face.

    This assumes ubiquitous support (as any use of dingbats does) — we’re very nearly there. WOFF is coming to Safari and with a bit more campaigning we may even see WOFF on iPad soon.

  3. In HTML, reference the Unicode code points in UTF-8 using numeric character references.

    Unicode characters have corresponding numerical references. Named entities may not be rendered by XML parsers. Sean Coates reminded me that in many Cocoa apps in OS X the character map is accessible via a simple CMD+ALT+t shortcut. Ralf Herrmann mentioned that unicode characters ‘…have “speaking” descriptions (like Leftwards Arrow) and fall back nicely to system fonts.’

Limitations

  1. Accessibility: Limited Unicode / entity support in assistive devices.

    My friend and colleague, Jon Gibbins’s old tests in JAWS 7 show some of the inconsistencies. It seems some characters are read out, some ignored completely, and some read as a question mark. Not great, but perhaps Jon will post more about this in the future.

    Elizabeth Pyatt at Penn State university did some dingbat tests in screen readers. For real Unicode symbols, there are pronunciation files that increase the character repertoire of screen readers, like this file for phonetic characters. Symbols would benefit from one.

  2. Web fonts: font-face not supported.

    If font-face is not supported on certain devices like mobile phones, falling back to system fonts is problematic. Unicode symbols may not be present in any system fonts. If they are, for many designers, they will almost certainly be stylistically suboptimal. It is possible to detect font-face using the Paul Irish technique. Perhaps there could be a way to swap Unicode for images if font-face is not present.

Now, next, and a caveat

I can’t recommend using dingbats like Pictos, but the icons sure are useful as images. Beautifully crafted icon sets as carefully crafted fonts could be very useful for rapidly creating image icons for different resolution devices like the iPhone 4, and iPad.

Perhaps we could try and formulate a standard set of commonly used icons using the Unicode symbols range as a starting point. I’ve struggled to find a better visual list of the existing symbols than this Unicode symbol chart from Johannes Knabe.

Icons in fonts as Unicode symbols needs further testing in assistive devices and using font-face.

Last, but not least, I feel a bit cheeky making these suggestions. A little knowledge is a dangerous thing. Combine it with a bit of imagination, and it can be lethal. I have a limited knowledge about how fonts are created, and about Unicode. The real work would be done by others with deeper knowledge than I. I’d be fascinated to hear from Unicode, accessibility, or font experts to see if this is possible. I hope so. It feels to me like a much more elegant and sustainable solution for scalable icons than dingbat fonts.

For more on Unicode, read this long, but excellent, article recommended by my colleague, Andrei, the architect of Unicode and internationalization support in PHP 6: The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets.




d

Ides of March

My friend and colleague, Chris, has shared a spiffing idea, the Ideas of March. He suggests: ‘If we all blog a little more than we normally would this month, maybe we can be reminded of all of the reasons blogs are great.’

But wait, this post is called the Ides of March? Right. As soon as I read what Chris had posted, a twist on the phrase echoed in my memory. The Ides of March is a Roman festival dedicated to the god of war, Mars. Some say it’s on the 15th of March (today). I can’t find a reference that this is accurate relative to the Julian or current Gregorian calendars, so I will use the first full moon instead. This year it will be on Saturday, 19th of March, in four days time. Wikipedia has more:

The Ides of March was a festive day dedicated to the god Mars and a military parade was usually held. In modern times, the term Ides of March is best known as the date that Julius Caesar was killed in 44 B.C.

Dramatic stuff. Appropriate in these times, too. Mars may have been the god of war, based on the anarchistic Greek god, Ares, but he represented the pursuit of peace through military strength. A thoroghly debunked method if you ask me, but a pretty neat rationalisation still used today. The military pursues Gaddafi’s version of peace in Libya. Mubarak tried it, and failed, in Egypt. The Ben Ali regime collapsed under protests in Tunisia. Saleh is on his way in Yemen. Right now, Saudi soldiers are deployed in Bahrain to quell protestors fighting for democratic freedom.

Whatever you think about the current strife, one thing is true: Tyrants never last. I’ve been an advocate of Twitter, and its ambient intimacy for almost four years. In that time I’ve seen it buoyed by the innovations of its users. Smart folks using @replies, and retweets that became a part of the fabric, coded into links and threads (sort-of). Other smart people building clients with new ways of looking at the graph. I’ve seen Twitter take the good ideas and do good things with them. Yet now, Twitter isn’t just the platform any longer, it wants to be the clients too. From URL shortening and tracking, to changes in who can make clients, and how they work. People don’t like it. The same kind of smart people who helped it be successful. The same kind of people who permit benevolent dictators to exist until they become tyrants.

I’m still a fan of the idea of short messages. They are neat, by their nature, but lest Twitter forgets, they also exist elsewhere, too. They’re a snack between meals. Signposts to feasts. The real banquets are blog posts, though. I’ve learnt more from them in the last ten years than I ever will from 140 characters. That’s why blogs are something to be treasured. Blogs and RSS may be dead according to some, but I like that I disagree. After all, even with this rambling post, you’ve probably learnt something, just like I have writing it. Thanks for the prompt, Chris.

Don’t procrastinate, fire up your editor and share your own ideas of March. Drew, Lorna, and Sean already have. Go on, you know it’s been far too long!




d

Web Design as Narrative Architecture

Stories are everywhere. When they don’t exist we make up the narrative — we join the dots. We make cognitive leaps and fill in the bits of a story that are implied or missing. The same goes for websites. We make quick judgements based on a glimpse. Then we delve deeper. The narrative unfolds, or we create one as we browse.

Mark Bernstein penned Beyond Usability and Design: The Narrative Web for A List Apart in 2001. He wrote, ‘the reader’s journey through our site is a narrative experience’. I agreed wholeheartedly: Websites are narrative spaces where stories can be enacted, or emerge.

Henry Jenkins, Director of Comparative Media Studies, and Professor of Literature at MIT, wrote Game Design as Narrative Architecture. He suggested we think of game designers, ‘less as storytellers than as narrative architects’. I agree, and I think web designers are narrative architects, too. (Along with all the multitude of other roles we assume.) Much of what Henry Jenkins wrote applies to modern web design. In particular, he describes two kinds of narratives in game design that are relevant to us:

Enacted narratives are those where:

[…] the story itself may be structured around the character’s movement through space and the features of the environment may retard or accelerate that plot trajectory.

Sites like Amazon, New Adventures, or your portfolio are enacted narrative spaces: Shops or service brochures that want the audience to move through the site towards a specific set of actions like buying something or initiating contact.

Emergent narratives are those where:

[…] spaces are designed to be rich with narrative potential, enabling the story-constructing activity of players.

Sites like Flickr, Twitter, or Dribbble are emergent narrative spaces: Web applications that encourage their audience use the tools at their disposal to tell their own story. The audience defines how they want to use the narrative space, often with surprising results.

We often build both kinds of narrative spaces. Right now, my friends and I at Analog are working on Mapalong, a new maps-based app that’s just launched into private beta. At its heart Mapalong is about telling our stories. It’s one big map with a set of tools to view the world, add places, share them, and see the places others share. The aim is to help people tell their stories. We want to use three ideas to help you do that: Space (recording places, and annotating them), data (importing stuff we create elsewhere), and time (plotting our journeys, and recording all the places, people, and memories along the way). We know that people will find novel uses for the tools in Mapalong. In fact, we want them to because it will help us refine and build better tools. We work in an agile way because that’s the only way to design an emerging narrative space. Without realising it we’ve become architects of a narrative space, and you probably are, too.

Many projects like shops or brochure sites have fixed costs and objectives. They want to guide the audience to a specific set of actions. The site needs to be an enacted narrative space. Ideally, designers would observe behaviour and iterate. Failing that, a healthy dose of empathy can serve. Every site seeks to teach, educate, or inform. So, a bit of knowledge about people’s learning styles can be useful. I once did a course in one to one and small group training with the Chartered Institute of Personnel and Development. It introduced me to Peter Honey and Alan Mumford’s model which describes four different learning styles that are useful for us to know. I paraphrase:

  1. Activists like learning as they go; getting stuck in and working it out. They enjoy the here and now, and are happy to be dominated by immediate experiences. They are open-minded, not sceptical, and this tends to make them enthusiastic about anything new.
  2. Reflectors like being guided with time to take it all in and perhaps return later. They like to stand back to ponder experiences and observe them from many different perspectives. They collect data, both first hand and from others, and prefer to think about it thoroughly before coming to a conclusion.
  3. Theorists to understand and make logical sense of things before they leap in. They think problems through in a vertical, step-by-step logical way. They assimilate disparate facts into coherent theories.
  4. Pragmatists like practical applications of ideas, experiments, and results. They like trying out ideas, theories and techniques to see if they work in practice. They positively search out new ideas and take the first opportunity to experiment with applications.

Usually people share two or more of these qualities. The weight of each can vary depending on the context. So how might learning styles manifest themselves in web browsing behaviour?

  • Activists like to explore, learn as they go, and wander the site working it out. They need good in-context navigation to keep exploring. For example, signposts to related information are optimal for activists. They can just keep going, and going, and exploring until sated.
  • Reflectors are patient and thoughtful. They like to ponder, read, reflect, then decide. Guided tours to orientate them in emergent sites can be a great help. Saving shopping baskets for later, and remembering sessions in enacted sites can also help them.
  • Theorists want logic. Documentation. An understanding of what the site is, and what they might get from it. Clear, detailed information helps a theorist, whatever the space they’re in.
  • Pragmatists get stuck in like activists, but evaluate quickly, and test their assumptions. They are quick, and can be helped by uncluttered concise information, and contextual, logical tools.

An understanding of interactive narrative types and a bit of knowledge about learning styles can be useful concepts for us to bear in mind. I also think they warrant inclusion as part of an articulate designer’s language of web design. If Henry Jenkins is right about games designers, I think he could also be right about web designers: we are narrative architects, designing spaces where stories are told.

The original version of this article first appeared as ‘Jack A Nory’ alongside other, infinitely more excellent articles, in the New Adventures paper of January 2011. It is reproduced with the kind permission of the irrepressible Simon Collison. For a short time, the paper is still available as a PDF!

—∞—




d

Design Festival, The Setup, and Upcoming Posts

Wow, this has been a busy period. I’m just back from the Ampersand web typography conference in Brighton, and having a catch-up day in Mild Bunch HQ. Just before that I’ve been working flat out. First on Mapalong which was a grass-roots sponsor of Ampersand, and is going great guns. Then on an article for The Manual which is being published soon, and on 8 Faces #3 which is in progress right now. Not to mention the new talk for Ampersand which left me scratching my head and wondering if I was making any sense at all. More on that in a subsequent post.

In the meantime two previous events deserve a mention. (This is me starting more of a journalistic blog. :)

First of all, an interview with Simon Pascal Klien, the typographer and designer who’s curating the Design Festival podcast at the moment. We talked about all things web typography. Pascal cheekily left in a bit of noise from me in the prelude, and that rant pretty much sets the tone for the rest of the conversation. Thanks for your time, Pascal! If anyone reading this would care to listen in, the podcast can be downloaded or played from here:

Secondly, Daniel Bogan of The Setup sent me a few questions about my own tools. My answers are pretty clipped because of time, but you may find it interesting to compare this designer’s setup with your own:

I should note that in the meantime I’ve started writing with Writer, and discovered the great joy of keeping a journal and notes with a Midori Traveler’s Notebook. The latter is part of an on-going search I’m having to find Tools for Life. More on that, too at some point. Here’s my current list of topics I want to write about shortly:

  • Ampersand, the aftermath
  • Marrying a FujiFilm X100
  • No-www
  • Tools for life
  • Paper versus pixels

There, I’ve written it!




d

Ampersand, the Aftermath

The first Ampersand web typography conference took place in Brighton last Friday. Ampersand was ace. I’m going to say that again with emphasis: Ampersand was ace! Like the Ready Brek kid from the 80s TV ads I’m glowing with good vibes.

Imagine you’d just met some of the musicians that created the soundtrack to your life. That’s pretty much how I feel.

Nerves and all…

Photo by Ben Mitchell.

For a long, long time I’ve gazed across at the typography community with something akin to awe at the work they do. I’ve lurked quietly on the ATypI mailing list, in the Typophile forum, and behind the glass dividing my eyes from the blogs, portfolios, and galleries.

I always had a sneaking suspicion the web and type design communities had much in common: Excellence born from actual client work; techniques and skills refined by practice, not in a lab or classroom; a willingness to share and disseminate, most clearly demonstrated at Typophile and through web designer’s own blogs. The people of both professions have a very diverse set of backgrounds from graphic design all the way through to engineering, to accidentally working in a print shop. We’ve been apprenticed to our work, and Ampersand was a celebration of what we’ve achieved so far and what’s yet to come.

Of course, web design is a new profession. Type design has a history that spans hundreds of years. Nevertheless, both professions are self-actualising. Few courses exist of any real merit. There is no qualifications authority. The work from both arenas succeeds or fails based on whether it works or not.

Ampersand was the first event of its kind. Folks from both communities came together around the mutal fascination, frustration, challenge and opportunity of web type.

Like Brooklyn Beta, the audience was as fantastic as the line up. I met folks like Yves Peters of the FontFeed, Mike Duggan of Microsoft Typography, Jason Smith, Phil Garnham, Fernando Mello, and Emanuela Conidi of Fontsmith, Veronica Burian of TypeTogether, Adam Twardoch of Fontlab and MyFonts, Nick Sherman of of Webtype, Mandy Brown of A Book Apart and Typekit, and many, many others. (Sorry for stopping there, but wow, it would be a huge list.)

Rich Rutter

Rich Rutter opened the day on behalf of Clearleft and Fontdeck at the Brighton Dome. Rich and I had talked about a web typography conference before. He just went out and did it. Hats off to him, and people like Sophie Barrett at Clearleft who helped make the day run so smoothly.

Others have written comprehensive, insightful summaries of the day and the talks. Much better than I could, sitting there on the day, rapt, taking no notes. What follows are a few snippets my memory threw out when prodded.

Vincent Connare

Who knew the original letterforms for Comic Sans were inspired by a copy of The Watchmen Vincent Connare had in his office? Or that Vincent, who also designed Trebuchet, considers himself an engineer rather than type designer, and is working at the moment on the Ubuntu fonts with colleagues at Dalton Maag.

Jason Santa Maria declared himself a type nerd, and gave a supremely detailed talk about selecting, setting, and understanding web type. Wonderful stuff.

Jason Santa Maria

Jonathan Hoefler talked in rapid, articulate, and precise terms about the work behind upcoming release of pretty-much all of H&FJ’s typefaces as web fonts. (Hooray!) He clearly and wonderfully explained how they took the idea behind their typefaces, and moved them through a design process to produce a final form for a specific purpose. In this case, the web, as a distinct and different environment from print.

Jonathan Hoefler

Photo by Sean Johnson.

I spoke between Jason and Jonathan. Gulp. After staying up until 4am the night before, anxiously working on slides, I was carried along by the privilege and joy of being there, hopefully without too much mumbling or squinting with bleary eyes.

After lunch, David Berlow continued the story of web fonts, taking us on a journey through his own trials and tribulations at Font Bureau when re-producing typefaces for the web crude media. His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides.

David Berlow

Photo by Jeremy Keith.

John Daggett of Mozilla, editor of the CSS3 Fonts Module, talked with great empathy for web designers about the amazing typographic advances we’re about to see in browsers.

Tim Brown of Typekit followed. Tim calmly and thoroughly advocated the extension of modular scales to all aspects of a web interface, taking values from the body type and building all elements with those values as the common denominator.

Finally, Mark Boulton wrapped up the day brilliantly, describing the designer’s role as the mitigator of entropy, reversing the natural trend for things to move from order to chaos, and a theme he’s exploring at the moment: designing from the content out.

Mark Boulton

The tone of the day was fun, thoughtful, articulate, and exacting. All the talks were a mix of anecdotal and observational humour, type nerdery, and most of all an overwhelming commitment to excellence in web typography. It was a journey in itself. Decades of experience from plate and press, screen, and web was being distilled into 45-minute presentations. I loved it.

As always, one of the most enjoyable bits for me was the hallway track. I talked to heaps of people both in the pre- and after-party, and in between the talks on the day itself. I heard stories, ideas, and opinions from print designers, web designers, type designers, font developers, and writers. We talked late into the night. We talked more the next day.

Now the talking has paused for a while, my thoughts are manifold. I can honestly say, I’ve never been so filled with positivity about where we are, and where we’re going. Web typography is here, it works, it’s better all the time, and one day web and type designers everywhere will wonder, perplexed, as they try to imagine what the web was like before.

Here’s to another Ampersand next year! I’m now going to see if Rich needs any encouragement to do it again. I’m guessing not, but if he does, I aim to provide it, vigorously. I hope I see you there!

Furthermore

Last but not least, did I mention that Rich Rutter, Mark Boulton, and I are writing a book? We are! More on that another time, but until then, follow @webtypography for intermittent updates.




d

We, Who Are Web Designers

In 2003, my wife Lowri and I went to a christening party. We were friends of the hosts but we knew almost no-one else there. Sitting next to me was a thirty-something woman and her husband, both dressed in the corporate ‘smart casual’ uniform: Jersey, knitwear, and ready-faded jeans for her, formal shoes and tucked-in formal shirt for him (plus the jeans of course; that’s the casual bit). Both appeared polite, neutral, and neat in every respect.

I smiled and said hello, and asked how they knew our hosts. The conversation stalled pretty quickly the way all conversations will when only one participant is engaged. I persevered, asked about their children who they mentioned, trying to be a good friend to our hosts by being friendly to other guests. It must have prompted her to reciprocate. With reluctant interest she asked the default question: ‘What do you do?’ I paused, uncertain for a second. ‘I’m a web designer’ I managed after a bit of nervous confusion at what exactly it was that I did. Her face managed to drop even as she smiled condescendingly. ‘Oh. White backgrounds!’ she replied with a mixture of scorn and delight. I paused. ‘Much of the time’, I nodded with an attempt at a self-deprecating smile, trying to maintain the camaraderie of the occasion. ‘What do you do?’ I asked, curious to see where her dismissal was coming from. ‘I’m the creative director for … agency’ she said smugly, overbearingly confident in the knowledge that she had a trump card, and had played it. The conversation was over.

I’d like to say her reaction didn’t matter to me, but it did. It stung to be regarded so disdainfully by someone who I would naturally have considered a colleague. I thought to try and explain. To mention how I started in print, too. To find out why she had such little respect for web design, but that was me wanting to be understood. I already knew why. Anything I said would sound defensive. She may have been rude, but at least she was honest.

I am a web designer. I neither concentrate on the party venue, food, music, guest list, or entertainment, but on it all. On the feeling people enter with and walk away remembering. That’s my job. It’s probably yours too.

I’m self-actualised, without the stamp of approval from any guild, curriculum authority, or academic institution. I’m web taught. Colleague taught. Empirically taught. Tempered by over fifteen years of failed experiments on late nights with misbehaving browsers. I learnt how to create venues because none existed. I learnt what music to play for the people I wanted at the event, and how to keep them entertained when they arrived. I empathised, failed, re-empathised, and did it again. I make sites that work. That’s my certificate. That’s my validation.

I try, just like you, to imbue my practice with an abiding sense of responsibility for the universality of the Web as Tim Berners-Lee described it. After all, it’s that very universality that’s allowed our profession and the Web to thrive. From the founding of the W3C in 1994, to Mosaic shipping with <img> tag support in 1993, to the Web Standards Project in 1998, and the CSS Zen Garden in 2003, those who care have been instrumental in shaping the Web. Web designers included. In more recent times I look to the web type revolution, driven and curated by both web designers, developers, and the typography community. Again, we’re teaching ourselves. The venues are open to all, and getting more amazing by the day.

Apart from the sites we’ve built, all the best peripheral resources that support our work are made by us. We’ve contributed vast amounts of code to our collective toolkit. We’ve created inspirational conferences like Brooklyn Beta, New Adventures, Web Directions, Build, An Event Apart, dConstruct, and Webstock. As a group, we’ve produced, written-for, and supported forward-thinking magazines like A List Apart, 8 Faces, Smashing Mag, and The Manual. We’ve written the books that distill our knowledge either independently or with publishers from our own community like Five Simple Steps and A Book Apart. We’ve created services and tools like jQuery, Fontdeck, Typekit, Hashgrid, Teuxdeux, and Firebug. That’s just a sample. There’s so many I haven’t mentioned. We did these things. What an extraordinary industry.

I know I flushed with anger and embarrassment that day at the christening party. Afterwards, I started to look a little deeper into what I do. I started to ask what exactly it means to be a web designer. I started to realise how extraordinary our community is. How extraordinary this profession is that we’ve created. How good the work is that we do. How delightful it is when it does work; for audiences, clients, and us. How fantastic it is that I help build the Web. Long may that feeling last. May it never go away. There’s so much still to learn, create, and make. This is my our party. Hi, I’m Jon; my friends and I are making Mapalong, and I’m a web designer.




d

BIG NEWS: My custom Lightroom presets are now available and 50%...



BIG NEWS: My custom Lightroom presets are now available and 50% off for a limited time with discount code HOLIDAY50. Link in profile!

This collection includes two styles (Everyday and Clean) that I use to edit every shot on this feed. I can’t wait to see what you all do with them! Stay tuned to my upcoming tutorials on how to put the presets to good use. ???? (at Toronto, Ontario)




d

Thanks for all the positive support and reception to my...



Thanks for all the positive support and reception to my Lightroom presets so far, especially to those who pulled the trigger and became my first customers! I’d love to hear your feedback once you try them out!
.
Still time to enter the giveaway or to take advantage of the 50% sale! See my last post for full details and the link in my profile. ❤️ (at Toronto, Ontario)




d

I like the philosophy behind shooting with primes; that a...



I like the philosophy behind shooting with primes; that a photographer shouldn’t stand still but instead, continuously move closer, further, lower, or higher relative to his/her subject as a means of establishing a deeper connection. ????????

Save 50% on my custom Lightroom presets with HOLIDAY50. Link in profile. (at Toronto, Ontario)




d

Lights, camera, action. ???? — A few more days left to get 50% off...



Lights, camera, action. ????

A few more days left to get 50% off my custom Lightroom presets! Link in profile. (at Toronto, Ontario)




d

Missing Berlin’s gorgeous buildings again. ???? (at Berlin,...



Missing Berlin’s gorgeous buildings again. ???? (at Berlin, Germany)




d

And while we’re in the process of missing European...



And while we’re in the process of missing European architecture… ????

4 more days left to catch my Lightroom presets for 50% off! ⌛️ (at Copenhagen, Denmark)




d

Preset (Everyday) + transform + exposure + graduated filter +...



Preset (Everyday) + transform + exposure + graduated filter + radial filter. If shots like this take more than 2 minutes to edit, it’s probably not worth editing. ⏱

Boxing Day will be the last day to get my Lightroom presets discounted, which leaves you only 3 more days! Get on it! ???? (at Toronto, Ontario)




d

I just realized that I can export my entire story all at once...



I just realized that I can export my entire story all at once now, which means uploading my tutorials to my Facebook page will be a million times easier (it was tedious to stitch all the individual clips together before). ????
.
Related: I posted a story this morning deconstructing the edit on yesterday’s shot.
.
Also related: I uploaded the 3 tutorials from my November feature on @thecreatorclass to my Facebook page this morning too. More to come! (at London, United Kingdom)




d

I took this shot about a year ago when I had a very different...



I took this shot about a year ago when I had a very different editing style. A ton of faded blacks and, believe it or not, a subtle green tint (unknowingly inherited from the preset I was using at the time). Re-editing it now, I’m happy with the way my style has evolved, though I can already sense that I’m on the brink of evolving it again. And I’m okay with that. ???? (at London, United Kingdom)




d

This might as well be a Herschel ad. ???? (at London, United...



This might as well be a Herschel ad. ???? (at London, United Kingdom)




d

This trip solidified my conviction to learning photography. A...



This trip solidified my conviction to learning photography. A lot has happened since this shot was taken.
Can you pinpoint the moment you decided to pursue photography? (at Toronto, Ontario)




d

A lot to look forward to in 2017. How did 2016 treat you: ???? or...



A lot to look forward to in 2017. How did 2016 treat you: ???? or ????? (at San Francisco, California)




d

Four days from now I’ll be boarding a one way flight to...



Four days from now I’ll be boarding a one way flight to San Francisco to take on the next evolution of my role at @shopify. Leaving the city that I’ve called home my entire life and the people who have defined everything I am was one of the most uncomfortable decisions I’ve ever had to make. But this wouldn’t be the first time I’ve chased discomfort in my career.
.
I wrote about my ongoing pursuit for discomfort this morning in hopes of inspiring others to do the things that scare and challenge them this year. You can find the link in my profile.
.
Happy 2017! ????
.
????: @jonasll (at San Francisco, California)




d

A Guide to UX Competitors’ Analysis for User Research

UX competitor analysis is a valuable user research method that focuses on understanding your products’ competitors, helping you better understand your market and goals. Idea Theorem™ has worked with many clients that required a UX competitor analysis to get actionable insights about their competitors’ strengths, weaknesses, and mistakes to avoid and know what they are doing right.




d

Building Digital Tools Without the Hype

I had a fantastic conversation with Jem Sophia today (our first actual conversation after years of talking online!) who pointed me in the direction of this fantastic article. I love the sentiment and the metaphor. Creating software to scratch an itch without any ambitions of ScAlInG and turning it into a capitalistic enterprise.




d

Best YouTube Channels for UX Designers

Discover top YouTube channels dedicated to UX design, offering insights and tutorials to enhance your skills in creating intuitive and engaging user experiences. Here are some of the best channels for UX designers.




d

Web Design Services Market Is Going to Boom

The market Study is segmented by key regions which is accelerating the marketization.




d

How to Change Your iPhone's DNS Servers

Just like in Mac OS X, you can change the DNS servers on your iPhone. This can significantly speed up Safari and other iPhone apps that use the Internet. For a general introduction to DNS, and to learn why you would want to change the DNS servers on your iPhone, see How to Change Your Mac's DNS Servers.

Before we start, you should know a couple things about how iOS handles DNS. First, these instructions only work for Wi-Fi connections - iOS does not allow you to change the DNS servers when connected to cellular networks. Also, the changes are network specific, so you'll need to change the DNS servers every time you connect to a new wireless network. The good news is that iOS remembers the settings, so you won't have to do anything the second time you connect to a network.

Here's how to change your iPhone's DNS servers:

  1. From the iPhone's home screen, tap Settings.

  2. Tap Wi-Fi. The screen shown below appears. The available wireless networks in range of your iPhone appear, as shown below.

  3. Find your wireless network in the list, and then click the arrow. The screen shown below appears.

  4. Tap the DNS field.

  5. Delete the current DNS servers, and enter the new DNS servers. (If you enter more than one DNS server, be sure sure to separate the servers with commas.)
    • To use OpenDNS, enter 208.67.222.222 and 208.67.220.220
    • To use Google DNS, enter 8.8.8.8 and 8.8.4.4
  6. Test your new DNS servers to make sure they're working.

That's it! You've updated your iPhone's DNS servers!

Related Articles


Meet Your Macinstructor

Matt Cone, the author of Master Your Mac, has been a Mac user for over 20 years. A former ghost writer for some of Apple's most notable instructors, Cone founded Macinstruct in 1999, a site with OS X tutorials that boasts hundreds of thousands of unique visitors per month. You can email him at: matt@macinstruct.com.




d

Rob Ball, Untitled

Rob Ball
Untitled, Margate, England, 2014
From the Dreamland series
Website - RobBall.co.uk

Rob Ball is a British photographer and academic working on self-initiated projects and commissions. His work has been shown at numerous institutions and festivals including The National Portrait Gallery, Ways of Looking Festival, Format Festival and Bonnington Gallery, Nottingham. Interested in areas including materiality, process, landscape and the archive, Rob produces a variety of outputs including the publications Unremarkable Stories and Beyond the View (2014). Rob is Deputy Director of The South East Archive of Seaside Photography (SEAS).




d

David Wolf, Oranges and Stones

David Wolf
Oranges and Stones, , 2012
Website - DavidWolfPhotographs.com

David Wolf is a devoted film photographer, making both color and black and white prints by hand in the traditional darkroom. His work has been exhibited internationally at such venues as Aperture, The Griffin Museum of Photography, the Photographic Center Northwest, the Lishui International Photography Festival in China, and the Salon de la Photo during Paris Photo. David’s photographs have been acquired by a variety of private and institutional collections, including the Bibliotheque nationale de France, Paris; the Prentice and Paul Sack Photographic Trust of the Museum of Modern Art, San Francisco; the Santa Barbara Museum of Art; and the deCordova Sculpture Park and Museum, Lincoln, MA. He recently won top honors in both the International Photography Awards and the Grand Prix de la Decouverte, International Fine Art Photography Competition. His work has appeared in such publications as Harper’s, aCurator, and Fraction Magazine. A Boston native and Brown University graduate, David now calls San Francisco home, where his work is represented by Corden|Potts Gallery.




d

Abelardo Morell, Camera Obscura: Early Morning View of the East Side of Midtown Manhattan

Abelardo Morell
Camera Obscura: Early Morning View of the East Side of Midtown Manhattan, , 2014
Website - AbelardoMorell.net

Abelardo Morell was born in Havana, Cuba in 1948. He immigrated to the United States with his parents in 1962. Morell received his undergraduate degree in 1977 from Bowdoin College and an MFA from The Yale University School of Art in 1981. In 1997 he received an honorary degree from Bowdoin College.

His publications include a photographic illustration of Alice’s Adventures in Wonderland (1998) by Dutton Children’s Books, A Camera in a Room (1995) by Smithsonian Press, A Book of Books (2002) and Camera Obscura (2004) by Bulfinch Press and Abelardo Morell (2005), published by Phaidon Press. Recent publications include a limited edition book by The Museum of Modern Art in New York of his Cliché Verre images with a text by Oliver Sacks.

His work has been collected and shown in many galleries, institutions and museums, including the Museum of Modern Art, The Whitney Museum of American Art, the Metropolitan Art Museum in New York, The Chicago Art Institute, The San Francisco Museum of Modern Art, The Houston Museum of Art, The Boston Museum of Fine Art, The Victoria & Albert Museum and over seventy other museums in the United States and abroad. A retrospective of his work organized jointly by the Art Institute of Chicago, The Getty in Los Angeles and The High Museum in Atlanta closed in May 2014 after a year of travel. Abelardo will be having his first show at the Edwynn Houk Gallery in New York opening October 23, 2014 and will run until December 20, 2014 featuring a selection of new pictures.




d

Mona Kuhn, AD 6309

Mona Kuhn
AD 6309, Joshua Tree, California, 2013/2014 (winter)
Website - MonaKuhn.com

Mona Kuhn is best known for her large-scale, dream-like photographs of nudes. Her work often reference classical themes with a light and insightful touch. Kuhn’s approach to her photography is unusual in that she usually develops close relationships with her subjects, resulting in images of remarkable naturalness and intimacy, and creating the effect of people naked but comfortable in their own skin.

Kuhn was born in São Paulo, Brazil, in 1969, of German descent. She received her BA from The Ohio State University, before furthering her studies at the San Francisco Art Institute in 1996. She is currently an independent scholar at The Getty Research Institute in Los Angeles. Kuhn’s first monograph, Photographs, was debut by Steidl in 2004; immediately followed by Evidence (2007), Native (2010), and Bordeaux Series (2011). Mona's upcoming book is titled Private (release 2014).

Mona Kuhn's work has been exhibited and/or included in the collections of The Louvre Museum in France, The J.Paul Getty Museum, The Los Angeles County Museum of Art, The Pérez Art Museum in Miami, The Museum of Photographic Art in San Diego, The George Eastman House, the Griffin Museum in Boston, Miami Museum of Art, the Cincinnati Art Museum, North Carolina Museum of Art, Georgia Museum of Art, The International Center of Photography in NYC. In Europe, her work has been exhibited at the Royal Academy of Art in London England, Le Louvre in France, Deichtorhallen in Hamburg Germany, Musée de l'Élysée in Switzerland, Centre d'art Contemporain at Musée Chaleroi in France, the Leopold Museum in Vienna Austria, and the Australian Center for Photography in Sydney. Currently, Mona lives and works in Los Angeles.




d

"I always hated that word—marketing—and I hate it now. Because for me, and this may sound simplistic,..."

““I always hated that word—marketing—and I hate it now. Because for me, and this may sound simplistic, the key to marketing is to make something people want. When they want it, they buy it. When they buy it, you have sales. So the product has to speak. The product is what markets things.””

- Interview with Tom Ford.




d

"What is deceptive, especially in the West, is our assumption that repetitive and mindless jobs are..."

What is deceptive, especially in the West, is our assumption that repetitive and mindless jobs are dehumanizing. On the other hand, the jobs that require us to use the abilities that are uniquely human, we assume to be humanizing. This is not necessarily true. The determining factor is not so much the nature of our jobs, but for whom they serve.

‘Burnout’ is a result of consuming yourself for something other than yourself. You could be burnt out for an abstract concept, ideal, or even nothing (predicament). You end up burning yourself as fuel for something or someone else. This is what feels dehumanizing. In repetitive physical jobs, you could burn out your body for something other than yourself. In creative jobs, you could burn out your soul. Either way, it would be dehumanizing. Completely mindless jobs and incessantly mindful jobs could both be harmful to us.



- Dsyke Suematsu from his white paper discussed at Why Ad People Burn Out.




d

"In conceptual art the idea or concept is the most important aspect of the work. When an artist uses..."

“In conceptual art the idea or concept is the most important aspect of the work. When an artist uses a conceptual form of art, it means that all of the planning and decisions are made beforehand and the execution is a perfunctory affair. The idea becomes a machine that makes the art. This kind of art is not theoretical or illustrative of theories; it is intuitive, it is involved with all types of mental processes and it is purposeless. It is usually free from the dependence on the skill of the artist as a craftsman.”

- Artist Sol Lewitt on conceptual art.




d

Canadian with Suspected Avian Flu in Critical Condition

A British Columbia (BC) teen from the Fraser Health region who was hospitalized with an earlier announced presumptive positive H5 avian flu infection is in critical condition, the province's top health official said today.




d

The End of America's Well-Intentioned Empire

Dan Perry: The world was hugely interested in the U.S. presidential election -- and everywhere people are wondering what the return of Donald Trump will mean in geopolitics. But is America interested in the world?




d

Wanted Posters Targeting Jewish Faculty at NY Campus

Hundreds of "Wanted" posters targeting members of the University of Rochester community were found glued to campus buildings and classrooms, according to the Department of Public Safety.




d

Cash-strapped County Found Success with a 32-hour Workweek

The county said the 32-hour workweek has attracted a host of new talent: Applications have spiked 85.5% and open positions are being filled 23.75% faster, while more employees are staying in their jobs -- separation (employees quitting or retiring) dropped by 48%. And 84% of employees said their work-life balance was better.




d

Pentagon Secrets Leaker Sentenced to 15 Years

A federal judge on Tuesday sentenced a Massachusetts Air National Guard member to 15 years in prison after he pleaded guilty to leaking highly classified military documents about the war in Ukraine.




d

Guardian no Longer Posting on X

We wanted to let readers know that we will no longer post on any official Guardian editorial accounts on the social media site X (formerly Twitter). We think that the benefits of being on X are now outweighed by the negatives and that resources could be better used promoting our journalism elsewhere.




d

Behind the Curtain: The Trump, Musk Fusion

President-elect Trump and Elon Musk, two billionaires with strikingly similar DNAs, are fusing into a new, powerful governing-media paradigm.




d

Arizona Attorney General Won't Drop Trump Fake Electors Case

Allies of Donald Trump who were charged in Arizona for illegally trying to overturn the 2020 election can still expect to face justice despite his return to the White House, the state's attorney general has said.




d

Trump Picks Fox News Host for Defense Secretary

President-elect Trump on Tuesday announced he was choosing Pete Hegseth, an Army veteran and a Fox News host, to serve as Defense secretary.




d

Trump's Staff Picks Show Sway of Don Jr., Tucker Carlson

President-elect Donald Trump has only begun to fill out the ranks of his incoming administration. His first choices confirm that his son Donald Jr. and the former Fox TV personality Tucker Carlson have emerged as major influences over his picks.




d

Florida Shatters Another Tourism Record over the Summer

Nearly 34.6 million people traveled to Florida from July through September -- shattering another tourism record for the state.




d

Stuff Republicans Are Doing TO You

House Freedom Caucus members block bipartisan bill to expand some Social Security benefits




d

Scientists Warn That a Key Atlantic Current Could Collapse

A new report describes the dire state of Earth's snow and ice, suggesting several major tipping points are likelier than scientists once thought.




d

Adieu


Aperture Image




d

PERA Act votes tomorrow - A major step back for software freedom




d

BEVERIDGE, LUCKNOW DR

Incident Name: LUCKNOW DR
Territory: CFA
Agency: CFA
Fire District: North Central
Incident No: 189525
Date/Time: 14/11/2024 22:44:00
Type: OTHER
Location: BEVERIDGE
Status: Responding
Size: SMALL
Vehicles: 0
Latitude: -37.4764620871069
Longitude: 144.94403673476685




d

Adrian Stevenson (2007)

Adrian Stevenson works for the Learning Technology Services Team which is part of Internet Services at the University of Manchester. He is responsible for investigating and assessing emerging Web and elearning technologies and is the organiser of the University's eLearning Technologies Group. His experience is in Web-based systems design and development using HTML, XML and Web Service technologies. Adrian has also worked for MIMAS, a national data centre based at the University of Manchester, on the JISC-funded JORUM project (2002-2005). Prior to this he was a Web Developer for Multimedia Services at Leeds Metropolitan University (2001-2002) and the Web Editor at King's College London (2000-2001). Adrian first studied Economics and later Continental Philosophy at the University of Warwick. Following this he became a professional guitarist in a number of bands based in London, as well as a Sound Engineer for a number of independent artists including My Bloody Valentine. Adrian facilitated a workshop session on "Know Me Knowing YouTube".