Mobile end of the era to how to reshape the Web design process?

With the development of the Times and technology, the process of Web page design is making great changes silently. The precise and specific design delivery list is no longer the only standard for web design, and the proportion of static page design in the overall design process is gradually reduced, as Stephen Hay said, we are not designing a simple page, but a whole system that contains many components.

What is changing is not just content and information, but also a rapid change in the way users use devices and content, which are closely related to web design, and there is no indication that the change will be slowed down. And our design as a carrier and the carrier of the present, should walk in front of them.

Before the web design process today seems to have been unable to cope with all this, the finishing delay. Agile development, teamwork, and adaptive adjustment are all at the forefront of the design process, and the boundaries between design and development are becoming blurred.

　　Mobile End Priority

Mobile End priority, this slogan has been shouted for several years, the real visionary web designer should be very clear that this sentence is far more than the slogan so simple. The priority of the mobile side will inevitably involve the design process, we should start with a small screen, first design a simple layout, and then add complexity to it, based on the larger screen to design.

With the use of mobile devices beyond the PC, the mobile end of the Web browsing has undoubtedly become the main user access to information, mobile-end priority design should naturally become the norm.

Unless your site is very special, or if you have compelling and special data to support your ideas, it makes sense to have the preferred design of the mobile side.

Compared to the small screen to reduce the complexity of the entire design, for the mobile end of the first fit and then enhance its complexity, it is easier. Think back to the previous process to design the Web page, we are always tired of responding to customer requirements, in the late to adjust the design and code. Unfinished pages and an Easy-to-use mobile end page that fills the pits.

The desktop side of the page is always done first, and on this basis to modify the mobile end page, it seems always a bit shoddy feeling.

So let's not put the "mobile end first" as a simple slogan! From now on the real sense for the mobile side of the small screen start to do the design!

　　Build rather than disassemble

Design is an accumulation of the process, each progress is in the previous step of the completion and victory on the basis of gradually established.

Design planning based on small screens is logical. I prefer to build brick, rather than do a bit more to dismantle.

The best analogy I can think of is "atomic design", which is designed to build things by progressively increasing complexity. In short, this idea is designed to do this:

Determine basic composition, size and color usage

Based on these basic settings, the design of small elements, such as form fields and labels, is determined.

Based on the above design, improve the design of large elements such as the complete contact form

Build these already built page elements into a page (such as Contact us page)

Repeat the above process

It is these obscure elements that build up your page, and it's the simple way to do the same design that seems so complicated before. As long as you use this design process, the possibilities it brings is limitless.

Compared to the beginning of the Fencing design page, the completion of these "brick" design easier to start and more convenient, the entire design process from the mobile end to the desktop side is also more perfect and smooth. Think about the things you and your customers need to focus on in this process, just keep adding to the details.

　　not limited to breakpoints

As we explore the design process of responsive web design, we spend a great deal of time balancing the media queries of breakpoints and the design of existing hardware devices. The main sticking point of this situation is the content of the website.

If possible, try to work closely with the content and marketing team in the later stages of design, and spend more time on the structure and division of the content to prevent the final design of the Web page from impacting on this problem.

Even so, from the beginning of design to the end of the design and even the entire page online, the content of the Web page may have been in the change. Headlines are getting longer, picture replacements, blocks being replaced, and so on.

"If possible, try to use real content to design." ”

A truly well-designed system should be able to be easily and freely available. So if you're really translating the word documents from marketing and content teams into a reliable page, it shouldn't be a headache.

Although some of the details of the processing do need to pay more attention, but my experience tells me, in fact, do not want to complicate, also don't think much. Most of the time, a compact and intelligent design style guide (style Guide) can make everything happen.

　　Testing and implementation

Prototyping is really good, but the problem with prototyping is that it's a "closed-doors" design that is not validated by real users.

Share the design with the user on the real device to get the best design feedback. Even if you just draw a wireframe, you can also test communication with the user on the real device.

The design of the test response should be a broad and diverse process. Find a smartphone, put your designs in, ask co-workers and friends who don't design, and let them see if the design works. Next, put on the ipad and desktop devices, step-by step.

　　A whole new world.

Looking at complex issues from a new perspective, everything we face seems to be new. Improve team members ' collaboration, fuzzy team boundaries can make the entire design process faster. Our design should constantly adapt to new requirements and new conditions, as our content, business and the world change faster.