Open Sourcing MDI Light

If you follow my icon stuff a few years ago I released a 254 icon set called "Material Design Icons Light" to help fund Material Design Icons' open source efforts.

Material Design Icons Light

Shortly this icon pack will also become open source. The why is not too important, but it did not do as well as I had hoped and I would rather see people using it than not.

Built off a 24x24 grid the icons omit the top and right pixel columns to produce a single pixel stroke style.

Size

Integration in the new MDI Site

These icons will be directly integrated into the new MaterialDesignIcons.com in several ways. To adapt to having two icon sets in the new site simply appending /light will allow previewing MDI Light.

Set View All Single Icon
MDI /icons /icon/account
MDI Light /icons/light /icon/account/light

For those using the webfont with MDI they are familiar with the mdi mdi-account syntax. To access MDI Light one can simply use mdil mdil-account as the codepoints in the font will be mapped to the same values (technically mdil mdi-account would work also).

Expanding MDI Light

Expanding MDI Light not a goal at the moment, but will be in a few months. The focus will be 100% on the new site and working toward 2000 icons for the v2.0.0 release.

Progress

For those curious what it looks like for me to do this, it's manual, but I've built tooling for MDI that supports multiple font sets and other features.

Codepoints

Above I'm setting codepoint data for the release. Below is what MDI's codepoint looks like with more versions.

Hopefully will have this wrapped up shortly and can release it to everyone on GitHub/NPM/Bower.

Figma is Awesome!

Figma is an awesome little web based application for collaborative designing and it does it very well. The tooling is relatively straightforward within a short time [using it roughly a week now] I was able to design reusable components and design out some of the starting pages.

Figma Mobile

Above is a rough mockup I'm working on for the mobile view. The desktop mockup is shown below also in a very early work in progress. Using these more as light ideas, so alignment issues are from my laziness.

Figma Desktop

Vector Tools

Impressive vector tools, really hard to explain without a video or trying them. They are some of the best I've ever used and I hope others copy them.

Collaboration

I mainly work by myself on designs, but the idea others can jump in and make slight text changes and modifications on the colors is pretty nice.

Performance

I work with all vector assets no images, and I've found the performance really good overall (on a Surface Pro 4 w/ i7). We'll see how this does as I expand the designs.

Snapping objects even with hundreds of objects on the screen was smooth, especially dragging between various artboard frames.

For an application built on web technology you would be hard pressed to tell while it's in the desktop client.

Future

AdobeXD is the future for my workflow, but until they get further along, which will probably several months, Figma is filling the void nicely. Figma's collaboration might be enough for me to stick to it for all my open source projects.

If you're a Sketch user you probably won't make a switch, but the collaboration is worth a try.

Preview: Website Desktop Website Mobile

Getting found with GitHub Topics

GitHub topics was introduced January 31st and allows a quick way for maintainers to tag their repository for others to find.

GitHub Topics

In the repository list the descriptions for an repository become much more important. As more projects add topics a small change can be made to stand out like prepending an emoji.

Any emoji's can be used along with arrows to bring attention to the applications.

Examples: 🎁📦🕶👓💎🎤✏🖊🖋✒🖌💼📁📂🗂

Hopefully this doesn't get abused, but for now it's a nice way to stand out a little more.