The post speaks about the new methodology known as Atomic Web Design for the creations and development of layouts using modular interface systems.
Here, we are going to discuss some of the current issues related to responsive web design and prototyping to know a new <a href="http://www.vijaywebsolutions.com/web-ui-design/" target="_blank">web designing method, through curious scientific analogies and tools inspired by Style Guides, which promises to change the way we understand, organize and develop interfaces.
Current State of Web Design
The emergence of responsive design in 2010 completely transformed the way we design interfaces for the web. Now, 4 years have passed since then and the possibility of having a unified content on multiple mobile devices is now a reality. Various techniques and best practices in syntax and semantics have been suggested and consolidated. Boilerplates, frameworks, plug-ins and scripts were formed to facilitate the front-end development. However, although the responsive web design has been an extremely positive change and accepted in industry still have a problem.
Developing a consistent and functional layout in various browsers, operating systems and devices consumes much more time than developing it in a traditional way. The old scheme in Wireframe cascade> mock-up in psd> Layout> approval is increasingly difficult to maintain as the amount of work literally tripled day. Whereas, before we had to just form a template layout for desktops, however now we have to think of Smartphones, tablets, televisions… This simply means that three times as wireframes, mock-ups and meetings. We already know how to write responsive codes, but a gap still remains. How do we create layouts for this new scenario and how to present it as a deliverable product?
Today, many designers are trying to find answer to this question, however so far there are no definitive answers. The fact is that if we continue to think on sites just like isolated pages the trend is that the difficulty of developing progressively increase as new devices are placed on the market. Creating a new model that improves the workflow of designers and developers is needed! But how?
Mini Bootstraps for all Clients!
In my previous post, I have talked about the <a href="http://www.vijaywebsolutions.com/style-guide-know-more-about-interface-elements-coding-standard-logic-programming/" target="_blank">Style Guides and how they can help solve some of these problems, both in the design as the front-end. For those who are not familiar with the concept, basically they are modular libraries of design elements, code snippets and patterns of user interface (UI). Something like a mini Twitter Bootstrap built especially for each project. The pros are many for the organization, in terms of documentation and improved communication among professionals as the design concepts are all unified in a single location.
The Counter of Style Guides
Although this solution is optimum from the perspective of the designer and developer, however it still takes a long time, which is almost a luxury in some projects. And for some clients it may still be difficult to understand how that pile of seemingly random abstract elements can in fact turn magically into a website. And this is understandable, after all, is hard to say if you like a face just looking nose. But like all Pokemon evolves enters the scene…
Atomic Design – What is it?
Looking at the term, you might be thinking that, we can now design bio organisms in Photoshop or something like that. Isn’t it? In fact, it is only an analogy to explain how the different components of a page can interact… This way of creating interfaces was created by web designer “Brad Frost” and explained in detail at the conference ‘Beyond Tellerrand in Germany‘.
Similar to the Style Guides, atomic design is also much modular. It assumes that the website pages are actually systems, i.e., sets of interconnected elements forming an organized whole. Inspired by high school chemistry classes, Mr. Frost realized that the components of a web page behave much like the atoms, molecules and organisms. Website pages are basically composed of a finite set of elements (HTML tags) which can be grouped in different methods to build complex systems.
The term “atom” means that “which can not be divided.” With the advent of this concept in Science in the early 19th century, it was considered as the smallest part of matter. Unexpectedly, science later discovered that it is possible to split atoms into smaller pieces, however that’s beside the point. The fact is that atoms combine to form molecules that join to form organizations that are… well, everything. Here, the atoms are the building blocks of the universe. Something like Lego pieces that you can assemble and combine to build larger elements.
Well, in the Atomic Web Design, atoms work the same way. They are the smallest elements available in text markup language known as ‘Tags’. The atoms are isolated elements that do not need a context to exist. Think of it as loose labels, inputs, form fields, buttons, titles, paragraphs… or even abstract elements like color palette and font stacks. These are the basic building blocks used to create larger elements.
Basically, the Molecules here are groups of one or more atoms. The molecules are isolated parts operate with a single purpose. A label, a form field and button are not useful in isolation, however in conjunction they can fulfill a specific function such as performing a search. A set of headings becomes H-group molecule.
You can think of them as a collage of elements. Just as molecule which is a collection of atoms, similarly organisms are a set of molecules. Generally, this will correspond to a section of the site as a header, footer, sidebar, etc… Unlike molecules, organisms may have multiple parallel working purposes. A header, for example, may have elements such as logo, navigation, login form, search box, call-to-action, etc… And each of them performs a specific action. An ensemble of molecules such as h-group, span data and the header body can be an article.
Okay, now we need to end the analogy of science here, because a client can probably find you a little crazy, if you try to explain your layout using an atomic model. So, its better to continue with familiar words. Templates here are sets of organisms. At this stage the design becomes more concrete. You can think of templates as HTML low fidelity wireframes. Here, it is possible to view the skeleton of your site live interactively. Continuing with our example we would have the whole page consists of many organisms.
The main developments are the templates for a more complex color, typography and design of high-fidelity content. Through the website you can see all the minor elements such as images and videos in real context and thus validate the effectiveness of the template. After the necessary adjustments you have the final product. This would be our example of wireframe with a “real” content.
Pros of Atomic Design
The Atomic Design promotes a linear evolution of less complex abstract objects to the final product. Through this methodology, we can establish a standard for creation of design systems with reusable with a logical progression of assembly parts. Depending on the taste of team this may even mean removing static mockups in Photoshop, which represents a gain of time and productivity. The possibility of testing the atoms, molecules and organisms in a real environment also make sure that your final product is foolproof. Another benefit is the ease of changes and adjustments, reducing the negative impact of workflow. Just change the order or combination of elements to create new pages.
The Lab Designer
The theoretical model of the atomic design is already interesting and relevant by itself. But Mr. Frost has created a tool that works like a mix of sandbox and boilerplate known as the “Pattern Lab”. Through the tool we can build atomic design systems using a component library for PHP, a common set of standards for user interface, a suite of responsive tests, among other features. All divided and organized between atoms, molecules and organisms so that you can create your own pages and templates. Alias, the examples used in this article were totally removed from the Pattern Lab.
The advantage over frameworks is that this library is open, flexible, and provides you room to build your own components and the way you understand. All this ready for you to include, organize and group modules as you want through PHP tags. Something very similar to the syntax of WordPress, for example. If you are interested just visit the Github repository to start playing. If you do not enjoy PHP, fine. There is already a galley creating versions for other programming languages. You can check the Jekyll for another repository.
To be honest the standard Pattern Lab layout is pretty ugly. But this is the same intention. The idea is to be a facilitator for the creation of ITS design. Then the whole look is simple and neutral so that you can add your own CSS. Namely the Pattern Lab is purposely incomplete. The intention here is not a framework, but a set of modules that include the most used elements in Style Guides and other things that sometimes we forget / are difficult to include in static mock-ups as standards for CSS animation, avatars user, loading animation, audio tags…
The Pattern Lab can be cool for prototyping and mock-ups and wireframes, but unless you’re planning a static website that is not ideal for the final product development environment. Because the modules are closed it prevents the implantation of a content maintenance. There are some discussions to work around this problem, but this is the current scenario.
The Future Web
What I think is really exciting to see people trying different solutions to old problems, creating relevant discussions and collectively seeking ways of transforming the way we build interfaces. The fact is that the metaphor of Mr. Frost not only helps to understand modular interfaces more clearly, but in a short time has even expanded to encompass concepts such as breakpoints. I have no doubt that these concepts should be further improved in the future. This may not be the ultimate solution to the problem of deliverable items, but it is a good way to be explored and tested. Just that each contribute their own ideas to create better solutions and experiences for designers, developers, clients and users.
Article & Images Source: http://bradfrostweb.com/blog/post/atomic-web-design/