A presentation at Product Camp in in Gdynia, Poland by Javier Cuello
Kickstart your design system with Sketch Gdynia, June 6
Hey! Hello!
About Me & The Workshop
Javier Cuello I’m a designer from Argentina. I’ve worked on projects for companies such as Zara, Yahoo and UEFA. I co-wrote a book, and published several articles on Smashing Magazine. @millonestarde Follow Javier on Twitter: www.twitter.com/millonestarde
Design Systems I will help you understand the essential ingredients of a design system in Sketch, and know how to create and maintain it.
Files bit.ly/sketch-productcamp
A Short Intro to Design Systems
“How Graphic Design Legend Massimo Vignelli Cracked the NYC Subway System” https://www.ceros.com/originals/massimo-vignelli-nyc-subway/
Trieste Airport Branding & Wayfinding System https://www.behance.net/gallery/48443607/Trieste-Airport-Signage-Wayfinding
Trieste Airport Branding & Wayfinding System https://www.behance.net/gallery/48443607/Trieste-Airport-Signage-Wayfinding
Building a Visual Language https://airbnb.design/building-a-visual-language/
Parts of a System
Principles Define the foundation and ‘philosophy’. This will determine how the systems looks and behaves. Material Design Principles https://material.io/design/introduction/#
Style Guide Defines the visual appearance: colours, typography, iconography. Lonely Planet Colour Palette http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
Elements, Components and Patterns How the system will work as individual parts, but also all together. Shopify Polaris https://polaris.shopify.com/
Guidelines Shorten the gap between design and implementation. Define good and bad practices. GOV.UK Design System https://design-system.service.gov.uk/
A name! It’s actually one of the most important parts. Just kidding. Not. Carbon Design System https://design-system.service.gov.uk/
“your sketch library is not a design system” http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/
Anatomy of a Component
Design System DIY: UI Kit on Sketch
Naming and Labelling
BUTTON LABEL
BUTTON LABEL Button / Red / Rounded Hum, don’t! 😕
BUTTON LABEL Button / Red / Rounded Hum, don’t! 😕
BUTTON LABEL Controls / Buttons / Primary / Enabled Much better! 🤩 …and makes Javi happy.
Controls / Buttons / Primary / Enabled Function Type Hierarchy State
BEM Block Element Modifier 🤓 BEM http://getbem.com/naming/
Practice: Re-arranging a mess
Re-arranging a mess We’ll take a look to a rather disastrous file and try to put everything a bit more tidy. I will also show you a couple of plugins you can use.
Practice: Customise the Style Guide
Customise the Style Guide Define your main colours, typography and icons based on the Style Guide provided on the sample files. Icons provided are the ones from https://feathericons.com/ We’ll continue at 14:40
Practice: Creating a component
Creating a component Actually you don’t have to do anything, but I’ll show the process I followed to create a component for the sample files. We’ll make a break at 15:00
Practice: Using real data
Using real data We’ll use data sources to add to our list item, and will complement this with Sketch spacing options. We’ll continue at 15:20
Practice: Navigation bar and home screen
Navigation bar and home screen Let’s (I mean, you) create a navigation bar for the project, and build the Home screen that’s currently missing —you can use lists, images, grids, etc. We’ll continue at 15:45
Practice: Card
Card Apply everything you know so far building a card and its possible variations. Explore and experiment. Create different responsive layouts, states (loading, error, empty.) We’ll continue at 16:00
Keeping the System Tidy
Stickers Plugin https://github.com/romannurik/Sketch-Stickers
Design Systems for everyone
Sketch Cloud Sketch Cloud https://www.sketchapp.com/docs/sketch-cloud/
Abstract Sketch Cloud https://www.sketchapp.com/docs/sketch-cloud/
Lingo Lingo App https://www.lingoapp.com/
Zeplin (Components) Sketch Cloud https://www.sketchapp.com/docs/sketch-cloud/
Zero Height Zero Height https://zeroheight.com/
Maintaining a System
A few beliefs 👉 It has to fit your workflow. 👉 Build trust on it. 👉 Clear roles and responsibilities. 👉 A system is never done.
designsystems.com “5 tips from an Airbnb designer on maintaining a design system” https://www.designsystems.com/stories/airbnb-designer-shares-pro-tips-for-maintaining-a-design-system/
Questions?
Before you leave…
Thanks! Dziękuję Ci! ¡Gracias! @millonestarde
A Design System is a long process that usually starts with a cornerstone: a kit of the most common UI elements you’ll use in your product.
In this session you’ll learn the fundamentals of how to create a Sketch file as the first step of designing a system. The workshop will be focused on how to design elements, components and patterns that are easy to maintain, are adaptable, and can grow over time.
Javier is a long-time Sketch user who will teach you all the tips and tricks he normally uses in real projects — some of them are special for people who struggle to keep order and consistency in their workflow.
Lastly, Javier will also introduce you to the tools you’ll need to communicate your system to the developers in your team.
for free. You
can too.