DROI TECH WEBSITE

droi_homepage

This project is a new design and redesign of the Official Droi Tech website. The reason to say this is because there are several products and brands under the Droi Tech and each of them has their own VI system and website that already running. The job of mine is to combine all the brands and products together in a fully new website and redesign them to fit together.

Before we start our design, we gathered lots of references like Apple, Google, Aliyun, Xiaomi and Meizu to find what kind of style that fits our needs the best. As you can see below, we used lots of styles that comes from Google’s Material Design concept. In the meantime, we worked with product managers to discussed the structure and UX of the website. After the pre-works, We came up with a prototype to present the website to the colleagues and got lots of feedbacks to improve it.

finally, it comes to the design part.

Droi Color

During the design progress, considered there are several products under the Droi Tech and each of them has their own visual identity and brand color. We chose the neutral color black gray and white as the main visual color and use specific brand color in each brand page.

Droi Typography

In the typography part of Droi Tech website, considered the lack of applicability of Chinese font in web design. We chose the most common-used Chinese typeface Microsoft Yahei as the default font to display Chinese. In the Latin text display part we chose an open-source webfont Roboto which designed by Google.

About Droi

One of the most difficulties of this project is to make it responsive. We need to consider what it looks like in multiple devices and understand how the responsive design works. To take the about page below as an example, We considered a lot on how to display the company timeline on multiple devices. finally, we found a code for responsive vertical timeline and that solved this problem.

Join Droi

We used material design style and flat design ticket to present the join us page.

Contact Droi

In the contact page, we used cards as bottom to display contact information. To make this page more simple and readable we even omitted the titles like call numbers, email addresses and QQ numbers, just used icons to represent it.

Droi News

Freeme OS

Freeme OS is newest 64bit OS based on Android L.Freeme OS integrates into “Intelligent Technology” and optimizes more than 3000 functions.

Freeme OS is the most important product of Droi Tech. My idea of design this Android based mobile phone OS is to make a simple and clear page to represent what is Freeme OS and what it could do. Since this is a redesign because we already have an old Freeme OS website, I simply redesign the overview page and use the official Android website as a reference.

Droi Market

Droi Market is a download platform with massive apps and games, it is one of China’s top 5 personalized Android app store.

We used Droi Market’s brand VI color as the main color on this pages. To make the users understand what is Droi Market, we put a lot of efforts on the banner pic which is the first thing to see. We simply took the meaning of “market” literally and made a house which got a signboard of Droi Market’s slogan on it, we put lots of well-known app’s icons hidden under the signboard, and light is glowing out of the house through it’s front door which gives the scene a magic feel, the gold icon that flying out of the scene just echoed the brand slogan “An Android market that makes money”.

Droi Market Apps

We also did some work on the user experience part. To use market apps list page as the example, when users hover their mouse on any QR code icon in the list, the specific app’s download QR code will pop up and replace the app icon which saved the steps to jump into the app’s detail pages for download.

Droi Market App detail

Another simple page that followed the rules of responsive design and material design.

Droi Platform

Droi Platform is the only hardware-based mobile marketing platform and the most open and innovative new whole-case 4A.

We used Droi Platform’s brand VI color as the main color on this pages.

Droi Platform SDK

Leave a reply

required*