Jump Out of the Bush: Try "H5-ish" Web App
HTML5, we usually call it H5, is a form of language mainly used in website programming and Web App developing. The websites made with H5 are really popular in Internet marketing and promotion now.
The main advantages of H5 could be presented in two aspects. One: rich interactive animation, this is really helpful for users experience. Two: easy to view, as long as you have a browser, you can view H5 projects. H5 websites and apps are more popular than before. In the near future, H5 design will be one of the main trends.
HTML5 is good, however, not everyone could master it very well. What’s more, some so-called "H5 design tools" only have a few interactive options. So, what if I want to make an H5 Web App but knowing nothing about js or markup language?
As a UX designer, I've been doing nothing but making prototypes for a while. In the process of prototyping, I found that there are many things in common between H5 Web App and prototypes. Some of my design could totally fit the requests of H5 Web App. I'm making a design for a travel agency, and please allow me to introduce how to make a "H5-ish" Web App for a travel agency.
Before we start, we need to choose a prototyping tool, how about Mockplus? I think this is a good choice.
Then, we make an outline. A good plan is an essential part of a great design.
Now, let's begin.
Step 1: Animation in Loading
Animation in loading is a typical feature of H5 Web App, "H5-ish" Web App shall contain this feature too.
How to do: import the pictures you need, then disable the visible option. Next, drag the link point to themselves and select "Onload" > "Show/Hide" and "Onload" > "Move" to set interactions for those widgets. Those animation will make this page look just the same as an H5 Web App.
Step 2: Set interactions
This biggest advantage of using a prototyping tool to design a "H5-ish" Web App. Prototyping tools like Mockplus can easily set interactions for every widgets.There's always a method for what you want. Let's set some popup panels on this page. they could be used for displaying the introduction of this travel agency, guides' certifications, and etc.
How to do: drag the popup widgets from the library directly, double click to edit it, then double click outside, drag link point from other widget and drop on the popup panel. Last but not least, please remember to adjust details in the parameter panel.
Step 3: Set page link
We need to set page link interactions in the areas which users will be interested in and click. The important contents should be introduced in a new page, which will apparently reduce the influence from other things. Page switching not only attracts users' attention, but also protects the fluency of operation in this Web App.
How to do: setting a page link is really a piece of cake for prototyping tools. Just a drag-and-drop in Mockplus will make that come true.
Step 4: Publish online
The better your design is, the more important it is to tell others. But how to tell other people about your "H5-ish" Web App?
How to do: publish your prototype online. With this option in Mockplus, you can upload your design to cloud, and send the URL to your customers. Meanwhile, it is very easy for Mockplus to run in full screen. Amazing, right?
What I made here is just a simple sample, and the main purpose is to share this idea to you.
I believe that whatever you do, marketing or designing, we need to pay more attention to the results, not the tools. It seems impossible to design an H5 Web App with a prototyping tool, but if this could actually give us a solution, then why not?
Prototype Faster, Smarter, and Easier with Mockplus