Case study Microsoft Edge Web Summit

The Microsoft Edge Dev Summit logo: two mountains with a sun that has code brackets inside it
Year
2017
Role
Environmental design, print design, web design, front-end development
Credits
Kyle Pflug: site content; Stephanie Drescher: photos of conference, etc

2017 marks the first year that the Microsoft Edge Web Summit was held in Seattle, WA. I decided to play on a couple themes for the year’s esthetic: the Emerald City, and a hiking/camping theme (also a riff on the term “summit”). Designing for the event meant extending the brand to tons of various collateral, some of which include the website, merch, environmental graphics, and wayfinding materials.

Badges for each of the different types of attendees

We created unique badge designs for attendees, speakers, Microsoft Edge staff, and our special guests (scholarship recipients), in order to make it easier for people to find each other. Instead of relying on color alone to distinguish the badges, I also made sure that the shapes of the pattern fills were different enough to help visually identify the right folks.

Waterbottles with the logo applied

Photo by Stephanie Drescher

Notebooks and tote bags with the logo applied

Photo by Stephanie Drescher

Stairwell signage and a backdrop with the conference hashtag and links to resources

Stairwell signage for the two floors of the conference venue, and a backdrop for photos (and reference to quick links!). Photos by Stephanie Drescher

Room separators with the conference brand pattern applied

Photo by Stephanie Drescher

Screenshot of the intro area of the Summit one-page site

Microsoft Edge shipped the new CSS Grid syntax in 2017, and so of course I thought this site needed to show a bit of grid layout love.

The hallway track site section, with icons such as bug spray for the debug bar, and a telescope for WebVR

Icons throughout the site continue the outdoorsy theme

The location site section, with suggestions for things to do in Seattle

Aaaaand here’s my talk on CSS Grid!