Website Design: responsive design process for complex products

 

　　

 

It is said that 2013 will be the year of responsive design. The yitao design team initially tried to respond when the yitao homepage was revised last year. Recently, it has been used in a more in-depth manner in the yitao "playke" project, for the first time, full-site response is implemented in complex products. I have accumulated some experience and made a lot of difficulties, so I had this responsive design trilogy. This series of articles includes concepts, knowledge, and procedures.

Unlike traditional web pages, responsive web pages only need to consider one State, instead of delivering a set of design documents. It brings new challenges to the collaboration mode between design, front-end, and development teams. What is the output of interaction in each stage in a comprehensive and responsive project of a complex product? How can interaction and visual collaboration be achieved? When is the frontend involved? What makes backend development more reasonable? After going through the first version of "gamer", we got some answers.

Responsive design is called responsive design rather than responsive technology because it is a design-first task. You need to design the response method clearly and then implement it. You cannot generate a design draft and wait for the front-end to see the situation and turn it into a responsive webpage. Therefore, the entire process starts from the interaction stage and is divided into six main steps. The visual, front-end, development, and other roles intervene as soon as possible.

　　

 

Step 1: determine the content policy based on the information architecture.

Based on Product Positioning and user analysis, the interaction designer determines the site information architecture. (There are many ways to present the information architecture, which is not the focus of this article and will not be detailed in detail ).

At this time, you can determine the number of pages of the product, the content contained on each page, and the content priority. Many products contain N multiple pages, and each page is considered one by one. responsive design can easily cause confusion and huge costs. Therefore, the next step is to analyze the page type and classify the page. Taking a gamer as an example, you can divide more than 10 pages into three categories: List pages, details pages, and Operation pages.

　　

 

Step 2: Move the framework

Let's explain why we need to design a mobile framework first in step 2. Mobile priority is the concept that emerged under the mobile Internet wave. It was first proposed by Luke Wroblewski. Mobile Priority does not mean that mobile is more important. devices are equally important in responsive design concepts. It gives priority to the design of mobile phone experience. There are three reasons:

Mobile phones enable design focus and force you to figure out what information is most important. Because the mobile phone screen is small, there is little content displayed on each screen. Touch-screen mobile phones use precision devices such as fingers instead of the mouse to perform operations, which has higher requirements for operations. Mobile phones are more diverse in use scenarios, in many scenarios, users are impatient. For example, when you queue for a movie and are looking for an e-ticket on your mobile phone, it's just too long to find the ticket.

Many features of mobile phones make the design more powerful. Voice Input on mobile phones, geographic location, rich gesture operations, more and more sensors, mobile phone interaction is more likely than PC. Starting with mobile phone design, you can think about how to use these features earlier.

Mobile phones are growing rapidly. Mobile phones are about to surpass PCs and become the most popular Internet access method. This trend is irreversible.

Designing from mobile may be a challenge for designers who are used to the PC environment, and their work habits are forced to change. However, this change must be adapted because user habits are changing.

Back to the question, the previous step has already categorized the page and determined the priority of each page content. Now, we analyze the frame structure of each type of page, such as navigation, subject content, and so on, and finally come up with a frame structure table. According to the structure of the gamer's framework, global navigation is public for all pages. Partial navigation is available only for list pages. Details pages have a "page master" information, not every page has associated navigation.

　　

 

Then we began to design the "ultra-long page" frame on the mobile phone end (because the mobile phone is generally a single column layout, the page is fine and long ). This step begins to design the information structure into the most extensive frame, which can be completed on a whiteboard or paper. The key goal to be achieved is to put the content that the page needs to be presented to the user in the most important position. To meet the reading and operation habits on the mobile phone, try to use the features of the mobile phone device.

　　

 

Step 3: response framework

Expand the tablet and PC framework based on the mobile phone framework. This is a key step for implementing responsive design for complex products. It is the basis for a variety of pages to respond in a organized manner. The first thing is to determine the response mode, that is, from the mobile phone to the tablet to the PC, how the navigation changes, what response method is used for the page layout, and how to adjust the module order based on the Content priority. On the PC side, gamers mainly use the three-column layout. The left-side navigation bar is used as the local navigation area or the master information area. The middle column is always the page subject information. When the page needs to be associated with navigation, it is placed in the right-side navigation bar.

　　

 

