Table Of Content
This UX design framework was presented by Brad Frost in his book titled “Atomic Design”. According to this methodology, when we create design systems, we should think of them as a set of design elements, serving the same function as atoms in a complex compound. These design elements of UI elements join together to create molecules, which then go on to build organisms. UI/UX designers can then use these organisms to create templates for a design system, serving as a standard for all the pages that can be built on these templates. Since joining Salesforce, she’s helped create the ultra-successful Lightning Design System and helps manage their growing design system team. Jina’s story is not an isolated one; almost every guest Anna Debenham and I interviewed on the Styleguides Podcast discussed how helpful their public-facing pattern library was for attracting talent.
Show that it’s useful
While those solutions help speed up development, the resulting experiences end up resembling those sci-fi jumpsuits. When everyone uses the same buttons, grids, dropdowns, and components, things naturally start to look the same. If Nike, Adidas, Puma, and Reebok were to redesign their respective sites using Bootstrap, they would look substantially similar. Sure, each brand can modify and extend the default look and feel, but after a while customization means fighting the framework’s given structure, style, and functionality. The book will conclude by recapping why thinking in a more systematic way is becoming increasingly necessary. I’ll talk about the merits of atomic design, and remind people how they can get started.
Visually repaired
In this article, we introduce the concept of the atomic design system along with its components. We also explore the benefits of such a system and why modern organizations may feel a need to adopt this practice. Basic building blocks of matter, such as a button, input or a form label.
Atomic Design: The Book
After the initial reactions and compliments die down, a key stakeholder speaks up. Once the kick-off meeting dust has settled, a UX designer goes away, puts their head down, and eventually emerges with a giant PDF document detailing the entire experience. This monolithic wireframe document gets passed around to the project stakeholders, who sign it off after some feedback and suggestions. To be clear, I’m certainly not implying print design is easy or one-dimensional; the world of print is steeped in nuance and craft. What I am saying is that the bidirectional and interactive nature of the web adds many more dimensions to what constitutes good design. One way to approach a Lego project is to simply dump the pieces out of the box onto a table, roll up your sleeves, then start building your creation.
There’s no doubt style guides help teams effectively get things done in the here and now. But much like a fine wine, style guides increase in value over time. The beautiful thing about interface design systems is that they can and should be modified, extended, and refined for years to come. The language of atoms, molecules, and organisms carries with it a helpful hierarchy for us to deliberately construct the components of our design systems. But ultimately we must step into language that is more appropriate for our final output and makes more sense to our clients, bosses, and colleagues. Trying to carry the chemistry analogy too far might confuse your stakeholders and cause them to think you’re a bit crazy.
In addition to look-alike issues, these frameworks can add unnecessary bloat to an experience. It’s fantastic that frameworks provide plenty of prebuilt components and functionality, but a large percentage of designers and developers won’t adopt every aspect of the framework. Unfortunately, users still have to download the framework’s unused CSS and JavaScript, resulting in slower page loads and frustration. Frameworks like Bootstrap allow designers to get ideas off the ground quickly, rapidly create prototypes, and launch sites sooner. And in case designers do get stuck, these frameworks’ communities can provide helpful support and advice. Establishing design atmosphere early is critical to a project’s success, which is why designers have found ways to facilitate these important conversations without having to generate full mockups.
The role of comps in a post-PSD era
Each individual piece of an interface contains its own unique challenges and opportunities in order for it to look and function beautifully across many screen sizes and environments. Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate interface systems. In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule. Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
UX Booth
This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way. One of the key points on the atomic design principles checklist is the collaborative approach to design. Therefore, it is important to develop a culture of collaboration in the organization. This also requires good project management skills so that everyone knows what is expected of them and when to deliver the results. For example, the website header needs more molecules and organisms to create a proper website layout.
New skills in web design - Creative Bloq
New skills in web design.
Posted: Fri, 17 Jun 2016 07:00:00 GMT [source]
Once again, the answers to these questions will largely depend on your organization’s size and structure. The answers to these questions will very much depend on the size and setup of your organization. You’ve proved the value of your initial design system and presented a roadmap for how to make it even better.
Putting your style guide behind a login or firewall reduces visibility and adds an unnecessary burden to your team and partners, which limits the resource’s effectiveness and potential. And the fears about giving away your trade secrets are completely unfounded. It should come as a surprise to no one that people tend to gravitate towards attractive things. A big part of making a style guide a cross-disciplinary resource is ensuring the container that houses your pattern library and other documentation is good-looking, inviting, and easy to navigate. Keeping a pattern library in sync with production environments requires sharing code in a smart, scalable, and maintainable way.
The end goal for this project is for Atomic Design to exist as a physical book. While I mostly operate in the digital world, the prospect of creating a physical book is tremendously exciting. The idea is that the printing and shipping costs will be financed through preorders and eventual sales of the e-book.
But how do you remove patterns from the design system without pulling the rug out from under people relying on those patterns in their applications? To address this issue, Salesforce created a neat utility called Sass Deprecate that flags patterns that are heading to the chopping block in the near future. Through some clever use of Sass variable flags and styling, the maker team can give a heads-up to users that a particular pattern is being deprecated, and recommend an alternative pattern instead.
If we go back to the website example, the template created for the home page of an eCommerce website now needs to have the final design elements in the appropriate places. All the atoms, molecules, and organisms combine together to perform one function, i.e. to create a useful and usable experience for the users. These are the simplest yet highly important design components that can join together in various ways to be a part of big structures. The design of any robust and efficient system begins with these basic atoms. The best example of an atom is a simple UI design element, such as a button.
When it comes to the design of digital products and services, the interactive nature of the final design is extremely important for the user experience. A modern design is always composed of complex UI components that need to be presented in a way that does not overwhelm the target audience. This is equally important to the success of the atomic design framework. When creating atoms and molecules, the ease of use must always be kept in mind. The user interfaces thus created should be interactive and also help the users accomplish their tasks with ease. The most important aspect of the atomic design is its starting point, i.e. gathering the tiny atoms that can serve as the building blocks of the entire system.
Believe me, there is plenty of front-end work to do without knowing a thing about the project’s information design or aesthetic direction. In addition to setting up the development environment (such as preparing Git repositories, dev servers, CMSes, and development tools), developers can dive into code and begin marking up patterns. But what should you be marking up if you don’t know anything about the design? No doubt other tactics exist to establish aesthetic direction for your projects, and which techniques you decide to employ will vary from project to project.
No comments:
Post a Comment