Website rework

We wrote about a Call for participation: Goals for our website. To see how this could work I did the following so far:

  • Install Jekyll and follow the quickstart doc. Context: I thought it is not maintained anymore, but it seems to be and since github pages runs it natively, I would stick with it, even though Ruby is not as widespread as 10 years ago.
  • Create some simple pages: According to what we talked about we would need:
    • A homepage with a short overview
    • A page like “join OSD”, “Participate” or the like where we describe how to take part in the OSD community.
    • A page like “Learn”, “Learning resources” where we link to articles and resources our members provided.

TODO:

  • Find out how to bend the URLs to keep the URLs of the old side intact. Maybe the YAML permalink parameter is enough already?
  • Find out how to list the resources (one long list? Subpages?)
  • Find out how to add external links (to jobs and discourse) to the Navbar, except we want to archive both.
  • Customize the theme, particularly adding our logo

NOTE:
There are many things we could hardcode or hack for slight gains in look or usability. However this is easily a maintenance risk. Ideally, most if not all we do should be based on facilities that Jekyll provides natively.

1 Like

Maybe this structure:

  • Do Design in an Open Source Project [what should be the menu entry name here?]
    • Getting started
    • Meeting other Open Source Designers
    • Some background infos on culture
  • Being a community member of the open source design organization [what should be the menu entry name here?]
    • Aims and CodeOfConduct
    • Calls
    • Governance
  • Learning Resources: List of linked resources
  • Discuss: Discourse
  • Jobs

Hey, I thought it’s important to look at the website’s page structure and menus before jumping into visual design. I did first a rough map of the desktop view, then made a first suggestion below on how to make the homepage and the top nav easier to navigate and to move some stray elements to a more logical place.

Current website

Home:

  • Top menu (expanded below)
  • header img (not much info, takes up a lot of space)
  • 3-column intro
  • 3-column layout: Articles, Events, Community Calendar, Jobs&Projects
  • Supporters (weak button: Become a Sponsor)
  • Contributors&Backers
  • Conferences
  • Affiliates
  • Contact us (socials), code of conduct

Top menu:

  • Goals
  • Articles
  • Resources
  • Jobs (& Projects)
  • Events
  • Forum (Discourse)
  • Summit
  • Milestones

Other pages:

  • GitHub?
  • Manifesto (Could this merge with goals?)
  • Community Calendar

Footer:

nothing

Suggestions

Home:

Some general ideas and small improvements

  • Top menu (expanded below)
  • Remove filler header image, move first paragraph front and center
  • 2nd and 3rd paragraph are their own sections with more weight, maybe add photos of OSDN at conferences, etc.?
  • Events, Calendar, Jobs: time-sensitive and engaging, sidebar maybe? design exploration needed
  • Articles: static, can come later
  • Section to support in multiple ways
    ** Supporters: button should be a clear CTA
    ** Contributors&Backers: add a CTA
  • Conferences
  • Affiliates
  • Contact us (socials): remove Code of Conduct from here

Top menu:

  • About Us
    ** Goals
    ** Manifesto (or Goals & Manifesto)
    ** Milestones
    ** Summit (is this page still relevant? do we keep it?)
  • Community
    ** Events
    ** Forum
    ** Jobs
    ** Code of Conduct
  • Resources
    ** Articles
    ** External resources

Footer

Create one to give an overview of the page map, and possibly link to pages we’re not quite ready to delete, but it’s outdated/clutter

My POV was to arrange existing content better before writing new content or pages. If there’s capacity to do that, even better.
Feel free to ask questions, and let me know what you think!

1 Like

I like the suggested structure (about us/community/resources)! I do not know if we can/should rearrange the pages we currently have within the current design or whether we should focus on new/reworked content and a new structure.

1 Like