SlideShare a Scribd company logo
1 of 143
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
www.responsiveprocess.com
Responsive Process HOW Interactive
Responsive Process HOW Interactive
www.hellofisher.com
I believe that what I do saves the world (one web project at a time)
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Going to talk about the process.
Responsive Process HOW Interactive
Image source: palantir.net
Responsive Process HOW Interactive
Responsive Process HOW Interactive
http://youtu.be/ha-uagjJQ9k

I must have neurolized myself to keep the information from myself.
Web standards is not the old busted hotness. It is part of the new hotness of RWD.
Discovery
http://youtu.be/eunaclr-WgU

(getting to know the baseline story)
First things first: let’s meet up and get to know each other. From our early meetings and research, we'll
establish communication protocols, milestones and timelines, deliverables and scope, roles and
expectations.
First things first: let’s meet up and get to know each other. From our early meetings and research, we'll
establish communication protocols, milestones and timelines, deliverables and scope, roles and
expectations.
You want to know who you are working with... Project planner
Project analysis. We will work with you to help determine the requirements of the project, from a
technical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, and
interface design, and make sure we understand everything there is to know about your industry. Our
project analysis will guide us in understanding where your organization has been, what it is currently
doing, and where it wants to go in the future. This guides us in tailoring a solution that is effective and
sustainable. We will also spend time getting to really understand your brand by analyzing past and present
marketing materials, discussing future marketing strategies, and aligning them with your web project.
Project Analysis




We will work with you to help determine the requirements of the project, from a technical, creative, and
organizational perspective. We’ll analyze content, writing style, visual design, and interface design, and
make sure we understand everything there is to know about your industry. Our project analysis will guide
us in understanding where your organization has been, what it is currently doing, and where it wants to go
in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time
getting to really understand your brand by analyzing past and present marketing materials, discussing
future marketing strategies, and aligning them with your web project.
Personas, audience profiles
Using the knowledge gained from our discovery conversations, we will audit existing
content both quantitatively and qualitatively. What exists on your current site? And, more
importantly, is it doing what you need it to do? We'll create a site map for your project
and show where everything belongs. This process will inform what and how we
communicate, and establish the features your users need. Well-planned, well-structured
content will help us create both the interaction and visual design systems.
www.gathercontent.com

•   Quantitative audit
•   Qualitative audit
•   Card sort
•   High level site map
•   Gap analysis
•   User stories
Responsive Process HOW Interactive
Headed down the right track. All of the information found during the discovery phase will be complied into
a concise document that outlines the search, content, technical, and creative strategies. This document will
act as the project map, keeping all team members in line with a focused strategy.
Design. From sketching to in-browser designs to documentation and
everything in between.
http://youtu.be/8m9EVP8X7N8

http://www.youtube.com/watch?v=8m9EVP8X7N8
http://youtu.be/bVnfyradCPY

