You don't know the Arda brand website design details

A good commercial design of finished products, not only good-looking, but also easy to use, users feel all kinds of good, late advertising has real value. The choice of each piece of material, the collocation of each color, the selection of each image, we want to make sure that every pixel we export is based.

The following is a case in which we tell you the importance of each job detail.

Step1. Design direction and site structure confirmation

1) determine the design objectives.

For customers complicated project requirements, the first to communicate with customers, from the need to extract the essence, and accurately improve customer demand, in order to develop a design plan.

By communicating with the customer and comparing the style, style and advantages and disadvantages of the similar design website, the final confirmation page must be compatible: modern, international, affinity and Swiss style.

2 website Structure Establishment

First of all, the content is divided into a clear and reasonable hierarchy, column division and its relationship, the level of the Web page and its relationship, link path settings, functions on the Web page distribution, etc., as a basis for determining the design structure of the Web page.

3 Design Inspiration Collection

In the early stage of the site design need to collect a large number of design-type web site resources, in the image Library to search for a strong sense of visual impact of the picture,

Extract design elements from it for reference. You can also analyze peer-related design sites or competing sites for styles, styles, and advantages and disadvantages.

The following is a source of inspiration for the designers of several sites, to provide you with reference. (each site is very reference value Oh ~ from our public number "view Historical message" to find this content)

Step2. Page layout

1) Line block diagram

Wireframe through the arrangement and selection of interface elements to integrate interface design, you can determine a structure based on the basic concept of architecture, while pointing out the direction of visual design should go forward.

2 Fixed Width & Response (iOS system for example)

First, the specific concept of fixed width and response in popular science.

Fixed width: Fixed page layout refers to the content of the Web site is wrapped in a fixed-width container, the block in the container has a fixed percentage or pixel width values, regardless of how the screen resolution changes, visitors see the fixed-width content.

Response: page design and development should be based on user behavior and equipment environment (System platform, screen size, screen orientation, etc.) corresponding response and adjustment, follow the screen size changes.

Combining the advantages and disadvantages of fixed width and response design, the final decision is to design each device independently, which can optimize the visual effect and improve the end-user experience.

3) grid

Grids are blocks of layout with vertical or horizontal split lines, including boundaries, spaces, and columns, to provide a framework for organizing content. Grid can help us design a unified structure, the picture more tidy.

However, we should boldly venture out of the grid, to create a grid based work, does not mean that everything should be aligned.

The elements that go out of the grid boundary make the artwork look more concise and fluent.

Step3. Font layout and hierarchical relationship

1) Font layout

A title, exactly what font? How big is the font size? Horizontal or vertical? These are based on the overall layout temperament and the content of the expression of the common decision, we have to understand what the words in the end, can we choose the font size to provide the basis for the visual feelings of words and the content of the statement to maintain unity, can provide directions for us to choose the right illustrations.

2) Hierarchical relationship

The text level plays an important role in communication, not only leads the user to the desired result, but also improves the user experience. Web applications always have a complex level of writing, if the distinction is not clear enough, all levels of text competing with each other, will make users overwhelmed, lost. To better differentiate the level of text, you need to know what the "user wants to dissect" information. In the absence of usability testing, you can assume that the user will see the title at first glance, then read the text, and then click the link if they are interested.

Step4. Optimizing Design Details

Web Detail design is excellent, to a certain extent, determines the page's browsing volume and the value embodied. Many friends at the beginning of the design, always hope to win the idea of customers, but only a creative point is far from enough. Any creative, as long as there are bright spots, will soon be cottage. However, if you have enough confidence to grasp the user's psychology and experience, then even if others cottage your creativity, do your function, but your details, your thoughts, will be much higher than their creative style.

Single text always makes the user have visual fatigue, unwilling to go on browsing. If the text to add visual shock pictures, not only allows users to see the desire, but also optimize the overall layout of the effect.

Step5. Design Summary

The design process may not be so smooth, may take a lot of detours, encounter all kinds of difficulties and hardships.

But when you overcome these problems, ultimately design the results of customer expectations, and let users feel comfortable and innovative interactive experience, the effort after the sense of achievement is self-evident.

This shows that the essence of web design is a variety of creative style, reasonable technology implementation, exquisite detail grinding and excellent user experience, finally to find a perfect fit point to show exquisite beautiful and easy to optimize the page effect.

Excellent web design not only shows a good visual effect, but also in the user experience to show a strong practicality.

Thanks to the design team and the development team to fight day and night, but also thank the customer's cooperation, trust to let us continue to break through!