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.