<p></p>
<p dir="auto">thanks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gravitystorm/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gravitystorm">@gravitystorm</a> the bootstrap documentation helped a lot to improve my proposal.<br>
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 <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast" rel="nofollow">(MDN color contrast)</a>.</p>
<p dir="auto"><a href="https://postimg.cc/Vdt3Yxxv" rel="nofollow"><img src="https://camo.githubusercontent.com/352880f5c789a700104d62bab067e13a7f454ac1d14a6fed8f830f9e99aaa041/68747470733a2f2f692e706f7374696d672e63632f39466756425631642f70686f746f2d323032332d30322d30392d31302d34352d35392e6a7067" alt="photo-2023-02-09-10-45-59.jpg" data-canonical-src="https://i.postimg.cc/9FgVBV1d/photo-2023-02-09-10-45-59.jpg" style="max-width: 100%;"></a><br>
<a href="https://postimg.cc/YGpW9BDH" rel="nofollow"><img src="https://camo.githubusercontent.com/664bee164382c97ad41c7783bebaa81315e2fb74880dda8ba88999e00cd267ff/68747470733a2f2f692e706f7374696d672e63632f34646362574a7a6d2f436170747572612d64652d74656c612d64652d323032332d30322d30382d31362d30392d33342e706e67" alt="Captura-de-tela-de-2023-02-08-16-09-34.png" data-canonical-src="https://i.postimg.cc/4dcbWJzm/Captura-de-tela-de-2023-02-08-16-09-34.png" style="max-width: 100%;"></a><br>
<a href="https://postimg.cc/HVWBNfTF" rel="nofollow"><img src="https://camo.githubusercontent.com/450eedb29e053864a8cb1916a719c659c1007057a16155b37097e49283b97d20/68747470733a2f2f692e706f7374696d672e63632f4a345a76734c76372f436170747572612d64652d74656c612d64652d323032332d30322d30382d31362d31332d31312e706e67" alt="Captura-de-tela-de-2023-02-08-16-13-11.png" data-canonical-src="https://i.postimg.cc/J4ZvsLv7/Captura-de-tela-de-2023-02-08-16-13-11.png" style="max-width: 100%;"></a><br>
<a href="https://postimg.cc/GBb2PJFP" rel="nofollow"><img src="https://camo.githubusercontent.com/e7f1850aa0000f81d29629b88f0afdb3e0711c7079ad59ff16b23a57292f2c05/68747470733a2f2f692e706f7374696d672e63632f62767474686d64352f436170747572612d64652d74656c612d64652d323032332d30322d30392d31322d30362d34372e706e67" alt="Captura-de-tela-de-2023-02-09-12-06-47.png" data-canonical-src="https://i.postimg.cc/bvtthmd5/Captura-de-tela-de-2023-02-09-12-06-47.png" style="max-width: 100%;"></a></p>
<p dir="auto">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).<br>
<a href="https://www.checklist.design/flows/submitting-a-form" rel="nofollow">https://www.checklist.design/flows/submitting-a-form</a></p>
<p dir="auto"><a href="https://postimg.cc/XGFzVFPh" rel="nofollow"><img src="https://camo.githubusercontent.com/3bb862109e21f392b6b074c3d79434d9fc90cea48b31eb74ab03630d539b3820/68747470733a2f2f692e706f7374696d672e63632f6d443666797979622f436170747572612d64652d74656c612d64652d323032332d30322d30392d31312d30372d33342e706e67" alt="Captura-de-tela-de-2023-02-09-11-07-34.png" data-canonical-src="https://i.postimg.cc/mD6fyyyb/Captura-de-tela-de-2023-02-09-11-07-34.png" style="max-width: 100%;"></a></p>
<p dir="auto">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.</p>
<p dir="auto"><a href="https://design.penpot.app/#/view/55d48600-1ee8-11ec-9b4d-b2702b3a67d1?page-id=ae6e99f0-489e-11ed-ba98-8351b9a013d4§ion=interactions&index=0&share-id=2eb76e7e-3bb3-81ac-8002-06ac11576817" rel="nofollow">https://design.penpot.app/#/view/55d48600-1ee8-11ec-9b4d-b2702b3a67d1?page-id=ae6e99f0-489e-11ed-ba98-8351b9a013d4§ion=interactions&index=0&share-id=2eb76e7e-3bb3-81ac-8002-06ac11576817</a></p>
<p dir="auto"><a href="https://postimg.cc/677H1Gx8" rel="nofollow"><img src="https://camo.githubusercontent.com/76f9a2a2b82528d6cc08d041442769f0dabbceea137305332c4998bc909b7c46/68747470733a2f2f692e706f7374696d672e63632f6d726a306b5164792f6c6f67696e2d6465736b746f702d312e706e67" alt="login-desktop-1.png" data-canonical-src="https://i.postimg.cc/mrj0kQdy/login-desktop-1.png" style="max-width: 100%;"></a></p>
<p dir="auto">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.</p>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/issues/3785#issuecomment-1424352522">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPGIPTXCA6LMTSVOUDWWUC4BANCNFSM6AAAAAARXRQNZI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLJ2UCSEP3LY2QIIKBTWWUC4BA5CNFSM6AAAAAARXRQNZKWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTSU4XSQU.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/issues/3785/1424352522</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/issues/3785#issuecomment-1424352522",
"url": "https://github.com/openstreetmap/openstreetmap-website/issues/3785#issuecomment-1424352522",
"name": "View Issue"
},
"description": "View this Issue on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>