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.

prototyping

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.

Conclusion


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:

Comments

Popular posts from this blog

30 Best Online Course Websites to Learn UI/UX (Updated)

I've been browsing Quora lately and this site is a terrific platform to communicate with each other. When encountering a problem, I go to the site to look for the answers or submit the question. Recently, I've been asked by many people about "What are the  best online courses  to learn UI/UX?”. So I started looking for answers, and I listed the following 30 online course sites to  learn UI/UX . Some of UI/UX design courses online are free, some are paid. Hope it is helpful and useful to you. Any resource you think it’s worth to be included, please feel free to leave a message below the comment area or simply drop me a line on  LinkedIn . 1.  Hackdesign Price: Free An easy to follow design course for people who do amazing things. The lessons are delivered to your email inbox each week, with links to articles, tutorials, and cheat sheets as well as task lists to get you thinking about good design and working towards improving your skills. User feedback ...

13 Must-Have UX Tools for Designers

What are the  UX design tools  you use to create  flowcharts ? What are the best tools for  wireframing ,  prototyping ,  user testing ,  interaction design  or  team collaboration ? There are an overwhelming number of  UX tools  out there, and finding the best can be mind-boggling. If you’re looking for  UX design tools and UX wireframe tools  to make your life easier, this post is written specifically for you. To help you create apps/websites with high productivity, we explore 13 amazing UX tools and best prototyping tools you should have for 2017. UX tools for mind mapping:  MindManager A mind map is a diagram used to visually organize information. It is a great way to brainstorm, make a plan, or turn ideas into the steps needed to make it real. MindManager is one of the best mind mapping software application developed by Mindjet. The digital mind maps can be used a “virtual whiteboard” for brainstor...

What are & How to Create Personas: Step-by-Step Guidelines of Everything

Before starting a product design, it is very important to know clearly the demands of users. Taking into account the needs of users can help determine how the product will fit the conventional requirements of users of different fields and ages and with unequal contexts, meanwhile to help the function design. Creating Personas is a good way to achieve this goal. Software development pioneer Alan Cooper had created the first Persona with his colleagues in the 80's. In this article, we'll talk about how to create Personas through 7 sections. 1. What is a Persona? The Persona definition is that one or several fictional characters that can represent the majority of the potential users of product with conventional user demands and they are created through a great amount of quantitative and qualitative research. Persona answers the question "Who do we design for?" It is a powerful tool based on research findings in helping product function creation by optimizing the U...