Day 25
For Next Time
- Create your website MVP, schedule time before the end of class to review draft with an instructor
- Before next class, write the script/storyboard for your demo video
- Submit the text and image for your poster by Friday
Project narrative
You have been developing the story of your final project all along (i.e. through the proposal, architecture reviews, README exercise). Today is about refining that narrative and planning/generating media content to help you tell it.
In addition to your code, documentation, and README, there are three main deliverables that tell the story of your project:
Website
Today, we’re going to go through a set of activities to help you create your website MVP. Before starting, refresh your memory on the main purpose of the final project website.
Beyond helping you plan your website, these activities will also help focus your work on the project by reminding you of what is most important about what your team is doing.
Due dates:
- MVP draft: review with course staff before the end of class today
- Revised version posted: Friday, May 3 at 12:30pm
Poster
The final session for this course (Tuesday, May 7 at 12:00pm) will be an open house where the broader community is invited to celebrate your work. Each team will be given a place by a whiteboard to hang a project poster, plus a table to set up a demo. The poster should serve as description and advertisement of your work, so visitors can aquaint themselves with what you’ve done while you’re busy talking to someone else.
We’ll take care of printing the posters for you. All you need to do is write a title and explanatory paragraph (as you practiced in Reading Journal 21) and create a compelling representative image.
Due date: Content submitted via Canvas by Friday, May 3 at 5:00pm
Demo Video
Each team will create a ~2 minute video presentation introducing your final project to an external audience. We will start off the final session by watching these demo videos, and you should also embed your video in your project website. Your video will explain your goal (what the project is all about) and show your work in action. It might also introduce the problem domain to help explain why your project is interesting or explain some crucial implementation details, but remember that 2 minutes is pretty short.
There are two main routes you can take to create this presentation:
- video with audio narration
- “silent film” with title cards and/or text overlay explanations
There are recipes to help you accomplish this technically on the resources page, but for either path your first step is the same: Create a script and storyboard for your presentation and show it to course staff. Your storyboard will likely draw upon the website MVP you create today. Once this outline is finished, you should start generating content for the video/animation.
Due dates:
- Storyboard: review with course staff by Friday, May 3 at 12:30pm at the latest
- Final video: must be submitted before Monday, May 6 at 10:00pm (so we have time to compile the class playlist)
Creating your Website MVP
While you may not yet have all of the content to populate your site (e.g., you may still be working on your results), you should be able to map out the main structure of your website, fill out some of the content, and include placeholders for content that you still need to generate.
Make an outline
The guidelines in the final project assignment provide a great starting point for the content of your site. They do not, however, mandate its exact structure and content. Using the ideas on the assignment page as a jumping off point, make an outline of the content you’d like on your site. You should interpret the word content broadly (e.g., content can encompass images, videos, sounds, etc.). If you plan on using multiple pages, make an outline of each page.
At a whiteboard, create an outline for your team’s website. Make sure to document your work (e.g., by taking a picture) as it will likely come in handy later.
Design your media
Part of what you wrote in your outline likely involves some sort of media content (e.g., video, audio, images). Choose one or two key media and sketch out their basic elements (e.g., using a rough sketch or a storyboard). Again, document your work in some electronic format.
If you’re ready to generate images or animations from your actual project code, we’ve written some screen capture instructions to get you started.
Put together a skeleton
Now that you have some idea of your content, you should a) get some feedback from the instructors, and b) put an alpha version of your site up on the web. The intent of the website MVP is to get a draft up quickly to capture your story and receive feedback. There will be time for refining your layout later.
We will walk through the steps for creating a GitHub Pages website using Markdown together in class.
In order to put together a simple page like this, you should follow the Github tutorial on Github Pages. We are creating a “Project” site, starting from scratch, in the /docs
directory in the master branch1.
Your project website can be all on a single page, but you can add multiple pages to a Github Pages site relatively simply.
If you are interested in drawing inspiration from past projects, check out our catalog of SoftDes Final Projects (bearing in mind that some of them had different assignment prompts than you do).
Here are some guidelines to consider when creating your MVP.
- If your website will utilize multiple pages, create (at least) a skeleton version of each page
- If there is content that you already have created (e.g., your architectural diagram), consider adding it to your website MVP.
- For content that hasn’t been generated yet, put a placeholder (either an image or text) that describes the content that will be there eventually.
- For longer sections of text that are either too time-consuming to generate now or whose details are to-be-determined, include the content in outline format.
-
If you are comfortable working with branches, you can also follow this nice tutorial for getting started with Github Pages and Jekyll, which uses a separate
gh_pages
branch to hold the website content instead of a/docs
folder. ↩