As the craft of Web design continues to evolve, recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages is very much required. Software designers are more interested in what interfaces are comprised of and how to construct design system in more methodical way.
Designers could relate the interfaces with atomic design where all matter is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.
Analogous to atomic design, Component based design is used to split UI into smaller and manageable parts with clear names.
Morph Solutions wanted their Keep Note web application to be developed by decomposing the page using Component based design approach.
Decompose the given keep note web page into six distinct groups- identity, elements, components, composition, layout and page using Component based design system. Use gallery.io to identify these distinct groups.
- Ensure you have google account to access gallery.io website
- Ensure you could see all the images in gallery.io website
- Ensure you have basic knowledge of adding/editing comments to complete the exercise in gallery.io
- Select each image and identify reusable elements, components and composition across multiple pages
- Give meaningful names for the identified groups
- Select the identified groups and given proper comments in gallery.io
- Check that numbers are attached to each identified group you have selected and commented
- Give access to your google account to the evaluator to view the images created after decomposing to evaluate your exercise