UX sketch or paper prototype! http://www.commoncraft.com/video/
zombies
We will work with you through an iterative process to create rough wireframes, or UX sketches, for key
views. This will help establish the design system, while communicating a sense of the functionality. This is
also where we decide on the break points for the responsive design.
We will work with you through an iterative process to create rough wireframes, or UX sketches, for key
views. This will help establish the design system, while communicating a sense of the functionality. This is
also where we decide on the break points for the responsive design.
Responsive Process HOW Interactive
http://appsketchbook.com/products/responsive-design-sketchbook
One of our main goals is to keep content independent from design or presentation. Your content should
never be dependent on a layout to work properly. So, along with wireframes, you will receive a set of page
tables for key content pages. Page tables identify each content area in priority order, and identify the most
important messages to communicate in each area.
One of our main goals is to keep content independent from design or presentation. Your content should
never be dependent on a layout to work properly. So, along with wireframes, you will receive a set of page
tables for key content pages. Page tables identify each content area in priority order, and identify the most
important messages to communicate in each area.
Responsive Process HOW Interactive
Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the
functionalities established by the page tables and feature list. Each and every view scenario will be
documented to visualize all the content and features we’ve planned. Along with that we’ll create rough
greybox HTML prototypes to demonstrate responsive interaction patterns.
http://responsiveprocess.com/yp2012/wireframes/
http://twitter.github.com/bootstrap
http://foundation.zurb.com/
Responsive Process HOW Interactive
BADASS ICONS
With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour
palettes, and typography that give each site its unique look and feel. Through an iterative process between
our team and yours, we’ll make all the big decisions about typographic hierarchy, vertical rhythm, and
interface details. We can create static visual mockups, browser-based prototypes, or both.
Get it in the browser!
http://styletil.es
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Next, we’ll create a styleguide that will document the design system so that they can be properly
implemented. All the details from the grid to hover/touch states to typography styles to content messaging
will be detailed. This guide will demonstrate the design thinking and personality of the system. Depending
on the complexity of the site, this could be created in an interface harmony canvas.
Text




                         http://nathanborror.com/posts/2009/oct/25/interface-harmony/
An interface harmony canvas
Development
http://www.sonypictures.com/previews/movies/residentevilretribution/clips/4301/


The developers Zombie movie
Responsive Process HOW Interactive
Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested,
HTML pages ready for testing. We’ll make sure all content is governed by CSS and meets W3C standards.
We’ll use JavaScript for interactive elements, rather than Flash or Silverlight. We’ll also help you adhere to
best practices for online readability, and include a print CSS for readers that want to print out your
content.
Responsive Process HOW Interactive
At this stage, the technical architecture will be built out on a system like Open Text Web Site Management
or Drupal 7, depending on your organization’s needs. We’ll build out all of the site’s modular elements and
e-commerce components, and set up a workflow process that will help you maintain your content over the
long term. This process goes hand-in-hand with the CMS Template Implementation, which will integrate
the HTML templates into the design or theme layer. By the time we’re done, everything will be looking
good and working great!
Responsive Process HOW Interactive
Here's where we test and demonstrate how page templates will render in major web browsers and mobile
devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be
appropriate for each device, but may be slightly different due to device specs and experience. It’s not
about making everything look the same, it’s about creating a coherent experience across all devices.
Here's where we test and demonstrate how page templates will render in major web browsers and mobile
devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be
appropriate for each device, but may be slightly different due to device specs and experience. It’s not
about making everything look the same, it’s about creating a coherent experience across all devices.
http://en.wikipedia.org/wiki/Comparison_of_Android_devices

http://en.wikipedia.org/wiki/Comparison_of_Android_devices
Oh noes!
Responsive Process HOW Interactive
www.adobe.com/Shadow

Testing devices through adobe shadow!
Responsive Process HOW Interactive
Deployment
Responsive Process HOW Interactive
At Yellow Pencil we love to provide support and training for content authors during content migration. We
believe in helping our clients create and maintain useful, usable content. Depending on your organization’s
needs, and our audit of your current website, we’ll help you define the scope of the content migration
phase. As we all know, a website without content is a black hole of sadness. Content #FTW!
At Yellow Pencil we love to provide support and training for content authors during content migration. We
believe in helping our clients create and maintain useful, usable content. Depending on your organization’s
needs, and our audit of your current website, we’ll help you define the scope of the content migration
phase. As we all know, a website without content is a black hole of sadness. Content #FTW!
User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements
we defined early in the project. It's like moving into a new house – you need time to discover how
everything works and get comfortable with living there. You’ll need time to come to terms with how your
content fits into the design and workflow, and make any adjustments and edits you need.
http://youtu.be/yfDUv3ZjH2k

