For this experience, you will work in teams to build a mockup of the Landing page or the Home page that illustrates the functionality specified in the RadGrad MVP Page Specifications.
Your page assignment, team members, and repositories are:
First, review the readings, including the MaterializeCSS framework, the Materialize Admin Template package, and the RadGrad MVP Page Specifications. I bought the Admin Template to provide some helpful example code for individual widgets, but the overall layout of RadGrad will certainly be quite different.
Also review the Data Visualization Catalog, which may give you new ideas for how to represent RadGrad data.
Next, your team should use your repo to develop a mockup of the landing or home pages. Please do not fork the repos with the intent of later creating pull requests. Instead, if you wish to isolate your individual work, create branches and merge them when ready. This ensures that all work is represented in a single repo.
Important: Instead of building your mockup in the master branch, you should create a new branch called “gh-pages” and build your mockup in that branch. The reason for this is to make it easy to render your mockup in a browser. For example, if you create a mockup in a file called index.html in the gh-pages branch of mvp-mockup-1, then it can be viewed online at http://radgrad.github.io/mvp-mockup-1. For more details on this, see Creating project pages manually. (Note that you don’t actually need to create gh-pages as an orphan branch if you don’t want to; you could just create gh-pages as a branch off master and that will work fine for this situation.)
For example, I created the materializecss-mockup repo to play around with MaterializeCSS. The gh-pages branch just contains a copy of the Materialize framework. This means that http://philipmjohnson.github.io/materializecss-mockup/ renders the Starter Template which is contained in the index.html file at top-level in the gh-pages branch.
If you want to start thinking about colors, here are two versions of the ICS Logo: one for a light background, and one for a dark background.
I suggest you have at least three group meetings prior to next Tuesday’s class to work on this project. As long as you meet enough times and for long enough each time, you could complete all the work for this experience together as a group.
There are three submissions for this experience:
Next Tuesday 2/16 in class, your group will present your progress on this experience. Your mockup should be available in the corresponding GitHub page (for example, http://radgrad.github.io/mvp-mockup-1). It is expected that you will have at least a rough draft of all widgets by then. I will give you feedback on this draft.
Next Thursday 2/18 in class, your group will present the “final” version of your mockup.
By next Thursday 2/18 at 9:00pm, please write and publish a technical essay recounting your experience developing this mockup. What was hard? What went well? What gaps in your knowledge about user interface design did this experience reveal? After you’ve finished writing the essay, post the link to your essay in the #technical-essays Slack channel.
