UI Revamp: Design System for CKAN

[thegostev]

I happy to share next deliverable produced by UI Revamp team - the design system with components in Figma.

It consists of: colors defined, new font, variables and components.

Design system is open for commenting and sharing your feedback. Click Figma logo at top left of the page to access a menu with pages included: https://www.figma.com/file/oI3wDSdZ0cHZLh6CrfYMnb/CKAN-3.0-Design-System?type=design&node-id=0%3A1&mode=design&t=72fVNsR2fnUgkdrV-1

This design system will be used to create 6 basic layouts which then will be implemented. Having all components created first, making creating layouts faster.

Design system is a living document. We expect 25-50% of components to be updated during the layouts design and implementation stage, so they look great together.

Please share your feedback, ideas that you have and important info that we should include into the work. You can comment both here and in Figma.

Design approach:

1. All deliverables (artifacts) should be open to public with ability to leave feedback right in the artifact.
2. Tight collaboration between a frontend and a designer is essential to deliver an efficient solution.
3. We should not make big changes, rather an update that doesn't touch how the system works now.
4. Higher level of customization (colors, fonts) is always used, it should be taken into account.
5. UI changes should not make it harder to customize CKAN (as big portion of maintainers don't use out-of-the-box UI).
6. Documentation (screenshots) should be updated after new design is rolled out.
7. Work on the team cohesion early on, frequently communicating with other contributors.
8. It's beneficial to have a professional in the team who has experience with accessibility standards and CKAN.

Design requirements:

1. Font should support maximum diversity in languages.
2. UI should be designed to adapt a layout to different screen sizes and resolutions.
3. Navigation should be predictable and consistent across the website. Menus should be structured logically and standard elements like search bars and contact information should be easy to locate.
4. Provide adequate color contrast between text and background colors for better readability. The WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
5. Text should be resizable up to 200% without loss of content or functionality. Fonts should be legible, and paragraphs should have adequate spacing.
6. Target size for pointer inputs are 24x24 px.
7. Interactive elements should be operable through keyboard interfaces.
8. Images (unless purely decorative) should have alternative text that describes the image’s purpose or content.
9. UI should work across major browsers (Chrome, Safari, Edge, Firefox).
10. Provide feedback for user interactions, such as loading indicators for long processes.
11. Accessibility standards should be taken into account to the level that the work completes requirements of WCAG 2.2 AA at 50% minimum.

[thegostev]

Work on layouts is under way. Today we discussed first two of them. Indeed they were done fast. Though when you have a layout done, right away it's visible what can be updated. So the updates are following immediately.

The plan is to have first 2-3 layouts, with at least 2 versions of each and 3 color schemas to pick from. Colors were defined during the design system creation though now it's possible to evaluate them looking on an actual UI colored.

The layouts should be presented soon. We'd decide tomorrow before core dev team meeting.

[thegostev]

Layouts for homepage, datasets list and organizations list are done and ready for receiving the feedback 📢 Just click on comment button in header and leave it right in the Figma file: https://www.figma.com/file/oI3wDSdZ0cHZLh6CrfYMnb/CKAN-3.0-Design-System?type=design&node-id=508-40&mode=design&t=q15o0VspaTkYmM29-0

Next steps: more layouts and feedback processing.

[bjornhagstrom]

On design requirement 11 "Accessibility standards should be taken into account to the level that the work completes requirements of WCAG 2.2 AA at 50% minimum.". I do not quite understand. Are you only striving to achieve a 50% fullfillment of WCAG 2.2 AA? Why not 100% CKAN should support 100% compliance with WCAG but if the users change things that might be impacted of cause but the standard design should be pretty close to perfect right?

I like what I see in figma right now. The resultpage needs som love though. The colors for the features on a search hit (pdf, json e.t.c.) is a bit to dominant. The search page as a whould would benefit from some love.

It would also be great if there is a template for an accessibilty statment that is valid for a core ckan implementation and if there is a way to add to that page depending on what extentions you have installed (they provide their own partial statements).

[thegostev]

Hey, @bjornhagstrom, short answer is that WCAG 2.2 AA compatibility wasn't planned in the scope of UI Revamp project. That's why it's formulated as 50%, with the idea that we'd do what we can, along the way, leaving work on compatibility to a separate project.

This separate project to achieve WCAG 2.2 AA, I'm planning right now and ideally we're starting with it in 2 months period. There are 55 criteria to comply to so I expect it'd include combined effort of designers and developers. It would be great to get external audit at the end of the project, though realistically it'll be a self-audit which can result in producing and publishing a report.

Thanks for getting into the conversation! Please let me know if you have anything to add or to discuss.

[thegostev]

Design system is built, along with layouts, feedback is taken and processed. The last design touch would be in the area of mobile interfaces.

Meanwhile we're moving to implementing existing designs, which is 3rd stage of UI Revamp initiative of 3 stages in total.

[thegostev]

We’d completed mobile designs. They’re located at the left-hand side of each layout page. Please leave your feedback right there in Figma: https://www.figma.com/design/oI3wDSdZ0cHZLh6CrfYMnb/CKAN-3.0-Design-System?node-id=994-20627&t=vuaKK2MlalWkI2ol-0