Advanced learning, how to design a beautiful and practical website without code?

As a new Frontier career, website design should be creative from the exterior, and the appropriate combination of graphics, layout and interactive design and other related principles, making it a unique and fascinating art. There is no doubt that good design can make the site stand out in many sites, excellent creative and expressive way to impress the visitors, thus continuing to indirectly increase the site traffic and conversion rate. However, it is not easy to design a personal/corporate website that takes into account the "beauty value and practicality", not to mention that it is a daunting task for most people to make design ideas come to the ground.

So how can you design a website that is satisfying or even web-red with limited time and skills? The small part thinks that it is very important to plan the design steps of the website in the initial stage of the design, usually the website design is divided into four main steps, including design inspiration, design prototype construction, usability testing, website building. Here's a look at the specifics of each step:

Step one, inspired by design

Whether you are the site design experience bottlenecks, or worry that they do not have enough inspiration to complete the entire construction process, small series are suggested that you first study and learn from, after all, inspiration from the reference, in the angle of analysis and contrast, I believe you will have a lot of harvest. Here are 7 eye-catching examples of web design that you can get inspiration from:

1. Product Hunt-Community class

2. shopify-e-commerce class

3. So stereo-Music class

4. stylexstyle-Fashion class

5. edx-Education Category

6. fedena-Software class

7. valet-Enterprise Class

8. basecampe-Management class

Step two, design the prototype build

At the beginning of the creative inspiration and discovery phase, we use various means to track and record a variety of creative ideas, such as sketches, charts, paper models and other low-fidelity prototypes can be very good to achieve the goal. After the creation and inspiration, we need to further refine the design work and strategy on the basis of the above work, the core of which is web prototype or frame design, which is the best form of simulating user's typical usage scenario and communicating with pm/website development Engineer.

The examples of design prototypes listed above are made using Mockplus, a fast and simple web prototyping tool that is code-free, fully functional, and easy to use, and meets most design needs. Don't say much, take a look at specific design techniques and application scenarios:

1. Multiple interactive commands and statuses:

* Mouse Hover display content

Web design, the mouse hover is often used to the interaction, Mockplus state interaction to solve the problem, simply click on a "lightning bolt" icon next to the properties of the color, border, text, etc. with state interaction, it is easy to set the properties when the mouse passes or the mouse point.

[Mouse hover status]

* Dynamic effect on page switching

This kind of interaction in the app design is also more common, such as Starbucks in the app, with some small illustrations and special interactive animation, especially after the page switch will be interesting small animations, which can be used in Mockplus "load-on" trigger way.

[Trigger command on load]

2. A large number of packaged component libraries, and a collection of component libraries:

* Burger Menu

As a common web design UI element, the burger menu is more common on the web phone, where you can add any element by creating a free-to-edit popup panel in Mockplus. For example, the top of the app in the Action Guide instructions.

[Popup Panel component]

* Hover navigation bar, horizontal drag display

With the popularity of card-style design, more and more sites will use a large number of images, where the horizontal scrolling of the picture can be easily implemented with Mockplus scrolling area.

[Scroll Zone component]

3. Efficient and reusable elements

* Duplicate layouts and images

Especially in the news and food design, duplicate layout and pictures are very common, here can be mockplus lattice and data filling function in conjunction with the time-saving and beautiful effect.

[Grid + Data auto-fill]

4. Rich UI Icons

* Icons-covers social, multimedia, nature, sports, branding and other categories

[3000+ui icon]

In addition, there are more beautiful and useful examples of prototype projects, can be poked here for free preview and download use.

Step three, usability testing

It is obvious that usability testing is not the ultimate goal of prototyping, but it is one of the most important aspects of the whole design process, especially in the era of advocating user experience-centric adaptive web design, we should do a good job of testing the function and display results, Support 8 different prototype previews and test methods in mockplus to watch the video:

Step four, Site setup

There are many paid or free site building and Content Management (CMS) tools available to help designers and back-end developers work easily, and the following are some of the preferred tools, no code, easy to get started.

1. cloudpress

Applicable to: Individual

This tool helps to create a responsive WordPress site that can be used without code or development skills. The official blog has now published more than 80 use of tutorial text, from the use of page design details, to font color, typesetting and various sizes, effects are covered.

2. Bubble

Applicable to: Individual/Enterprise

Bubble can be used to create Web pages or mobile apps, with the ability to drag and drop a variety of different elements or controls to the interface for online design. Includes text, maps, videos, buttons, and a variety of element types.

3. Xprs

Applicable to: Individual

This site building tool is as simple and fun as Lego bricks, no complicated, confusing and expensive development process, can use the integrated template and editing environment, create their own ideal site, let the dream into reality.

4. HTML to WordPress

Applicable to: Individual/Enterprise

As the name implies, this tool can convert your static HTML website into WordPress theme, especially suitable for small partners who need to update, switch or migrate the site, no coding, manual upload after the automatic generation of the site.

Conclusion

Although the small part will design a high popularity of the site is broadly divided into four steps, but the actual design process is often more complex, often need to collaborate on the team to edit, such as online annotation and prototype sharing, Mockplus recently released Enterprise Edition, not only the upgrade of team function, but also cater to the enterprise hierarchical management, the need to view, Interested in the website can be downloaded to learn about.

Advanced learning, how to design a beautiful and practical website without code?