Applying visual design principles to API design

This was presented at DevRelCon 2018 in London: https://london-2018.devrel.net/matthew-oriordan/

API design is a relatively new discipline, and one could easily fall into the trap of believing there is little experience to draw on, and we are now largely in an unchartered territory. Whilst this is true to some degree, it’s a mistake not to take inspiration from other industries that share common problems. In the last 100 years, graphic designers have learnt through research, trial and error, how to visually communicate messages and content.

Whilst how to apply UX to DX has been covered many times, the visual design process, which typically starts once UX is completed, is rarely talked about. Yet design, following the UX process, is an essential activity that helps communicate the content more effectively and make interfaces more intuitive and approachable.

For example, a car goes through the equivalent of a UX design process to define the function of the car. The form however, is defined as part of the visual design process and is arguably the most important aspect of what creates a lasting impression for buyers. Skipping the visual design phase in our APIs may still result in functional APIs, but in a form that is not pleasing to developers who use them.

In this talk, we will explore common visual design principles and how they apply to API design. By the end of the talk, you will have a basic understanding of popular visual design principles, and be able to incorporate these principles into your DevRel handbooks or API style guides. Specifically, what you will learn is how to create a positive lasting impression for developers who use your APIs.

Transcript

1. Applying visual design principles to API design Matthew O’Riordan | CEO, Ably Realtime at DevRelCon ‘18 - London
2. Ably’s product is a realtime API I’m on the governing board of the OpenAPI Initiative, core team for AsyncAPI Ably Open Data Streaming Programme launching this month. Free realtime data for developers. Why I care about APIs 2 AsyncAPI
3. The visual design trap 3 Matthew O’Riordan | DevRelCon ‘18 - London
4. APIs are the primary interfaces your developers interact with 4 Matthew O’Riordan | DevRelCon ‘18 - London
5. Design matters. Even with APIs. 5 Design is Function Design amplifies your message First Impressions stick Matthew O’Riordan | DevRelCon ‘18 - London
6. 6 #1 Design is Function Matthew O’Riordan | DevRelCon ‘18 - London
7. vs 7 Matthew O’Riordan | DevRelCon ‘18 - London
8. 8 Matthew O’Riordan | DevRelCon ‘18 - London
9. 9 #2 First impressions stick Matthew O’Riordan | DevRelCon ‘18 - London
10. vs 10 Matthew O’Riordan | DevRelCon ‘18 - London First impressions of an API and its design, will define how developers perceive you.
11. 11 #3 Design amplifies your message through simplification Matthew O’Riordan | DevRelCon ‘18 - London
12. 12 #773 Blah blah blah Matthew O’Riordan | DevRelCon ‘18 - London
13. API design is a new discipline 13 Uncharted = mistakes Matthew O’Riordan | DevRelCon ‘18 - London
14. Colour Balance Proximity Hierarchy Contrast Alignment 8 common visual design principles you need to know Repetition Space 14 Matthew O’Riordan | DevRelCon ‘18 - London
15. Colour Balance Proximity Hierarchy Contrast Alignment 8 6 common design principles you need to know Repetition Space 15 Matthew O’Riordan | DevRelCon ‘18 - London
16. 8 6 Three common design principles you need to know 16 Matthew O’Riordan | DevRelCon ‘18 - London Hierarchy & Repetition Contrast & Balance Proximity & Space
17. Hierarchy & Proximity Flat structures are hard to discover Hierarchical APIs are more intuitive & self-documenting 17 Matthew O’Riordan | DevRelCon ‘18 - London
18. Contrast & Balance Lots of arguments affects balance and contrast negatively. Distil down to what’s needed for most use cases. Allow advanced features to be discovered without noise. 18 Matthew O’Riordan | DevRelCon ‘18 - London
19. Repetition & Space API surface area growth is a problem Consistency through repetition of methods. Overload and use Enum types to provide space in your APIs. 19 Matthew O’Riordan | DevRelCon ‘18 - London
20. • Live in the developer API mindset • Use the three visual design principles • Ensure your design becomes invisible. • Apply the 80/20 rule to interfaces • Reduce API surface area API Design Checklist 20 Matthew O’Riordan | DevRelCon ‘18 - London
21. Open Data Stream Programme 10 Matthew O’Riordan | DevRelCon ‘18 - London Early access at go.ably.io/open-data
22. Thank you! Design asset credits: Noun Project and Flaticon Follow me on Twitter @mattheworiordan Tweet your questions at me with #DevRelCon Find out more about our data streaming platform go.ably.io/dsx