In my second year of computer science study, our web development teacher gave us a home challenge which is creating a simple dynamic web application with HTML, CSS3, JavaScript, PHP, and MySQL.
In fact, I was not a big fan of PHP and MySQL because I like to show people what I made and by nature, people love the appearance of the thing. Most of the time I was looking for a way to let my classmates and our teacher say Wow! How could you build it? Thank you to JQuery of course.
In the past, before I start any web project, the first step I get used to doing is browsing a template that fits the domain or the personality of the application. I was spending sometimes a day making the decision.
Obviously, finding the right template was not a thing to think about it, but customize and edit the source code based on my needs was the hardest challenge for me.
Before I download the template, I was checking the number of pages, the weight of each page, the structure of CSS3, and the complexity of JavaScript code. Indeed, I was facing a big problem with extending the template by creating my customizable pages that look consistent with others even I use its CSS3 classes.
I was asking myself:
→ How long will that page take to build?
→ How will it look consistent with other pages?
→ How can I extract the components and build a new page with them?
I was considering the page as an isolated, uniform thing. The fact is the components or the elements that make that page consistent is the uniform, isolated, and quantifiable thing.
The image above describes my mindset about web elements. On the left, It's the monolithic design and in the right, it's the modular design.
Modular Design
Brad Frost released a book called: The Atomic Design. When you read this book you'll discover how Brad Frost explained the web design inspired by the world of Atoms. What're matters for us now, is how to create modular user interfaces that become maintainable in the future.
Making your UI modular means breaking the large and complex visual explorations into smaller chunks, called elements or components, which save us time and make the user interfaces more consistent.
With the rise of new methodologies for architecture CSS3 such as BEM, OOCSS, and SMACSS, and the modern frameworks such as Bootstrap, Semantic UI, and Foundation, designers and developers spend less time to design scalable and maintainable user interfaces.
So these frameworks address the need of rapid prototyping by providing customizable, well-tested, and ready-to-use components.
However, even these front-end frameworks provide a specific solution for speed up the development, the end-user interface will be the same for different brands!
This is one of the cons of these frameworks, because everyone uses the same components and layouts to design the page. Imagine Facebook, Amazon, and Apple use the same UI framework to build their user interface, you'll find the same UI with different colors!
Furthermore, creating customizable components using these frameworks means following their conventions, code structure and styleguide. So the developers need to understand the architecture and the API of these frameworks which means invest more time for learning.
Design Systems, The future of UI development
Do you know Material Design? If yes, this is what I'm talking about.
Alla Kholmatova said there's not a standard definition of “design system” within the web community and people use the term in different ways, but she defined it as :
A set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. Patterns are the repeating elements that we combine to create an interface: things like user flows, interactions, buttons, text fields, icons, colors, typography, microcopy. Practices are how we choose to create, capture, share, and use those patterns, particularly when working in a team.
So instead of consuming built-in UI patterns from Bootstrap, you'll design and develop your own patterns by creating your own standards and style guide. If you're deciding to create a social media app, for instance, you'll need to create your own like, comment, and share components that distinguish your application from your competitors. Also, if you'll create Data Visualization platform,
charts, progress bars are the most potent component you need to build your user interfaces. The idea is instead of creating templates each time, you'll create your own UI System that empowers you to build several products by influencing brand factors. These design patterns will create a mental model for users and customers.
But what are the benefits of design systems?
Before we use any technology or approach we need to know its benefits. Let’s take a look at the many ways a design system can be a much-needed painkiller for your growing pains.
Consistency:
Standardized components used consistently and repetitively create a more predictable and easy to understand the application. Standardized components also allow designers to spend less time focused on style and more time developing a better user experience.
faster:
When your product grows, you need to delight your customers by delivering new features. In the past, this means producing new code and start the development from scratch. But with a design system in place, you need only to iterate and integrate your UI patterns together to develop the feature.
Quick iterations:
The design system reduces effort from hundreds of lines of code to as little as a few characters. This makes iterations quick and painless, and experimentation much faster.
In conclusion, design systems are not a fad or even an untested hypothesis. For the design to find the scale necessary to match the rapid growth of technology, component-based design and development is a proven and dependable solution.
I've tried to show you the power of design systems and their impact on user interfaces. If you want to learn in-depth about the design systems, I'd recommend these books:
→ Invision Design System Handbook
Top comments (2)
I agree with you. We recently switched to this. What do you think about low budget projects though? Does it work with such projects?
Yes. You don't need to build a whole design system but you can build and use what you need and scale step by step. You'll not build MATERIAL DESIGN.
I recommend using StoryBook or Bit for rapid development and documentation.
Just invest time in Design Principales if you have a vision for Product Lines.
It's easy to start a DESIGN SYSTEM but it's hard to scale it.