Front-end Development
Graphic Design
I translated this feature article about efforts to reduce the gender gap in the video games industry for a mobile application and on the web.

For this feature story on reducing the gender gap in the gaming industry, I adapted an existing print magazine layout into responsive digital experiences for both web and mobile. 

I translated static, multi-column print designs into fluid HTML/CSS layouts for GameInformer.com and optimized content components for the Game Informer mobile app—ensuring typography, image hierarchy, and visual impact translated seamlessly across all screen sizes.

Pages 1-2 of the print spread for the article "Women Creating a Brighter Future For Games".
Pages 1-2 of the print designs for the article.
Pages 3-4 of the print spread for the article "Women Creating a Brighter Future For Games".
Pages 3-4 of the print designs for the article. I referenced these to create the mobile app version.

Mobile App

This version was created using HTML, CSS, and JavaScript, and compiled using Mag+ to convert it for use within the Game Informer app, as part of the June 2018 mobile edition of the magazine. To create this page, I was provided with print designs and asked to convert them to a coordinating, mobile-friendly layout.

Screenshot showing the header from the mobile app.
The header of the mobile app featured bright colors and fonts to match the print files and catch a reader's attention.
Screenshot of text and headshots midway through the article.
It was important to feature the women in the article. This image treatment mimicked the print callouts.
Screenshot of a sidebar on the article.
A sidebar on the article.

Website

I was also asked to convert this article for use on GameInformer.com. I customized a page within the site Drupal CMS following a provided design. This version was responsive for all device sizes and integrated within the current site theme. It also includes a parallax header image with moving elements.

The major challenge I encountered with developing this article for the site was adding custom design elements within an established CMS article template.  I was limited in the template changes I could make to the article format.

You can view this page and read the article at GameInformer.com.

Screenshot showing the beginning of the article displayed on a desktop browser.
The opening view of the article on a desktop browser.
Screenshot of the header for the mobile web version of the article.
The mobile version of the article on the website.

Related Projects

Rendering of the Game Informer homepage on a tablet device.

Site Redesign & CMS Migration for Game Informer
Front-end Development
Graphic Design
In June 2018, I led the front-end development for a complete overhaul of GameInformer.com, partnering with my engineering team to execute a major visual redesign alongside a full CMS migration.
Rendering of an article on the Game Informer app on a mobile phone.

Developing a Mobile Edition for Game Informer
Front-end Development
I designed and engineered the first mobile app version of Game Informer, transitioning the legacy print publication into a modern digital experience for the App Store and Google Play.