Skip to main content

Do’s and Don’ts in Atomic Design

Atomic Design is an efficient method for the iterative development of extensive websites. The design approach introduced by Brad Frost in 2013 is similar to the agile development of the web site. The basis of it is modular, dynamic design systems composed of the five layers "atoms", "molecules", "organisms", "templates" and "pages".


Atoms, including labels, input fields, and buttons - are the basic building blocks that designers need when they create pages. All stakeholders involved in project progress can logically follow the process. This technical, code-focused development approach places particular emphasis on the subject of user experience.


Atoms can include more abstract elements such as palettes, fonts, and even more intangible parts of the interface, such as animations. As the atoms of nature are quite abstract, the individual atom is not so useful, while they are very suitable for reference in the context of a schema library, so you can easily see the global style of the show.
Molecules - When the atoms start to be combined together, things will become more interesting and real. A molecule is composed of a group of atoms, the smallest basic unit of complex elements. These molecules have their own functional properties and form the backbone of our design system.
For example, a form tag, an input box, or a button alone can not complete a user function, but when they are grouped together to form a menu, they can now complete a task such as a search.


Organization - Molecules are interface blocks that we need to deal with to realize local functions. Then we can combine these molecules to form the organization. The organization is a relatively complex, independent interface function block formed by the combination of a group of molecules.

DON'TS

Static workflows
Often agencies transfer print-based workflows to the development of websites. Static media such as books or posters require static grid and pattern – but the permanent interaction between medium and user in digital, interactive formats requires sophisticated action-reaction loops.

Surrender to the pressure exerted by customers
In the Atomic design approach, digital designers work holistically from the small to the large. A final layout is finished therefore relatively late. Therefore, customers lacking of capability in abstraction should not force him to present a finished design.

Sameness
Outstanding front-end frameworks such as Bootstrap or Foundation are the reason why websites are very similar to each other. Even the smallest elements (eg. Microinteraction) should be branded specifically , otherwise, Websites may have semblable appearances.

DO’S

Use Atomic Design in complex projects
The more extensive a web project is, the more useful it is to work according to the Atomic design principle since it requires a lot of preparation time. A one-pager is not worth the effort.

Go directly into the coding
Designers and developers should implement corrections of concept and design of stakeholders directly in the code, rather than modeling fixed wireframes and Photoshop layouts, which requires the modules to be reused at any time. Wireframes of this kind can be discussed more objectively with the customer, because one can show specifically how users perceive the architecture of information and interact with it.

Test without visual elements
The UX-Testing with "gray blocks" prevents you from negative effects of visual details. Only after the release of the coded wireframes, can it make sense to develop the layout with the atoms, molecules and organisms defined in the frontend guides. In addition, "gray blocks" prototype can be produced by some simple and quick prototyping tools.

Test early
It is recommended to check UX concepts as early as possible in the code. Positive side effect: This automatically develops a better understanding of programming limitations and challenges.

Read more:

Comments

Popular posts from this blog

Top 15 UX/UI Designers You Should Follow to Flow Out Inspiration in 2018

As is known, design is a rather broad and hard-to-define term. There are a wealth of different responsibilities encompassed by the term designer and design-related roles which have been existing in a wide range of areas, varying from print (publications and magazine) to industrial design (furniture and cars). With new design roles emerging in the industry, job titles like UX/UI designers seem to be confusing for both experienced and uninitiated designers. Before diving deeper, let’s have a quick look on the difference between UX and UI terms. User Experience (UX) designis a concept that has many dimensions and primarily concerned with how the product will feel. To solve a specific user problem, a UX designer will explore many different approaches, as any given design problem doesn’t have one single right answer. By identifying verbal/non-verbal stumbling blocks, UX designers refine and iterate to make the “best” user experience. Here is how Laura Klein (the author of UX for Lean Start…

13 Must-Have UX Tools for Designers

What are the UX design tools you use to create flowcharts? What are the best tools for wireframingprototypinguser testinginteraction design or team collaboration? There are an overwhelming number of UX tools out there, and finding the best can be mind-boggling. If you’re looking for UX design tools and UX wireframe tools to make your life easier, this post is written specifically for you. To help you create apps/websites with high productivity, we explore 13 amazing UX tools and best prototyping tools you should have for 2017. UX tools for mind mapping: MindManager
A mind map is a diagram used to visually organize information. It is a great way to brainstorm, make a plan, or turn ideas into the steps needed to make it real. MindManager is one of the best mind mapping software application developed by Mindjet. The digital mind maps can be used a “virtual whiteboard” for brainstorming, managing and planning projects, compiling research, organizing large amounts of information, an…

5 Top UX Design Trends For 2018

With the rise of sophisticated technologies and intuitive website design, user experience has never mattered more. You need to keep in mind is that web design is not about implementing various innovations to your website only, but also about providing your visitors with exceptionality and greater utility. This is exactly why this field needs to be constantly changed and tailored to your users’ needs. Here are top 5 trends that will shape the ever-changing UX design world in 2018. 1. A Greater Influence of Content on UX Design image source: https://www.awwwards.com/sites/the-snowman-movie-w... I have recently discussed the major UI design trends for 2018, from borderless display to cards. Apart from looking truly awesome, these innovative solutions work together towards reaching a common goal- making your content easily digestible and visually appealing. Today, the emphasis is put not only on the quality of content, but also on its visual elements. Put simply, web designers are striving…