Diagrams from drawio. Use this file to edit them: mxnet-website-info-arch (8).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.


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. 

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.

The navigation is kept purposely simple.

A common outro in the template provides opportunities for promotion, social media, and other featured info.

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

Info Page

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



Starting off by language, we then dive deeper into other materials where each language has its own guide following a common template.

API Guide - Python

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.

Gluon API

Gluon Training API

API Docs

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

API Detail

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. 


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

Users New to Machine Learning and/or MXNet

The following flow is for new users and incorporates the IDE and installations guides for each language binding.

Machine Learning Practitioners

The following is a flow for users that are already familiar with ML/DL and want to have quick start material and more advanced documentation. It should be noted that a large portion of content is "off-deck". This means that some synopsis should be provided on the MXNet website before off-linking to another website. Alternatively this off-deck content may be ported back to the website (while still linking/referring to the original source).

Use Cases and Tutorials

The use cases and tutorials pages can be different views of much of the same material. This lets the user browse content in a format that appeals to their interest or language focus.

  • No labels