Welcome Back!
Where we left off - GitHub
What we're doing today:
- System Design
Breaking a Design into a Component Tree
Like I said in part 1 of this series, I created the design for the website using Figma:
We can develop a diagram using Draw.io a free Google developed tool for diagrams, similar to LucidBoard and MS Visio.
Knowing the UI design of what we're trying to make allows us to visually translate the page into components. To do this we'll work from the higher level components down to bodies of text.
For my design we'll start with the whole App:
Within the App we can see that there is a vertical main body. We can call this the Body component:
Within the Body there are multiple sections:
- Header
- About Me
- My Skills
- Portfolio
- Blog
- Footer
We can then create components named after these sections:
The Header, About Me, My Skills, and Footer components are all non-complex and only contain bodies of text or simple buttons therefore require no further detail. However, the Portfolio, and Blog components have further detailing we can achieve.
Let's start with the Portfolio component. Within the portfolio we will have multiple projects, so we'll create a Project components. Within each Project it will have an thumbnail, a title, and a description, these can be included within the component and so will not need further detailing.
Similar to the Portfolio component the Blog component will contain posts, so we'll create a Post component. The Post component will contain a thumbnail and a title.
Before we finish up there's one detail we missed. There's a little burger menu in the top left of the page. Let's find this on the design and take a look:
How can we split this into multiple components? Well we can start by identifying that it's not in the Body component so we'll put it under the App component. With a few touches the new component diagram looks promising:
However, the Menu component will contain some lower level components. We can see from the design there is are Navigation and a Social component, so we'll add this to the diagram:
The Final Diagram
Thanks for reading, please leave feedback or any questions in the comments. Next time we'll be building the project to match the component diagram and we'll start filling out the application.
Top comments (0)