Crackdown 3

Senior Designer

I was Senior Designer for celebrating the launch of Crackdown 3

The Challenge: Scifi Comic Style on the Web

  • 3D movement and camera in Adobe After Effects
  • Animation effects in After Effects
  • Vector interface design in Adobe Illustrator
  • Color pallet & hierarchy
  • Typography
  • Iconography in Adobe Illustrator
  • Requirements gathering & Stakeholder input
  • UX Strategy
  • Competitive research
  • Analytics analysis
  • User journey analysis
  • Wireframes
  • Design iteration and evaluation

*Crackdown 3 logo and characters by Microsoft.

Skill Icon Animations

  • Vector skill icons in Adobe Illustrator
  • Hand program animation timings in CSS
  • Icon interactions in Javascript

UI for Any Device

My Contributions
Project Story
  • User interface design in Adobe Illustrator
  • Front-end web programming with HTML, Javascript, CSS
  • Responsive, adaptable layout for varied content
  • Interface animations in CSS, Javascript
  • Character layouts in Adobe Photoshop
  • Tiling vector backgrounds in Adobe Illustrator

*Crackdown 3 logo and characters by Microsoft.

I modeled the UI after parts of the Crackdown 3 logo and sections of the extraordinary armor worn by the lead characters. The parallax effect seen here worked with horizontal mouse movement, or by tilting your mobile device. I illustrated vector elements that could draw focus and emphasis to drive traffic. Being entirely vector, the UI can adapt to any screen size and remain razor sharp, even on the side of buildings!

Unique Content Shapes

My Contributions
Project Story
  • User interface design in Adobe Illustrator
  • Lightweight vector interface with SVG assets
  • Front-end web programming with HTML, Javascript, CSS
  • Responsive, adaptable layout for varied content
  • Interface animations in CSS, Javascript
  • Character layouts in Adobe Photoshop
  • Simplified data entry for content editors

Using the power of SVG’s in a web environment, I was able to shape the engagement content of the website into a comic book style. This allowed me to use triangles, rounded corners, or funky polygons to shape the content, without adverse effects on usability. This technique enabled content creators to add images and varied content while maintaining interface integrity.