Discover innovative tools, design features, unique websites, and code structure curated by the GoWeb community.

View the resources by category or by monthly GeekOut! Compilations. Check out the latest compilation below.

Role of a designer in Responsive web design

Visit Role of a designer in Responsive web design


The mobile era is here to stay and the role of the designer in responsive web design workflow is even more important. As a designer, our role is to aid in the direction of the content, provide the vision for the design and present the content in the most effective manner at each potential screen size using a responsive site.

Content is King!

In the late 1990s and into the early 2000s, heavy use of images and animation became the focus of many websites. They would included 5 – 10 second introductory animations, which the visitor would have to sit through, often begrudgingly, each time they would visit a site. That trend continued until the web 2.0 era began, which introduced the use of huge nonsensical images that forced the user to scroll to get to the real content. During this period, many designers were often distracted by trends and many lost the purpose and passion that initially embodied the beginnings of our careers, that is, to present website content in an effective and creative way, and making our content relevant and appropriate to all users.? Thankfully with the responsive design process, we are returning to that original purpose by?ensuring any device accessing our website will have a consistent visual experience, and allowing content to be the focus.

The Process

Our first task when beginning the process of designing a responsive website is to work with the communicators (content providers) and determining the priority of the content displayed on the site. Our role is to aid in deciding what types of content are more important for our prospective audiences and the best possible methods to display that information. Using that knowledge, we develop priority of content and apply that to the smallest screen size. If the content is important on a mobile device, it is equally as important on the desktop site.? Once priority of content and determination about our user’s needs are established, we can then move into the visual process.

Designing the Experience

Beginning the design process by first developing a wireframe is essential. This allows the designer to map out a plan for the prioritized content and visual functionality with the developers. It also allows the designer to quickly place content, elements and functions without trying to perfect the finer details of design. Effective wireframes present at least two or three size considerations for content layout: mobile, desktop and a possible tablet size. Each of these considerations use the content priority structure as the basis for its layout. Once this is complete, you have provided the developers with a road map for developing the structure of the website.

We now need to add visual elements to the structure developed by the wireframe. This can be achieved by first designing a combination of mood boards, style tiles or compositions that have both the mobile and desktop considerations in mind. Creating mood boards or a style tile allows the designer to create elements, proposed function and determine a visual direction without creating a full composition (for an example, visit http://styletil.es). This process allows the designer to visualize how different aspects of the design will modify its appearance or function at mobile and desktop sizes. During this process, collaboration with the developer?on function is needed. The developer can provide insight on what is feasible for the proposed function of elements and adjustments can be made for mobile devices.

After the completion of the design, the transition to the development stage for the developers will be easier because we have included them throughout the entire design process.

Expanded Role

As a designer, our role has become integral and very important in the success of websites in responsive web design process. Our passion and love of content presentation and great visual experience now extends beyond the limits of designing Photoshop compositions. Rather, considerations of functionality and the flow of content for both desktop and mobile devices has now become an important use of our design knowledge in keeping content “king” on our sites!