Responsive Web Design with Daniel Mall

Sign in to queue

Description

Responsive Web Design - A Framework for Modern Web Designers

How do Modern web designers need to approach creating responsive web sites? Working within a new framework that includes planning, inventories, sketching to assembling to  move past "visual comps" as the only output of this process. Interface inventories, performance budgets, prototypes, and element collages are all discussed by Daniel Mall in a real world project context to help define what approaches, tools and strategies web designers can use to create for the modern web. 

About Daniel Mall 

Dan Mall is an award-winning creative director & advisor from Philadelphia; an enthralled husband and dad; founder & Director of SuperFriendly; and co-founder of Typedia, The Businessology Show, No Chains, and swfIR. He was formerly Design Director at Big Spaceship, Interactive Director at Happy Cog, and a technical editor for A List Apart. He writes about design and other issues on Twitter and on his site danielmall.com.

About JS Open Day 

At JS Open Day in NYC on December 11, 2015, we had 8 great speakers talk about web development and design throughout the day. With over 200 attendees, we spent the day learning about interactive music, how to leverage javascript to "javascript all the things", the state of Angular 2.0 - and we donated over 450 lbs to the food bank thanks to the graciousness of attendees. 

 

[02:00] Web workers are categorized by titles, tools and outputs

[03:00] Silos within our industry

[04:00]Highest fidelity in the shortest amount of time, wireframes as abstractions

[05:30]Frameworks, not processes

[06:30]A new framework for Designers - "design is the rendering of intent". - Jared Spool

[07:45]Framework Step 1 : Plan 

[10:00]Plan - Write a Manifesto. "Before I design anything, I write".

[12:48]What is Creative Direction - and how does a Manifesto help

[14:28]"Navigation is branding" - Brad Frost @brad_frost

[16:45]Toolset for a Modern Designer 

[17:25]Framework Step 2 : Take an Interface Inventory

[18:06]Jason Santa Maria Interface Inventory of Editorally 

[19:07]Interface Inventory of O'Reilly 

[20:23]Inventory: Performance Budgets

[27:23]Inventory: Visual Inventory

[30:30]Framework Step 3: Designers can Sketch

[30:50]Sketch: Element Collage

[37:00]Sketch: Typecast for typefaces

[40:10]Designing in the Browser 

[46:25]Sketch: Prototyping - with Jamie Kosoy

[53:25]Step 4: Designers Assemble

[54:59]Assemble : Pattern Lab

 

Tools/References/Resources

Notational Velocity  - Streamlined notetaking 

WebPageTest - Testing sites for performance

Fast Enough - Tim Kadlec

HttpArchive - tracks how the web is built

Visual Inventory  - Article 

Element Collage - Article

Typecast - Article

Inventing on Principle - Bret Victor 

Pattern Lab - Brad Frost

 Slide deck is available if you want to get all the responsive web design goodness from Daniel Mall here.

 

 

 

 

 

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents