Hi, I’m Melanie. I make mostly websites, mostly with design and front-end code. Right now I’m a PM on the Microsoft Edge team, helping to shape the web platform. (If you’d like to learn more about what that means, check out my bio!)

Selected projects

The home page of HTML5 Accessibility, with scores for major browsers

HTML5 Accessibility

Year
2016
Role
Logo design, web design, icons
Company
Microsoft Edge
Credits
David Storey: front-end dev; The Paciello Group: content

HTML5 Accessibility was created by The Paciello Group, a web accessibility consultancy. The site shows whether or not browsers have implemented HTML5 features accessibly, such that users of assitive technology can interact with web content successfully. This of course helps inform web developers of potential issues to look out for, but the test pages also allow browsers to verify that they've implemented features correctly. It was mine and David Storey's (as Microsoft Edge team members) pleasure to support this effort with a redesign.

A grid of simplified book covers, with the user hovering over a cover to reveal the full-fidelity art

Highlights Collection

Year
2017
Role
Self initiated: web design and development

I read quite a lot, so I thought I’d make a minisite to collect meaningful or interesting passages from the books I’ve read. Side projects are a great way to test out new ideas, and on this project I’ve been able to play a bit with interaction media queries. Here I’m detecting whether the user’s device supports hover interactions; if not, give them regular book covers, but if hover is available, fade from low fi to high fi imagery when the user mouses over a book.

Part of the variable fonts demo, an excerpt from The Rime of the Ancient Mariner

Variable Fonts Demo

Year
2018
Role
Design, front-end development, writing
Credits
Greg Whitworth: writing, front-end; François Remy: front-end

This Microsoft Edge web dev demo showcases variable fonts, or an extension to OpenType where one font file holds information about an entire font family. Developers can use CSS to adjust various “axes”, in order to manipulate various properties of the font, such as weight, width, and decorative elements in the glyphs. This demo shows how developers can get quite expressive with just one font file—and can even animate these properties on the fly. Favorite design details include the ice floe-breakup on scroll, as well as heading animations.

The Microsoft Edge Dev Summit logo: two mountains with a sun that has code brackets inside it

Microsoft Edge Web Summit

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.

The Green Heart Project home page, with small illustrations punctuating the page tagline

The Green Heart Project

Year
2014
Role
Identity design, illustration, merch design and copywriting, web design
Company
Fuzzco
Credits
Cory Etzkorn: development

The Green Heart Project is a fantastic group that facilitates school gardens in the Charleston, SC area. The task was to update their iconic "green heart" emblem and from there build a fresh new identity.

A BALC directory page displaying names of graphic designers, with a dropdown displaying other categories of creative people

Badass Lady Creatives

Year
2013–2016
Role
Self-initiated: concept, branding, web design and development, writing

Fed up with gender-related controversies in the design industry, I started Badass Lady Creatives, a project that honors women in design, illustration, development, and beyond. I’m currently in the midst of making accessibility improvements to this older site—that color contrast, for one, leaves much to be desired!

Screenshot of the top portion of the Nickelodeon about page, which has a newspaper-esque layout

The Nickelodeon

Year
Late 2013
Role
Web design, logo variations, stationery
Company
Fuzzco
Credits
Brandon Oxendine: base logo and other variations; Erik Holmberg: development

The Nickelodeon is an alternative, nonprofit cinema which seeks to educate and entertain the community through films, festivals, and events. This beloved cultural center in Columbia, SC needed an identity refresh that felt both intelligent and off-beat.

Fuzzco client projects

Year
2011–2014
Browse archive

Misc illustrations

Year
2011–present
Browse archive

Other little things