Sometimes things don’t turn out how you think they will. http://youtu.be/
yfDUv3ZjH2k (that’s not exactly like 28 Days Later)
Wasn’t this supposed to look like a normal zombie movie...
Documentation & Training
Document the patterns and systems we’ve established!
Launch Plan & Release
Where is it being hosted? Level of support? Who will know about this? How will you
communicate with current users?
We need to get this digital thing into the real world.
Start of Operational Plan
This is where the web project really starts its life. Celebrate the birth and plan to celebrate
every milestone as it lives.
Responsive Process HOW Interactive
Move from the inside out. Extrinsic vs intrinsic motivation.
Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0
thing?
People don’t believe in what you do, they believe in why you do it.

These were just some examples. What will your aha! moment be?
Responsive Process HOW Interactive
vimeo.com/29180214
vimeo.com/15266890
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
vimeo.com/15266890
What = undead
What = surrounded and losing hope
What = alone
Responsive Process HOW Interactive
Responsive Process HOW Interactive
How = taking care of business
How = killing the brain to save the living
Responsive Process HOW Interactive
Why = remaining human in the face of it all.
We focus on features and devices but that’s not right.
The web isn’t a bunch of machines. It is a bunch of humans.
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
We need to remember that each connection on the web is a connection with another human.
We are trying to become wholehearted
This is why I love RWD. It is about helping people connect on the web.
Responsive Process HOW Interactive
Our why = helping everyone be able to connect with and use the web
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Responsive Process HOW Interactive
Focus on the why,
well structured content,
and interactions that matter
So what does it mean to be responsive? Something simple?
It is about good content. It means rethinking content creation.
Moving from fragmentation to unification!
create once publish everywhere
We want our data to tell stories and we can’t predict what future devices or interactions will
be.
Responsive Process HOW Interactive
The first website was responsive! ;)
A responsive process is a responsible process
www.futurefriend.ly
Start with the WHY and everything else will follow.
www.hellofisher.com
www.yellowpencil.com
http://youtu.be/4V90AmXnguw
Thriller!

More Related Content

Similar to Responsive Process HOW Interactive

Website design workflow
Website design workflowWebsite design workflow
Website design workflowAhmed Bolica
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design ProcessSteve Fisher
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspectiveeginni
 
Modern ux-workflow-presentation
Modern ux-workflow-presentationModern ux-workflow-presentation
Modern ux-workflow-presentationBrian Akpa
 
Information architecture for websites and intranets
Information architecture for websites and intranetsInformation architecture for websites and intranets
Information architecture for websites and intranetsContent Formula
 
Propeller UI/UX Process
Propeller UI/UX ProcessPropeller UI/UX Process
Propeller UI/UX ProcessBlair Stewart
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - UpdateJohn Yesko
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Processcreed
 
A project guide to ux design vm
A project guide to ux design vmA project guide to ux design vm
A project guide to ux design vmValentina Marzola
 
creative web developer.docx
creative web developer.docxcreative web developer.docx
creative web developer.docxWebtoniq
 
Rocket jones 4 stage process
Rocket jones 4 stage processRocket jones 4 stage process
Rocket jones 4 stage processZachary Ostin
 
Short Essay On Blog
Short Essay On BlogShort Essay On Blog
Short Essay On BlogLucy Nader
 
WebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To WireframingLewis Lin 🦊
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersSarah Dutkiewicz
 
CMS Refresher: Content is King
CMS Refresher: Content is KingCMS Refresher: Content is King
CMS Refresher: Content is KingCassandra Ketrick
 
7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdfpreeti katiyar
 

Similar to Responsive Process HOW Interactive (20)

Website design workflow
Website design workflowWebsite design workflow
Website design workflow
 
Responsive Web Design Process
Responsive Web Design ProcessResponsive Web Design Process
Responsive Web Design Process
 
Web Design by Client Perspective
 Web Design by Client Perspective Web Design by Client Perspective
Web Design by Client Perspective
 
Modern ux-workflow-presentation
Modern ux-workflow-presentationModern ux-workflow-presentation
Modern ux-workflow-presentation
 
