The Design in Responsive Design

  • View
    108

  • Download
    5

  • Category

    Design

Preview:

DESCRIPTION

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

Citation preview

CHRIS VERNONCreative Director at Chapter Eight

@welikeideas

THE DESIGN IN RESPONSIVE DESIGN

It draws picturesPHOTOSHOP

MIND-BLOWING IMAGERY

NICHOLAS CAGE MEMES

Pretty much all creative design apps create awesome stuff

NOT JUST PHOTOSHOP

EVEN MICROSOFT PAINThttp://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 CODEAND 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

WARNINGBETA 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 future

Recommended