Implicit patterns in the NSW DDS example pages

I’m looking at the example pages provided with NSW DDS v3.
https://nswdesignsystem.surge.sh/

And in particular the Article example:
https://nswdesignsystem.surge.sh/templates/article/index.html

I note that there are elements on that page for “Related” (sidebar), “Similar” (footer), Published date (header), Author (header), Topic tags (under the header). I understand that these are just examples and are not prescriptive. However, they do however appear to be quite standard and useful. They do hit a nice sweet spot of providing some structure but do not go overboard.

Is the team there able to give some guidance on how strong these patterns are and whether they are considered best practice. Are they just examples which have been developed for a showcase, or do they have deeper thinking and research behind them and as such stand for something more?

You could generalise this question as to how big are the “organisms” the NSW DDS is defining.

This will help in an example implementation of the NSW DDS I am working on. Is it worth baking these patterns in or should they just be left as examples.

Hi @murray!

The templates main goal is to show how elements of the Design System can come together, and to give teams some off the shelf layouts as a starting point if needed.

As we get to that larger size of defining how the various components sit in relation to each other for a consistent structure, we know that a shared definition wouldn’t take into account specifics of every product or types of content.

So short answer is, that they’re recommended but not defined that teams necessarily need to use. We’d encourage teams to test what they design in-context to get evidence about whether it works best.

A bit more on the thinking behind those layouts

The article page uses the two column layout which has been build to maintain reading accessibility for the primary content area width. The side column has been utilised to offer supporting information to the user, offering ways for their journey through the content to continue.

Building out the elements in the header, such as the published date, author, topics tags etc, shows examples of content that would assist the user in contextualising the article. They have been added in a very modular way so items can be added or removed for specific user needs.

The ‘Similar’ section has been added to show how the page can be broken down to aid a users journey through the content. Showing a clear end and start to content sections, making it more digestible for the user.

Using sections like this is where we would see ‘organisms’ forming.

Hi Amy, many thanks for that thoughtful answer.

1 Like