benjystanton

Websites with nice typography

I asked Twitter for examples of websites that publish content (news, blogs, magazines) with nice typography and grids.

Twitter responded…

• The Outline
• Wiki Tribune
• Medium
• A List Apart

benjystanton

Design workshop collections

Here are some sites that list a range of design workshops, activities and exercises…

• 18F methods
• Atlassian team playbook
• Google design sprint methodology
• GDS user research activity cards
• Design Kit methods
• Gamestorming

benjystanton

Accessible interactive maps (draft)

---

Update: blog post

Now an actual, real life blog post: https://www.benjystanton.co.uk/blog/a-plan-for-accessible-maps/

---

benjystanton

Content design for data tables, spreadsheets, CSVs and APIs

Interfaces for exploring data rely on the data itself being well written.

Improving the way data is labelled and described, wihout affecting the underlying meaning, whilst also making sure it's still machine readable is a tricky task!

Here are some resources that can help (thanks everyone for the suggestions).

Useful resources

benjystanton

VoiceOver for Mac keyboard controls

• Launch: ⌘ + F5
• Enter web area (to browse a page): Ctrl + Alt + Shift + Down
• Move through interacive elements: Tab
• Read page: Ctrl + Alt + A

Thanks to Sigma

benjystanton

API user research resources

ONS

• https://developer.beta.ons.gov.uk/
• https://digitalblog.ons.gov.uk/2018/11/14/product-people-west-south-product-for-apis-whats-the-difference/
• https://digitalblog.ons.gov.uk/2018/05/24/why-we-have-produced-a-beta-version-of-a-new-ons-api/

GDS/Gov

• https://dwpdigital.blog.gov.uk/2018/04/20/how-we-designed-for-users-without-having-a-user-interface-to-test/

benjystanton

Onboarding remote team members

Articles and resources

• Citizens Advice Welcome Deck
• Dragon Age Induction Board
• Dragon Age Induction Board 2
• 10 thoughts about onboarding designers in our new remote world
• How to Unfurlough: Introducing the ‘Return to Work’ Trello board
• 5 Reasons Why Spotify's Onboarding Is Better Than Yours
• [What would a great onboarding experience look like?](https://medium.com/inspect-and-adapt/what-would-a-great-onboarding-experience-look-like-d8be856

benjystanton

Use this pattern instead of placeholder text

<label for="form-input">
  Example form label
</label>
<input id="form-input" name="form-input" aria-describedby="form-help">
<p id="form-help">Some help text here</p>

benjystanton

Testing everything (or not)

• https://twitter.com/OfficeOfWilson/status/1334774453406998528
• https://sanjaypoyzer.medium.com/how-to-find-and-prioritise-your-riskiest-assumptions-4d3729c18795
• https://www.doteveryone.org.uk/project/consequence-scanning/

benjystanton

ARIA Landmark roles and HTML5

… there are still support gaps in browsers and screen readers for exposing some landmarks. When presented with situations like this, ignoring conformance warnings, and adding a redundant role to an element, may be preferred to not exposing the correct landmark information.

Further reading

• https://www.a11yproject.com/posts/2013-01-14-aria-landmark-roles/
• https://www.scottohara.me/blog/2018/03/03/landmarks.html