Things I made

FiftyThree Typography Style Guide

FiftyThree Typography Style Guide

My role: Audit existing styles, create Stylus and Jade

As the FiftyThree marketing site grew, they realized that their type styles were slightly varied on each page, so I was brought in to do a full audit of the type styles, work with the team to find common styles, creating mixins for Stylus based on those styles. After that was done, I went through each and every existing page, converting the type to the mixins so that the site would have consistency. The final portion was creating a page to document the mixins for future team members.

FiftyThree SDK

FiftyThree SDK

My role: Stylus and Jade

I was brought in by the FiftyThree team to help them get the new page announcing their SDK ready in time for the launch date. Using the designs provided in Sketch, along with the SVG assets provided, I coded all the Jade templates along with the Stylus to create the page. The page was created using their existing responsive grid to make sure it is easy to read across various screen sizes.

FiftyThree Press Page

FiftyThree Press

My role: Stylus and HTML

I worked with the fantastic Winston Hearn to get the new press page up and running for the FiftyThree marketing site. I created all the HTML templates, using the responsive grid that is used across all FiftyThree marketing site pages. I then created all styles to ensure that things laid out properly across various screen sizes and with dynamic content. Winston took care of all the JavaScript needs and integrated the HTML templates for the content management system. The goal was a quick performing site, as well as one where the CMS was easy for the press person to use without any further help from development.

Imprint

Imprint

My role: Sass, HTML, responsive grid

I worked with the Imprint team to get their MVP up and running, creating a layout solution with flexbox, solving an ordering issue that was necesary when moving from different screen sizes. In addition, I worked towards accessibility in the application as well as continuing to iterate on the design, worked closely with the product team. Multi device testing was a must, so I regularly did so, making use of the local device lab.

FiftyThree about page

FiftyThree About Page

My role: Stylus and Jade

I was brought on to help the FiftyThree team refresh the code underlying the about page. I brought the CSS into Stylus and broke it up for easier reading and maintainability. In addition I used the responsive grid system that was set up to get the page functioning in the same fashion as the other, newer pages on the site. For the Jade template, I broke it up into partials as well and cleaned up the semantics. Finally, new content was added in to make sure the whole team was represented.

Editorially Iterations

Editorially Application

My role: Develop the HTML, CSS, and responsive code.

We implemented new slide from the left menus for the editor portion of Editorially. I wrote all styles for the new menus as well as working with CSS transitions and transforms to be able to ease them into the editor, the JavaScript used only changed a class to trigger the new CSS. To make these menus work across various screen sizes, the behavior changed between shifting the editor over and just making the editor skinnier.

STET

STET

My role: Develop the HTML, CSS, responsive code, and liquid templates for use in Siteleaf.

I worked closely with the designer of STET to make a full suite of flexible templates that would allow for the designer to do custom CSS for each new home page feature and article. Illustrations were commissioned for each piece, so each layout of the header portion changed. I ensured the templates had enough flexibility to allow for almost any layout. You can read more about the process in a post I wrote.

Editorially

Editorially

My role: Develop the HTML, CSS, and responsive code

As part of my job working as a Web Developer at Editorially I worked closely with our creative director to get a new marketing site ready for the public beta launch (September 2013). This involved building out a responsive, mobile first grid as well as working through all the layout details for all the various screen sizes. The site is built with an eye towards performance as well as beauty. The small bits of interactivity were done with a bit of help from our trusty JavaScript engineers.