How to Design a Topic Page for eCommerce Website

TMO Group TMO Group

As the name suggests, a topic page is an exhibition that structured around a certain topic. Generally it can not only includes some articles or pictures, but also some  products which business owners want to promote.

Most of topic pages are time-bound. After that time, there will be few people visiting that page. As a result, it usually be used in holiday marketing. And a successful promotion should attract more users within a specified time. Today we’ll give some advice on how to design an eCommerce topic page that attracts more visitors.

1. User experience

User experience is a prerequisite. Designers need to communicate with demand-side. In the early stages, we can put forward some creative scheme or design. After that, these scheme should be combined with the user experience. Then designers can do some adjustment and optimization. Most of the design should be based on a good user experience.

User experience design

2. Structure

The majority of topic pages can be divided into two parts, header and content. Some huge topic pages might have second level domains. The form of expression could be flash, slide show or videos. If you would like to show your new products, you can use flash or videos. In a holiday promotion, you’d better choose to create a poster.

3. Topic size

Usually, a micro-blog has more contents. It may cause the page height longer that others. Designers should  shorten the height in order to compatible screens with multiple resolution(1024ox*768px). But for some younger users who are keen on using big screens, they are the core audience for topic pages. So we should guarantee all contents can be shown under 950px and show best in 1600px width.

The height for our first sight in screen is 600px. Generally, we should limit the height of header pictures between 280px~400px so that users can view the main content in their first sight. In order to make it colorful, we can draw a wireframe in a paper without imagination. Then we can search for some creative design elements and try to combine them appropriately.

micro-blog header

To a certain extent, the design of header is similar to a big banner. The difference is that the header need to connect the following content. Furthermore, the composition of pictures is changeable.

4. The caption in  header

Many headers have a big caption other than some picture elements. Characters in header are usually bigger than other contents and use special visual effects. Some effects can depend on the topic. Though the core content is fixed, rich and varied forms of headers are also in need.

Header design

5. Keep content clear

A word said that “Content is king”. Even we already have a beautiful header, content should not be ignored. To be honest, many visitors will leave the website in few seconds if nothing attract them in their first sight. As a result, primary and secondary contents should be distinguished. Use different colors or effects upon important areas or set up a specific area for them. Other areas should not steal the show.

Content design

6. Visual elements

If you need to create a series of topics,  same visual elements will be used. For example, use the same styles of logo as following pictures.

Logo design 1

Logo design 2

Logo design 3

Designers can also give some advice on visual elements. Good teamwork spirits and communication skills make the whole design efficiently.

In addition, we should balanced the compatibility. Some cool effects can not be displayed in some browsers. It is safe to design two versions for that.

TMO Group is a web design company in China. We help to build your own professional website! Send us an email to cooperate with us!

Subscribe to our newsletter

News of the eCommerce world, best practices to use in your eCommerce platform, insights and analytics of Chinese and South East Asian eCommerce markets - all that and much more in our monthly newsletter.