RESPONSIVE

DESIGN PROCESS
PowerPoint Template
This is a sample text.
Insert your desired text here.
 RESEARCH DEFINE ESTABLISH ESTABLISH
CONTENT PRIORITY STYLE

Determine site goals, evaluate Create an HTML-based style

Talk with client and gather technical requirements, perform Establish content priority for the prototype that establishes a
expectation about the project content audit. designer using real content visual guide for the site.

FINALIZE DESIGN CODE RESPONSIVE CMS INTEGRATION LAUNCH

TEMPLATES

Create design assets in HTML Integrate templates into the

Code responsive templates Release the responsive
and CSS based on needs and content management
starting with mobile first. creation to the world!
style outline in previous steps. system of choice.
 RESEARCH

Talk with client and gather

expectation about the project
 DEFINE

Determine site goals, evaluate

technical requirements, perform
content audit.
 ESTABLISH
CONTENT PRIORITY

Establish content priority for the

designer using real content via a:
PRIORITY GUIDE
For complex sites with many unique templates, create
static, mobile- with priority guides, similar to wireframes

- OR -
CONTENT PRIORITY PROTOTYPE
For simpler site, create a responsive,
HTML-based priority prototype.
 ESTABLISH
STYLE

Create an HTML-based style

prototype that establishes a visual
guide for the site.

A TYPICAL STYLE PROTOTYPE

CAN INCLUDE:
Typography Colors Swatches Button Styles/States
Header, Navigation, Photography
 FINALIZE
DESIGN

Create design assets in HTML

and CSS based on needs and
style outline in previous steps.
This step is often a cyclical
collaboration between designer
and developer.
 CODE RESPONSIVE
TEMPLATES

Code responsive templates starting

with mobile first. Use the priority
guide or prototype as a roadmap for
how to prioritize mobile content.
Incorporate design assets and
establish how the design should
respond as browser width increases.
 CMS
INTEGRATION

Integrate templates into the

content management
system of choice.
 LAUNCH

Release the responsive creation

to the world!