Skip to main content

6 Key Design Steps in Responsive Web Design Workflow in 2017

95 percent of the web design workflows process are as follows: First, planning; second, wireframing and prototyping; third, designing and developing, where the front and back-end developers show their skills; finally, content filling.

What has changed?

design changing

Unfortunately, this web design workflow doesn’t work anymore. Why? Because there are more and more new devices. There are no longer the standard sizes of desktop, tablet and smartphone; Android alone has over 24,000 devices. A website should be available on a wide range of devices, from the screens of Tesla cars, which can hardly be afforded by the majority at the moment, to smartwatches or fitness trackers. 

Content first: modern web design workflow

It makes no sense to show or hide certain contents according to breakpoints, simply because the terminal is not available. What is now being talked about: content first, because it determines the concept and design in the end. In best responsive web design, it should be clarified in advance, what content is existing and what should be integrated later. A meaningful sequence of responsive design workflow should look like this one:

1. Content Setup

The first step is to create the existing content, similar to a wireframe of a website. However, it does not mean that you have to make a final wireframe. How and where should contents, such as images, PDFs and texts, be put?

2. Content Creation

Now comes the most important and decisive point of responsive web design workflow. The core goal is to make users "learn more about our super-premium products". It’s worth to make a precise content plan because it can prevent the later reworking of all files and save costs in the end.

design phase

3. Content Testing

Then comes content testing. Does the content work on all devices or does it need to be adapted and revised? It is where most of the web project design workflow is done. A relaunch without content reworking works rarely well. There has been a lot of changes in recent years, including reading behaviors and habits.

4. Fine-tuning

Now "fine-tuning" of the content follows, which can be finished on a mood board, for example. How should the content work? Should any image values be transferred? Whether corporate identity should be considered?

5. Prototyping

Only now does prototyping go on. Not every designer is working in the frontend, and close collaboration between designers and front-end developers is increasingly important in the age of agile projects. Fast prototyping tools can avoid bad surprises.


6. Device Testing

There are some good simulators that show testing on different browsers or devices, but if you want to ensure no risk at all, you should test it directly on the devices. It can figure out, for example, direct "device bugs". The testing on the Tesla will be still unavailable for some time.


It is clear that good content is expensive, but they pay off. It is essential to give the user the information they want. Why is good content expensive? It has to be researched, sorted, written, corrected, planned, stored and managed before it can be published. However, the prerequisite is that the web design workflow can not be done during the process of website development, but should be completed in the first place.

Read more:


Popular posts from this blog

Professional UX Design Approaches for Building The Best Website

Building a website through UX design approaches is very much like painting or sculptural art, they all take patience, foresight, aesthetics ability, creativity and perception of details. Generally, the website you design represents your company, it needs to be stunning and breathtaking. If you look deeper into the aspects of website building, you can find some core UX features that outstanding websites share. By analyzing the top design trends, we may accurately trace out four major professional UX design methods for website building. 1. Streamlined Navigation By saying “Streamlined Navigation”, I do not only refer to the navigation bar but all others navigations on a larger scale. Not to mention the great ones, a standard website also needs to be of high usability. Besides that, the speed and accuracy of loading are of decisive significance as well. In professional UX principles, the typography should be carefully organized to ensure the best user experience. Links should be highly …

What? You Are Still Doing High-Fidelity Prototype Slowly?

Have you ever spent half a month designing a high-fidelity prototype, but it was denied within a few minutes? So much time and energy have been spent but in vain. I have met similar things so many times. However, such tragedy can be totally averted: the rapid low-fidelity prototype is a wise choice in prototype design.
1. What is a high-fidelity prototype and a low-fidelity prototype? Low-fidelity prototype: it only focuses on functions, structures and processes; it only provides the most simple frameworks and elements; it generally does not provide color, butexpresses itself in grayscale.

High-fidelity prototype: it provides more visual details; it is almost equivalent to a UI effect picture, and only needs to replace the actual data and materials in the development process.

2. Why make a low-fidelity prototype?
In product development, the goal of a prototype is to express its ideas, functions and content, in order to get feedback and improve the product. The most important challeng…

The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers in 2017

Prototyping/wireframing tools are the best communication method between interaction designers, project manager, and website developers. It’s a key step of web or mobile app development process. While in principle, the design of prototypes must be a product of interaction designers, and the user-centered concept shall run through the whole product design progress. The professional perspective and rich user experience of interaction designer will directly influence the usability of the product.
Desktop-based Prototyping Tools

1. Axure RP (Mac & Win) | ($495/user) Axure RP is a desktop application that allows designers to create, test, and share interactive prototypes. Been called as the most comprehensive (in terms of functionality) prototyping tools, it’s an ideal desktop software for both static, low-fidelity prototypes and more sophisticated, interactive prototypes. As an extremely professional UX tool, Axure requires a steep learning curve.
2. Mockplus (Mac & Win) | ($129/ye…