Table Of Content
We're on a mission to make it easy for teams to design, develop, and deliver high-quality Atlassian UI. A common misconception about design systems is that once they’re established, or, in this case, once their documentation is published or site is launched, they become an omnipotent and an unchangeable source of truth. Modern technologies like CSS make it easy to separate the look of an application from the logic in an application. Likewise, make sure to structure automated tests so they will be resilient when the visual design evolves.
Showcase (aka. more designing) — 30 min
Everyone approaches and thinks of values and principles differently, so we started by gathering inspiration from other design systems. Then we crafted clear definitions of what values and principles mean to us, along with where they fit with our strategy, mission, and vision. Our building blocks work together to create products that feel familiar, cohesive, and part of a family. Our Figma libraries and tools include our foundational styles, design tokens, components, and other helpers. Usually, the safest approach is to analyze existing systems to see which ones are the closest to your brand and needs.
The Atlassian Design System – Creating Design Harmony at Scale
In a nutshell, a design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. Think of it as a big knowledge-base that is part UI kit, part documentation with instructions, language and coding guidelines all wrapped up together. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
Approach #1: Create your Design System from scratch
Design will change, and it's important to ensure the code base can easily follow new trends. As the team engages in sprint planning and backlog grooming, involve the designers. Getting their input when making decisions about the product's future direction will make getting there easier. As you just saw, the product owner and the designer will spend time brainstorming and iterating on the product plan early on.
What is a UX UI design system?
We started by sharing the history of how the design system has evolved from Atlassian Design Guidelines in 2012 all the way to Atlassian Design System in 2020. We brought people on the journey ✨(our principle demonstrating Empowering, for everyone) by sharing context, brainstorming, discussing, and sparring ideas together as a team. With a strong internal focus on quality, our values and principles couldn’t have arrived at a better time. The Atlassian Design System is powered by a team of over 30 designers, engineers, and content designers. As we scale, it becomes harder and harder to coordinate the growing team to work towards the same vision. Our vision is to be the cornerstone of crafting quality user interfaces in Atlassian products.
And as mentioned above, we include developers and product owners in the design process. As the full team works together using the Atlassian Design Guidelines, developers and product owners become better designers. That skill set then becomes shared across the team, which is a fundamental value in agile culture.
Date time picker
For instance, if you open up an icon library like react-icons, you will notice each collection has a unique and distinct feel. Below are the design systems which are often utilized by Open UI for research purposes. Over the course of 2013, and with Atlassian doubling in size nearly every year, I had basically onboarded about 500 people about the importance of our design system and how they can use it. I found this to be a really effective way of changing the company culture with regard to design. Without doing something that didn’t scale, we might have taken a lot longer to get started. When you’re working on your system, try not to get too obsessed with over-engineering a seamless, perfect workflow but instead look for scrappy ways to start, and just keep making progress if it’s working.
The design process
As I mentioned above, the Atlassian design team at the start of 2013 was relatively small (~13 people) compared to the engineering team (~300 people). One of the benefits of including written guidelines was that engineers could make a huge amount of progress without a designer there. It meant that we could stop designing screens in Sketch and instead, jump on a whiteboard and brainstorm a flow, or start to work on much bigger product problems that existed upstream. With the uptick in design systems discussions over the last couple of years, I’m occasionally asked for tips or insights from my experience building the design system at Atlassian.
Bring people on the journey before helping for the moment
The World's Tallest Hybrid Timber Tower. Atlassian Sydney Headquarters by SHoP and BVN The Strength of ... - Metalocus
The World's Tallest Hybrid Timber Tower. Atlassian Sydney Headquarters by SHoP and BVN The Strength of ....
Posted: Wed, 08 Jul 2020 07:00:00 GMT [source]
When a designer needs to whip up a new landing page, all the pre-designed UI symbol elements are ready to drop in and can be non-destructably edited. When a marketer needs to send out a newsletter, there is no question as to the kind of tone the copy should be written in or what the header image should be. It's all there, clearly laid out and because everyone has discussed, contributed to and agreed upon it there is no question as to what and how things need to be done.
For example, I’d go through some history of how we used to have 44 different dropdown menus (not an exaggeration), but we have one now and here is how you should use it. The very first version of the Atlassian Design System was about 20 static HTML files that I was hosting on a Mac Pro under my desk. There was no templating in these files, no version control, I had imported the CSS from our products, and I wrote the markup myself for each component. This version was nasty to update and wasn’t scalable, but enough people found value in it that it I was inspired to invest more time and effort that put us on the path to creating the Atlassian Design System. The team works in 2-week sprints to ship iterations within days or weeks to customers. Larger changes (like revamping a color scheme or set of UI patterns) require more time.
First, we’re excited to share with the community some of our favorite new features. Customer interviews provide rich information to incorporate into the design process. Atlassians are required to use the latest version of ESLint, and we strongly recommend it for anyone using design system packages. You can also find design systems from global companies like Microsoft’s Fluent, IBM’s Carbon, GitHub’s Primer, and over 50 others to explore in this GitHub repo.
Atlassian Design System is a collection of UI components, foundations, and standards that help teams build beautiful product experiences. An online design system is a digital repository accessible via the Internet that contains design assets, guidelines, and tools to facilitate collaborative design and development processes. It is also a great case study reference for how to make your own UI/UX designs as inclusive as possible. Luckily, as James points out, embedding designers in product teams (and vice versa with developers in design teams) helps build consensus more quickly for changes to the design system. People from multiple teams contributed to the process – a dedicated team wasn’t formed at first so that the design system wouldn’t be created in isolation.
Back in 2013 the designer to engineer ratio was something in the range of 1 designer to every 15–20 engineers. While I shudder at the thought of that number today, back then I tried to use that imbalance to my advantage. Something that helped me get the engineering org on my side at Atlassian was to create a talk for new starters during their first week of onboarding at the company. About 15 or so people would be there every week and I’d be able to get them to understand what we were trying to do from day 1.
It began with extensive audits across our content, design, tooling, and code. We applied the visual foundations of our design system and reused existing components to design and build the new site, truly putting our design system to the test. Starting from an existing Design System with a similar Component & Pattern Library might set you up with a great start.
Atlassian Design System values and principles work in tandem with all of the others, not in place of them. They help our team align on what kind of design system we want to build at Atlassian, what needs we address, and how we address them. And they’re not just for our design system team — we hope to use them to enable contribution in the future.
No comments:
Post a Comment