Shulou(Shulou.com)06/01 Report--

How to use the browser to design a prototype for the website, in view of this problem, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Prototyping a website is a comprehensive and systematic process in which you need to come up with a set of wireframes and ensure basic interaction. A simple wireframe can be a static picture or even a hand-drawn draft, but most prototypes are dynamic and interactive, at least the main pages and functions can be basically presented.

However, designers usually choose to use image editing tools for prototype design, but in this way, most of the tools are difficult to achieve enough interaction, which has spawned many developers to turn to browser-based prototyping tools.

With the improvement of browser performance and the gradual improvement of technical support, browser-based prototype design tools are not only feasible, but also ensure usability. They are faster, cleaner and easier to use when building new projects. So how does it all start?

Today we will help you sort out the basics of some browser-based prototyping tools and recommend a series of really practical and useful prototyping tools.

Basic knowledge of prototype design in browsers

It can be said that the website itself is a digital interactive interface run in the browser, which makes many designers tend to use image editing tools such as PS to design the interface before writing code.

In other words, prototyping a website in a browser is a more logical way of thinking, whether it's measuring and planning detailed layouts, or designing interactions and dynamic effects.

However, generally speaking, for new design projects, there is not a unified optimal prototype design. Although many designers still prefer to start with PS, using prototyping tools in browsers to create prototypes still has advantages that can't be ignored:

A grid system that is easier to test and modify

The addition and deletion of breakpoints are more random.

Dynamic effects such as drop-down menus can be tested in real time

You can start with a small code base and then gradually increase it.

Photoshop currently does not support the production of dynamic and interactive visual manuscripts and prototypes. So when you are prototyping, you need to create separate layers or documents for specific breakpoints and interactions.

The prototype designed under the browser is closer to the final interface, and the information presented is more accurate. By contrast, the visual draft is flatter and more static. Of course, the visual draft presented under Photoshop is also an important material and reference, but in the end, you have to submit an interactive layout design. Therefore, prototyping tools in browsers are more convenient and efficient.

You can skip the initial draft stage and create an interactive web page prototype in the browser with the help of tools, adding the final major functions of your idea. These design tools are good in themselves, but you have to figure out where they are in the whole process.

You can use simple HTML/CSS code, open source libraries, or browser plug-ins in the prototyping process, but the ultimate goal is the same: to create a basic, interactive UI interface that approaches the final shape of the site (rather than the details).

Prototype design process

To perfect an idea, sketching on manuscript paper is always the best way. Similarly, such sketches can also be done in a drawing program, but on paper will be more direct and casual.

For the initial rough design, you can add new ideas through fast iterations and gradually improve them. You can even draw a table on the manuscript paper to describe the properties of different controls and elements, such as width, height, color, and so on.

ZQSxSsj0OuwV5xq8

When the sketch looks passable, you can go to the browser, open the prototype tool, and start designing. At this time, the first thing you need to do is to design a grayscale layout without complex colors. There are many different tools to help you solve this problem, such as Placehold.it can help you quickly generate different sizes and different grayscale images.

02-placehold-it-webapp-images

Using a pure grayscale layout allows you to focus more on grids, typesetting and white space, as well as large controls such as webcasts, navigation, and menus. The design at this stage should focus on the layout and exclude the visual and aesthetic effects on the whole.

Next you should eliminate all potential defects, browser Bug, and response breakpoints so that the page works properly in all browsers.

After solving these problems, you can fill it with pictures, videos, text content, etc., adding styles and styles, and you no longer have to worry about the overall layout. Focusing on large blocks and important elements is the best strategy for using prototyping tools in browsers.

When your entire layout has collapsed in the browser, it doesn't matter whether it has color and content. But if there is only the layout but not the specific content, it will be much more convenient to trim.

Once your prototype is done, it will be much easier to fill in the content.

At this stage of prototype design, there are also a lot of things to consider. Although different project requirements vary, there are some basic issues that almost all projects need to consider:

Is this layout compatible with all major browsers?

Are the gaps and gaps between elements sufficient?

Do all dynamic elements work properly?

Have all the necessary response breakpoints been set?

Browser-based prototype design tool

Now that we've said that, an in-browser prototyping tool that doesn't need to write any code is what we really want. Of course, if you're proficient in HTML/CSS/JS code, that's another thing. JQuery even has a lot of libraries that can save you a lot of trouble.

So today we are talking about convenient, highly applicable prototyping tools in browsers, and the following recommendations are free and easy to use.

Chrome Workspaces

03-chrome-workspaces-devtools

The development tool built into the OneWorld browser is called Workspaces, which itself exists in your local directory and can be called directly for the browser. If you make a simple HTML/CSS prototype and open it in a browser, you can edit and modify them in Chrome Workspaces. Currently, the vast majority of developers are using it.

Bootstrap

04-bootstrap-css-open-source

Each front end should be familiar with the Bootstrap library, where the prefabricated CSS classes and elements are quite complete enough to satisfy your imagination.

A variety of buttons, layouts, labels, drop-down menus, and a variety of common website components and functions. You don't have to write a component from scratch, because Bootstrap covers almost all of it.

The only drawback of Bootstrap is probably that too many people use it, and you may often see many styles and controls. Of course, if you are willing to customize the style, you can certainly make it more powerful.

Foundation

05-zurb-foundation-resource-prototyping

Another very popular choice is Foundation from ZURB. It's cleaner and simpler than Bootstrap,Foundation, and the reason is simple: it doesn't have too many default styles.

Foundation is also more customizable, and users can easily overwrite their own styles over default controls and elements. Many projects usually only use the default style when using Bootstrap, while designers tend to add their own styles when using Foundation.

Pure CSS

06-pure-css-open-source-library

Another recommended pure CSS/JS framework should be Pure CSS. Like the previous Foundation and Bootstrap, it is free and open source, equipped with grids, typesetting layouts, buttons, and other dynamic controls.

Pure CSS has achieved a good unity in functionality and beauty, its simplicity and flexibility make it can be applied to different prototype designs, and its highly cohesive library provides complete functions.

Handcraft

07-handcraft-prototyping-tool-extension

Handcraft is a strange universal browser plug-in that allows developers to store and share prototypes online.

This is the answer to the question about how to use the browser to design a prototype for the website. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.