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鈥檝e been going back-and-forth- over the wireframes that will be used to build the site in the next couple of months, and we鈥檇 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鈥檇 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鈥檛 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鈥檛 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 鈥渞eward鈥. 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鈥檝e been busy with the implementation of the wireframes and I thought I鈥檇 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鈥檝e 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鈥檚 starting to take shape!

Apart from the design work left to do there鈥檚 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鈥檒l be showcasing this at the Community Day tomorrow!

2 Likes