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.
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.
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.
Documentation
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.
Tutorials
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.
