Design for the Dynamic Web

Kent State University / School of Visual Communication Design
inVision Workshop Series

18-19 October 2014


Overview

On this page, you will find more information about the several activities we'll do this weekend in addition to many responsive and adaptive web design resources. There are many learning outcomes for this workshop but my main goal is to give you a broad overview of dynamic web design while also allowing you to start building a portfolio of web site design.


Resources

Slide Decks

Introduction & Overview of Dynamic Web Design (3.9MB PDF)

Advice on Dynamic Visual Design (2.2MB PDF)

Software

TextWrangler (HTML editor)

Templates

Mobile Wireframe Template

Tablet Wireframe Template

Laptop Browser Wireframe Template

TV Wireframe Template

Dynamic Wireframe Templates - Complete Set

Storyboard Template

General Resources (patterns, best practices, process)

Responsive Resources by Brad Frost

Multi-device layout patterns by Luke Wroblewski

Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes

Screen Siz.es

UI Frameworks

Foundation

Bootstrap

Semantic UI

Skeleton

Readings

Responsive Web Design Article by Ethan Marcotte 

Responsive Web Design Book by Ethan Marcotte

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson

Mobile First by Luke Wroblewski

Responsive Web Design Guidelines and Tutorials by Smashing Magazine

What We Mean When We Say “responsive” by Lyza Danger Gardner

The Next Big Thing In Responsive Design by Dan Gardner and Mike Treff

Examples

General Inspiration Sites

Media Queries

Higher Ed RWD+AWD

Responsive Deck Gallery

Awwwards Responsive Sites

Adaptive Web Design

http://www.screamingfrog.co.uk/

http://trufcreative.com/

http://foodsense.is

https://www.change.org

Responsive Web Design

http://www.npr.org

http://www.latimes.com/

http://www.bostonglobe.com/

http://www.newyorker.com

http://www.kent.edu/

https://futureinsightslive.com/las-vegas-2014/

http://www.dadaabstories.org

https://pittsburghkids.org

http://disney.com

http://www.fivesimplesteps.com

http://www.thedolectures.com

https://www.thetileapp.com