Type History

As part of the class I am teaching – Visual Interaction Design – we are doing a module on typography and type design. Tangential to that is type history – not specifically relevant but great background for the designers. So starting with the type history deck provided by Ellen Lupton, which is part of her curriculum for Thinking With Type which we are using as a textbook, I adjusted, added, modified and extended the information up to current times and eventually created a presentation of type history from the beginning of writing in cuneiform to webfonts and typekit. The deck is overlaid with my voice over which is done in the software VoiceThread and then exported as a movie. Hope you find it interesting and maybe it will spark an interest in more type.

[KGVID]http://www.emdezine.com/deziningInteractions/wp-content/uploads/2015/09/Type-History-Visual-Interaction-Design-Fall-2015.mov[/KGVID]

Visual Interaction Design Reading List

UPDATED 2019 – over the last four years, I’ve been teaching Visual Interaction Design at CCA (California College of the Arts) – which is a crash course in visual design for interaction designers. I reference a lot of great books that I think are worthy of having on the shelf as I work up my curriculum and syllabus. Some old standards have gone by the wayside for being too outdated, but many are evergreen as the basic principles underlying good design are timeless. I’m sure I am missing some but here is my reading list for the class: (google doc)

Visual Interaction Design Readings  (from VIXD class at CCA)

Required Texts:
Type on Screen, Ellen Lupton, Princeton Architectural Press

Other Texts:
Thinking With Type, Ellen Lupton,  Princeton Architectural Press

Several of the weekly readings will come from these books.

The New Graphic Design Basics – chapters on gestalt principles
Ellen Lupton & Jennifer Cole Philips, Princeton Architectural Press

Designing with the Mind in Mind – chapter 2 and 4
Jeff Johnson, Morgan Kauffman

The Laws of Simplicity – chapter 2
John Maeda, MIT Press

Understanding Comics – chapters 6 and 8
Scott McCloud, Harper Perennial

Design is a Job – chapters 7 and 8
Mike Moneiro, A Book Apart

On Web Typography – chapters 4, 5, and 6
Jason Santa Maria, A Book Apart

Designing for iOS
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Google Material Design
https://www.google.com/design/

Mobile and Multi-Device Lessons Learned
Luke Wroblewski, static.lukew.com/MobileMultiDevice_LukeWsm.pdf

Mapping Experiences
James Kalbach,  O’Reilly Media

Adaptive Path’s guide to Experience Mapping
http://www.mappingexperiences.com/

Online Articles
Gestalt and sketching articles
Why is Sketching Still Important to Design
http://www.core77.com//posts/52948/Why-is-Sketching-Still-Important-To-Design

The Sketch Book
http://konigi.com/wiki/sketch-book/

The Benefits of Visual Note taking
https://www.melcrum.com/blog/draw-my-mind-benefits-visual-note-taking

Design Elements and Principles
https://designschool.canva.com/design-elements-principles/

Understanding Visual Hierarchy in Web Design
http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design–webdesign-84

Color articles
Understanding the Qualities and Characteristics of Color | Tuts+ Web Design Article http://webdesign.tutsplus.com/articles/understanding-the-qualities-and-characteristics-of-color–webdesign-13292

Color Usability: 4 Keys to Clockwork Conversion | Three Deep
http://www.threedeepmarketing.com/blog/color-conversion-science-clockwork-model/

Color Theory for Designers – Smashing Magazine | Parts 1, 2, 3
https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/

https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/

https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

Web Developer’s Guide to Color
https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Branding articles
How to Use Photography in Branding
http://designerfund.com/bridge/how-to-use-photography-in-branding/

Branding – Not just a Logo
http://heidicohen.com/branding-logo/

20 Actionable Tips to Build a Winning Visual Brand Identity
https://designschool.canva.com/blog/20-easy-tips-build-visual-brand-identity/

The Impact of Interaction Design on Brand Perception
https://www.nngroup.com/articles/interaction-branding/

What Apple and Starbucks Taught Me About Building A Brand http://www.fastcodesign.com/3055704/what-apple-and-starbucks-taught-me-about-building-a-brand

Logo articles
New logo and Identity for SFMOMA done in-house
http://www.underconsideration.com/brandnew/archives/new_logo_and_identity_for_sfmoma_done_in_house.php#.V65GS5MrIUF