Net Magazine Feb 2010
Net Magazine Feb 2010Net Magazine Feb 2010
Net Magazine Feb 2010
 
Information architecture for websites and intranets
Information architecture for websites and intranetsInformation architecture for websites and intranets
Information architecture for websites and intranets
 
Propeller UI/UX Process
Propeller UI/UX ProcessPropeller UI/UX Process
Propeller UI/UX Process
 
list script and flowchart
list script and flowchartlist script and flowchart
list script and flowchart
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
A project guide to ux design vm
A project guide to ux design vmA project guide to ux design vm
A project guide to ux design vm
 
creative web developer.docx
creative web developer.docxcreative web developer.docx
creative web developer.docx
 
Rocket jones 4 stage process
Rocket jones 4 stage processRocket jones 4 stage process
Rocket jones 4 stage process
 
Short Essay On Blog
Short Essay On BlogShort Essay On Blog
Short Essay On Blog
 
WebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the WebWebVisions - Explore the Future of the Web
WebVisions - Explore the Future of the Web
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
World Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for DevelopersWorld Usability Day 2014 - UX Toolbelt for Developers
World Usability Day 2014 - UX Toolbelt for Developers
 
CMS Refresher: Content is King
CMS Refresher: Content is KingCMS Refresher: Content is King
CMS Refresher: Content is King
 
7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf
 

More from Steve Fisher

Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning Talk
Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning TalkConflict is the Key to Great UX - Web Design Day Pittsburgh Lightning Talk
Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning TalkSteve Fisher
 
Conflict is the key to great experiences
Conflict is the key to great experiencesConflict is the key to great experiences
Conflict is the key to great experiencesSteve Fisher
 
Stories of Discovery: A responsive journey
Stories of Discovery: A responsive journeyStories of Discovery: A responsive journey
Stories of Discovery: A responsive journeySteve Fisher
 
Responsive Discovery: The underpants of a great web project
Responsive Discovery: The underpants of a great web project Responsive Discovery: The underpants of a great web project
Responsive Discovery: The underpants of a great web project Steve Fisher
 
Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012Steve Fisher
 
Responsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidcResponsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidcSteve Fisher
 
Responsive Process - London 2012
Responsive Process - London 2012Responsive Process - London 2012
Responsive Process - London 2012Steve Fisher
 
Tooling for Change
Tooling for ChangeTooling for Change
Tooling for ChangeSteve Fisher
 
The Future of Mobile UX
The Future of Mobile UXThe Future of Mobile UX
The Future of Mobile UXSteve Fisher
 
Designing The Experience
Designing The ExperienceDesigning The Experience
Designing The ExperienceSteve Fisher
 
Turning That UX Frown Upside Down
Turning That UX Frown Upside DownTurning That UX Frown Upside Down
Turning That UX Frown Upside DownSteve Fisher
 

More from Steve Fisher (11)

Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning Talk
Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning TalkConflict is the Key to Great UX - Web Design Day Pittsburgh Lightning Talk
Conflict is the Key to Great UX - Web Design Day Pittsburgh Lightning Talk
 
Conflict is the key to great experiences
Conflict is the key to great experiencesConflict is the key to great experiences
Conflict is the key to great experiences
 
Stories of Discovery: A responsive journey
Stories of Discovery: A responsive journeyStories of Discovery: A responsive journey
Stories of Discovery: A responsive journey
 
Responsive Discovery: The underpants of a great web project
Responsive Discovery: The underpants of a great web project Responsive Discovery: The underpants of a great web project
Responsive Discovery: The underpants of a great web project
 
Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012Responsive Process Joomla World Conference 2012
Responsive Process Joomla World Conference 2012
 
Responsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidcResponsive Web Design Process #HOWidc
Responsive Web Design Process #HOWidc
 
Responsive Process - London 2012
Responsive Process - London 2012Responsive Process - London 2012
Responsive Process - London 2012
 
