[openstreetmap/openstreetmap-website] Reimagining the OSM.org (Issue #3785)

[Gustavo Soares]

thanks @gravitystorm  the bootstrap documentation helped a lot to improve my proposal.
I also noticed that in the folder that has the images there is also the color palette that is outdated and analyzing the colors currently used on the site we have a contrast problem that can affect people with color blindness and other vision conditions. here is the link from MDN for those who want to read more about [(MDN color contrast)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast).

[![photo-2023-02-09-10-45-59.jpg](https://i.postimg.cc/9FgVBV1d/photo-2023-02-09-10-45-59.jpg)](https://postimg.cc/Vdt3Yxxv)
[![Captura-de-tela-de-2023-02-08-16-09-34.png](https://i.postimg.cc/4dcbWJzm/Captura-de-tela-de-2023-02-08-16-09-34.png)](https://postimg.cc/YGpW9BDH)
[![Captura-de-tela-de-2023-02-08-16-13-11.png](https://i.postimg.cc/J4ZvsLv7/Captura-de-tela-de-2023-02-08-16-13-11.png)](https://postimg.cc/HVWBNfTF)
[![Captura-de-tela-de-2023-02-09-12-06-47.png](https://i.postimg.cc/bvtthmd5/Captura-de-tela-de-2023-02-09-12-06-47.png)](https://postimg.cc/GBb2PJFP)

We also have some UX issues in case the user makes a mistake on his password or login, it's not shown which of the two he made, as well as on the sign up page the same happens, but in the sign up page it could be validated directly without the user having to submit (at least in some fields). 
https://www.checklist.design/flows/submitting-a-form

[![Captura-de-tela-de-2023-02-09-11-07-34.png](https://i.postimg.cc/mD6fyyyb/Captura-de-tela-de-2023-02-09-11-07-34.png)](https://postimg.cc/XGFzVFPh)

so I made some corrections in the color palette and some adjustments in the UI but trying to keep the identity already established in OSM.org, I think this is the first mockup ready to be implemented and fully responsive, I also used the 8pt grid system. 

https://design.penpot.app/#/view/55d48600-1ee8-11ec-9b4d-b2702b3a67d1?page-id=ae6e99f0-489e-11ed-ba98-8351b9a013d4&section=interactions&index=0&share-id=2eb76e7e-3bb3-81ac-8002-06ac11576817

[![login-desktop-1.png](https://i.postimg.cc/mrj0kQdy/login-desktop-1.png)](https://postimg.cc/677H1Gx8)

some things are still missing in the sign up page like illustrations and texts, that's why I didn't adapt it to other screen sizes, sometimes the penpot can break the spacing of the objects.


-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/3785#issuecomment-1424352522
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/issues/3785/1424352522 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230209/80eff81d/attachment.htm>