Hi OSM developers!
I want to make the OSM rails site better. I've already started submitting a
few small pull requests (thanks Tom for the merges!), but I thought I'd lay
out my plans and solicit suggestions from those of you who are more
familiar with things than myself.
I plan to approach the project by first making incremental, obvious
improvements, resisting the urge to design from the ground up. I want to
hold onto the brand identity, the paired-down aesthetic, and the
information architecture. Based on the solid foundation that is already in
place, I want to start shaping it into a more friendly, modern,
professional website. Here is our hit list of adjustments:
- Remove table-based layout elements where they're inappropriate. Tables
are hard to style, and often don't align cleanly with other elements on a
page. (partially done in site-cleanup)
- Start to establish a horizontal grid in the content area for better
organization (partially done in site-cleanup)
- Clean up typography, with stronger rhythm, more breathing room,
consistent behavior (done in site-cleanup)
- Break up #content section of the site into two sections: .header and
.body. This adds some much needed hierarchy to pages, and establishes
a predictable pattern to help new users find their way around and interact
with the site (partially done in site-cleanup)
- Consistent and more prominent button styles
- Consistent margins. I am using a 20px base for margins across the site
right now (partially done in site-cleanup)
- Better looking map markers and map popups
- Improved 404 page
- Perform a copy review and clarify UI text (IE, friends - contacts)
(partially done in site-cleanup)
- Simplify the 'examples' below the search box.
- Rethink the where am I? and home buttons from the home page, turn
them into a single button that does something more useful
- Better, more consistent icons. (partially done in site-cleanup)
- Consolidate all the graphics into sprites
- Find a better home for the 'map key' link
- Find a better home for the 'GPS traces' link
- Restyle forms
- Friendlier login / new account pages. These pages should include a
concise statement + graphic encouraging users to join
If there are more no-brainer fixes to hit, I'd love to hear them and add
them to to this list.
Right now, I am close to having the site-cleanup branch ready for
mergehttps://github.com/openstreetmap/openstreetmap-website/pull/150.
There is one blocker though. I would like to build in a separation between
the header and content of the body of pages into the site logic. I taked to
Pavel about helping with implementation, so hopefully that can happen
soon. Here
are some details on what exactly needs to
happenhttps://github.com/openstreetmap/openstreetmap-website/pull/150#issuecomment-9923530.
I am going to cut off new additions to this branch and make sure everything
here works. I will try to keep pull requests more contained in the future.
This one started with a typography overhaul, but a lot of the 'typography'
problems were interrelated with other issues. Next up, I want to rework the
map markers and popups.
At the same time that I am making these small improvements, I will be
thinking about how to push the OSM site forward in more ambitious ways:
more inviting UI, new functionality, better tools, stronger visual
identity. How do we make this site a place both for map consumers to find
their way around, and the home for a more active, more connected mapping
community? How do we make the site dramatically more inviting to new
users? For now, I want to take care of the easy problems.
Lastly, here's a little bit of background about why I'm doing this and who
I am:
I'm a designer at MapBox http://mapbox.com/about/team/#saman-bemel-benrud. As
you all probably know, we recently received a big grant from the Knight
Foundation to help OSM. Part of that money is going to fund improving the
website, mostly implemented by me. Yep. I work for the man. This man
specifically http://mapbox.com/about/team/#eric-gundersen. I also think
OSM is an amazing project and I want to do everything I can to make
productive contributions to it. My background is solidly in visual/UI
design (I can also write html/css very bad javascript), and while I've
worked a little with CMS's, I am not much of a developer and don't have any
familiarity with Ruby on Rails. I hope to get more capable over the next
few weeks, but for now I'll probably be making mistakes and asking for help
from those of you who know their way around the Ruby side of things.
Looking forward to working more with all of you. Now would be a great time
to provide feedback on the list I have so far and also send advice my way
on how to best approach things.
___
dev mailing list
dev@openstreetmap.org
http://lists.openstreetmap.org/listinfo/dev
