Over the last few years, several web design trends have exploded in popularity and different frameworks and libraries have emerged to support them. It’s been close to a decade since the term ‘responsive’ became mainstream and changed our way of thinking about the structure of our applications across devices. Since that time other design philosophies have followed as we sought ways to improve the user experience across a diverse range of platforms. At the same time tools and techniques have continued to improve to arm designers with the right frameworks, libraries and approaches to deliver the best user experiences possible. In this article I will cover some of the more popular design approaches and libraries that can be used to implement them. I’ll conclude with a quick list of several wireframing tools that can also be used in design. I recommend checking out each of these resources via the links provided below.
Atomic Design and Pattern Lab
Atomic design is a design approach that Brad Frost explained in his book Atomic Design. It has grown in popularity and continues to define the way we think about structuring layout and design. The idea behind atomic design is based on five distinct phases of building the interface that include:
- Atoms: representing the basic building blocks of our HTML pages including tags, form labels, inputs, buttons.
- Molecules: a combination of atoms, for example form label, input and button can yield a search bar.
- Organisms: groups of molecules joined together to form a distinct part of the interface, for example a navigation header. (Building from molecules to organisms provides portable, reusable components).
- Templates: provide context to all the abstract molecules and organisms (think of wireframes).
- Pages: specific instances of templates providing higher fidelity and a more accurate depiction of what the user will see.
Atomic design brings lots of benefits to the design stages of a project by enabling mixing and matching of components, facilitating creation of the style guide, providing more consistent and easier to understand layouts, rapid prototyping, and modularity. Pattern Lab is a framework that helps designers build an atomic design approach into their projects. It is Open Source and integrates easily with other libraries and platforms. Their site provides comprehensive documentation and a demo of its implementation of atomic design.
Material Design
Material design started its life at Google in 2014 and was built from the ground up as a visual language that “synthesizes classic principles of good design with innovation of technology and science”. It builds on components from atomic design and Google even references atoms, molecules, and organisms within this framework. The idea behind material design is in contrast to other flat design methodologies that have surfaced before. Material’s objective is to provide onscreen experiences that mimic real-life objects through the use of subtle shadowing, lighting, animation, and 3D effects. The ultimate goal of material design is to deliver high quality user interfaces across platforms. It integrates well into other frameworks including Google‘s own Angular.
The Material Design website provides resources including a comprehensive set of documentation, developer tutorials, and tools to help you get started. They also provide a public GitHub repository to check out the code behind Material Design.
Other Design Frameworks
There are a wealth of other design frameworks worth surveying. While I’m not going to go into too much detail here I do recommend checking them out to get a better idea of what all is out there.
Semantic UI: is a framework to “design beautiful websites quickly.” Their approach is tied creating a language for sharing UI that can be easily understood. Semantic UI promotes concise HTML, intuitive JavaScript, and simplified debugging. They provide thorough documentation for getting started as well as a public GitHub repository and user forum.
Pure.CSS: has a deliberate small footprint which provides a suite of modules under 3.8KB minified. It has been built with mobile devices in mind and a light weight approach to design. Their website provides documentation and examples of the various elements within the framework.
Ant Design: is aimed at the enterprise. It was built to improve and aid the overall experience of users, designers and developers building internal desktop applications for the enterprise. Their framework provides a design language and aims to bring uniformity to the interface, lower design costs, and “liberate the resources of design and front-end development”.
Fabric: is also aimed at enterprise applications, specifically the Microsoft Office suite. It is Open Source and is designed to work across Office clients and add-ins. Their website states that Fabric comprises a set of UX frameworks that can be used to build Fluent experiences that work seamlessly across Microsoft products.
Wireframing Tools
I want to wrap this up with a quick overview of some wireframing tools you might want to use within your own design work. There are a number of different applications out there at the moment, however these are my favorites.
Draw.io: This has become one of my go to tools in recent years. It is completely free to use and provides many options and templates to get you started. Be sure to check out this informative YouTube video explaining how to use Draw.io for wireframing.
Axure: This application requires little explanation for anyone who has been in the User Experience (UX) space over the last few years. Axure provides comprehensive functionality, template libraries and is a popular choice in the enterprise. A free educational license can be obtained from their website.
Balsamiq: This prototyping tool has also become very popular and provides pre-defined templates with a lower learning curve than Axure. Balsamiq also provides a free educational license option as well as a trial version.
