Product Design for DGMonster Studio

Introduction

This is the website design that I worked for DGMonster Inc. It is a design and media company, located in Boston, MA. This website design was based on DGMonster’s brand identity and business strategy. This web theme is a universe galaxy and it is used dark blue. If you want to explore the design, you can visit http://www.dgmonster.com/

What did I do?

I was the creative director and directly take charge of this project from scratch to implement.  When I worked on this project, I was responsible for providing design solutions, building wireframe, implementing the marketing strategy, ensuring website usability and creating visual design solutions for them. I guided the design team and built the UI library. In the UI library, it contained design guidelines of typography, color, and fonts and grids, etc. I also directly worked with web developers, provided responsive design and interaction strategy.

The whole website has 7 main pages, which are the homepage, service page, contact page, project overview, project details, career, team page, and contact pages. All the pages kept consistent in visual, information architecture, and layout. The consistent information architecture layout was designed with a web banner showing at the top of the page and main contents right below it.  This way showed a consistent layout for users, remember and easy to scam.

When we design the web pages, I provided some creative solutions. For example, on the member’s page, I combined the logo shape “D” with team members’ avatar, so as to show up the brand identity with its characteristics. At the same time, it well designed with color contrast.

In the service page, I designed the parallax animation interactive effect. Additionally, on the homepage, there are some motion patterns, such as line and dots motion connection,  shown in the dark background demonstrated the digital and creative feeling. On the project page, we have interactive enlarge animation for displaying titles for each project, and so on.

All Pages Overview

 

Consistent Layout in Services, Contact, and Career Pages

 

Mockup Showcase

 

 

Below was one version for the homepage design, I used After Effects to animate the page and show the interactive effect. Showing it in below.

 

Some UI elements and libraries I created for the website with more visualized and consistent feeling.