New Global identity for Netflix
http://www.underconsideration.com/brandnew/archives/new_global_identity_for_netflix_by_gretel.php#.VjFEZa6rTuM

The 7 Step Paul Rand Logo Test
https://entrepreneurshandbook.co/the-7-step-paul-rand-logo-test-5c7b546af17b#.lk6safw9t

A Lightweight Branding Exercise for Startups https://medium.com/@bbergher/a-lightweight-branding-exercise-for-startups-8776f0cb0ea7#.vtoom81c

Design System articles
The Rise of Design Systems
http://electronicink.com/rise-design-systems/

Color in Design Systems
https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3#.rpmxurfxw

Buttons in Design Systems
https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.tmbq2srqh

Upcoming Webcast

I’ll be doing a webcast of my Foundations of Social Interface Design over at O’Reilly on August 20, 2015.

Here’s what I’ll be talking about – check it out and hope to see you there:

Description:

Designing social sites and mobile applications, or adding a social dimension to an existing project, entails unique challenges way beyond those involved in creating experiences for individuals interacting alone with an interface. In this webcast we will explore the foundations and key facets in the social landscape that should be considered when designing for social experiences and we’ll look at a set of high-level practices that underpin individual interactions. Some of the lessons and tips include:

  • the foundational elements that are in every social experience
  • tools and social features to drive virality
  • how to onboard new users
  • gotchas and easy-outs to avoid
  • the pros and cons of gamification and how reputation components change behavior
  • the seamless nature of offline and online with mobile

Along the way we’ll share examples from past and current sites and mobile applications and talk about how the combinations – mix and match – of different social features changes the nature of the experience and the type of community engaged.

Over on Medium

I wrote a piece pondering some questions coming out of the Ellen Pao / Kleiner Perkins trial. I sat on the jury for five weeks and although I was an alternate and didn’t get to deliberate, I came away with a host of questions about our industry and how we in UX, nested inside tech, are doing in regards to gender bias and discrimination. Go read it.

Designing Social Interfaces v2.

Designing Social Interfaces Version 2 book cover

Christian and I are currently working on a revision of the Social patterns book. We talked to Mary Treseler last year at the IA Summit – where we signed free books – about a second version and finally by December we signed our contract. This time around though, we are on a super accelerated schedule with the entire revised manuscript due March 15th.

The revisions is integrating mobile examples and specific mobile patterns and considerations into each of the patterns. We are also updating to flesh out enterprise considerations as well. We hope to also start the conversation about emerging patterns around internet of things and ambient devices and the intersection across the social experience.

I am really looking forward to seeing the full revision but you’ll be able to read the first couple of chapters in early release in a couple of weeks.

Teaching at the Design Writing Summit

B9F53IwCcAEzfnY

I had the pleasure of teaching recently as part of the Design Writing Summit crafted together by Christina Wodtke and sponsored by Boxes and Arrows. It was as enlightening as exhilarating.

Each of us had the opportunity to also participate in the sessions with the other session leaders so I got to participate in writing exercises and thinking from the amazing Laura Klein, Steve Portigal, Christina Wodtke, Indi Young and Cathy Yardley.

I taught a how to session on How to Write a How-to.

Some points that I’d like to add include:

  • Use video if applicable, I didn’t really cover this as an option – mostly out of time constraints. Video is a viable option for teaching people how-to do something – just look at the plethora of how-to videos on YouTube and the large number of startups focused on teaching people via video.
  • Actually writing a How-To to cement the process into my head even if the end result isn’t actually a formal How-To. I take a lot of classes and take notes during the class. When I get home, I rewrite my notes out as a How-To and walk myself through the process I learned to make sure that I know the material. The end result is I then have a fleshed out step-by-step for use in the future.

HowtoBoilanEgg MePresenting-HowTo

The best part of the session I taught was the debate we had as a group during the exercise fleshing out How To Boil An Egg. All the variants – hot or cold start, soft or hard boiled, watch or leave, cold shock or not. I thought I was picking something fairly simple but as I mentioned in my setup, sometimes, the simplest looking things turn out to be the most complex (for example – designing a sign in screen). That actually is part of what makes this a good exercise to walk through to think about all these variations and potential tips for success.

There is talk of doing the Design Writing Summit on the east coast. I hope I get to participate and tweak the content some more. It was a blast and I am personally looking forward to putting everything I learned into practice.

