search

neos / Neos.DocsNeosIo

The docs.neos.io website
9 stars 11 forks source link

New design (and structure) #95

Closed manuelmeister closed 1 year ago

manuelmeister commented 2 years ago

I've tried to make the design more legible and tried to make it more noob friendly. I used the old vitepress theme as a base.

image

Preview: https://instance-7602d6b0-3aac-4c9a-bd63-6f382cbf56aa.flownative.cloud/

Content (this will be discussed and changed after the new design is deployed)

Improvements

crydotsnake commented 1 year ago

The preview instance is not working anymore 😕

manuelmeister commented 1 year ago

Sorry my trial at @flownative ran out.

kdambekalns commented 1 year ago

Sorry my trial at @flownative ran out.

You could have asked for stage instance to be set up in the Neos project… 😜

robertlemke commented 1 year ago

@manuelmeister I configured the new Beach instance so that the free trial does not expire.

manuelmeister commented 1 year ago

@robertlemke @kdambekalns sorry, ich hatte es auch vergessen gehabt und habe jetzt halt noch einmal eine neue Instanz gemacht: https://instance-7602d6b0-3aac-4c9a-bd63-6f382cbf56aa.flownative.cloud/

mhsdesign commented 1 year ago

Wow :heart:

markusguenther commented 1 year ago

I am on an 8.1 update and when this is done I hope that the rebase is not so hard... https://github.com/neos/Neos.DocsNeosIo/pull/100

rolandschuetz commented 1 year ago

I like the general look, the way the content looks and how example and tabs look.

A few minor things to improve:

manuelmeister commented 1 year ago

@rolandschuetz Thanks for the review! 😊

The buttons and linklist looks a bit sloppy. The shadow animations don't really fit the Neos brand.

What do you mean with "sloppy"? Just the shadow?

"Installation With DDEV / Local Beach" is a weird clustering, I think each on should have it's own menu item

"Installation Manual Setup" doesn't follow the above introduced structure, maybe "Installation On your Locale System"

I just thought that from a beginner perspective, there are several paths:

But I think this should be discussed in a next step (as this PR does not include Structure changes)

The tutorial pages are broken https://instance-7602d6b0-3aac-4c9a-bd63-6f382cbf56aa.flownative.cloud/tutorials/flush-varnish-cache-after-successful-surf-deployment

I think your review coincided with a deployment

I don't understand why Tutorials is so far removed from the docs, and what the menu item "Guides" should be

The search is currently broken https://instance-7602d6b0-3aac-4c9a-bd63-6f382cbf56aa.flownative.cloud/search?search=fusion and all images are missing, guess this is just a setup thing and should be ignored?

I don't know how to set it up on beach. On my machine it works perfectly. Maybe @kdambekalns can help here.

I like the Fusion Pen examples page!

Thank you. I think code wise it needs some work.

I think the way to actually find neos.readthedocs.io is too far, it's hidden under API References https://instance-7602d6b0-3aac-4c9a-bd63-6f382cbf56aa.flownative.cloud/api/references

I think for the meantime (until we integrate the code reference from github) I think we could make it, so that references is the main page when you click on api in the navbar. Not a direct link to readthedocs, but the overview page: https://instance-7602d6b0-3aac-4c9a-bd63-6f382cbf56aa.flownative.cloud/api/references

manuelmeister commented 1 year ago

I did not want to remove the request for review

rolandschuetz commented 1 year ago

It's a little hard to explain, or a lot of work to define "sloppy", some elements just don't have the CI-feel to it. E.g. probably LinkList.Items should not be bold, since they are normal content. Hover effects should have transitions, some spacings look a bit off... it's confusing that some headlines have a direct link and some don't (e.g. Read API on homepahe has a link, but Ask the community not), link hover effects should make the element light blue like on our website, and not add a underline for elements like lists or buttons, ...

manuelmeister commented 1 year ago

@rolandschuetz I've tried to make the whole docs design as accessible as possible. The neos color sadly is really bright and does not combine well with white and is not very readable. If on hover it is even brighter, it makes the contrast even worse.

Contrast WCAG: https://webaim.org/resources/contrastchecker/?fcolor=00ADEE&bcolor=FFFFFF APCA: https://www.myndex.com/APCA/?BG=ffffff&TXT=00adee&DEV=G4g&BUF=A22

I thought, in general it would make sense to diverge from the branding CI (I very like for print products) and make it more accessible. To keep the brand color #00ADEE for links instead of a darker shade, I've made the links slightly bolder (medium) and added an underline on hover, as this is universally understandable as a link. I think that dev docs need to be very readable and have an easy to understand visual hierarchy.

I agree that the shadow is not very "on brand". I'll rework this part. Also for the hover effect I think I'll find an improved but consistent way.

This has not changed with my PR. The linklist title was not hashlinked before. I've just replaced the custom html widget with sections. @markusguenther said that he wants to remove the widget anyway: https://github.com/neos/Neos.DocsNeosIo/pull/100#issuecomment-1331980822

If you want, we can discuss the design bilaterally in a phone call. I find written design feedback difficult because then a lot of nuances get lost and it's usually not so clear to me how to weight the different statements.

kdambekalns commented 1 year ago

The neos color sadly is really bright and does not combine well with white and is not very readable. If on hover it is even brighter, it makes the contrast even worse.

Contrast

I agree with the approach, just something funny: Those two sites IMHO are horrible in terms of being easily accessible. The myndex.com tool specifically looks like good old GeoCities, somehow… 🤣

manuelmeister commented 1 year ago

With the current design trends, creating accessible design is hard.

manuelmeister commented 1 year ago

@rolandschuetz if you find time, could you have another look?

manuelmeister commented 1 year ago

@jonnitto thank you for the review! I've either fixed those issues or added them to the cleanup task (#105). Could you take another look?

manuelmeister commented 1 year ago

Meeting with @rolandschuetz

Next steps

manuelmeister commented 1 year ago

@rolandschuetz I've implemented the requested changes.

markusguenther commented 1 year ago

Seems that I am not allowed to update the branch ;)

manuelmeister commented 1 year ago

@markusguenther fixed it :)