Table Of Content
Voice and tone guidelines get into the weeds by articulating how the company’s voice and tone should shift across a variety of scenarios. Brand identity guidelines define the assets and materials that make a company unique. So frameworks like Bootstrap are insanely popular design systems that provide well-tested components, resulting in consistent designs and faster launches. Well, like most everything in life, there are cons right there alongside the pros.
Scaling a design system for a telecommunications giant - TELUS
Scaling a design system for a telecommunications giant.
Posted: Wed, 04 Apr 2018 07:00:00 GMT [source]
Conducting an interface audit
And while reading technology has come a long way – from papyrus to parchment to paperback to pixels – the concept of the page holds strong to this day. By now you may be wondering why we’re talking about atomic theory, and maybe you’re even a bit angry at me for forcing you to relive memories of high school chemistry class. Chemical reactions are represented by chemical equations, which often show how atomic elements combine together to form molecules. In the example above, we see how hydrogen and oxygen combine together to form water molecules. In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.
Atomic Design Methodology Atomic Design by Brad Frost
By the time the meeting draws to a close, everyone has rambled off their wish list of what they’d like the design to accomplish. In fact, to create the whole, you need to create the parts of that whole. Our interfaces consist of smaller pieces, whether you pay those smaller pieces any mind or not. Once every category has been presented and discussed, all the participants should send their slides to the exercise leader.
Comprehensive content strategy
It’s important to recognize that there will inevitably be people at the organization who help make and maintain the design system, and there will be people who will be users of the design system. There may be overlap between these two groups, but establishing the roles of makers and users is important nonetheless. This shift in thinking fundamentally affects the scope of our work. Folks working in the client services business are often used to delivering a project in a tidy package then riding off into the sunset. Internal teams don’t fair much better, since they tend to float from one initiative to the next. Whether you’re part of an internal team or you’re an external gun for hire, I’m guessing you’ve experienced the shortcomings of project-based work.
With any luck your organization will commit to making the design system an Official Thing. Seeing these partially designed prototypes might look unusual to those used to more traditional, pixel-perfect design deliverables. But it’s far more important to communicate progress than a false sense of perfection, which is why rolling updates are preferable to big reveals. With the general shape of the sculpture roughed out, the artist then begins homing in on specific sections of the piece. For instance, they may begin with the face, moving up close to carve the shape of the eyes, nose, and mouth. After several passes, they then move on to the arms, and then begin detailing the legs.
Molecules
Color palettes, icons, logos, buttons, and other elements must be gathered with care. These UI/UX components help in building a pattern library that is both reusable and flexible for the next stages and projects. It is important to keep the end goal in mind, that is to create a library that meets the branding needs and is also a little generic in nature. This will help you use these elements effectively in different molecules and organisms. The atomic design methodology is one of the most structured processes in UI/UX design. The steps outlined in this framework are clearly defined with a specific purpose for each.
In my experience working with this methodology, templates begin their life as HTML wireframes, but over time increase fidelity to ultimately become the final deliverable. Bearded Studio in Pittsburgh follow a similar process, where designs start grayscale and layout-less but slowly increase fidelity until the final design is in place. As design teams keep growing, it is getting harder to ensure effective collaboration. For instance, designers having different philosophies may not work well in a team. Similarly, when collaborating with other teams, such as content creation, marketing, and engineering, it can be challenging to make them understand the needs of the users and the role of UI/UX designers.
Once again, visual designers’ first instinct is often to jump right into creating full comps to articulate an aesthetic direction for the project. This high-fidelity work is certainly tangible, but also wastes a ton of time and effort if the comps don’t resonate with the stakeholders. Also, creating high-fidelity comps often makes big assumptions about technical feasibility, which leads to unrealistic expectations and antagonistic relationships with front-end developers. It’s our job to create great experiences for people using a diversity of devices, screen sizes, network speeds, device capabilities, browser features, input types, form factors, contexts, and preferences. That’s undoubtedly a Herculean task, but all these variables really underscore the need to extend far beyond visual aesthetics when creating interface design systems. Laying bare all your UI’s inconsistencies is a great way to make that happen!
Whether you’re working on the development of a website, web application, mobile application, or any other digital service, this checklist can serve as a great resource. For example, when designing the header of a website, a number of atoms come together. These include the shopping cart, navigation bar or icon, search bar, user profile avatar, etc. These atoms are designed first and then the designers can start putting them together to form molecules, leading to the next step in the design of an atomic system.
Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. This means we can break entire interfaces down into fundamental building blocks and work up from there. A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like.
Again, these categories aren’t set in stone and will vary based on the nature of the user interface you’re dealing with. Of course, it’s important to add, subtract, or modify these categories to best fit your organizational needs. Get your screenshotting fingers ready because it’s time for the main event! The interface audit exercise involves screenshotting and categorizing all the unique UI patterns that make up your experience. Bear in mind this exercise doesn’t mean capturing every instance of a particular UI pattern, but rather capturing one instance of each unique UI pattern.
Ultimately, a project’s level of effort is much better determined by the functionality and components contained within those pages, rather than on the quantity of pages themselves. All of the statements above make the fundamental mistake of assuming a page is a uniform, isolated, quantifiable thing. The reality is that the web is a fluid, interactive, interdependent medium. As soon as we come to terms with this fact, the notion of the page quickly erodes as a useful means to scope and create web experiences. The first books were thick slabs of clay created about 4,000 years ago, soon replaced by scrolls as the preferred way to consume the written word.
Applying modular programming principles to JavaScript is a bit of a no-brainer, since JavaScript is itself a programming language. But object-oriented thinking is weaving its way into other aspects of the web as well, including CSS, the styling language of the web. Methodologies like OOCSS, SMACSS, and BEM have cropped up to help web designers create and maintain modular CSS architectures.
Given the chance, Brad would knock on the door of every designer and developer to personally deliver his message. We’ve watched with astonishment (and mild envy) as this whirling dervish has barnstormed around the globe to share his advice with hundreds of teams and organizations across six continents. (Atomic design, coming soon to Antarctica!) But even Brad Frost can’t be everywhere at once, and we’re delighted that he’s detailed his ideas with such depth and good humor in this book. This wonderful book explains the philosophy, practice, and maintenance of atomic design systems. And it does so with the cheerful, helpful generosity that so describes Brad himself.
No comments:
Post a Comment