UI Design for DGMonster Studio

Introduction

This is the website design that I worked for DGMonster Studio which is a design and media company. This website design was based on DGMonster’s brand identity and strategy. When I work at DGMonster, Inc, I am the junior creative director and directly take charge of this project. Because of the brand identity, this web theme is a universe galaxy and it is used dark blue. When I worked on this project, I was providing design solution, wireframe, marketing strategy, usability strategy and visual design solution for them. I guided the design team and provided design guidelines of typography, color, and fonts, And I worked with web developers and provided responsive design, including full-screen scale, Ipad scale, and mobile scale.

The whole website has over 7 main pages, which are the homepage, service page, contact page, project overview, project details, career, team page and contact pages. All the pages are kept consistency. It contained a good user experience wireframes which are web banner showing in every top of the page and main contents are right below it. It displayed a consistent layout for users and easy to read. When we design the web pages, I provided some creative solution for showing the creativity. On the member’s page, I combined the logo shape and used the “D” shape as a frame to show members, which is also used the Contrast design principles for web design.

In the service page, we put interactive design effect, which displayed some parallax animation.  In the homepage, there is some pattern shows in the background to display the digital and creative feeling. In the project page, we have interactive enlarge animation for displaying titles for each project, and so on. If you want to explore the design, you can visit http://www.dgmonster.com/

 

 

 

 

 

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 CSS template and some icons design for the web design.