Redoc: Redoc UI/UX

[skllcrn]

We really love Redoc, the developer experience is fantastic. However, we wish it was easier to read and use for everyone. Would you be open to me listing a few thoughts on the current default design, and possible ways to improve it?

Feedback

• Typographic hierarchy
  
  
  
  • Use font weight to help separate sections
  
  
  • Reserve link styling for links
  
  
  • Type names are not capitalised
  
  

A good example of this is the H1 class, which uses styling similar to a link, and lacks weight.

• Layout spacing
  
  
  
  • Use a defined set of margins and paddings, with rules for what to use where
  
  
  • Use proximity to indicate which elements are related and not
  
  
  • Increase margin between icons, labels and text
  
  

The left sidebar search input is a good example here, for many it's the primary mode of navigation, however its padding gives it little visual weight leaving it feeling like an afterthought.

• Inputs, buttons and selects
  
  
  
  • Right now there are a lot of button styles being used and it can be hard to know what's clickable and not, and to sepearate inputs from buttons and other information. For example the field listings look identical to an input.
  
  

[RomanHotsiy]

@skllcrn definitely yes! It would be really appreciated!

[skllcrn]

Awesome @RomanGotsiy, I updated the post with some initial feedback!

[RomanHotsiy]

@skllcrn, Thanks for the feedback 👍.
I'm constantly trying to make ReDoc design more logical. The current version is ReDoc is a big leap forward comparing to the 1.x.

Your feedback is very high-level though. If you had some time to pinpoint some concrete examples from ReDoc with concrete ideas/ways of how to improve I would much appreciate it!

You and anyone 🙌 are welcome to post your thoughts here!