The Australian Government coat of Arms

Communities of practice

Communities of practice

Home page

Hi community,

We have updated the design-system-starter with the main navigation component. This allows you to create a home page and basic page template with all the necessary components.

Templates are our next milestone, however for them to be published on the design system website we need to create a versioning pipeline.

Cheers,

Christopher

5 Likes

I’m really looking forward to seeing those templates go live. Can’t wait :smiley: Keep it up, Design System :rocket:

1 Like

I’ve looked at the first template and it is great to have something like this – putting all these components together. I know it is not the final “product” of this effort, but anyway I do have few notes (as usuall :slight_smile:).

  • H1 tag is in unusual place (header of the site) – it should follow more standard pattern – a title of the page with tighter connection to the content
  • Page heading structure is not logical:
    • the H2 Responsibilities is set as the top level side menu item. Should be something lower like H4 at least.
    • H3 is at top of the Content Community – should be H2
    • H3 is the text in the Banner. “Understand user needs. Research to develop a deep knowledge of the users and their context for using the service.” Should be split between H1 + H2?
  • Is there a reason (accessibility or similar) why the side navigation is first in the HTML structure aka not using content first?

All these changes will have minimal impact on the visual as all the styling is done via classes. Only on the mobile the side navigation will be shifted bellow the content (solvable by flex rodering etc. with a small sacrifice for compatibility).

1 Like

Thanks @petrillek there is still some work to be done on these templates and all of your points are extremely useful.

In terms of order of navigation or content that comes down to usability testing and what is more important. Some sites it is more important for the user to quickly know where they are and the context of the information architecture. Others the content is more important.

This template needs a lot more polish so please continue to provide feedback it’s super useful!

2 Likes

Hi Alex,

I am not a web-developer, but am handy with Photoshop.

Do you have any PSD templates available for me to produce initial proof-of-concepts?

Is there someone at the DTA I can call to chat to about my project?

Cheers, Anthony

1 Like

Hey @anthony.symes, we sketch files available for download. I’m not sure if sketch files work on photoshop though? If you don’t have access to a sketch license, you can check out a free alternative figma.

The sketch file has all of the individual components and a template which has desktop/tablet/mobile variations.

Is there someone at the DTA I can call to chat to about my project?

A good place to start would be emailing us at designsystem@dta.gov.au

Thanks!
Raj

1 Like

Thanks Raj!

I’ve emailed your team.

Unfortunately if we don’t work in a design or web team it’s difficult and lengthy to get software, and I’m personally not familiar with sketch files.

The reality is people in non-design/developer roles or teams are asked to produce mock-ups so require a very simple way of doing it.

difficult and lengthy to get software

I understand that, I recommended Figma because it is browser based and free. No installation required. It’s really easy to use.

I’ve emailed your team.

Will check the inbox :slight_smile:

You may also want to consider looking at Photopea to open a Sketch file and convert to PSD in-browser.

There will naturally be some limitations and rough edges, but it could give you enough to work with while you wait for software approvals to come through.

In it’s current state, the Design System is targeting designers and developers (with some assumed knowledge and tooling). The team is also considering exploring options for non-designers/developers to experiment with components and template layouts in offline, analogue scenarios.

Other questions to help us understand your needs:

  1. What sort of fidelity are you being asked to mock-up if you’re not in a design/dev role in your team?
  2. What other mockup tools are you considering?
  3. Is swapping out colour schemes enough?
  4. Would a Codepen help?
1 Like

Hi Anthony, you might want to try https://thenounproject.com. They supply png and svg’s which can be easily placed in PS and its creative commons too.

1 Like

Hi Gordon,

  1. I have 10 years experience as a web publisher, so I’m not unfamiliar with HTML, but I’m not a developer. I’m producing preliminary visuals for external stakeholder consultations are what I’m focusing on.
  2. I’m using Photoshop and managed to convert the sketch files via Photopea - although there are some font and layout issues in conversion.
  3. Swapping out colour schemes isn’t really as relevant as having components (i.e. layers in photoshop) to drag and drop and reorganise,changing text copy is important.
    A Codepen wouldn’t help me personally though I have some knowledge of code… I imagine it would help developers etc.

Cheers

Thanks Brendan, this is a handy resource!

Thanks, @anthony.symes - that helps!

  • Did you manage to resolve the font and layout issues after conversion using Photopea?
  • Did you compare the PSD conversion experience to direct editing in Figma? Which would more closely match your preferred workflow?
  • Are the preliminary visuals expected to demonstrate layouts for multiple devices / orientations?

Hi Gordon,

I didn’t resolve the font issue, but IT restricts us from installing new fonts anyway - a substitute font was used and was sufficient.

I didn’t use Figma, mainly because of time constraints. I didn’t want to start learning a new application when I was unsure if the outcome would prove valuable – I knew I could achieve what I wanted in Photoshop so went down that route. Also, working online posed security questions for me and I was concerned the Department’s work might be inadvertently viewed/shared.

Lastly, no, the purpose of the visuals were to prompt initial conversation about what a website might look like for our purpose. Only a desktop version was required to spark conversation.

Cheers

Thanks for sharing back, @anthony.symes . It sounds like there’s still some rough edges in the process, but good to hear that you were able to find suitable workarounds.

I hope your experience will help others operating under similar constraints.