Tooling for Change
Tooling for ChangeTooling for Change
Tooling for Change
 
The Future of Mobile UX
The Future of Mobile UXThe Future of Mobile UX
The Future of Mobile UX
 
Designing The Experience
Designing The ExperienceDesigning The Experience
Designing The Experience
 
Turning That UX Frown Upside Down
Turning That UX Frown Upside DownTurning That UX Frown Upside Down
Turning That UX Frown Upside Down
 

Recently uploaded

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 

Recently uploaded (19)

Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 

Responsive Process HOW Interactive

  • 8. I believe that what I do saves the world (one web project at a time)
  • 15. Going to talk about the process.
  • 20. http://youtu.be/ha-uagjJQ9k I must have neurolized myself to keep the information from myself.
  • 21. Web standards is not the old busted hotness. It is part of the new hotness of RWD.
  • 24. First things first: let’s meet up and get to know each other. From our early meetings and research, we'll establish communication protocols, milestones and timelines, deliverables and scope, roles and expectations.
  • 25. First things first: let’s meet up and get to know each other. From our early meetings and research, we'll establish communication protocols, milestones and timelines, deliverables and scope, roles and expectations.
  • 26. You want to know who you are working with... Project planner
  • 27. Project analysis. We will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about your industry. Our project analysis will guide us in understanding where your organization has been, what it is currently doing, and where it wants to go in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time getting to really understand your brand by analyzing past and present marketing materials, discussing future marketing strategies, and aligning them with your web project.
  • 28. Project Analysis We will work with you to help determine the requirements of the project, from a technical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, and interface design, and make sure we understand everything there is to know about your industry. Our project analysis will guide us in understanding where your organization has been, what it is currently doing, and where it wants to go in the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend time getting to really understand your brand by analyzing past and present marketing materials, discussing future marketing strategies, and aligning them with your web project.
  • 30. Using the knowledge gained from our discovery conversations, we will audit existing content both quantitatively and qualitatively. What exists on your current site? And, more importantly, is it doing what you need it to do? We'll create a site map for your project and show where everything belongs. This process will inform what and how we communicate, and establish the features your users need. Well-planned, well-structured content will help us create both the interaction and visual design systems.
  • 31. www.gathercontent.com • Quantitative audit • Qualitative audit • Card sort • High level site map • Gap analysis • User stories
  • 33. Headed down the right track. All of the information found during the discovery phase will be complied into a concise document that outlines the search, content, technical, and creative strategies. This document will act as the project map, keeping all team members in line with a focused strategy.
  • 34. Design. From sketching to in-browser designs to documentation and everything in between.
  • 36. http://youtu.be/bVnfyradCPY UX sketch or paper prototype! http://www.commoncraft.com/video/ zombies
  • 37. We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish the design system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsive design.
  • 38. We will work with you through an iterative process to create rough wireframes, or UX sketches, for key views. This will help establish the design system, while communicating a sense of the functionality. This is also where we decide on the break points for the responsive design.
  • 41. One of our main goals is to keep content independent from design or presentation. Your content should never be dependent on a layout to work properly. So, along with wireframes, you will receive a set of page tables for key content pages. Page tables identify each content area in priority order, and identify the most important messages to communicate in each area.
  • 42. One of our main goals is to keep content independent from design or presentation. Your content should never be dependent on a layout to work properly. So, along with wireframes, you will receive a set of page tables for key content pages. Page tables identify each content area in priority order, and identify the most important messages to communicate in each area.
  • 44. Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with the functionalities established by the page tables and feature list. Each and every view scenario will be documented to visualize all the content and features we’ve planned. Along with that we’ll create rough greybox HTML prototypes to demonstrate responsive interaction patterns.
  • 50. With functionality fully documented in the wireframes, we’ll layer in the branding elements, colour palettes, and typography that give each site its unique look and feel. Through an iterative process between our team and yours, we’ll make all the big decisions about typographic hierarchy, vertical rhythm, and interface details. We can create static visual mockups, browser-based prototypes, or both.
  • 51. Get it in the browser!
  • 56. Next, we’ll create a styleguide that will document the design system so that they can be properly implemented. All the details from the grid to hover/touch states to typography styles to content messaging will be detailed. This guide will demonstrate the design thinking and personality of the system. Depending on the complexity of the site, this could be created in an interface harmony canvas.
  • 57. Text http://nathanborror.com/posts/2009/oct/25/interface-harmony/ An interface harmony canvas
  • 61. Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested, HTML pages ready for testing. We’ll make sure all content is governed by CSS and meets W3C standards. We’ll use JavaScript for interactive elements, rather than Flash or Silverlight. We’ll also help you adhere to best practices for online readability, and include a print CSS for readers that want to print out your content.
  • 63. At this stage, the technical architecture will be built out on a system like Open Text Web Site Management or Drupal 7, depending on your organization’s needs. We’ll build out all of the site’s modular elements and e-commerce components, and set up a workflow process that will help you maintain your content over the long term. This process goes hand-in-hand with the CMS Template Implementation, which will integrate the HTML templates into the design or theme layer. By the time we’re done, everything will be looking good and working great!
  • 65. Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.
  • 66. Here's where we test and demonstrate how page templates will render in major web browsers and mobile devices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will be appropriate for each device, but may be slightly different due to device specs and experience. It’s not about making everything look the same, it’s about creating a coherent experience across all devices.
  • 74. At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helping our clients create and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help you define the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!
  • 75. At Yellow Pencil we love to provide support and training for content authors during content migration. We believe in helping our clients create and maintain useful, usable content. Depending on your organization’s needs, and our audit of your current website, we’ll help you define the scope of the content migration phase. As we all know, a website without content is a black hole of sadness. Content #FTW!
  • 76. User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirements we defined early in the project. It's like moving into a new house – you need time to discover how everything works and get comfortable with living there. You’ll need time to come to terms with how your content fits into the design and workflow, and make any adjustments and edits you need.
  • 77. http://youtu.be/yfDUv3ZjH2k Sometimes things don’t turn out how you think they will. http://youtu.be/ yfDUv3ZjH2k (that’s not exactly like 28 Days Later)
  • 78. Wasn’t this supposed to look like a normal zombie movie...
  • 80. Document the patterns and systems we’ve established!
  • 81. Launch Plan & Release
  • 82. Where is it being hosted? Level of support? Who will know about this? How will you communicate with current users?
  • 83. We need to get this digital thing into the real world.
  • 85. This is where the web project really starts its life. Celebrate the birth and plan to celebrate every milestone as it lives.
  • 87. Move from the inside out. Extrinsic vs intrinsic motivation.
  • 88. Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0 thing? People don’t believe in what you do, they believe in why you do it. These were just some examples. What will your aha! moment be?
  • 104. What = surrounded and losing hope
  • 108. How = taking care of business
  • 109. How = killing the brain to save the living
  • 111. Why = remaining human in the face of it all.
  • 112. We focus on features and devices but that’s not right.
  • 113. The web isn’t a bunch of machines. It is a bunch of humans.
  • 118. We need to remember that each connection on the web is a connection with another human. We are trying to become wholehearted
  • 119. This is why I love RWD. It is about helping people connect on the web.
  • 121. Our why = helping everyone be able to connect with and use the web
  • 132. Focus on the why, well structured content, and interactions that matter
  • 133. So what does it mean to be responsive? Something simple?
  • 134. It is about good content. It means rethinking content creation. Moving from fragmentation to unification!
  • 135. create once publish everywhere
  • 136. We want our data to tell stories and we can’t predict what future devices or interactions will be.
  • 138. The first website was responsive! ;)
  • 139. A responsive process is a responsible process
  • 141. Start with the WHY and everything else will follow.