FE404
Design Systems for Interactive Applications
Faculty
Pablo Deeleman
Frontend Architect at GitKraken
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
How do modern product designers and copywriters accomplish a recognizable voice and tone in all the expressions of the different products of their company offering? How do UX practitioners achieve a memorable visual projection that is always aligned between teams, products and applications? How do design and engineering teams manage to keep aligned and painlessly bridge the gap between visual expectations and actual implementation? How do UI developers build Agile interfaces without having to reinvent the wheel each time by leveraging a battle-tested set of components designed for maximum performance and interoperability? Last but not least, how can we achieve all this at scale given the fast pace dictated by modern times in products encompassing hundreds or even thousands of pages and screens? Design Systems have emerged as the way to go, being, in short, a complete set of standards intended to manage design at scale using reusable components and patterns.
Learning highlights
- Explore the Design Systems concept as both a strategy and a tool to ensure a consistent visual language and a common.
- Delve deep in the foundations of the Design Systems creation strategy and its biggest challenges from ideation to actual implementation.
- Learn how to set a plan for conceiving, visualizing, implementing and rolling out a Design System.
- Follow by example by obtaining a broad exposure to successful Design System implementations as the ones curated by key industry players such as Twilio, Elastic, Uber, Zendesk or GitHub just to name a few.
- Explore the nuts and bolts of the Design System development agenda: from setting visual patterns to define content styling, choosing color or typographic rules or envision general-use guidelines for common UI layouts.
- Embrace an engineering ethos to build for scale, spreading the concept to all the development stages, from visual concept to actual coding.
- Explore the most common UI components in a Design System project, and its most frequent categories.
- Learn to design for simplicity, diversity, internationalization and inclusivity.
- Build our own Design System, from visual concept to actual code implementation.
- Gain exposure to common tools of the trade in the Design Systems domain: versioning systems, monorepos, design tokens, changelogs, etc.
Course outline
15 classes
General introduction to Design Systems:
What is a Design System?
Benefits of a Design System.
A little history of Design Systems.
Why we need to learn about Design Systems.
Parts of a Design System: Design foundations, content principles, UI patterns, style themes, design process checklist, a11y rules and UI components.
What do we need to build a Design System: Skills and tools required.
Roles in Design Ops Teams: UX designer, UI designer, Front-end engineer, Build systems engineer.
Live Examples.
Deep dive into the parts and agenda of a Design System:
Getting our organization to embrace Design Systems.
Identify user groups.
Create design principles.
Define content guidelines.
Voice and tone.
Defining core patterns.
Designing roadmaps.
Implement primitives, components and providers.
Working on top of seed libraries. Pros and cons and examples.
Live Example.
Front-end foundations for Design Systems:
Component types: Primitives, Theming, Layout and Grid components, Templates, Navigation, Tabular components, Display, Forms, Charting.
i18n: Localization and internationalization.
a11y: Accessibility.
Design tokens.
Live workshop: Implementing Design tokens with Figma, CSS variables and React.
Setting a process for introducing a new entity in our Design System:
The case for the UI element.
Intended use.
Composition and interoperability with other components.
Anatomy of a UI Component in Design Systems: variants, roles, placement, boolean props.
The API proposal.
Forwarded API.
Controlled vs Uncontrolled components.
The design proposal.
Tokens required.
Animation.
Style API.
Live workshop: Discussing and implementing a labelled input component.
Workshop segment: Finding elements for our Design System.
Stock photo providers.
Design tools: Figma, Sketch, Adobe Xd.
Design tokens framework.
Versioning system.
Icon libraries.
Front-end framework: React, Preact, Angular, VueJS, Svelte, SolidJS, Lit, Polymer - Web components.
CSS-in-JS frameworks: Styled components, Emotion…
Documenting systems.
Live workshop: Testing sandboxes: Storybook, Bit.dev…
Demo segment: Students will present their Design System proposals.
Building segment I: The code environment
Picking a FE framework.
Picking a seed UI library.
Bootstrapping our dev environment.
Design tokens pipeline / CSS bridging between design and front-end.
Heading and text primitives.
Building segment II: Layout components
Stack components.
Flex components.
Vertical flex.
Skeleton component.
Building segment III: Complex layouts
Grids.
Responsive grids.
Building segment IV: Form components
Button components.
Text Input and textarea components Input labels.
Help text components.
Combo boxes.
Radio buttons and groups.
Checkbox controls and groups.
Advanced components overview: Date selector, tag input, file input, color selection, range sliders.
Building segment V: Text content components
Heading components.
Paragraph components.
List components.
Callout components and variants.
Quote components.
Inline and block code components.
Building segment VI: Navigational components
Anchor components.
Breadcrumb components.
Context menu.
Facet nav.
Pagination.
Tabs nav.
Building segment VII: Display components
Card components.
Badge components.
Alert components.
Accordion components.
Separator (vertical & horizontal) components.
Advanced display components overview: carrousel, avatar, popover.
Building segment VIII: Tabular components
Table components.
Gridview components.
Building segment IX: Overlay components
Tooltip components.
Popover components.
Modal component.
Alert dialog component.
Prompt dialog component.
Flyout components.
Toaster notification components.
Workshop segment: Promoting our Design System and creating a community around it.
Governance, support and feedback.
Creating consumer resources: User kits, changelogs, newsletters, office hours.
Promoting our library inside and outside our organizations.: Live workshops, dev events, etc.
Demo segment: Teams will showcase the component collections of their Design Systems Final words and closure.
Prerequisites
Basic English copywriting skills.
Basic knowledge of UI design via Figma, Sketch or any other UI/UX ideation tool.
Front End development skills for component development in either React, VueJS, Angular or plain vanilla HTML+CSS.
Methodology
1. In the initial phase, we will explore Design Systems as a concept. We will conduct an exploration on thThen we will take a journey along the different steps required to build a Design System of our own, paying special attention to how to set proper foundations, pick the right visual language and design and develop for scale.e case for Design Systems, their purpose, areas, components and goals. We will illustrate this with actual examples of successful Design Systems.
2. Then we will take a journey along the different steps required to build a Design System of our own, paying special attention to how to set proper foundations, pick the right visual language and design and develop for scale.
3. We will take our exploration of Design Systems a step further then by taking a more comprehensive overview of successful Design Systems maintained by key industry players. We will analyze two of them in comparison and the students, divided into groups, will build a small pet project with them, fostering a discussion about the challenges encountered in the process and the gaps found in the outcome.
4. We will face the last segment of the course with the implementation and rollout of our own Design System. The students will work in groups (as if they were an actual agency or design ops team) to design a full blown up Design System, from end to end.
5. Aside from the coursework, students will have to conduct presentations to pitch their analysis of existing Design Systems and their own Design System proposal to the other groups.
Grading
Pablo Deeleman has been standing in the intersection between corporate identity, UX management, UI design, web development and, particularly, front-end engineering for the past 25 years. With a master's degree in Marketing and Business Administration, Pablo developed his career in both USA and Europe as a UX designer, and later transitioned to UI engineering and development.
Over the past two decades, Pablo has been involved in dozens of projects combining design management, UX research and front-end planning and development, for both startups and large corporations such as Gameloft, Red Hat or Twilio. As a Frontend Architect at GitKraken, Pablo leads front-end initiatives within the GitKraken Labs team, working closely with cross-functional teams to tackle complex challenges, improve software architecture, and explore new technologies that accelerate innovation, ensuring that GitKraken’s tools meet the evolving needs of over 30 million developers globally.
See full profileApply for this course
Design Systems for Interactive Applications
by Pablo Deeleman
Total hours
45 Hours
Dates
Nov 28 - Dec 16, 2022
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.