Think outside the box, “H5-like” can help you market promotion

HTML5, which we often call H5, is a markup language that is mainly used for website writing and Web App development. Web pages made with H5 can be said to be a powerful tool for online promotion and sales. Its advantages are mainly reflected in two aspects: one is rich motion effect support, and the other is easy viewing. H5 has become more and more popular in recent years.

However, not everyone can use H5 for development. It requires a lot of programming language and development knowledge, and some so-called simple H5 design tools are not perfect in their functions. If I don’t know js or HTML5, how can I make a simple “H5-like” App?

Mr. Xiong, a product novice, has been working on a prototype recently. During the production process, he suddenly discovered that his design can actually be fully applied to promotions such as H5 web pages. I’m currently working on a travel-related app, so I’ll help out and make an “H5-like” promotion prototype for tourism activities.

Before we start, we need to decide on a prototyping tool. Let’s use Mockplus. I have been using it recently and it is quite easy to use.

Then, list the big steel and edit the project tree. Good planning is an essential part of good design.

Next, we start designing the page.

Step 1: Load the animation.

Loading animation is one of the iconic effects of H5 pages , and "H5-like" certainly cannot forget this.

Method: Import the required images, and set some components to be invisible according to the content of the page; drag their respective link points to set their interactive effects to display "when loading". And set moving animation effects for some components to make the entire page more vivid.

Step 2: Set the interactive effect.

The biggest advantage of using prototyping tools to set up "H5-like" web pages is that prototyping tools have more interactive effects, and there is always a way to achieve what you want. Here we simply set up some pop-up effects. For example, introduction to travel agencies, relevant qualifications of tour guides, introduction to tourist routes, etc.

Method: Drag out the corresponding pop-up component and double-click to open the design. Then drag the link point of the component in the page to the pop-up window, and finally set the pop-up effect.

Step 3: Page jump.

Set up page jumps in content areas that users are more interested in, use new pages to explain key content, and reduce interference from other content. This not only ensures that you attract users' attention, but also ensures the smoothness of page operation.

Method: Setting the page jump effect is a piece of cake for prototyping tools. Mockplus only needs a simple drag and drop action to do it.

Step 4: Publish online.

No matter how good the design is, what will it do if no one appreciates it? But how can we send out such an "H5-like" prototype project?

Method: Release. With this feature, you can upload your finished work to Mockplus’ server, and then share the link with your clients. Moreover, Mockplus can easily achieve the effect of full-screen demonstration. How about it, isn’t it amazing?

The design content is relatively simple, mainly hoping that everyone can understand the meaning.

We believe that whether it is marketing or design, we focus more on the results rather than the tools in our hands. Although using prototyping tools to implement H5 web pages seems to be unrelated, as long as it can solve practical problems, why should we stick to a fixed model?