Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: added new wireframes

Diagrams from drawio. Use this file to edit them: mxnet-website-info-arch (48).xml

Draft - Aaron S. Markham (ASM) February 4, 2019

Updated February 15, 2019 (ASM): Added a detailed flow for Python → Gluon → Training APIs

Updated March 7, 2019 (ASM): Adding link to Gallery wireframes and screenshots here.

Overview

This document's purpose is to asses scope for a website redesign and drive consensus on content flow of the website. The wireframe is to assist designers and front-end engineers to begin work on a design and interaction plans for the website. The content flows and copy placeholders are for the writers and subject matter experts.

Update (ASM):

I spent some time learning the Material Design ecosystem as the beta site uses this as its template. By converting the wireframes into a Material Design theme using a Sketch plugin, I was able to reimplement the wireframes in a way that also reflect the Material Design API. After uploading the wireframes to the Material Design Gallery, contributors can inspect elements, which yields info on their class membership, coordinates, and other info helpful in site implementation. This way we can achieve some level of fluidity as different contributors apply their energies to the site’s revisions. Additionally, designer resources can update the Sketch file’s symbol elements and the changes will propagate throughout the website wireframes.

I'm putting a flow for browsing Python docs here for illustration.


Sample Docs Flow

Request access to the project to comment on specific items and keep updated with new revisions!

This flow goes from the Docs page to Python to Gluon then to gluon.data. 

Image Added


Image Added


Image Added


Image Added

Home Page

The home page focuses on three primary questions, what is MXNet, why choose MXNet, and how do I use MXNet. Each of these have a featured story which is an opportunity to highlight a new use case, demo, news item, blog, video, and so forth.

...

If desired, another block can be inserted above this for MXNet community logos.


Image Added




Info Page

This is a template that can be used for Ecosystem, Use Cases, Demos, Features, Videos, etc.

...

This is an example the information that would be presented for an API Guide. Guides without as much material as Python would look considerably more barren, but at a minimum, they should have overview copy, installation, API docs, and some kind of tutorial or ecosystem items.

Image Added


Gluon API

Image Added

Gluon Training API

Image AddedImage Removed


API Docs

An overview of an API and it's various components.

...

The API detail page should include, at a minimum, an overview, an example, and a related tutorial. It will also list its child elements. Clicking on a child element will load that API into this same view. 



Tutorials

This is a template for tutorials. Some interaction specs are provided.

Image Added




Users New to Machine Learning and/or MXNet

...