(opens new window)  Recently we were given the task of putting together a website for the Student Center Renovation Project. We knew it was coming but we didn't have much to go on until the details were approved. On a Thursday we got word everything was approved and set up a conference call to talk requirements, content and images.

Outlining the requirements

After an hour discussion with the client we determined that we had to mirror the messaging/feel of a banner being placed outside on the actual Student Center building. We also determined an initial set of menu items that included: The Project, Visions, Highlights, FAQ and Contact. We had no idea what was going into each of these areas but the task to finalize the content was on the client, so we had to work with Lorem Ipsum (opens new window).

Sketching exercise

(opens new window)Everyone in the conference call was then involved in an initial individual sketch exercise. Everyone got 5-10 minutes to sketch one or more 'wireframe' layouts of how they perceived the site should be organized. This was a great first step to get designers and non-designers collaborating. Even though everyone was in the same meeting, heard the same questions, responses and decisions from the client, everyone came up with different interpretations of the client's and project's needs.

(opens new window)Once the time was up, everyone presented their wireframes and explained why they chose to place elements where they did and how they saw the website working. We talked pro's and con's as a group.  In this case everyone agreed all the content could fit on a single long page so we decided to go right to a single wireframe. This time we used a whiteboard so we could draw, move and erase as we worked down the page.

Divide and concur

Once the wireframe was decided upon we split up the tasks to parallelize the work. The tasks broken down:

• Base CMS and Foundation structure setup
• Photoshop polished elements
• Frontend interaction polish
• Gathering and preparing the assets

(opens new window)I started getting the logistics of the base site setup in our CMS, the folder structure on the server and the wireframe mapped out. Once that was in place Tom was able to start working on each section in isolation to get the interaction working so the site functioned with placeholder content. In the meantime, Dan started polishing the design in Photoshop. And lastly, Rolaine worked on gathering, formatting and cutting the images that would be used on the site. We are now about five hours in and things are starting to take shape.

Content creation

While we divided up our work  for the Web, the client and editorial were going back and forth on finalizing and approving the content. This usually starts with Word documents but as soon as the a piece is 80 percent finalized we transition it into its final location in the CMS. This is so it can be edited in the native editor and as we are refreshing the frontend assets we can see real content and how it meshes with the finalizing design.

Putting it all together

(opens new window)Eight hours in and the elements are starting to come together. The template is now more refined, final content is pulling from the CMS and being updated in real time so we could see and test it within the final site. Assets were polished to ensure pixel-perfect definition and the non-interactive HTML started to get some javascript life.

Adding the interaction layer

Every site we create works for the lowest common denominator browser, basically Google scraping the pages looking for content, links and assets. We then use progressive enhancement to add the style layer of CSS that most users see and browse with. After those foundations are in place we add interaction with javascript. For this project specifically we use Foundation's 'top bar' (opens new window) for the main navigation combined with the 'fixed' positioning to allow it to follow the user down the page. We also utilize Foundation's Magellan (opens new window) to create a 'smooth' scrolling effect for the user down the page to the desired content. Add in some alpha transparency on the menu as the user scrolls and it results in what feels like a must more polished experience than just a bunch of static pages that someone has to click through. Lastly, the FAQ's expand only when needed and the renderings of the floor plans open in lightboxes so users don't have to leave the page to view them. In order to add the interaction layer efficiently it's important that everyone can work independently without colliding with anyone else's work.

The final product

23 hours later the site was ready to be deployed to production. It was tested in all modern browsers and devices, the content was edited several times. The images have been proposed, refined and optimized per device. The open graph, twitter card and other meta data are added. We send the client the signoff and as soon as they are good we run the deploy...

grunt deploy:production

And we're live! http://studentcenter.wayne.edu/new/ (opens new window)