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 ...

5 Questions Your Mobile App Homepage Design Needs to Answer

If you compare mobile app to a human, the homepage would be the face. The homepage is the area that people notice at the first glance and decide their basic judgments about your mobile app. The mobile app homepage design is the door to a successful product, and a good start is half the battle. Since 26 percent of mobile apps are used just once, the first impression is essential to tell your customers that you are worthwhile being used for a long time. If you can’t please the eyes of critical users on the homepage and provide a good user experience, your mobile app has already failed. Therefore, if you want to create a  good user experience design  on the app homepage and draw the users’ attention, you need to answer these questions: Question 1: Who are you? Users firstly see the interface, and then the content. At this stage, a good design, which is in line with the brand and has a rich content, will give your users a deep impression. Every mobile homepage needs a...

A Beginner's Guide - What Is Wireframe in Software Development?

What is Wireframe in Software Development?  In fact, wireframe was originally used as a term standing for a manikin made of wire, with help of which garments can be designed according to given shapes and sizes. It’s similar with today’s software and web design: A wireframe is a basic framework in software development and web design. In history, designing wireframe doesn’t play important role in design elements. At the early stage, the aim is to determine the structure of a planned software and to test its functionality. This step has particular significance in the design process. The term mockup is often used as a synonym of the wireframe. Actually, however, this expression means an optically refined model, which already shows a version of desired design. Additionally, interactive wireframes can simulate dynamic interface. The logical structure, links, and expected user behavior can be checked and optimized. This can serve both the internal design process within an agency ...