Web site design responsive design flow for complex products



says 2013 will be the year of a response design outbreak. A Amoy design team last year, Amoy home revision, initially tried response style, recently in a Amoy "guest" project has more in-depth application, for the first time in the complex products to achieve the total response type. In the middle of the accumulation of some experience, but also stepped on a lot of pits, so there is this response design trilogy, this series of articles include concept articles, knowledge articles and flow papers.

responsive web pages, unlike traditional web pages, need to consider only one state, rather than delivering a set of design drafts, which pose new challenges to the collaboration patterns between the design, front-end, and development teams. In a complex product comprehensive response project, the interaction of each stage of the interactive and visual output what? How cooperation? The front when intervention? What are the things that the back-end development to do more reasonable experience? "Play off" after the first edition, we got some answers.

responsive design is called response design rather than response technique because it is a design first job. Need to design first clear response way, and then come out, can not put out a set of design draft, wait for the front to see the situation, turn it into response type web page. So the whole process begins at the interaction stage and is divided into 6 main steps. The roles of vision, front end, and development are intervened as early as possible.


Step1: information architecture to determine content policies.

according to the product positioning and user analysis, the interaction designer determines the site information architecture. There are many ways in which information architecture is presented, which is not the focus of this article and does not elaborate.

at this time you can determine how many pages the product has, how much content each page contains, what the content priority is. Many products contain N multiple pages, each page considers the responsive design, which can cause confusion and huge cost. So the next important thing is to analyze the page type and categorize the pages. Take the guest as an example, you can divide the more than 10 pages into three categories: list class, page, detail class page, operation class page.


Step2: mobile framework

first, why do you want to design the moving frame first in the second step?. Mobile priority is the concept of the emergence of the mobile Internet wave, which was first proposed by Luke Wroblewski. Mobile priority does not mean that mobility is more important. In a responsive design concept, devices are equally important. It refers to the experience of designing mobile phones at first, for three reasons:

phones allow design to be focused and force you to figure out what information is most important. Because the screen is small, each screen shows less content; touchscreen phones use finger actions instead of >

Leave a Reply

Your email address will not be published. Required fields are marked *