As an emerging marginal occupation, website design should not only be creative in appearance, but also appropriately combine related principles such as graphics, layout and interaction design, making it a unique and fascinating art. There is no doubt that good design can make a website stand out among many sites, and excellent creativity and presentation can leave a deep impression on viewers, thereby continuously and indirectly increasing website traffic and conversion rates. However, it is not easy to design a personal/corporate website that takes into account both "look and practicality", not to mention that it is a daunting task for most people to realize the design idea.
So how can you design a satisfactory or even an internet celebrity website with limited time and skills? Xiao Bian believes that it is very important to plan the design steps of the website in the initial stage of design. Usually, website design is divided into four main steps, including design inspiration, design prototype construction, usability testing, and website construction. Here is the specific content for each step, let's take a look:
Step 1, Design Inspiration
Whether you encounter bottlenecks in website design, or worry that you do not have enough inspiration to complete the entire website building process, the editor recommends that you study and learn from it first. After all, inspiration comes from reference. In the analysis and comparison from different angles, I believe you There will be many gains. Here are 7 eye-catching website design examples you can get inspiration from:
1. Product Hunt - Community Category
Step 2, Design Prototype Construction
In the initial creative inspiration and discovery stage, we will use various means to track and record all kinds of creative ideas from time to time, such as sketches, diagrams, paper models and other low-fidelity prototypes can achieve the purpose very well. After the ideas and inspirations are generated, we need to further refine the design work and strategies on the basis of the above work. The core part is the web page prototype or frame design, which simulates the typical usage scenarios of users and communicates with PM/website development engineers. The best form of communication.
The design prototyping examples listed above are made using Mockplus, which is a fast and simple web prototyping tool that is code-free, comprehensive and easy to use, and can meet most design needs. Without further ado, let's take a look at the specific design skills and application scenarios:
1. Various interactive commands and states:
*Mouse over to display content
In web design, mouseover is a frequently used interaction. Mockplus's state interaction solves this problem very well. Just click a "lightning" icon next to the attributes of stateful interaction such as color, border, and text, and you can Easily set properties on mouse over or mouse down.
[Mouseover state]
＊Dynamic effects when switching pages
This kind of interaction is also common in App design. For example, in Starbucks’ App, some small illustrations and special interactive animation effects are used, especially when the page is switched, there will be interesting animations, which can be used in Mockplus. Triggered to achieve.
[Trigger command on load]
2. A large number of packaged component libraries and collectible component libraries:
＊Hamburger menu
As a common web design UI element, the hamburger menu is relatively common on the mobile phone side of the web page. Here, you can make it through the freely editable pop-up panel in Mockplus, and add any elements. For example, the operating instructions at the top of this APP.
[Popup Panel Component]
＊Floating navigation bar, horizontal drag display
With the popularity of card-style design, more and more websites will use a large number of pictures, among which the horizontal scrolling of pictures can be easily achieved with the scrolling area of Mockplus.
[Scroll area component]
3. Efficient and reusable elements
* Repeated layouts and pictures
Especially in news and food design, repeated layouts and pictures are very common. Here you can use the grid and data filling functions of Mockplus to achieve a time-saving and beautiful effect.
[Grid + Data Autofill]
4. Rich UI icons
＊Icons - covering social, multimedia, nature, sports, brands and other categories
[3000 + UI icon]
In addition, there are more good-looking and practical examples of prototype projects, which can be previewed and downloaded for free by clicking here .
Step 3, Usability Testing
Obviously, usability testing is not the ultimate goal of prototyping, but it is one of the most important links in the entire design process. Especially in the era of advocating user experience-centered adaptive web design, we should do a good job of functional and The test that displays the results, supports 8 different prototype preview and test methods in Mockplus, you can watch the video for details:
Step 4, website construction
There are many paid or free website building and content management (CMS) tools on the market. These tools can help designers and back-end developers to complete their work easily. Here are some of the preferred tools, which are code-free and easy to use.
1. CloudPress
Applicable object: individual
This tool can help create a responsive WordPress site that can be used without coding or development skills. The official blog has published more than 80 tutorial texts, covering from the details of page design, to font color, typesetting, various sizes and special effects.
2. Bubble
Applicable objects: individuals/enterprises
Bubble can be used to create web or mobile applications. You only need to drag and drop various elements or controls to the interface to design online. Includes a wide variety of element types such as text, maps, videos, buttons, and more.
3. XPRS
Applicable object: individual
This website building tool is as simple and fun as Lego blocks, without the complicated, confusing and expensive development process, you can use the integrated template and editing environment to create your ideal website look and make your dreams come true.
Applicable objects: individuals/enterprises
As the name suggests, this tool can convert your static HTML website into a WordPress theme, which is especially suitable for small partners who need to update, switch or migrate their website. No coding is required, and the website will be automatically generated after manual upload.
Epilogue
Although the editor divides the design of a popular website into four steps, the actual design process is often more complicated and usually requires multiple people in the team to collaborate and edit, such as online annotation and prototype sharing. Mockplus's upcoming enterprise version, not only It is an upgrade of the team function, and it caters to the needs of enterprise hierarchical management and viewing. If you are interested, you can download it from the official website .