[Redesign]:Django Debug Toolbar

[VeldaKiara]

Areas for Redesign

a. Logo & Branding

• Evaluate the current logo for modern aesthetics and recognizability.
• Consider a logo that visually conveys speed, insight, and debugging.
• Ensure compatibility with light/dark modes and different sizes (favicon, toolbar icon, etc.).

b. Design Colours

• Define a cohesive colour palette for branding, toolbar UI, website, and documentation.
• Ensure colours support accessibility and WCAG 2.1 contrast standards.
• Include primary, secondary, accent, and neutral colours to maintain consistency across all touchpoints.

c. Website & Documentation

• Improve documentation layout, readability, and searchability.(Keep as much of the existing language)
• Highlight quick start, integrations, and community contributions.
• Use the new colour palette and visual language for a cohesive experience.
• Accessibility: Ensure all content is WCAG-compliant, including colour contrast, font sizes, and semantic HTML.

d. Toolbar Interface

• Review current panels for usability: are key metrics and actions easily accessible?
• Explore improvements to colour, typography, spacing, and visual hierarchy for better readability.
• Consider responsive and adaptive designs for different screen sizes.
• Allow custom theming or light/dark modes that align with the new colour palette.
• Accessibility: Ensure keyboard navigation, screen reader support, and clear visual indicators for interactive elements.

e. Accessibility & Inclusivity

• WCAG 2.1 AA compliance for colour contrast, font readability, and focus states.
• Keyboard navigation for all toolbar panels and controls.
• Screen reader support for metrics, tooltips, and interactive elements.
• Inclusive language and design choices across the website, documentation, and toolbar.

[VeldaKiara]

Hi @tim-schilling @matthiask @elineda

I had shared the above via email and decided to add it as a discussion here so they could be morphed into issues later on.

Based on the previous discussions, we all agreed that the priority would be on the logo redesign.

@tim-schilling since you know how Django commons is doing this, would you share insights with me on how to move forward?

[tim-schilling]

@VeldaKiara I would suggest putting together a short timeline and set priorities on deliverables.

Then you can tag @django-commons/designers and ask for people to review, ask questions and/or volunteer to help. I suspect it's possible we'll have more than one person responding they are interested, so we'll need to find a way to identify who is going to lead the project from a design perspective. It may be worth having a plan in place before messaging people. It could be as simple as asking people to submit their portfolio and a few sentences about how they'd like to approach the project. You could also set up meetings with people to chat with them to see if you'll work well with them.