add CTA (call-to-actions) on homepage of what you can build with A-Frame

[cvan]

I have a branch in my cvan/aframe-site fork that adds info more info. to the sidebar for getting started.

I've tried a few initial versions:

But I keep coming back to this. The aframe.io landing page doesn't have many visual indicators, be it text or graphics, that show what A-Frame can do.

Currently, we're doing more telling than showing.

Potential users and developers alike can peruse the examples (both our own and the selected showcase pieces from "in the wild"). And developers can then read the documentation, figure out which system they want to use:

• use/embed the <script src="aframe{.min.js,.js}> from the aframe.io CDN or from their own host; use an online code editor such as Glitch/CodePen/Thimble;
• npm install aframe --save using Browserify/Webpack; or
• download the aframe{.min.js,.js} build files manually).

---

I'd like to recommend having the homepage focus explicitly on, in this order:

1. which types of specific experiences/applications developers/designers can make with A-Frame;
2. canonical examples for anyone (including non-developers) to experience + view in VR (supporting Cardboard through Vive); and
3. good examples of A-Frame in the Wild (à la this Selected Uses and Works section that Kevin added to the A-Frame Wikipedia page).

---

In various refreshes of the homepage design, we've tried a few different treatments. But we haven't arrived at any final change to address this on the homepage.

Here's a redesign for the homepage that I made a bit ago:

---

I'd like to instead now propose a smaller modification to the homepage (à la my above screenshots from my branch).

Some good examples (IMO) to draw inspiration from:

• https://gurivr.com/
• https://nuxtjs.org/examples
• https://zeit.co/now#get-started

[ngokevin]

I don't think this solves a major issue, but instead clutters up the homepage. The CTA is pretty clear at the moment with the single Get Started button. The examples show what A-Frame can do, the Get Started button explains.

@donmccurdy?

[dmarcos]

I tend to prefer simple clean landing pages that are visually appealing, provide a short description and a few actions that are easy to parse and choose from.

What are the differences between templates and examples? Template is kind of an overloaded word in the Web world and Scene Template is A-Frame jargon. I would keep just an examples section and maybe rearrange the index to highlight those we considered the most important instead of the alphabetical order we have now. I personally also like plain lists that I can parse quickly. Thumbnails are nice sometimes but feel heavy once you start to know the website. I would keep aframe.io/examples a plain list and thumbnails maybe for an onboarding internal page?

The aframe cli would need to proof itself in the wild before being prominently highlighted on the front page.

[donmccurdy]

This might be harder than I assume for CSS layout, but is it possible to keep the current homepage more or less intact, at 60-80% of the page height, and add some content below the fold? This lets us keep the landing clean, but also get into some "show not tell" more quickly.

Worth noting that users can't see our navigation until after they click that Get Started button. To see basic syntax and the CDN <script/> URL, I need to click Get Started, then ignore a bunch of long-form text about A-Frame to scroll well below the fold. The syntax is a very appealing piece of A-Frame, and I wouldn't mind bringing that a bit more front-and-center.

Also, @cvan one issue that is consistent across your examples is that there is no direct path to the full navigation. Unless we hoist the full navigation up to the homepage, I think the biggest call-to-action needs to be something that results in a user seeing that navigation.

I would keep just an examples section and maybe rearrange the index to highlight those we considered the most important instead of the alphabetical order we have now.

+1

The aframe cli would need to proof itself in the wild before being prominently highlighted on the front page.

I would say neither the CLI nor the Starter Kit are necessary for the front page; unless we have analytics to say otherwise? I do like the example HTML that @cvan includes though, maybe with a minimal scene included:

<!DOCTYPE html>
<head>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-scene>

[ngokevin]

I think something actionable without committing lots of work/maintenance then would be to re-jig the Introduction page to put the syntax/CDN above the fold, swapping it with the Introduction text.

We can also consider swapping out the A-Frame Logo animation with the Hello, World example which has links to View Source + Glitch. At the sacrifice of some branding.

[cvan]

👍 Sounds good, all. Thanks for the feedback. Will make a PR with @ngokevin's suggestions.

[ngokevin]

wontfixing due to extra work/maintenance and not solving a major issue. the single CTA works well versus an information firehose