Redesigning XP-Pen's Homepage

Finding out the problems with the existing webpage

Starting the design process

Design Systems

I started by creating a design system for the brand. Although there are no specific brand guidelines, except for the blue color and the font Roboto, I have taken a few design liberties and developed new design guidelines and systems.

Final Designs

I followed the same layout and kept the content as it is. Additionally, I aimed to create a minimal-designed webpage that is to the point, while utilizing design principles to make it visually pleasing.

Landing Page Banner

I lightened the background slightly to allow the copy and product to shine. Additionally, I opted for a black color for the CTA button, as the blue was blending in with the background.

Navigation Bar

I incorporated a glassy effect into the navigation bar, as I believe it adds a minimal and visually pleasing touch. Furthermore, I noticed that the existing navigation bar appeared cluttered with insufficient breathing space between the navigation items, so I introduced some spacing to enhance its minimalism and make it look clean.

Series Section

To distinguish the sections on the predominantly white webpage, I introduced vibrant, colorful backgrounds using the existing product illustration. This not only separates the sections but also infuses the website with additional color.

Popular Tablets Section

I organized all the products into individual cards to distinguish each one. Additionally, I enhanced text hierarchy by increasing the font size of the headers. To maintain consistency, I applied the same shadows to the products throughout the design.