RE: Design

I am curating a conference!

Feeling a bit deer in headlights but I am super stoked and am having a blast figuring it out.

RE:DESIGN, which will be held here in San Francisco in May.

It’s very interesting to be thinking about designing a conference experience. I am thankful I don’t have to design the logistics of this – just the content. But I have had to devise a theme and think about people to bring in around that theme.

The theme: Renaissance

The premise: Modern day UX designers need to be well versed across various disciplines and interests to bring the best results to their design projects. Experiences are no longer limited to the screen and are global in nature. What do we need to understand and experience ourselves in order to make better experiences? What do we do to stay fresh, to stay inspired, to feed our souls which in turn feeds our design work? How do the things we do outside the job roll back into our approach on the job? Let’s explore these questions (and more) together.

The things I have been thinking about as I have made my lists and reached out to people are:

  • What kind of designer are they – if at all?
  • What kind of company are they at currently?
  • What do I know about them outside of UX – what feeds their soul?
  • Have I seen that outside work, influence and change the way they practice their UX craft?
  • Will they be an interesting speaker / facilitator / leader for the session?

This conference is different in that it’s based on facilitating conversations or leading activities rather than standing at a podium and speaking for an hour. So much more interactive and hands on than traditional events.

Then as I have worked through these lists, the conference producers have also asked me to consider some other factors:

  • Gender diversity
  • Ethnic diversity
  • Age diversity
  • Size of company diversity = i.e. they need some big names for drawing in to justify corporate budgets of sending staff to a conference like this

and a whole host of other things I never had ever thought about in conference content curating.

It’s an interesting process and gives me a greater appreciation for the work that goes into programming a multiple track event.

Check it out, check back for more speakers, or just come to the event and know you will have an awesome time.

Beyond Design

Back in the days of the Bauhaus, designers were multi-faceted. The designers that many of us studied in school and admired for their modernist thinking about type and layout and grids, were also designing fabric and theatrical sets and exploring photography and writing plays. We don’t hear a lot about the other sides of these luminaries and we don’t hear enough about the other creative exploits of today’s designers as well.

I would be interested in hearing from others, what else they do creatively that feeds into who they are as creators, designers and artists.

For myself, I have embarked back into the world of the graphic arts – mostly in the aid of my photography. But I have discovered that I love printing, drawing and cutting linoleum block prints and making books and boxes.

Images from my first letterpress class at SF Center for the Book taken last year.

Considering the cross device experience

I have been super busy lately working on the beginnings of a Mobile Pattern Library for a client. This work involves a lot of auditing applications. I am looking at both apps designed by the client and others in the landscape for comparison and for developing best practices across the iPhone, iPad, an Android handset and an Android tablet.

I can honestly say that while there are a lot of crappy iPhone apps, there are 10x the amount of bad ones in the Android ecosystem. I know, this is probably not new to many but was an interesting thing for me. On the other hand, I have gotten used to the hard back button on the Android and was extremely surprised by how much I like the Android tablet.

The best experience so far was a moment of “it just works” on the tablet. When I got the Android tablet – an ASUS tansformer tablet – I signed into my google accounts and without any prompting from me, any apps that I had downloaded on the Android handset self-installed into the tablet. This was a very surprising but cool experience.

On the other hand, I am extremely surprised by the application makers, on both the iPad and the Android tablet who don’t bother to refactor for the increased real estate and just expect the app to be either tiny or stretched to fit the space. I know many of these apps are free and people want to get their app out there before the competition, but my time is worth money and I want to love these applications and right now I don’t because of the perceived laziness of the app creators.

More thoughts soon as I collect screen shots and the adjust more global patterns for public consumption.

More good posts about the Identity issues with Google +

Here are a few more good articles/posts about this ongoing conversation about Identity and Google +. This is a hot potato and people need to speak out against the policies that Google has set forth. They are discriminatory and do not promote true social engagements.

“Real Names” Policies Are an Abuse of Power

Google+ and The Trouble With Tribbles

It’s official: Google wants to own your online identity

Google+ Can Be A Social Network Or The Name Police – Not Both
Love this quote from this piece – “Mike Neuenschwander has famously observed that social software is being designed by the world’s least sociable people, and Google+ seems to be a case in point. ”

Fantastic and thorough thoughts about the issues and pros and cons of the Google+ Real Names policy by Kee Hinkley

