The Atlassian Design Guidelines (ADG) has an exciting new release. We’ve polished some old things, created some new things and have made the whole experience of using our guidelines even better.

What’s in the release?

Forms

The old forms page was heavily visited but not very helpful. We’ve overhauled the forms page making it more robust and easier to use. Included is a new way to validate forms and tooltip/help design that helps clean up our form layouts and allows users to focus on their tasks.

 

forms

 

Native apps

We’ve had native clients for a couple of years and it’s time to set some standards around what we expect when an OS X app or an iPhone app is built for Atlassian products. We’ve created light but useful guidelines for OS XWindowsiOS and Android.

 

nativeapps

 

Fixed width content

The reading experience is much nicer when the line lengths are shorter so we’ve used a fixed width layout. It also has a stalking sidebar navigation that allows easier jumping between sections.

 

fixed-content

 

Responsive design

It wouldn’t be enough to just make the layout fixed width so we’ve made sure it works on your mobile too. While I don’t anticipate plugin developers reading up on the ADG on their phone, it would be unprofessional to not have this capability. It’s not 100% finished, but the guidelines are much more usable now.

iphone-blog

 

Personas

We use personas at Atlassian to help us build products for our customers. Personas are great to keep reminding you that you’re solving someone else’s problems. Our personas are now a resource in the ADG.

 

personas

 

Search

The old search design was a little 90s so we’ve made the below change to make it feel a bit more harmonious in the application header.

 

search

 

Everything else

There was so much in this release (49 issues) that we could only list some of the highlights here. Full details are available in the changelog.

  • Upgraded to AUI 5.5 with documentation link updates
  • Controls, dialogs and communicators all now live in Components
  • New logo
  • New sections added to the home page redesign with introductory copy
  • Page restructure moving the docs and API links to the top right of every page
  • Icon font now has 196 icons
  • Buttons guidelines were rewritten and the page is much easier to follow
  • Doge easter eggs
  • Various other bug fixes and minor improvements

 

Visit the new ADG