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

1. CHRIS VERNON
Creative Director at Chapter Eight
@welikeideas

2. THE DESIGN IN
RESPONSIVE DESIGN

3. It draws pictures
PHOTOSHOP

4. MIND-BLOWING IMAGERY

5. NICHOLAS CAGE MEMES

6. Pretty much all creative design
apps create awesome stuff
NOT JUST PHOTOSHOP

7. EVEN MICROSOFT PAINT
http://www.hallasko.com

8. AWESOME MOCKUPS
FOR CLIENTS

9. CLIENTS LIKE TO SEE WHAT
THEY’RE GETTING

10. THE WEB
ISN’T STATIC

12. HOW DO WE ENSURE A
DESIGN THAT WORKS ON
ALL THESE DEVICES?

13. DESIGN EVERY
BREAKPOINT?

14. QUICKLY BECOMES
UNMANAGEABLE

15. DESIGN IN
THE BROWSER?

16. SLOW TO EXPERIMENT
AND TRY IDEAS

17. DISTRACTED BY CODE
AND TOOLS

18. CODING IS A DIFFERENT
MINDSET TO CREATIVE

19. ?
WHAT IF THERE WAS
SOMETHING SOMEWHERE
IN BETWEEN?

21. SMASHED KICKSTARTER
TARGET BY OVER 350%

22. ADD INTERACTIVITY
RESPONSIVE BREAKPOINTS
FLUID CANVAS & GRID
DESIGN LIKE PHOTOSHOP

23. WARNING
BETA SOFTWARE
A CLOSER LOOK

24. http://welikeideas.github.io/hipster/
HAVE A LOOK YOURSELF

25. http://html.adobe.com/edge/reflow/
http://macaw.co/
https://webflow.com

26. –Web Designers
“Do you remember when we used to draw
pictures of websites in Photoshop?”
Sometime in the not-too-distant future