Wireframes for the new Ansible.com community-powered website

While the summer has been somewhat focussed on the forum, the Website Working Group has been busy :wrench:! We’ve been going back-and-forth- over the wireframes that will be used to build the site in the next couple of months, and we’d like to show them off to you - and get your feedback.

(For those wanting a more detailed history, check out Create wireframes for main pages · Issue #57 · ansible-community/community-website · GitHub)

The goal is to create a Static Site Generator-based website that we can manage from Git, just as many upstream projects do - this allows the community to submit content and/or improvements in the usual Open Source way. But we do want it to look good - ansible.com is a high-traffic URL - and we also need to make sure we direct those still looking for the downstream products to the right places.

Without further rambling, then, here is the current set of wireframes (click for higher-res images) :tada: :

This is obviously just the frontpage, but we’d like to get working on this while we nail down the look for the blog, events page, etc, since they will only get a subset of the traffic and can inherit much of the style from the frontpage.

Let us know your thoughts (and huge, huge thanks to the Ansible UX team, especially Tina Yip!

4 Likes

Massive shout out to that Ansible UX team.

3 Likes

This looks really cool! One comment: shouldn’t the logo in the navbar use the blue community Ansible logo instead of the black one?

2 Likes

I think the blue (pool) logo won’t work well against the pool background. Black can also be used for community logos!

This is looking great!

What goes in the Community section of boxes?

Also, how do we decide which ecosystem projects appear on the front page vs the ones under the View More link?

The community section boxes idea was to be icons to the different community channels. For example:

  • Forum
  • Matrix
  • Mastodon
  • Twitter
  • Meetup
  • Github Ansible (or Community? Or Collections? or all 3?)
1 Like

I had a couple of ideas for this rotation:

  1. To use it to highlight the project that the community think needs some extra exposure or “reward”. Thinking a big new release for example. Or something great that happened community-wise.
  2. We do an automated schedule if possible, 1 week (or day) each project for ex.

Hi everyone,

We’ve been busy with the implementation of the wireframes and I thought I’d share some updates.

Hero banner

Why Ansible? section

Ecosystem section

Community section

Blog section

Contribute section and Subscribe to the Bullhorn

Events section

Platform section

4 Likes

I’ve also been working with the designer on an updated version of the wireframe and there is a raft of additional changes and fixes in store but it’s starting to take shape!

Apart from the design work left to do there’s a fair effort on responsiveness (mobile displays) as well as accessibility, both of which are pretty important.

3 Likes

Awesome work @oranod & @tiyip, thanks! I’ll be showcasing this at the Community Day tomorrow!

2 Likes