CHI-Lites Website

I recently had the honor to work for SIGCHIs executive committee and draft a website for the new talk series CHI-Lites. The following are the visual assets I created as part of my contribution to the new program.

Site Map:

Like with any good project, it helps to start out with a blueprint. At the forefront of this project, I did a few iterations of sitemaps and this is the one I settled on. Though we haven't developed all of the pages yet, the overall architecture was established for future expansion fo the site when needed.

Wire-frames:

Once we had the sitemap, I established a few wire-frames that would outline the direction of the product and the general architecture of the pages. These wire-frames are pictured below.

Mobile Screens:

I started out the design by taking a mobile first approach. As most people now access sites via their phones and the marketing strategy was word of mouth, I figured a mobile first approach was the best place to start.

This gif shows the general user flow of the mobile site.

Though the gif above captured the general flow, I decided to (very poorly) display the floating scroll for reference as well and captured it in this gif.

The full image of the landing page was quite long but I captured it in this gif:

Tablet & Desktop Screens

Once the mobile designs were finalized, I moved to structure the content on tablet sized screens and for desktop. These are pictured below.

Tablet Screens:

Desktop Screens:

Once all the screens were made, several changes occurred in content but, largely the structure remained the same. I then handed the designs and specs as well as the sketch file off to the executive committee and the developers with only a few extra hours on my timecard.