Theme design of Baidu Browser

This project was completed in 2014.

Thinking
  • How to keep all the components clear and harmonious and aligned with the theme?
  • Since consistency of the portion and size were critical, it was decided to utilize Baidu’s wallpaper library as a resource.
  • We also needed to determine the requirements for selecting pictures.
Solution
  • Two sets of the components were prepared for a dark and a light theme.  The color of the pictures would determine which theme would be used.
  • A one-pixel boarder was selected for all pictures in order to maintain consistency in cases where pictures might have a large white area.
  • See the section below for pictures selected.  Select pictures from several dimensions. Crop and edit as necessary to keep the pictures simple in order to avoid conflict with the components, – especially the 4 tabs on the right side.
Dark theme
baidu_browser_dark-theme
13
19
Light theme
baidu_browser_light-theme
10
Theme switch

The control bar below the pictures is used to control the transparency of the tiles which shows the most recent visit websites in the main browser interface so that users can get the best effect. But in the initial version, we just packed up the bar in an icon. We received feedbacks that fewer people could notice it and know the meaning. Therefore, in next iteration, it was changed, shown as the mockup below, using text instead of icons and put the bar directly on the window.

baidu_browser_theme
Pictures selected

We picked 300+ beautiful pictures. They are divided into several directions landscape, celebrity, comic, illustration… Pictures have to been edited or cropped if it can’t show the theme meanwhile making the page clean.