www.responsiveprocess.com
www.hellofisher.com
I believe that what I do saves the world (one web project at a time)
Going to talk about the process.
Image source: palantir.net
http://youtu.be/ha-uagjJQ9kI 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, wellestablish communic...
First things first: let’s meet up and get to know each other. From our early meetings and research, wellestablish communic...
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 atechnical, creative, and ...
Project AnalysisWe will work with you to help determine the requirements of the project, from a technical, creative, andor...
Personas, audience profiles
Using the knowledge gained from our discovery conversations, we will audit existingcontent both quantitatively and qualita...
www.gathercontent.com•   Quantitative audit•   Qualitative audit•   Card sort•   High level site map•   Gap analysis•   Us...
Headed down the right track. All of the information found during the discovery phase will be complied intoa concise docume...
Design. From sketching to in-browser designs to documentation andeverything in between.
http://youtu.be/8m9EVP8X7N8http://www.youtube.com/watch?v=8m9EVP8X7N8
http://youtu.be/bVnfyradCPYUX 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 keyviews. This will hel...
We will work with you through an iterative process to create rough wireframes, or UX sketches, for keyviews. This will hel...
http://appsketchbook.com/products/responsive-design-sketchbook
One of our main goals is to keep content independent from design or presentation. Your content shouldnever be dependent on...
One of our main goals is to keep content independent from design or presentation. Your content shouldnever be dependent on...
Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with thefunctionalities establi...
http://responsiveprocess.com/yp2012/wireframes/
http://twitter.github.com/bootstrap
http://foundation.zurb.com/
BADASS ICONS
With functionality fully documented in the wireframes, we’ll layer in the branding elements, colourpalettes, and typograph...
Get it in the browser!
http://styletil.es
Next, we’ll create a styleguide that will document the design system so that they can be properlyimplemented. All the deta...
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
Now it’s time to get down to business and build HTML/CSS/JavaScript themes: functional, browser-tested,HTML pages ready fo...
At this stage, the technical architecture will be built out on a system like Open Text Web Site Managementor Drupal 7, dep...
Heres where we test and demonstrate how page templates will render in major web browsers and mobiledevices (i.e. iPad, iPh...
Heres where we test and demonstrate how page templates will render in major web browsers and mobiledevices (i.e. iPad, iPh...
http://en.wikipedia.org/wiki/Comparison_of_Android_deviceshttp://en.wikipedia.org/wiki/Comparison_of_Android_devices
Oh noes!
www.adobe.com/ShadowTesting devices through adobe shadow!
Deployment
At Yellow Pencil we love to provide support and training for content authors during content migration. Webelieve in helpin...
At Yellow Pencil we love to provide support and training for content authors during content migration. Webelieve in helpin...
User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirementswe defined early in...
http://youtu.be/yfDUv3ZjH2kSometimes things don’t turn out how you think they will. http://youtu.be/yfDUv3ZjH2k (that’s no...
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 youcommunicate 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 celebrateevery milestone as it lives.
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.0thing?People don’t belie...
vimeo.com/29180214
vimeo.com/15266890
vimeo.com/15266890
What = undead
What = surrounded and losing hope
What = alone
How = taking care of business
How = killing the brain to save the living
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.
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.
Our why = helping everyone be able to connect with and use the web
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 willbe.
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.comwww.yellowpencil.com
http://youtu.be/4V90AmXnguwThriller!
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
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
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
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
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
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
Upcoming SlideShare
Loading in …5
×

Responsive Process HOW Interactive

820
-1

Published on

The web is not a fixed width. So if the medium is fluid, should the process be fixed? Open source evangelist Steve Fisher prefers designing within the browser, especially when responsive design is a requirement since Fireworks and Photoshop are not flexible enough to demonstrate media queries, button and menu states, HTML5 and JavaScript behaviors, dynamic resizing of elements and navigation flow.

Learn how to develop a fluid process to match the fluidity of interactive design as Steve shows you why a responsive process is a responsible process. He’ll explore some of his recent work helping clients transform their processes to fit a responsive workflow and share some of the tips, techniques and processes he’s developed. One web to rule them all!

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
820
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Process HOW Interactive

  1. 1. www.responsiveprocess.com
  2. 2. www.hellofisher.com
  3. 3. I believe that what I do saves the world (one web project at a time)
  4. 4. Going to talk about the process.
  5. 5. Image source: palantir.net
  6. 6. http://youtu.be/ha-uagjJQ9kI must have neurolized myself to keep the information from myself.
  7. 7. Web standards is not the old busted hotness. It is part of the new hotness of RWD.
  8. 8. Discovery
  9. 9. http://youtu.be/eunaclr-WgU(getting to know the baseline story)
  10. 10. First things first: let’s meet up and get to know each other. From our early meetings and research, wellestablish communication protocols, milestones and timelines, deliverables and scope, roles andexpectations.
  11. 11. First things first: let’s meet up and get to know each other. From our early meetings and research, wellestablish communication protocols, milestones and timelines, deliverables and scope, roles andexpectations.
  12. 12. You want to know who you are working with... Project planner
  13. 13. Project analysis. We will work with you to help determine the requirements of the project, from atechnical, creative, and organizational perspective. We’ll analyze content, writing style, visual design, andinterface design, and make sure we understand everything there is to know about your industry. Ourproject analysis will guide us in understanding where your organization has been, what it is currentlydoing, and where it wants to go in the future. This guides us in tailoring a solution that is effective andsustainable. We will also spend time getting to really understand your brand by analyzing past and presentmarketing materials, discussing future marketing strategies, and aligning them with your web project.
  14. 14. Project AnalysisWe will work with you to help determine the requirements of the project, from a technical, creative, andorganizational perspective. We’ll analyze content, writing style, visual design, and interface design, andmake sure we understand everything there is to know about your industry. Our project analysis will guideus in understanding where your organization has been, what it is currently doing, and where it wants to goin the future. This guides us in tailoring a solution that is effective and sustainable. We will also spend timegetting to really understand your brand by analyzing past and present marketing materials, discussingfuture marketing strategies, and aligning them with your web project.
  15. 15. Personas, audience profiles
  16. 16. Using the knowledge gained from our discovery conversations, we will audit existingcontent both quantitatively and qualitatively. What exists on your current site? And, moreimportantly, is it doing what you need it to do? Well create a site map for your projectand show where everything belongs. This process will inform what and how wecommunicate, and establish the features your users need. Well-planned, well-structuredcontent will help us create both the interaction and visual design systems.
  17. 17. www.gathercontent.com• Quantitative audit• Qualitative audit• Card sort• High level site map• Gap analysis• User stories
  18. 18. Headed down the right track. All of the information found during the discovery phase will be complied intoa concise document that outlines the search, content, technical, and creative strategies. This document willact as the project map, keeping all team members in line with a focused strategy.
  19. 19. Design. From sketching to in-browser designs to documentation andeverything in between.
  20. 20. http://youtu.be/8m9EVP8X7N8http://www.youtube.com/watch?v=8m9EVP8X7N8
  21. 21. http://youtu.be/bVnfyradCPYUX sketch or paper prototype! http://www.commoncraft.com/video/zombies
  22. 22. We will work with you through an iterative process to create rough wireframes, or UX sketches, for keyviews. This will help establish the design system, while communicating a sense of the functionality. This isalso where we decide on the break points for the responsive design.
  23. 23. We will work with you through an iterative process to create rough wireframes, or UX sketches, for keyviews. This will help establish the design system, while communicating a sense of the functionality. This isalso where we decide on the break points for the responsive design.
  24. 24. http://appsketchbook.com/products/responsive-design-sketchbook
  25. 25. One of our main goals is to keep content independent from design or presentation. Your content shouldnever be dependent on a layout to work properly. So, along with wireframes, you will receive a set of pagetables for key content pages. Page tables identify each content area in priority order, and identify the mostimportant messages to communicate in each area.
  26. 26. One of our main goals is to keep content independent from design or presentation. Your content shouldnever be dependent on a layout to work properly. So, along with wireframes, you will receive a set of pagetables for key content pages. Page tables identify each content area in priority order, and identify the mostimportant messages to communicate in each area.
  27. 27. Once we all agree on where we’re headed, we’ll wireframe and document the remaining views, with thefunctionalities established by the page tables and feature list. Each and every view scenario will bedocumented to visualize all the content and features we’ve planned. Along with that we’ll create roughgreybox HTML prototypes to demonstrate responsive interaction patterns.
  28. 28. http://responsiveprocess.com/yp2012/wireframes/
  29. 29. http://twitter.github.com/bootstrap
  30. 30. http://foundation.zurb.com/
  31. 31. BADASS ICONS
  32. 32. With functionality fully documented in the wireframes, we’ll layer in the branding elements, colourpalettes, and typography that give each site its unique look and feel. Through an iterative process betweenour team and yours, we’ll make all the big decisions about typographic hierarchy, vertical rhythm, andinterface details. We can create static visual mockups, browser-based prototypes, or both.
  33. 33. Get it in the browser!
  34. 34. http://styletil.es
  35. 35. Next, we’ll create a styleguide that will document the design system so that they can be properlyimplemented. All the details from the grid to hover/touch states to typography styles to content messagingwill be detailed. This guide will demonstrate the design thinking and personality of the system. Dependingon the complexity of the site, this could be created in an interface harmony canvas.
  36. 36. Text http://nathanborror.com/posts/2009/oct/25/interface-harmony/An interface harmony canvas
  37. 37. Development
  38. 38. http://www.sonypictures.com/previews/movies/residentevilretribution/clips/4301/The developers Zombie movie
  39. 39. 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 tobest practices for online readability, and include a print CSS for readers that want to print out yourcontent.
  40. 40. At this stage, the technical architecture will be built out on a system like Open Text Web Site Managementor Drupal 7, depending on your organization’s needs. We’ll build out all of the site’s modular elements ande-commerce components, and set up a workflow process that will help you maintain your content over thelong term. This process goes hand-in-hand with the CMS Template Implementation, which will integratethe HTML templates into the design or theme layer. By the time we’re done, everything will be lookinggood and working great!
  41. 41. Heres where we test and demonstrate how page templates will render in major web browsers and mobiledevices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will beappropriate for each device, but may be slightly different due to device specs and experience. It’s notabout making everything look the same, it’s about creating a coherent experience across all devices.
  42. 42. Heres where we test and demonstrate how page templates will render in major web browsers and mobiledevices (i.e. iPad, iPhone, Blackberry, Android, etc). It is important to understand that the design will beappropriate for each device, but may be slightly different due to device specs and experience. It’s notabout making everything look the same, it’s about creating a coherent experience across all devices.
  43. 43. http://en.wikipedia.org/wiki/Comparison_of_Android_deviceshttp://en.wikipedia.org/wiki/Comparison_of_Android_devices
  44. 44. Oh noes!
  45. 45. www.adobe.com/ShadowTesting devices through adobe shadow!
  46. 46. Deployment
  47. 47. At Yellow Pencil we love to provide support and training for content authors during content migration. Webelieve in helping our clients create and maintain useful, usable content. Depending on your organization’sneeds, and our audit of your current website, we’ll help you define the scope of the content migrationphase. As we all know, a website without content is a black hole of sadness. Content #FTW!
  48. 48. At Yellow Pencil we love to provide support and training for content authors during content migration. Webelieve in helping our clients create and maintain useful, usable content. Depending on your organization’sneeds, and our audit of your current website, we’ll help you define the scope of the content migrationphase. As we all know, a website without content is a black hole of sadness. Content #FTW!
  49. 49. User Acceptance Testing (UAT) helps us confirm that your new site meets the objectives and requirementswe defined early in the project. Its like moving into a new house – you need time to discover howeverything works and get comfortable with living there. You’ll need time to come to terms with how yourcontent fits into the design and workflow, and make any adjustments and edits you need.
  50. 50. http://youtu.be/yfDUv3ZjH2kSometimes things don’t turn out how you think they will. http://youtu.be/yfDUv3ZjH2k (that’s not exactly like 28 Days Later)
  51. 51. Wasn’t this supposed to look like a normal zombie movie...
  52. 52. Documentation & Training
  53. 53. Document the patterns and systems we’ve established!
  54. 54. Launch Plan & Release
  55. 55. Where is it being hosted? Level of support? Who will know about this? How will youcommunicate with current users?
  56. 56. We need to get this digital thing into the real world.
  57. 57. Start of Operational Plan
  58. 58. This is where the web project really starts its life. Celebrate the birth and plan to celebrateevery milestone as it lives.
  59. 59. Move from the inside out. Extrinsic vs intrinsic motivation.
  60. 60. Brings me to the question of what drives us? Extrinsic vs intrinsic. Is it a motivation 2.0 or 3.0thing?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?
  61. 61. vimeo.com/29180214
  62. 62. vimeo.com/15266890
  63. 63. vimeo.com/15266890
  64. 64. What = undead
  65. 65. What = surrounded and losing hope
  66. 66. What = alone
  67. 67. How = taking care of business
  68. 68. How = killing the brain to save the living
  69. 69. Why = remaining human in the face of it all.
  70. 70. We focus on features and devices but that’s not right.
  71. 71. The web isn’t a bunch of machines. It is a bunch of humans.
  72. 72. We need to remember that each connection on the web is a connection with another human.We are trying to become wholehearted
  73. 73. This is why I love RWD. It is about helping people connect on the web.
  74. 74. Our why = helping everyone be able to connect with and use the web
  75. 75. Focus on the why,well structured content,and interactions that matter
  76. 76. So what does it mean to be responsive? Something simple?
  77. 77. It is about good content. It means rethinking content creation.Moving from fragmentation to unification!
  78. 78. create once publish everywhere
  79. 79. We want our data to tell stories and we can’t predict what future devices or interactions willbe.
  80. 80. The first website was responsive! ;)
  81. 81. A responsive process is a responsible process
  82. 82. www.futurefriend.ly
  83. 83. Start with the WHY and everything else will follow.
  84. 84. www.hellofisher.comwww.yellowpencil.com
  85. 85. http://youtu.be/4V90AmXnguwThriller!

×