1stwebdesigner |
| Jimmy Neutron and The Anatomy of the Atomic Design Posted: 13 Jan 2014 06:00 AM PST If Jimmy Neutron were real, could he become a pretty decent web designer? Of course, he would. For starters, he knows the anatomy of the Atomic Design. He could be designing the best web pages you will ever see, and make your eyes shed blood out of extreme admiration of his designs. And you'll probably wonder why he is that good. Well, for one thing, Jimmy Neutron understands a fundamental yet commonly unappreciated principle in web design. He knows how to work on a very potent tool to his full advantage. Using this tool, he could easily design mock-ups and code them without difficulty. And you know what, you don't need to have a three-digit IQ to do that. You won't even need any intricate knowledge of quantum physics for that matter. You just need to have an open mind and some resources. In fact, you just need the basic knowledge of the average guy. Yes, an average web designer with enough creative juices. You just need to master the principle of the Atomic Design. Yes, you read it right, and no, you are not in a physics or chemistry class- the secret is Atomic Design.  From Brad Frost (http://bradfrostweb.com) Atomic Design is the logical arrangement of design elements into groups for easy organization. To put it in simpler terms, we learned in high school that atoms compose every piece of matter. These atoms, when combined together, form molecules, which ultimately make up the entirety of the universe. In computer language, Atomic Design is basically the method of breaking the interface into smaller components. It is to understand how each part of the page works and how can it be mixed with other elements. These elements are, as we all know, the life and blood of the whole web page. In this design, developers could style and separate the rudimentary modules like placeholders, inputs, text boxes and combine them into a single bunch. This methodology can be applied to elements like navigation sections, text and icons, and anything that is more likely to be used with regularity. This will most likely improve the speed to a more efficient workflow in coding and designing. This will also prevent designers and coders to be sick and tired of their jobs because everything seems so cyclical. Basically, the Atomic Design is used to deliver a quick, easy and clear method of creating design systems. Designers could use the concepts of the Atomic Design to make their clients understand how the website will flow and how will it look like. It gives designers the ability to make the abstract concrete, make the intangible, tangible, the unreal, real and the impossible, possible. This leads to designers being able to create consistent, scalable and responsive pages. Methodologically, Atomic Design has five levels:
AtomsAtoms are the most fundamental building blocks of matter. Without them, nothing will probably exist. Similarly, in the realm of page design, atoms are the building blocks. They are the 'little guys' who make up the whole page. Individually, they count as seemingly senseless codes, but together, these little guys can rock worlds. With a single code missing, the whole design will fall. Want me to prove it? Well, you might remember that one night when you are coding a page and something's not working. Something like an image that is not showing up. Remember how you relentless uttered "Why didn't I see that" because, after hours of looking at your apparently perfect code, you realize that there was a stray '</' symbol in the way? That's how these little guys can mess you up, so don't underestimate them. Examples of atoms in web interfaces are the HTML tags like ordered and unordered lists, links, labels, inputs and buttons. Design elements like color palettes, fonts, images, shapes and many more are also considered atoms.  From http://www.visibone.com/ MoleculesIt would be far more exciting for a designer to finally see the design realized in a browser. When your HTML and CSS codes finally match the mock up you have imagined, when you finally see the design you thought of for hours, then, that is something to be happy about. You might not know this consciously, but what you were doing was actually combining atoms together! Molecules are the combination of atoms, (which in our case, design elements) on a page. Example, when a form label, an input or a button is taken as single individuals, they will not make any sense. They will just be codes that are floating to the vast randomness, but once you combine them, they start to be something good. The form, label, input and button suddenly become a search box.  Photo from http://www.uiparade.com/  From http://cdnm.tutorialchip.com/ OrganismsCombined together, molecules form up organisms. These organisms are extremely complicated than those simple molecules which make them. The elements of the page combined together, for a specific function and in a specific location could be considered an organism. They are the particular sections in web interface. Organisms are composed of varying and similar molecules. The variety and similarity give dynamism to the design. An organism cannot just be made up of images or colors alone. They are an excellently crafted juxtaposition of elements, all aimed to beautifying the whole design. For example, a company logo, a navigation bar, a search form and contact links are placed in a single masthead organism because their specific function is to act as the primary means of navigating through the web page. Tip from Brad Frost http://bradfrostweb.com
TemplatesTemplates are not physical nor chemical jargon. They may be off-track to the analogy, but they are basically with a purpose. A template is a tangible formation of organisms performing different roles. They are like families or communities of web elements woven together to form web pages. With templates, web designers are now starting to see clearly what comes out of their efforts. What's good with templates is, unlike atoms, molecules and organisms, they are concrete. Meaning, they could be presented to the clients without any fear of being shouted at. Of course, if you are working for a specific organization, you would never, even in your most drunken night, present a template which is composed of a single atom. Your boss would probably roast you alive. You will, of course, present him a tangible design. He needs to see the page in a nutshell. Unless, he won't hire you ever again. Trust me.  Photo From http://www.themesan.com/  From http://www.000webhost.com/ PagesPages are the real thing. If in the templates, you are tentatively substituting elements in lieu of the real content, pages have the real content. This is the final level of the design, where everything needs to be real. This is to condition the mind of client about what the viewer sees as it should be. At this level, all the efforts of the collected atoms will see their fulfillment. This will manifest all the elements working and jiving together to give the user an experience of a lifetime.  From www.market8.ne ConclusionThe Atomic Design methodology is not formulated to eradicate your daily workflow. It means to improve it. Having a faster, more efficient and better workflow is as good as getting a promotion. That said, you don't have to be Jimmy Neutron to try this kind of approach, so what harm could you possibly have?     |
| You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment