For this experience, you will continue to work in your teams to build a mockup containing both the Landing page and the Home page conforming to the functionality specified in the RadGrad MVP Page Specifications.
Your new mockup will have a navbar containing two links: Landing and Home. The Landing page should be shown by default. Clicking on the “Home” link should display your mockup of the home page. See mvp-mockup-5 for an example of these links.
Both pages should exhibit a common look and feel. Don’t create a “frankenstein” mockup, in which each page looks like it was developed by a completely different group of people.
Your team will implement your two-page mockup in the same way as last week, using the gh-pages branch of a GitHub repository. You will implement this mockup in a brand new repo that I created for you. Here are the teams and associated repos:
There are two reasons you will develop your second mockup in a new repo rather than continue development in your first one:
Both pages of your two page mockup must show significant design improvements over any of the mockups from last week. That means that you cannot simply start with your own code for the first mockup page, copy the code from another group for your second mockup page, and declare victory.
Note for those considering mvp-mockup-5: My mockup uses Jekyll to simplify mockup development. If you don’t know Jekyll, it’s a very simple technology, and I use it to take advantage of “include files” that eliminate duplicate code in the case of repeated elements. For example, I create a slide.html file that extracts the common mockup for each of the slides that appears on the Landing page.
Your task for this class period is to decide which repository you will use as a base for this week’s mockup, and initialize your new repository with that code. There are three approaches. Let’s say your team developed a mockup of the Landing page for this week. You can:
Use your Landing page code as a basis. This means you’ll have to make significant improvements to your landing page, and develop a Home page that has a compatible “look and feel” to your landing page.
Use another group’s landing page code as a basis. This means you’ll need to make significant improvements to their landing page, and create a Home page with a compatible look and feel.
Use another group’s Home page code as a basis. This means you’ll need to make significant improvements to their home page, and recreate a new version of a Landing page with a compatible look and feel.
To figure out which approach makes the most sense, I suggest that you review all five of the current mockups and discuss what kinds of “significant improvements” you could make to each of them. Hopefully, you will find that you can make significant improvements to all of them. If you can’t think of any way to improve a repo, or if you simply don’t like the design direction they took, then discard those repo(s) from further consideration.
Be sure to review the mockup both at laptop display size and after narrowing the window to simulate mobile screen size.
Next, look at the code for each repo. If you don’t like the way it was coded, then discard those repo(s).
Hopefully, you still have a couple of repos left to consider. From this final group, discuss which “look and feel” seems most appropriate to you for building both a Landing and Home page. Pick one.
Once you’ve decided which repo to use, download its gh-pages branch as a zip file, copy the contents into the gh-pages of your new repo, and commit.
Check that your new mockup displays correctly using GitHub pages. For example, for mvp-mockup-6, it should display at http://radgrad.github.io/mvp-mockup-6.
Raise your hands so Philip can review your decision, and then you are done with this in-class task.
The remainder of the week is dedicated to completing your two page mockup.
As with last week, next Tuesday’s class will be dedicated to review of your partially completed mockup. The more progress you make by next Tuesday, the better your review experience.
Be sure to keep track of the significant improvements made to the base page, you will need to discuss them next week.
There are three submissions for this experience:
Next Tuesday 2/23 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-6). Show all of the significant improvements you made to your “base page” since last week. You will receive feedback on this draft.
Next Thursday 2/25 in class, your group will present the “final” version of your mockup. Again, show all of the significant improvements you made to your “base page” since last week.