How we Designed the SF Design Week Web Content Structure

Mike Brand
2 min readOct 30, 2015

I’ve been helping out with some of the organising around San Francisco Design Week’s news website. When we started researching for our design we found the example articles had a lot of variance in how they were structured. This seemed like a good chance to practice some learnings from Karen McGrane’s Content Strategy for Mobile. We wanted our content to be useful and delightful in any context we threw at it.

We started by brainstorming where our content was going to be used and promoted. This mainly consisted of taking an inventory of our web structure and social media accounts.

Our website inventory turned up these pages:

  • Our homepage
  • Our news page
  • The article page

Our social media sites are:

  • Twitter
  • Facebook
  • Newsletter
  • Instagram

Once we knew where our content was going we had to figure out what was needed for each medium and where the overlap was. For example we could use a single field, short description, for tweets, Facebook posts, and as a by-line.

From there we created our content guide. This was done in tandem with the executive director and head of content for San Francisco Design Week. We came up with our draft structure guide and they gave us feedback on which elements were too limiting or would be otherwise difficult. As we progressed we found that each field needed more context. Word and character limits were useful, but guidance on content was needed as well. An example would be our “short description”

Short Description

Upto 110 Characters

Purpose: The short summary should explain the basic content of the article, and entice people to read it. It also needs to be understandable without the title.

Location: Twitter, Facebook, Homepage

Here we can see the character limit (110 characters), the content guidence (explain and entice) and context of use (Twitter and Facebook).

The list of required elements for each article is:

  • Title — Up to 70 Characters
  • A Feature Image — 1000px — 1500px wide. At least 550px tall
  • Categories — Up to three design disciplines
  • Tags — Up to five
  • Body Text — Aim for 250–300 words
  • A Short Summary — up to 110 characters
  • An Excerpt — An enticing 70 words.
  • An Author — A WordPress account, or the names and email required to create one.

We also have some optional Fields:

  • In-article image — Up to 600px wide, left aligned in WordPress
  • Caption- Up to 25 words
  • Pull Quotes — There can be multiple pull quotes with at least a paragraph of text between them. They should be 10–30 words.

We’re almost finished. Our final task is to update the content management system to make following the content structure guide as easy as possible. For our first try, however, it has given us a good base to start with.



Mike Brand

Product Design at Spotify. Patron saint of emojis.