In the fall of 2016, I took General Assembly's front-end web development class with Chandler Moisen, and after the class was done, Chandler asked me to redesign his class website. You can see the original site design below, which was broken down into a home page, class notes, homework, final project, and miscellaneous resources. For this project, I did a redesign and built the new site from scratch.
Here is an overview of the old website pages:
Chandler wanted the website to have a more professional look, while keeping the same text-rich content. It was also important to make sure the new design was consistent with General Assembly's branding and visual language.
I looked at GA's main website, and created a mood board of their design elements, icons, colors, typefaces and buttons. I relied on these for inspiration for the new design.
I looked carefully at the site's content and how it was organized, in order to see if there were places where the structure and navigation could be improved. I started out with mapping out high-level categories (homework, class notes, final project, resources), and then dove into each page's content more deeply and ask these two questions:
1. what is the most important content on each page, and how can the information's hierarchy be communicated through typography and layout?
2. what is the information the students will need to access most frequently, and how to make it easier to find?
As a former student who relied on this site for access to the course material, I was intimately familiar with how the information was organized, and what could be improved. Here is a list of improvements I came up with:
"Homework" page - provide link to started code, so the students don't have to go fishing for it elsewhere;
"Notes" page - relabel "Lessons", and include more detail for each lesson: the topics discussed, link to the class slides, and links to in-class CodePen exercises for easier access;
"Misc" page - relabel "Resources" which more clearly identifies the content; make this page more robust by adding many more helpful resources on everything from tools, visual design, GitHub, animations, Sublime Text, etc.;
"About" page - not really needed; the content is more suitable for a footer than a separate page;
The next step was to create a site map and detailed wireframes:
With the wireframes in place, I worked on the visual design by adding images, icons, and colors, and was able to provide texture and info hierarchy through varied typographic styles and page composition. The revised visual design, using General Assembly's colors and typography for brand consistency:
I created a simple UI guide to help me keep track of all the different type styles, buttons, colors, states, and icons. This guide was also a great reference for the next step in the process, which was building the site with code.
I built the site with HTML and CSS using Sublime Text 3. The code lives on GitHub, and will be available to anyone who wants to fork it for their use in teaching front-end web development. Here is a screenshot of my computer screen while working on coding the new pages.
UX Design - Maria Stegner
Web development - Maria Stegner and Chandler Moisen