Every UIUX designers follow Atomic Design System Guideline | 2019 Trends

https://ui8.net/users/ui-ux-designer
The modular design encourages us to think and design user interfaces and user experiences in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, the design process starts by first understanding the way the UI system is structured and which components can be used to create the user flow.
#UxDesignMaster #MobbinDesign #UxdTraining, #UxMaster

A to Z Material Guidelines: http://bit.ly/2vDUt8a
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

📚 UI/UX TUTORIAL PLAYLISTS

My Best UIUX Videos: http://bit.ly/2M9TkzA
UX Process: http://bit.ly/2OOnKpm
UX Process | Step by Step: http://bit.ly/2LYww6C
Colour Theory & Typography: http://bit.ly/2M1CbJf
Design Tips & Tricks: http://bit.ly/2neIr1k
UX Flow & Process: http://bit.ly/2nj7r7C
UI UX Interview Q&A: http://bit.ly/2nfwzvX
UX Design vs UI Design: http://bit.ly/2MpEKAE
UX Design Training: http://bit.ly/2OQ1HP1
UX Design vs UI Design: http://bit.ly/2M1FvUJ
Motivational videos for Designers: http://bit.ly/2M1FvUJ

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🙂 FOLLOW ME

UI8: https://ui8.net/users/ui-ux-designer
Creative Market: https://creativemarket.com/users/uxde...
Uplabs: https://www.uplabs.com/uxdesignmaster
Linkedin:   / uxdesignmaster  
Facebook:   / uxdtraining  
Twitter:   / uxdesignmaster  
YouTube:    / uxdtraining  

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

📚 TUTORIAL PLAYLISTS

Adobe XD: http://bit.ly/2njMs4y
Sketch App: http://bit.ly/2KAksTr
Material Design Guidelines: http://bit.ly/2Mor34W
A to Z Material Guidelines: http://bit.ly/2vDUt8a
iOS Design Guidelines: http://bit.ly/2vJpuro
Adobe Photoshop: http://bit.ly/2OPMAW7

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

🤟 MY ONLINE DESIGN PORTFOLIO

📹 Behance: https://www.behance.net/ChhoteLalBabu
🖥 Dribbble: https://dribbble.com/uxdesignmaster

Atoms
In scientific terms, atoms are the basic building blocks that together make up matter. When you translate that over to a website design methodology, they serve a similar purpose. Atoms act as the basic building blocks for all of your website design efforts. While they aren’t design elements that can stand alone, together they create different elements that are used throughout your website’s layout. Atoms can include any of the following:

1. Fonts
2. Color schemes
3. Buttons
4. Form fields
5. Logos
6. Inputs
7. Labels

When following this methodology, a lot of designers create their atoms and compile them in a unique style guide. This holds all of the essential atoms you need so that you can pull pieces of each as you start the bigger design elements. Aside from selecting color palettes, or determining what all paragraphs would look like on your pages, designers have to think about the mobile and desktop versions of each as well.

Molecules

In chemistry, molecules represent the smallest part of any chemical element, and are made up from atoms combined together. Similarly, with the atomic design process, molecules are design features that are made up of the basic building blocks defined in the style guide—the atoms.

To better grasp how a molecule would be created in a website design, think about a simple search form. You may combine a button (atom) with the appropriate input (atom) and label (atom) to create a full-functioning search bar (molecule). Those items (the button, input, and label) together create something that is incredibly useful and essential to the functionality of the site, however if they were to act alone, they wouldn’t be as valuable.

Organisms

Organisms are groups of molecules together. What makes these organisms different from a molecule is that there are several of them, allowing the complexity to reach a new level. In website design, organisms are several molecules combined together on a section of your page.


When you think about the masthead at the top of your homepage, you can compare that to molecules combined together to form an organism. On your masthead you likely have your navigation, your search bar, and your logo all together to help your users navigate your site easily. Each of those three features could be used alone if they had to be (molecules). However, if you were to break them down even more, they likely wouldn’t stand alone, they would simply be the basic building blocks necessary to help create the other functionalities of your site (atoms).

Templates

The next phase doesn’t align as closely with chemistry as the previous sections have. Templates are created by putting together all of the organisms to create a website page. This provides you with a much deeper understanding of what the design and page will look like once it’s completed and lives.