Create wireframes for main pages

[tiyiprh]

Here is a draft of what the homepage could look like based on some of the requirements pulled from: https://hackmd.io/@ansible-community/new-website-concept and https://hackmd.io/Coney0ZtQDSQVx5wvhOp6Q?both

Open to any feedback!

[GregSutcliffe]

Loving it @tiyiprh, thanks! I think this is pretty much exactly what I had in mind.

My only concern is that we need to make sure RH AAP folks can find their way without scrolling - many will be used to find that info on ansible.com quickly. I'm trying to find a midpoint between "an icon on the nav bar" and taking up 1/3rd of the page space... perhaps a banner under the navbar, maybe 2-3 times the thickness. Something like this (just quickly sketched out...)

How does that feel? @oraNod thoughts?

[maxamillion]

@tiyiprh that looks awesome! Thank you! 👍

[oraNod]

Thank you @tiyiprh This is great to see.

A couple of points:

• @GregSutcliffe I don't know that I really like the idea of a banner underneath the navigation bar but that is definitely sensible. I agree that if whatever the link is should be accessible without a lot of scrolling but that location feels intrusive for the community.

I wonder if there is someway we can have a sort of popup dialog that takes users to platform stuff on redhat.com - then maybe enabling an "ignore" option for the popup that is stored in a cookie so on subsequent visits to ansible.com you don't have to see it again if you're not interested in the platform. And I don't mean anything like a popup along the lines of "Interested in a support subscription?"

• I would like to see the pip install ansible clipboard stay on the homepage with the current Ansible version. One of the purposes of this site, in my mind, is to be the home of the Ansible package.

[GregSutcliffe]

Doesn't have to be a banner - I'm open to other forms of doing it. But given the personas we've set up, I stand by the fact that anything less than "visible and obvious when the page is loaded" is a minimum. I could land with something dismissable if we can make it work, but I think the "new-to-ansible" (and thus no cookies) experience has to serve that usecase and look good while doing it, so something cookie-based/dismissable is optional in my view.

100% agree with keeping the install in the sidebar, rather than the logo that is in the wireframe.

[samccann]

