Web Layout Prototype - UMass Amherst Modern Workplace Initiative

I was asked to help envision a home on the web for the UMass Amherst Modern Workplace Initiative - the group helping plan for the future of work at the university.

Since this was a very rapid turnaround project, I went straight to making a fully styled visual mockup. My process started with duplicating core elements of the university's new homepage pixel-accurately in InDesign in order to ensure consistency.

I wanted to give the site a welcoming feel, so I used as much color as possible and tried to include bright photographic elements with people. I used one secondary color per section of the site to increase color while also making pages both visually distinct and connected to eachother.

View full pdf mockup

I also mocked up a narrow-window “phone” version of the layout for each page, to make sure everything I had envisioned could be scaled. As with all of my recent web design projects, I tried to minimize the amount of font size scaling that would be necessary to make the layout work at different screen sizes in order to maintain the same level of legibility across most devices.

Ultimately, due to time and technical constraints, this version never got further than this InDesign mockup, which was built in about 2 hours - but elements of the structure in this mockup are present in the live version.