Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

design sytems part 2 #56

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

design sytems part 2 #56

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions src/session-summaries/design-systems-part-2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# DESIGN SYSTEMS (part 2)

## Front Matter
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Front matter is a syntax for adding metadata to markdown documents. I gave you an example format in the closed PR. It begins with three dashes and ends with three dashes. The metadata is the key-value pair in between.

Here is a sample.

---
hosts: host names here (comma-separated)
summarized_by: your name here
Other fields here
---



## WHAT TO LEARN

### In this session on design sytems(part 2), the following are the things you would be learning:

* **What a design system is and why you need it.**

* **Benefits of having a structured design system.**

* **Different levels of the design systems.**

* **Aspects of design systems.**

* **The things to consider before choosing a particular design system.**

* **When to roll-out your own design system.**


## Discussion panel

* **Hosts**: Segun Ola, Valentino Ugbala
* **Guest**: Inumidun Amao
* **Summarized by**: Emmanuel Aiyenigba (@EmmanuelCoder on twitter).


**[Watch the video here](https://frontendweekly.dev/sessions/design-systems-part-2)**.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not necessary because the summary would be displayed alongside the videos



### What a design system is and why you need it.

A design system is a way to organize UI and give a constraint for everyone to follow so that there is consistency in the design. A designer can't design for every possible scenario but have to infer for some situations

Not everybody has a eye for design but there are certain strategies to adopt in creating and implementing a good design. Any project that isn't a "toy project" will need a design system and you must come up with one early enough.
Design systems help in creating modular components which is very important for projects with the intent of serving the general public.


### Benefits of having a structured design system

* **Consistency**

* **It gives a confidence to your customer that you are selling a trustable product. If things are buggy or not professional enough people tend to lose interest in it.**

* **A good developer experience.** Yeah, to have a good developer experience while building products, it got to have well structured design system. It gives you an insight and expectation as to what you are building.

### Different levels of a design systems.

#### What goes into making your own design systems?

Alot of communication between the design team, frontend team,product manager, and backend team. You can't decide to do it alone without carrying everyone on the building and management team along. Each have a role to play in the understanding and implementation of the design.

#### Aspects of design systems.

There are basically 2 aspects of design systems. One meant for solely the design team and the other meant for the people implementing the design. The one for the design team contains guides to actualizing the design like grammer, tone, typography, colour pallet, colour combination, visualization and many more.
For the frontend part, there is the individual component, dialogue and lots more.
The language used and the personality of your products is important to scaling your products. You should endeavour to build your product in such a way that it communicate to users in very simple, interactive and understandable terms.

There should be a performance benchmark, that is, the minimum performance level of the product you are building especially when the product is for commercial or public use.

### What are the thing to consider before choosing a design system?

* **Community support.** Community support is important to fixing the issues you will encounter while building your design system and there is no better way to get it fixed than using the community. Therefore, a growing or large community base is important in selecting a design system because you don't want to spend 2 months trying to fix one bug.

* **Customizablity.** Its good practice to check for the availability of your needs in your design system of choice or the availabity of a third party that offers it. Every product has a need and it is your duty to select the design system that best caters for its need.

* **Themeablity.** You'd want to go for design systems that allow you customize things like base-colour, font, colour-fitting and many other need to your desired taste.



### At what point would you roll-out your own design system instead of embracing the existing one?

Basically, when there is no existing one that suits your current need then you may have to roll-out one to fufill your current purpose.
You must know that the tons of design systems we have today, examples, Material UI, Chakra UI, React-boostrap, styled components e.t.c where all created to meet a need. The deficiency of the earliest ones led to the creation of new ones. So, the best point to roll-out your own design system is when the systems on ground cannot actually give your product the desired feeling and experience.



## Conclusion
Obviously, there are not just a few things but alot of things to consider in selecting, creating and using a design system especially for important products. We hope this session has opened you up to the need for a design system and how to go about it.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid using terms like simply, obviously, easy in technical documents. These are very subjective terms. What's easy or obvious to one person due to extensive experience might be really difficult for another person.

**[Watch the video here](https://frontendweekly.dev/sessions/design-systems-part-2)**.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's no need to add the video URL here. The summary would be displayed on the session page


You can reach the host Segun Ola on twitter @segunolalive, Valentino also on twitter ``@_teenoh_`` and Inumidun on instagram @criedblack.

Feel free to share your thoughts.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove this.