Saturday, April 27, 2024

Designing something new with the Atlassian Design System by Deborah Lindberg Designing Atlassian

atlassian design system

Get tips on hiring, onboarding, and structuring a design team with insights from DesignOps leaders. Spot opportunities and challenges for increasing the impact of design systems and DesignOps in enterprises. When you consider the nature of Atlassian’s products, the stakes are almost too high to not have a design system in place. Now in its third version with strong adoption and instrumentation in place, one of the next goals of ADG is to make back-end services more consistent. The first iteration of ADG was released in June 2012 to govern its products.

How Arcadia is Telling a Consistent Brand Story

atlassian design system

Once they’ve done the initial research, the team converges to discuss specs and requirements. Program managers then work with other product teams to align on the design system changes, roll out the changes, and monitor feedback. Scale your design system with UXPin Merge, unique technology that makes it easy to use a coded design system for prototyping.

Learn kanban with Jira

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.

Our experience

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.

Trusted fundamentals before comprehensive patterns

Top Statuspage Atlassian Alternatives in 2024 - Designmodo

Top Statuspage Atlassian Alternatives in 2024.

Posted: Tue, 02 Jan 2024 08:00:00 GMT [source]

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.

Bring people on the journey before helping for the moment

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.

Code

What was previously our home for Atlassian Design Guidelines has now transformed into our new home for Atlassian Design System. Our content guidance covers our voice and tone, and the mechanics of our grammar and style. Atlassian Design System packages are available on npm under the @atlaskit scope, along with other Atlassian platform components.

Design Systems & DesignOps in the Enterprise

Improving the design and content of atlassian.design is just the tip of the iceberg. Beyond the surface of the redesign, our engineers have also rearchitected the foundation of what our site is built upon. We improved our infrastructure with Gatsby, integrating with Contentful. The new site is faster, more reliable, and aligns with Atlassian platform standards.

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.

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.

It’s traditionally been thought of as a cottage industry – a bunch of specialized folks crafting beautiful one-off solutions. Special thanks to Jocelyn Wong for designing the cover illustration. We hope you’re inspired and are just as excited about our team and the future of Atlassian Design System.

No comments:

Post a Comment

Your Ultimate Guide to Texas Roadhouse

Table Of Content More Earnings Resources from MarketBeat Where is the biggest Texas Roadhouse? TXRH Estimated and Actual Revenue by Quarter ...