DEV Community

Andrew Luchuk
Andrew Luchuk

Posted on

Wireframes and Component Hierarchy

Welcome Back! It’s been a little bit longer than I planned between my last post in this series and this one, but I should be back on track soon. This series picks up where the last series left off:

Wireframes

Wireframing helps developers by laying out the look of a UI in advance. Knowing how the UI will look is not only useful for making sure the UI is clean and usable, but also helps developers by enabling them to identify which parts of a UI can be reused.

I’ve created a few basic wireframes to give a simple idea of how the UI should be laid out when it’s done. As I’ve mentioned before, I am by no means the world’s best frontend engineer or UI designer, so I tried to make the UI look roughly like it is made up of Bulma components, which I’ll be using for the frontend.

Users will be greeted with a sign in page:

Sign-in Wireframe

If they do not have an account, they can click the sign up button to get one:

Sign-up Wireframe

Once logged in, users will be greeted by a list of posts, and after clicking one, they will see the post detail page:

Topic Wireframe

If there are replies to the topic, it will look like this:

Topic With Reply

Finally, when replying to a post, users will see something like this:

Reply form

Component Hierarchy

Once the wireframes are finished, we can begin to analyze the UI to identify reusable components of the UI. The UI analysis process is fairly straightforward. Essentially, the developer takes each part of the UI and breaks it down into components that can't be broken down any further.

I'm not going to go through the whole process here because it would take many words to describe something which is much more easily understood through images. If analyzing the UI is new to you, then the React docs have an excellent tutorial to help you understand the process: Thinking in React.

I’ve gone ahead and created some simple charts to demonstrate how the components should work together. Identical names indicate that the component is to be reused in multiple places. Finally, since we will be using redux to share state across components, we won’t need to worry about making sure state flows in an easy way.

For the Login page, the component tree will look something like this:

Sign-in Hierarchy

The sign up page components:

Sign-up Hierarchy

The main page hierarchy:

Main page Hierarchy

Finally, the topic page is going to be the most complex page with a hierarchy something like this:

Topic page Component Hierarchy

Each reply is going to be made up of a few more components, much like the topic:

Reply Hierarchy

I know it’s a lot to take in, but you won’t need to remember this, it just gives a skeleton around which to build the react page.

What’s next

As promised, this post starts a new series (which is itself part of a larger series) covering the frontend of our mini forum application.

Here’s the first post of the series:

In keeping with the plan laid out there, this series will cover the following topics:

  1. Wireframing and component Hierarchy (this post)
  2. Writing tests for components and building the basic components
  3. Querying the backend with GraphQL
  4. Tying all the pieces together to complete the frontend.

Unfortunately, because I’m working on another project at the moment, I may not be able to post in this series every week, but I’ll do my best to keep on schedule.

Thank you all for reading, and I hope you find it helpful!

Top comments (0)