Product screenshots with ADG3

We are in the process of migrating our UI to ADG3 and AtlasKit. I really enjoy the new Atlassian Design Guidelines website and the new design in general. Great work!

What would really help me out is some screenshots of what Atlassian products look like using ADG3. JIRA and Confluence, specifically. We did receive some examples during Connect Week in Amsterdam, which was very helpful. But it would be great to see some more of the products.

I realize that this is all work-in-progress and that everything is subject to change. But we are currently designing and building our UI, knowing that we will have to make changes once the UI rolls out in the actual products.

Example

Our current design leans heavily on JIRA’s old design. For example: we have a filter bar that looks a lot like the filter bar that our users are already familiar in the old version of JIRA:

When we follow the new design guidelines, it would look something like this:

This is great! But then we have a table with companies below the filter. Similarly to having a table with issues.

Now when we compare this to the old UI, the old UI looks a bit easier to navigate, since the filter bar has a different background color separating the two parts more visually.

It would be great to see some examples of how Atlassian is applying the new design, so we can adapt and make sure we fit into the new UI better. We’re still getting used to new the design as well and some examples of what the products will look like will probably make it easier for us to get used to the new style.

A more concrete example is breadcrumbs. Their behavior is well documented in ADG3. Even the approximate location of where on the page they should be places. (Top-left of the screen, above the title)

What was really helpful in the old guidelines was this small example:

From this example you know how much space there is between the several elements. I was hoping to get these kind of details from a (WIP) screenshot of ADG3 in JIRA or Confluence. Just as an indication to work with, so we don’t have to guess what it will ook like when it’s released.

Hey Maarten, you’ll get access to the new ADG 3 experience in Confluence from mid-May (rollout starts from April) and by June for JIRA (phased roll out starts from mid-April.) We’ll look to get some screenshots up here in the meantime.

There is also a beta group available if you want to get the experience as early as next week! Sign up for Confluence’s beta here: https://docs.google.com/a/atlassian.com/forms/d/e/1FAIpQLSdHddi5_EbhhGUK8WfIDjn42LbTGb_-j52-of867_KETMXsDQ/viewform?c=0&w=1

Details for JIRA’s beta program are coming in the next 1-2 weeks.

Hope this helps! Let me know if you have any other questions.

1 Like

Thank you Asha!

I’ve signed up for the Confluence beta and I’m looking forward to it. I think it will give me the examples I’m looking for.

Can I assume that JIRA, Confluence and other products will look almost the same in ADG3? In ADG2 there were still a lot of differences between products, but since you’re re-designing everything, that might not be the case anymore.

That is exactly the idea Maarten! You can take a look at the design site for more detail too http://beta.atlassian.design/