Designing Systems rather than Pages
If you are a designer or developer of a web/apps, have you ever heard the quotes below?
We’re not designing pages, we’re designing systems of components.
Stephen Hay
That quotes came up from the frustation of the web/apps development lately. Its complexities and requirements are increasing. Everything became dynamic, complex, data-driven and sometimes hard to measure. That quotes is the solution that become trends and best practices in the web/apps development. Let’s dive deeper on it.
The end of the Web Page era
With the increasing complexity of web/apps development, we often struggle proposing cost and timeline estimations when faced with these questions:
- How long our single page website will be finished?
- I want to build 5 pages product website, how much it costs and how long it will be developed?
- Is it possible to build a website for our millions products for the next campaign period?
We are required to deliver the product as fast as possible, especially in this agile era where time-to-market become important metrics in the product development. Sometimes one page website require 3 months timeline because of its complexity and 10 pages website just require 2 days because it’s so simple. We can’t measure the timeline & costs based on the total page anymore.
Another problems is website page that have so many state. It has different design when user not logged in, logged in as buyer/seller/admin, have deposit balance, have user-segmented promo, etc. Maintaining all the design & code complexity based on Page can lead to many problems.
When building many pages, we often have to create the same section on several pages repeatedly, even if there is only a little difference. If there’s a revision on those section, we have to change it on all pages. For example, we have a List section on majority of our pages. After review process, we have to change the margin of the List and it requires us to change all the Page design file/code to adopt the requirements.
Because of that, we feel that the Page approach give us so many problems and breaking it into something smaller and reuse it in all of our web/apps will be a better approach.
The concept of modularity
Modularity is not something new in human history. In the Industrial Revolution era, Henry Ford disrupted the car manufacturing by implementing modularity concept on his assembly lines. Earliest cars and components were individually crafted so that it has several problems related to safety, maintainability and high-cost production. Henry Ford found that creating standardized parts & components in one assembly process and assemble them when building the final product can resolve the problems and give so many advantages. And now, the concept of modularity is used by majority of car manufacturing company to build their product.
Modularity is also considered as a best practice approach on Software Development. That’s why we know the concept of Reusability in Object Oriented Programming.
Modularity can also become a good concept when we implement it on Product Design. Imagine that you have a full set design component that you can just drag and drop, choose a design variant/theme, adjust its positioning, and finally build and deliver the semi-functional prototype automatically in no time? That will be AWESOME. With a mature approach, you can even deliver the minimum viable products to be tested on your users.
That concept is not a dream in a perfect world anymore. People realized that rather than using page by page approach, they choose to define what design components that will be needed on the project. After that, they create the library and build the page based on that library. They called it a Design System approach.
Designing a System
Based on Brad Frost’s Atomic Design, a good design systems are style guides, which document and organize design materials while providing guidelines, usage, and guardrails. It includes brand identity, writing, voice and tone, code, design language, and user interface patterns.
With a good design system, you can reuse all the design components in your product development process. It will reduce your product time-to-market. You don’t have to focus building the detail of the design components. You can be more focus on the user requirement, product testing, market validation and other business related things. When there’s an issue on the design components, you can quickly fix the source and all the pages that using the components will get the fixing patch.
This approach is very good for product development, but sometimes there are several people that will say these to you:
- We don’t have much time to create the library. We have to deliver it as fast as possible.
- That library is just a nice to have. We can build it later.
- We don’t have any free developer & designer to do it. Everyone is so busy.
To overcome those statements, you have to convince that Design System is an Investment. It’s a machine that helps you build the right product faster.
The hard part is building the machine that builds the product.
Dennis Crowley
Design System has different product lifecycle against website Page. In the past, you often find a company website must be rebuilt from scratch again for design refreshment or revamp. Design System is different. It will grow and become mature. When you want to have a major design change, you can change it in the existing Design System. As far as you change your design, you always still have a basic component inside it, such as buttons, labels, lists, forms, etc. So, you will never have to rebuild your Design System. It’s a good investment on your business isn’t it?
So, if you are interested to invest on Building a Systems, rather than Pages, you’re on the right track. If you want to learn deeper, you can read Brad Frost’s Atomic Design. It will grow your Design System mindset. Good luck and let’s make the web/apps development better.
