Loading...
PlayStation Docs.

Front-End Development & Responsive Design

At Off Base Productions, I worked with the engineering team to design and develop the entire front-end user interface of a large-scale Content Publishing Tool (CPT). The CPT was a third-party internal tool for Sony PlayStation to digitize their video game manuals. I worked closely with UI designer to optimize the user flow and layouts. Lastly, I built complex video game manuals that were like micro-sites by customizing the stylesheets of the default template of the CPT for all of the PS4 release titles.

Web Application
Click arrows for more

Project Details

Client: Sony PlayStation

Team: Off Base Productions

Years: 2013-2014

Project Details

This large-scale web application was built in Ruby on Rails in the backend with Angular.js and Foundation UI framework on the front-end. I used the Foundation 12-column grid system as a boilerplate to build a fully customized UI framework for the CPT which simplified the front-end development process by consolidating repeating CSS into Sass variables, mixins, extends, placeholder selectors. Then I created a detailed functional style guide which included a visual example, SCSS classes and mark-up for each element of the application which proved to be extremely helpful when working with a team of developers that could all write unified front-end code.

Front-End Development

Responsive Design

UI Design

Custom Game Manuals

Project Details

Employer. Off Base Productions

Client: Sony PlayStation

Year: 2014

Project Details

The CPT was still a work in progress and did not offer many robust features when I was tasked to build custom designed game manuals for the PS4 release titles. I essentially had to "hack" our default template and meticulously add my own custom SCSS to create each custom game manual element by element. The result was so impressive that we ended up including this as a billable add-on service in the contract with the client.

Front-End Development

Responsive Design

UI/UX Design

CSS magic

 Previous  All works Next