proposing is that we keep a list of components like this. Whichever are finished developing, we mark them as completed. A portion of these components are marked, as we are also using an external library in here.
“system” mean? Here’s a set of elements. Think of them as building blocks for more complicated things. If we get these perfect, we’ll be able to make the more complicated designs better. And we’ll be able to make them efficiently, in other manners too.
of the existing methods Every page made from scratch Using Component Library (mui) only Not much scope for branding Inconsistency in design-development Long development times Short development time
from scratch Using Component Library (mui) only Not much branding Inconsistency in design-development Long development times Short development time This system
look up the components that are marked, Because designers will know what components developers already have made, they can make designs that utilise the already made ones more. How does this help designers?
an example A component made for the listing page. - Since this is quite an important component of the website, we don’t mind if a lot of developer time goes into this. - So the designer can put this into the molecule section of the design system, — i.e. it’s ok, if it’s not made out of reusable components. - And because this is in the molecule section, the developer, looks at this and understand that they’ll have to make this out of the atomic elements. (like the typography and and image etc.)
component, is places in the “organism” section of the file, So developer will look for the subcomponents it might be made of. And probably will find them. Also, for a one off, page like this, the designer should design it from already present molecules.
for documenting which layouts are allowed: The areas in the pink stay the same, as the width of the screen changes. After looking at this, the designer knows, they can design within these layouts, and be assured that their design will appear correctly, when developed. And the developer can feel assured that there are only a few layouts that they have to perfect
for documenting which layouts are allowed: The areas in the pink stay the same, as the width of the screen changes. 2. This way the designer doesn’t have to design for different widths all the time, they can just do it for one size and mark “resizing logic-1”, “resizing logic-2” etc.
done Progressively. Because we are not gonna stop using the MUI5 components, we can, just implement a few elements from this. Even delete the ones that we don’t see getting used much.
sonatard
aki_iinuma
rasagy
axbom
cassininazir
sarafernandez
inesmontani
davetheseo
addyosmani
auna
honnibal
ianozsvald
