CHRIS VERNON
Creative Director at Chapter Eight
@welikeideas
THE DESIGN IN
RESPONSIVE DESIGN
It draws pictures
PHOTOSHOP
MIND-BLOWING IMAGERY
NICHOLAS CAGE MEMES
Pretty much all creative design
apps create awesome stuff
NOT JUST PHOTOSHOP
EVEN MICROSOFT PAINT
http://www.hallasko.com
AWESOME MOCKUPS
FOR CLIENTS
CLIENTS LIKE TO SEE WHAT
THEY’RE GETTING
THE WEB
ISN’T STATIC
HOW DO WE ENSURE A
DESIGN THAT WORKS ON
ALL THESE DEVICES?
DESIGN EVERY
BREAKPOINT?
QUICKLY BECOMES
UNMANAGEABLE
DESIGN IN
THE BROWSER?
SLOW TO EXPERIMENT
AND TRY IDEAS
DISTRACTED BY CODE

AND TOOLS
CODING IS A DIFFERENT
MINDSET TO CREATIVE
?
WHAT IF THERE WAS
SOMETHING SOMEWHERE
IN BETWEEN?
SMASHED KICKSTARTER
TARGET BY OVER 350%
ADD INTERACTIVITY
RESPONSIVE BREAKPOINTS
FLUID CANVAS & GRID
DESIGN LIKE PHOTOSHOP
WARNING
BETA SOFTWARE
A CLOSER LOOK
http://welikeideas.github.io/hipster/
HAVE A LOOK YOURSELF
http://html.adobe.com/edge/reflow/
http://macaw.co/
https://webflow.com
–Web Designers
“Do you remember when we used to draw
pictures of websites in Photoshop?”
Sometime in the not-too-distant f...
The Design in Responsive Design
The Design in Responsive Design
Upcoming SlideShare
Loading in …5
×

The Design in Responsive Design

1,700 views

Published on

Slides from my Presentation at Forefront Leeds 03 focussing on new design tools to aid visualising and prototyping responsive sites.

Included a brief demo of Macaw:
http://macaw.co

You can view/grab the output code from Github:
http://welikeideas.github.io/hipster/
https://github.com/welikeideas/hipster

Follow me on Twitter at @welikeideas

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

No Downloads
Views
Total views
1,700
On SlideShare
0
From Embeds
0
Number of Embeds
109
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The Design in Responsive Design

  1. 1. CHRIS VERNON Creative Director at Chapter Eight @welikeideas
  2. 2. THE DESIGN IN RESPONSIVE DESIGN
  3. 3. It draws pictures PHOTOSHOP
  4. 4. MIND-BLOWING IMAGERY
  5. 5. NICHOLAS CAGE MEMES
  6. 6. Pretty much all creative design apps create awesome stuff NOT JUST PHOTOSHOP
  7. 7. EVEN MICROSOFT PAINT http://www.hallasko.com
  8. 8. AWESOME MOCKUPS FOR CLIENTS
  9. 9. CLIENTS LIKE TO SEE WHAT THEY’RE GETTING
  10. 10. THE WEB ISN’T STATIC
  11. 11. HOW DO WE ENSURE A DESIGN THAT WORKS ON ALL THESE DEVICES?
  12. 12. DESIGN EVERY BREAKPOINT?
  13. 13. QUICKLY BECOMES UNMANAGEABLE
  14. 14. DESIGN IN THE BROWSER?
  15. 15. SLOW TO EXPERIMENT AND TRY IDEAS
  16. 16. DISTRACTED BY CODE
 AND TOOLS
  17. 17. CODING IS A DIFFERENT MINDSET TO CREATIVE
  18. 18. ? WHAT IF THERE WAS SOMETHING SOMEWHERE IN BETWEEN?
  19. 19. SMASHED KICKSTARTER TARGET BY OVER 350%
  20. 20. ADD INTERACTIVITY RESPONSIVE BREAKPOINTS FLUID CANVAS & GRID DESIGN LIKE PHOTOSHOP
  21. 21. WARNING BETA SOFTWARE A CLOSER LOOK
  22. 22. http://welikeideas.github.io/hipster/ HAVE A LOOK YOURSELF
  23. 23. http://html.adobe.com/edge/reflow/ http://macaw.co/ https://webflow.com
  24. 24. –Web Designers “Do you remember when we used to draw pictures of websites in Photoshop?” Sometime in the not-too-distant future

×