As an emerging marginal profession, website design should not only be creative in appearance, but also properly combine the relevant principles of graphics, layout and interaction design, making it a unique and fascinating art. There is no doubt that good design can make a site stand out among other sites, and good creativity and presentation can leave a deep impression on visitors, which in turn indirectly increases site traffic and conversion rates. However, it is not easy to design a personal/business website that is both “good looking and useful”, let alone a daunting task to get the design idea off the ground for most people.
How can we design a satisfactory or even popular website with limited time and skills? Xiaobian believes that it is very important to plan the steps of website design in the initial stage of design. Usually, website design is divided into four main steps, including design inspiration, design prototype construction, usability testing, website construction. Take a look at the details for each step below:
Step 1: Design inspiration
Whether you are website design bottlenecks, or worry that they do not have enough inspiration to complete the whole site process, xiaobian suggest you study and learn from, after all, inspiration comes from learning, in the perspective of analysis and comparison, I believe you will have a lot of harvest. Here are seven eye-catching examples of website design that you can get inspiration from:
1. Product Hunt – Community
2. Shopify- E-commerce category
3. So Stereo- Music
StyleXstyle- Fashion
EdX — Education
6. Fedena- Software
7. Valet- Corporate
8. Basecampe — Management
Step 2: Design prototype construction
In the early stages of creative inspiration and discovery, we are constantly tracking and recording creative ideas through various means. Low-fidelity prototypes such as sketches, diagrams, and paper models work well for this purpose. After creativity and inspiration, we need to further refine the design work and strategy on the basis of the above work, the most core part is the web prototype or frame design, which is the best way to simulate the typical user usage scenarios and communicate with PM/ website development engineers.
The design prototype cited above was created using Mockplus, a fast and simple web prototyping tool that is code-free, versatile, and easy to use for most design needs. Without further ado, let’s take a look at specific design techniques and application scenarios:
1. Multiple interactive commands and status:
* Hover over to display content
Mouse-hovering is a common interaction in web design, and Mockplus’s state interaction solves this problem by simply clicking a “lightning bolt” icon next to stateful interaction properties like color, border, text, etc., to easily set mouse-over or mouse-down properties.
[Hover state]
* Dynamic effect when switching pages
This kind of interaction is also common in App design. For example, Starbucks apps use small illustrations and special interaction effects, especially funny little animations after page switching. This can be implemented in Mockplus using “load-time” trigger.
[Loading trigger command]
2. A large number of packaged component libraries and collectable component libraries:
* Burger menu
As a common web design UI element, the Burger menu is common on the mobile side of the web, where you can add arbitrary elements via a freely editable pop-up panel in Mockplus. For example, the operation guidance instructions at the top of this APP.
[Popup panel components]
* Hover navigation bar, horizontal drag display
With the popularity of card-like designs, more and more sites use large numbers of images, where scrolling across images can be easily done using Mockplus’s scroll area.
[Scroll area component]
3. Highly reusable elements
* Repetitive layouts and images
Especially in news and food design, where repetitive layouts and images are common, Mockplus’s grid and data filling capabilities can be used for a time-saving and aesthetically pleasing result.
[Grid + automatic data filling]
4. Rich UI ICONS
* ICONS – Covers social, multimedia, nature, sports, brand and other categories
[3000+UI icon]
In addition, there are more examples of good looking and useful prototype projects, which can be previewed and downloaded for free here.
Step three, usability test
Obviously, usability testing is not the ultimate goal of the prototype design, but it is one of the most main link in the whole design process, especially in advocating for the center with the user experience of adaptive web design popular era, we should do more functions and display the results of test, in support of eight different Mockplus prototype preview and test way, Specifically, you can watch the video:
Step 4: Website construction
There are a number of paid and free web building and content management (CMS) tools out there that can help designers and back-end developers get things done easily. Here are a few of the top tools that are code free and easy to use.
1. CloudPress
For: Individuals
This tool helps create responsive WordPress sites that require no code or development skills to use. More than 80 tutorials have been published on the official blog, covering details of page design, font color, typography, and various sizes and effects.
2. Bubble
For: Individuals/enterprises
Bubble can be used to create web or mobile applications, simply by dragging and dropping various elements or controls onto the interface for online design. This includes text, maps, videos, buttons, and more.
3. XPRS
For: Individuals
This website building tool is as simple and fun as Lego bricks, without complex, confusing and expensive development process, you can use integrated templates and editing environment to create your own ideal website look, let the dream into reality.
4. HTML to WordPress
For: Individuals/enterprises
As the name suggests, this tool can transform your static HTML website into a WordPress theme. It is especially suitable for those who need to update, switch or migrate their website.
conclusion
Although small make up to design a popular site is roughly divided into four steps, but the actual design process is often more complex, often requires a team collaboration in the editor, such as online and the sharing of the prototype, the notation Mockplus recent upcoming enterprise edition, is not only a team function upgrade, more cater to the needs of enterprise classification management, check, Interested can download to the official website to understand.