One of the things I've seen in other sites (tho alas, can't remember where) is a Product link in the top nav. Alternately, on the wireframe, where it has 'get started' button, we could put a RHAAP button (tho it would be big because we can't abbreviate Red Hat Ansible Automation Platform.

Alternately alternately -we use one of the first 'boxes' under What Is Ansible to be RHAAP. Over time, when people click that less and less (we hope) then we can push it further down the page.

[tiyiprh]

Thanks for the feedback everyone! Will work on making some updates.

For the pip install ansibleit is not currently a button that takes you to another page to start the download or begins a download correct? It looks like you can just copy it?

[GregSutcliffe]

@tiyiprh correct, you'd want to execute that in a terminal, so copy is the right action. If we can add a button to make that automatic (rather than hightlight + Ctrl-C) then that's a plus.

[oraNod]

Technically the pip install ansible thing is a button. I mean it's a button wrapped around that fa clipboard icon. But that might not be so relevant to the wireframe.

[tiyiprh]

Here is an updated mockup: -added the pip install ansible with copy icon -added a link to learn more about RHAAP right under so it would still be apparent within the header but not too prominent -added the bands under the Bullhorn. Not sure if these are the right sections but those can be updated. -left the RHAAP section just above the footer as an additional item to give more information and draw the user at the end again in case they missed it at the beginning or are intrigued to learn more

[GregSutcliffe]

Looks good to me! nice work @tiyiprh

[tiyiprh]

Thanks! I'll continue iterating on this and make it a little bit more high-fidelity. Feel free to let me know what each section should include or if it needs to be adjusted!

[tiyiprh]

Hi all, here is an updated mid-fi mockup that now includes the icons from issue #48. The first one has the icons as the second section that will link to another section of the homepage with more info. We felt the information might be too repetitive so close to each other so in the second exploration, we removed that section and just replaced it with the bands of information. Let us know any feedback you have! Thanks!

[GregSutcliffe]

Great work @tiyiprh - I think the one of the left is where we're aiming (features as logos at the top with expanded info further down. I'd possibly put blogs/events above the expanded info (because we can use the icons up top to jump to them), but otherwise it's spot on, IMO. Thanks!

[maxamillion]

@tiyiprh these are amazing! thank you so much! I agree with @GregSutcliffe that the left one is preferential. It look so good! :+1:

[cybette]

Its so exciting to see this taking shape so nicely! I also prefer the left one. Thank you @tiyiprh !

[oraNod]

Thank you so much @tiyiprh These wireframes are really, really good. +1 for the left option.

[tiyiprh]

Here is a hi-fidelity mockup! We can continue to iterate but wanted to send a draft of what we have so far. Let me know your thoughts!

[tiyiprh]

Updated landing page mockups. This is the one we liked the most. Would welcome any feedback! Our approach with this one is that using the tabs that change dynamically based on what you click and would save a lot of room.

When a user lands on this page, the "Automate" tab would be shown by default.

Showing what the "Agentless" tab view would look like.

[leogallego]

Hi all! Thanks @tiyiprh for sharing and keeping at it!! it's looking better each time! It's great to see it taking shape.

I'm going to play devil's advocate here though on the last mockup with tabs. In my opinion, having tabs look great and does save space, but at the cost of requiring people to click versus just scrolling (which comes more natural, particularly on mobile). Also, you would "lose" one to see the other section.

Scrolling is not great, but it's so common today that most people don't mind. Think Instagram/Twitter or any social networks, usually those are infinite scroll, people are "trained" daily for that. Mobile experience should also be an important aspect of the landing page, as lot's of people use their phones to do the first visit when they are shared a link, and this is particularly important for our new users and outreach efforts.

I would keep the "tab bar", but use the individual featured bars one below the other for ex., and use the icons as link anchors. My thought on the buttons/icons was to make it more like a quick "Table of Contents" for the landing page, where it would take you to the featured bar for that topic, but if you just scroll you could also reach it.

Going back to the actual buttons/icons and feature bars content, and something I mentioned but didn't wrote down here before, and I think it's related to the UI/UX from a design perspective (although content might change in the future): If we were to use the buttons/icons to link & show/promote the actual sections (and not "descriptions" of Ansible itself):

1. a "get started" button/icon, with an intro to Ansible and link to the guide in docs (for ex.),
2. a "community" for the "community feature bar" where we describe some of the platforms options to engage the community (matrix, forum, github, mastodon, twitter, etc.)
3. "ecosystem" where we mention a few of the projects or a rotating featured project and link to the "ecosystem" page where we have a detail of each of them with their links to repos/docs/etc.
4. "blog" where we have a featured article and a link to the blog itself
5. "collections", with a featured collection for example, and again, linking to a wider collections landing or the docs
6. "contribute", showcasing all the ways they can contribute/collaborate with ansible linking to a possible landing page (we have one in docs, but we could probably have that moved to the site itself?)

Those are examples, we might want to use one for Meetups or Videos for one of the above. So, which ones go to the "button/icon" bar probably defines how those featured sections look. Probably some of these sections can be bars by themselves without a tab/icon/button (like Bullhorn and the blogs/events sections in the current mockup for example)

I hope the wall of text is not too daunting and I explained better here what I meant the other day!

[tiyiprh]

Hi @leogallego, thanks for the feedback! Do you happen to have the content that would go in each section or be able to point me to where I can find more flushed out content?

[tiyiprh]

Some updates to the landing page based on the feedback and our iterations:

• We've kept the tab bar but made them anchors to the respective sections below
• Each of those sections also have a "Back to top" button for quicker access instead of having to scroll
• We made the hero section less technical and more of a call-to-action to get started with Ansible by introducing what it can do. We'll continue considering how to incorporate the latest install to the page.
• We'll need more content to fill out the sections but some areas are still placeholder. The "Why Ansible" section was taken from the current community website.

Here is a mockup of what an Ansible Ecosystems landing page would look like. The user could navigate from the masthead or from the landing page Ecosystems section by clicking "View more."

[samccann]

Red has 'historically' been reserved for the RH paid products. Can we change the buttons to not be red above, accept for the RHAAP at the bottom?

[leogallego]

Hi @tiyiprh, that's looking great! the last mock-up bars are exactly what I was talking about in my previous comment. I'm sorry I haven't been able to send some content examples yet, I will try to get to it before the end of the week. You want some text for the areas filled with "Lorem ipsum" for ex.?

Also, I'm wondering how would the tab bar buttons work on a mobile device screen. Would they be responsive and stack one below the other? Or what do you suggest for that?

@samccann I think that all the Ansible buttons are actually "mango", the alt color from the A logos, but I thought the same at first glance. Not sure if it's going to cause confusion, but it might.

[tiyiprh]

Hi @leogallego sorry for the delay. I was on PTO and am still catching up on emails, etcs. Yes, if you could provide the text for the areas filled with 'Lorem ipsum" that would be great! My original thought was that the placeholder squares would be clickable and navigate to something else, for ex. a specific blog post under the Blogs section.

Regarding the design on the mobile device, there are a few ways we can make it responsive. We can iterate on a few options.

Regarding the button colors, they are the Ansible "mango" color. We were trying to utilize the Ansible colors but we can continue to explore our options.

[samccann]

Yeah my point is on docs.ansible.com, that 'mango' has always been used for Red Hat products, never for community, even though it's an approved Ansible color. It may not be confusing since it's just the 'learn more' links. So long as we avoid using it for anything like a project link. For example, we wouldn't want the button text to say 'awx' and be that mango color.

[cybette]

@samccann is right, "mango" has been deprecated as a community colour for a couple years now, since it's too close to red and can be visually confusing. "Pool" is the official community colour, and "Navy" can be used as well. Mango can be used as an accent colour, for example:

Pool: rgb 92, 190, 193 cmyk 60, 3, 26, 0

5cbec1

Navy: rgb 16, 36, 65 cmyk 98, 84, 46, 50

102441

Mango: rgb 241, 91, 85 cmyk 0, 79, 64, 0

f15b55

[tiyiprh]

Thanks for the feedback!

From our conversation today, here is an updated mockup: -We opted to use the cyan color for the buttons vs the mango -We added back the pip install into the hero image -In regards to the navigation in the masthead, what do you all think is relevant? I think some links should still be present in the masthead even though they're repeated later down the page since they seem pretty high level and important and should have an entry from the hero section. My thought was maybe we could remove blogs from the masthead. Let me know your thoughts!

@leogallego @oraNod @GregSutcliffe @cybette @samccann

[tiyiprh]

Also just wanted to leave this as a reference to get to the RH Icon repo: https://docs.google.com/presentation/d/1SRhy8-bYBgaA3Jsi1t_Fxz-Yo9ORgdRy5Kec9hg_wSM/edit#slide=id.gb24fcfdda7_14_0

The icons we used are below: Why Ansible: Software & technologies: Automation Ecosystem: Diagrams & graphs: Community (culture) Community: People & Connection: Community (people) Blogs: Media & documents: Blog Contribute: People & connection: Collaboration

[oraNod]

Thanks so much @tiyiprh!

[GregSutcliffe]

Thanks @tiyiprh, this looks amazing.

In regards to the navigation in the masthead, what do you all think is relevant? I think some links should still be present in the masthead even though they're repeated later down the page since they seem pretty high level and important and should have an entry from the hero section. My thought was maybe we could remove blogs from the masthead.

I agree that we probably want some overlap. My main concern is getting a link to the forum up top, so something else has to go. However, given that both will likely be text entries in a config file, we can play with this easily once we've made some progress with the layout.

[leogallego]

Hi @leogallego sorry for the delay. I was on PTO and am still catching up on emails, etcs.

No worries, I was delayed for similar reasons as well!

Yes, if you could provide the text for the areas filled with 'Lorem ipsum" that would be great! My original thought was that the placeholder squares would be clickable and navigate to something else, for ex. a specific blog post under the Blogs section.

Ok, great. I think I can probably source a few of the lorem ipsum from the current site and complete what's missing to kickstart it, then we can improve them with the rest of the team and the open community feedback.

About the blog posts, we can choose some Highlighted posts as examples to start

Regarding the design on the mobile device, there are a few ways we can make it responsive. We can iterate on a few options.

Good to know! We talked about this in our meeting, but doing a follow-up on the topic.

-In regards to the navigation in the masthead, what do you all think is relevant? I think some links should still be present in the masthead even though they're repeated later down the page since they seem pretty high level and important and should have an entry from the hero section. My thought was maybe we could remove blogs from the masthead.

Related to the "navigation" tab bar question, if we were to add a button + section, like Events, or Meetups, or Videos, for example, that would take us to 6 buttons. More than that and it would cause issues.

Taking an extra look and considering we have the top navigation bar (apparently called masthead!) and the button navigation bar:

Maybe it's worth merging those to the top one (masthead)? Thinking out loud here...

If we keep the masthead only, with the podman.io "format" (as in: right aligned links), but change to "floating" one (similar to the one currently in wordpress.org). This should have a couple of benefits:

• we can have the "hamburger" icon (the three dashes) appear for mobile/responsive for all links
• we avoid the 2 navigation menus, which might get confusing.
• we have a persistent menu to change to the "highlighted" sections at any point (without returning to top)
• we can unify the "Get ansible" button into a single one in the top left, and remove the rest
• I'm not a fan of menu drop-downs, and I would rather we keep it simple (as in single link for each item), but it would open up the possibility if we need it.

I know it's a bit of a change, so throwing it with some reasons on why I think it might be a good idea to unify on top.

[leogallego]

@tiyiprh about the blog examples if you want some blog posts to source titles and a bit of content

• https://www.ansible.com/blog/you-are-the-community
• https://ansible.github.io/community/posts/ansible_community_strategy_2023.html
• https://ansible.github.io/community/posts/state_of_the_community_2023.html
• https://ansible.github.io/community/posts/matrix_and_ansible.html
• https://www.ansible.com/blog/providing-terraform-with-that-ansible-magic
• https://www.ansible.com/blog/event-driven-ansible-is-here
• https://www.ansible.com/blog/ansible-community-steering-committee

[GregSutcliffe]

Several of those have already been added @leogallego - https://github.com/ansible-community/community-website/tree/main/posts

[leogallego]

Several of those have already been added @leogallego - https://github.com/ansible-community/community-website/tree/main/posts

Right! I was sharing the links for Tina to get some content examples from the live/published blogs we had. I don't think she is going to use the links themselves. It's a valid point though, ty!

[tiyiprh]

-In regards to the navigation in the masthead, what do you all think is relevant? I think some links should still be present in the masthead even though they're repeated later down the page since they seem pretty high level and important and should have an entry from the hero section. My thought was maybe we could remove blogs from the masthead.

Related to the "navigation" tab bar question, if we were to add a button + section, like Events, or Meetups, or Videos, for example, that would take us to 6 buttons. More than that and it would cause issues.

Taking an extra look and considering we have the top navigation bar (apparently called masthead!) and the button navigation bar:

Maybe it's worth merging those to the top one (masthead)? Thinking out loud here...

If we keep the masthead only, with the podman.io "format" (as in: right aligned links), but change to "floating" one (similar to the one currently in wordpress.org). This should have a couple of benefits:

• we can have the "hamburger" icon (the three dashes) appear for mobile/responsive for all links
• we avoid the 2 navigation menus, which might get confusing.
• we have a persistent menu to change to the "highlighted" sections at any point (without returning to top)
• we can unify the "Get ansible" button into a single one in the top left, and remove the rest
• I'm not a fan of menu drop-downs, and I would rather we keep it simple (as in single link for each item), but it would open up the possibility if we need it.

I know it's a bit of a change, so throwing it with some reasons on why I think it might be a good idea to unify on top.

In regards to merging the tabbed navigation with the masthead, I'm hesitant because the top masthead navigation usually directs user to a new page with more information whereas the tabbed area is anchored to the same page just a different area. I think having the masthead be persistent as the user scrolls down similar to podman.io is a good idea though. I think the hamburger menu would definitely work for the top masthead on mobile. We are looking into how to make that tabbed navigation a good experience on mobile so will get back to you!

[tiyiprh]

Just a quick updated mockup to include "Forum" on the top level navigation. I added some placeholder of actual blogs to the blogs section but can continue to add to the other areas as I get the content. I think we have enough to get started on building this out and as mentioned, we can continue to iterate as we receive feedback/come across any limitations.

In regards to the mobile design - Does bootstrap handle viewport resizing? If so, I think we'd want to stick to what that framework is recommending and change if needed. But we did mock up a potential solution showing how the secondary navigation would work. Essentially, it would be expanded when the user lands on the page and they can tap on it to take them to the respective anchored area. Each section would still have the "Back to top."

Let me know if you have any questions/feedback!

[tiyiprh]

Adding the updated mockups I sent in the chat yesterday to the issue just so we have it here too!

[oraNod]

@tiyiprh Hey, I've been tipping away on the website and was thinking about the tabs. My understanding is that we're just anchoring and scrolling not doing a show/hide. If you click down to the "Blogs" section that tabbed navigation doesn't follow once you drop into the page. So the tabs don't really act like tabs.

If we're going to just scroll then I feel like we should drop the tabs. That saves us like 100px and simplifies the build because we'd need to collapse the tabs on mobile.

Does that sound reasonable or do I understand the user experience in the wrong way?

[tiyiprh]

@oraNod

My understanding is that we're just anchoring and scrolling not doing a show/hide.

Yes that's correct! So clicking one of the sections from the tabs, for ex, "Blogs" would anchor/shoot you down to the blogs section and the tabbed area wouldn't follow. There is a "Back to top" button that anchors back to the tabbed area.

Are you saying using that area as tabs doesn't work because the tab component is supposed to switch the view but keep it contained within the same area?

[oraNod]

@tiyiprh I think I was probably just revisiting something that @leogallego has already touched on with https://github.com/ansible-community/community-website/issues/57#issuecomment-1655683949

We've discussed this a bit on the community team call today and decided to come back to the tabs section after we get some of the other components in. I think once we start working on it and have something to build it'll be easier to discuss the flow. Thanks again for confirming my understanding.

[tiyiprh]

Just attaching the most updated version:

[oraNod]

Thanks for the amazing job with this @tiyiprh Do you think there's anything left to do here or any reason to keep this issue open? I feel like we're at the point where we can mark this as done and close.

[tiyiprh]

Yes, I think we can mark as closed!