Pitched for a new/revamp Design Language System and got approved 🥳 

<Girls4Tech>

Introduction to programming
Girls 4 Tech was born from a partnership between EBANX and Junior Achievement, in 2018, with two main purposes: sharing knowledge and arousing interest in programming for women. Based on video lessons taught by EBANX developers, with evaluations, support materials and a forum for debates among the students, the online course was offered through an online platform, on demand and is divided into 3 modules.

Module 1 - Introduction:

• Brief history of women in computing
• Why learn programming?
• How a web page works; Short story about HTML and CSS; HTML and CSS concept

Module 2 - HTML: Introduction - Structure:

• What is HTML? What is a TAG? Initial structure of an HTML file
• Adding elements:
  • What is TAG HEAD?; Operation of TAG Title; Operation of the TAG META; What is DOCTYPE?; What is TAG BODY?; How to add titles to a page (TAGS H1, H2, H3); How to add paragraphs to a page (TAG P); Formatting TAGS; How to make text bold (TAGS B/STRONG); How to make text in italics (TAGS I/EM); How to make text big and small (TAGS SMALL/BIG); How to make text highlighted (TAG MARK); Example of opening and closing tags (correct and wrong example)
• Adding links and images:
  • How does the TAG IMG work; Attributes of TAG; Alt, Title, SRC; How does TAG A work?; Attributes: HREF; TARGET 
• Adding Lists:
  • Ordered lists (TAG OL); Unordered Lists (TAG UL)
  • Definition lists (TAG DL)
• Positioning of elements:
  • Flex; How to add tables (TAG Table); TR; TD; THEAD; TBODY; TFOOT
• Table attributes:
  • Colspan; Rowspan; Alignment; Border

Module 3 - CSS:

• What is CSS?; Initial structure of a CSS 
• Selection attributes:
  • Class; ID; Elements; Cascading selection. 
• CSS and HTML:
  • Inline CSS; External CSS; Internal CSS 
• CSS Properties:
• How to change font type; How to change font size; How to change font weight; How to change line spacing; How to change font color; How to change text alignment
• CSS Properties in DIVS:
  • What is a DIV?; Width/height; Margin; Padding; Background-color; Border
• Image manipulation:
  • How to add filters
• How to Rotate CSS Images in Links:
• Properties; Link; Visited; Hover; Active; How to change the cursor

I participated in the pilot class of the Design System & Ops course, at Meiuca. It's always good to improve your knowledge and even more when you identify with the course's methodology, because of the passion for design and the sparkle in your eyes when it comes to design system. Using Airbnb DS as a reference, I was able to learn more deeply some steps to analyze during modules:

• Concepts, principles and Setups
• Discovery
• Design & Development
• Hand-off
• Design Ops: Documentation & Governance

There's one thing in common with building digital products: they need to scale consistently to deliver the best experience and put as little effort as possible into optimizing resources in the operation.

For that to happen, design and development need to design in concert. This need changed the profile of designers, who were focused on technique. Today designers need to look more at processes. Understanding how all this works is a requirement for anyone who wants to be an indispensable designer in the technology environment.

Gave a conference talk on “Discovering Principles for Design System Tools” at the code.talks conference 2019, together with Marius Wilms.

Writeup of the talk: https://christophlabacher.com/notes/building-a-design-system-workbench

Currently i'm working on a ui/ux design project for Ngompi, in this project i'm working on a product design for a freelancer platform.

Design System 

It's been two weeks now - and my first impression of the Design System Bootcamp at Memorisely? Just brilliant. ✨

Sure, anyone can design components and variants, and now make the clickable prototypes in Figma even more realistic with interactive components. But that is not the whole story.

Design systems can become complex when a product is in hyper-growth mode. But a design system can also make sense for "normal" products. Why?

A design system is a collaborative project that not only UX and product designers work on, but also developers, the product team, marketing and content, and further stakeholders.

📒 With a design system there is a single source of truth that everyone can use for their work, comprehensive documentation and clear guidelines that affect the product.

I'm glad to have the opportunity to learn and expand my knowledge of design systems with designers from all over the world and to get valuable tips from Luke O'Sullivan on what really matters in a design system. 

I'm looking forward to the next three weeks when we will dive into Figma. 🚀