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

[Andy Allan]

> I think we should first discuss the creation of a Design System for the OSM ecosystem and then go through the rest calmly as suggested.

> I did some research before and did not find a documentation about the current design process if you can send it I would appreciate it, from what I think it is used only H1,H2,H3 tags and some bootstrap buttons without any personality reminding us of 2000's sites and simple HTML pages

There's no specific documentation about the current design process that I can send to you, but I'm happy to discuss our approach. 

For many (10 ish?) years we had a custom set of CSS stylesheets which defined our site design. However, they only had extremely limited responsive capabilities, and few generally reusable design rules, and so a lot of the website was styled on an ad-hoc basis. We introduced Bootstrap in late 2019 and started the long process of refactoring our site to remove the use of custom CSS, adopt Bootstrap and use components and other features from there.

The main principle of our design is to "use Bootstrap defaults wherever possible". In particular, this covers things like using responsive layout grids, spacing between elements, typography, meaning through colour, form layouts and spacing, etc. This principle is because we are a small team, and history shows that we simply do not have the resources to maintain our own bespoke site design. Similar to all of our code (e.g. rubygems, node modules), if we can build on top of someone else's existing work, so much the better. If we are just reinventing the wheel, then we must avoid that. In particular, by using Bootstrap and updating to new versions as they are produced, we have gained improvements like responsive font sizing, without having to design, develop and maintain such features ourselves.

You say that we only use h1, h2, h3 tags and some bootstrap buttons, and I have to strongly disagree. Perhaps it's because Bootstrap is so ubiquitous and familiar that you haven't noticed things like form layouts, tabbed navbars, alerts and other components. But trust me, you would notice if we were not using them and were still making up our own design ourselves!

I don't have a clear idea of what a "design system" would mean to you, in contrast to what we are doing already. In my limited experience "design systems" are mostly used as a way to ensure consistency between multiple designers on very large projects, and given our situation we have little need for such coordination. If you are thinking of a design system being a higher level set of abstractions, like how we could combine multiple Bootstrap components consistently for similar website features, then that sounds like it can be useful. If you mean to coordinate design across multiple different OSM projects in the wider "ecosystem", then that could be challenging. Or if you mean something significantly different, then let's clarify the topic further.

So I hope this gives you some background. Feel free to ask questions or ask me to elaborate on any of these points.

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

Message ID: <openstreetmap/openstreetmap-website/issues/3785/1325507937 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20221123/9accd049/attachment.htm>