At this stage, the response types of all pages start to have rules to follow. The next step is to refine the rules and set the framework to a specific size. Specifically, a fluid grid system is developed. The fluid grid system is a percentage-based grid layout tool. The specific formulation method will be detailed in the [knowledge] chapter.

　　

 

Responsive is an emerging form that closely integrates design concepts with front-end technologies. It encourages early cross-functional communication and collaboration. After the interaction determines the responsive framework and the raster system, other roles can work simultaneously. The front-end starts to intervene in the construction of the grid and framework to generate the basic framework of the page. Visual synchronization begins to explore and define visual styles, develop visual frameworks, and generate style keywords and product color schemes. Several roles need to be discussed and determined throughout the process.

Step 4: Module Design

The detailed design of the mobile terminal module should be carried out in accordance with the principle of mobile first, but we chose to design the details from the PC end. Because PC-side development can fully expose business complexity, the project team's design, development, and testing have mature tools and processes in the PC environment, and the development process is smoother from the PC. Therefore, I personally think that "move first" is the concept that should be followed when determining content policies. Whether or not the detailed design and development process needs to be moved first depends on product positioning and project team conditions.

The response framework determines the Page Structure and response mode. The module design process begins to improve all information formatting and interaction forms. This is the most skillful and time-consuming work of Interaction designers. This process is no different from the traditional process. I just want to keep reminding myself that this module is not only designed for this device. Will it cause problems on other devices?

　　

 

After the page module details are determined through interaction, you can extract the controls, components, and public modules used by the product. Now, the visual and front-end start to do something different from the traditional process. Based on the visual effects of the style design control components and public modules defined in the earlier stage, the visual effects are combined into a simulated page, which is called a style collage. The front-end then implements the control components and public modules in the style collage, and maintains a set of standardized code of components in a unified manner.

The traditional approach is that after the page visual final is finalized, the designer starts to sort out the visual specifications and mark them on the front end. Style collage is to advance this work as much as possible and become a powerful tool for design collaboration. It has the following advantages:

1. The visual effect of a page is actually composed of a bunch of control components and public modules. The simulated page that uses real control components and public modules can already present the visual style of the product. It is time-consuming and labor-consuming to complete the final process of visual drafts on more than 10 pages of a product. It is much easier to generate a style collage. Therefore, it is an efficient design tool.

2. complex products always involve multiple designers and front-end workers in parallel. It is an effective way to ensure visual style consistency by extracting control components and public modules for unified management as soon as possible. Avoid different designers designing the same control component or public module at the same time, and reduce the waste caused by repeated development. It also greatly reduces the cost of post-update and page maintenance. For example, when you need to modify the "follow" button, you only need to change one button to make the whole site take effect.

　　

 

Step 5: responsive Module Design

After the details and style of the page module on the PC end are completed, the rest of the work is to expand the complete design draft on the tablet and mobile phone end, and the front end produces all responsive Page code. When designing a responsive module, the most important thing is to make the operation conform to the device habits and make full use of the features of the device.

So far, a site-wide responsive product page is coming soon. Many people think that the high cost of responsive design and maintenance is that multiple sets of design documents must be designed at the same time on one page. This experience tells us that, after determining a design draft and grid system, we will expand the design scheme under other devices. The workload is far lower than we thought.

　　

 

Step 6: Test, discuss, optimize, and submit for development

The final step is far from success. Test the page effect under the real device, and the project team will discuss and continuously optimize the page.

Before submitting for development, you need to clarify the Server Response (RESS) policy as soon as possible. The combination of the server and the client is the most reasonable solution to solve the responsive page performance problems. Which large images only need to output small size images on mobile devices? Under what devices do not need development and output? Which of the following can reduce the number of output data? Responsive collaboration with the development team can effectively control the page file size, avoiding the page being the culprit of burning user traffic on mobile devices.

After the test is passed, submit the page to go to the development stage. We have summarized a responsive Page Test checklist in terms of availability and accessibility. the test points include but are not limited to the following. Please add.

　　

 

Conclusion

The above process is summarized by our team after completing a full site response project. Whether you are interested in the response, are you performing a response, or are you about to begin a response, hope to help you.

I will host a workshop on "cross-PC and mobile interaction design" at # IxDC2013 China Interactive Design Experience week #, with a lot of content and practices on responsive design, we will also discuss the design of multi-device interaction.

Time: June 23-. We look forward to communicating with you in Hangzhou.