Do Computers Provide a Suitable Analogy for the Human Brain?

Real Names: Google+, Government & The Identity Ecosystem

And if you can’t get enough of this issue, check this out “All the News & Commentary on the Google+ Nymwars”

Who you are versus who you present yourself to be online

Recently Google launched Google Plus and in the process, they have required that people use their real names as their identity. This is causing tremendous issues—suspension of accounts deemed not “real”, suspending accounts because of pseudonyms.

In our book, Christian and I talk about identity, about owning your words and owning your reputation. We proposed the following in the Identity pattern:

  • Give users control over how to present themselves. Users should own their actions and have reputation attached to their identity, but the option to go anonymous should be offered in some instances.
  • Let your users decide who sees what parts of themselves. Give enough control and permissioned access. Do my friends see my birthdate or does everyone? If it’s everyone, be prepared for a lot of fake data.
  • Be clear on reflecting back to the user what they see as an editor / owner versus how others see them. The dating sites have this idea down to a science, but on many other websites it isn’t clearly articulated who sees what.
  • Having a robust identity solutions won’t alleviate sock puppets and alternate identities that people may create.

Randy Farmer goes on to discuss this in his essay The Tripartite Identity Pattern, which discusses the differences between an account holder – known to the organization, the online identity – the name with which the user is known to the world and their community, and the user’s login.

So what does this have to do with Google+?

There is controversy happening over Google’s policy of users having to use real names in their profile – representation of themselves – on Google+.

They outright break the first best practice – let user’s choose the name with which to represent themselves – and the recommendations from Randy which call to separate the ACCOUNT from the representation of the user. This combining of the two requiring a real name may seem like the easier way to go when building the system, but in real life it always blows up.

Kaliya Hamlin “Identity Woman”, who has long been a proponent around Identity practices that support the needs of people, especially disenfranchised people—anyone who wants to be able to speak out without fear of reprisal or stalking or of losing their job or any number of other factors that play into bad behavior online seeping out into the real world— has a series of blog posts and tweets calling out Google+ for suspending her account because she used the name she is known for online “Identity Woman”. Her reputation is tied to this identity. Years of reputation. Years of expertise. But it’s not a real name so suspended.

She makes some great points and I recommend that if you are at all interested in Identity and how Google is handling this, you should read them all. They are on the road to controlling your identity online so it is well worth reading and thinking about.

  1. Google+ and my “real” name: Yes, I’m Identity Woman
  2. Nymwars: IRL on Google’s Lawns.
  3. Google+ Suspension saga continues
  4. Lets try going with the Mononym for Google+
  5. Google+ says your name is “Toby” NOT “Kunta Kinte”
  6. Is Google+ is being lynched by out-spoken users upset by real names policy?

Charlie Stross sums it up well in his post “Why I’m not on Google Plus“.

While I am on Google Plus using my real name, I don’t believe I should be required to if I had another name with which I better identified with. Frankly, it’s not Google’s place to tell me what name I have to use to present myself, and I am surprised that they have gone this route – there are a ton of really smart people over there who know better. There is no reason why they can’t have the ACCOUNT be in the person’s real name which is never shown, and let the user present whatever they want to the world. Since they are iterating frequently, this is an iteration they should seriously consider.

The Ultimate in Grids

I have long been a proponent of grid systems in design. After all, I started out as a print designer working on annual reports and other multipage projects. The grid has been harder to apply in reasonable ways online but I still love the order of working with an underlying structure and the challenge of when to break the grid for emphasis or when to keep a consistent experience.

Art directed by Hugh Dubberly based on a patent held by William Drentell and Jessica Helfand, this cool poster shows 892 ways a 3×4 rectangle (i.e. a webpage) can be divided up into a base grid.

Here’s the full assortment as a video:

The 892 ways to partition a 3×4 grid from thomas gaskin on Vimeo.

And last, but not least, a website that creates HTML code for an underlying grid for any combination.

Conference season is upon us

I will be attending Interactions 11 in Boulder next week. I am not presenting, just attending, but Tangible UX is looking for strong independent UX people to work with, so I would love to meet with you.

Christian Crumlish and I will be presenting a short keynote talk at Web 2.0 Expo in San Francisco

I am helping out workshop facilitators for the IA Summit this year so will be there as well. Hope to see you in Denver in March/April.