Audience – General
- Target Audience Examples: Three Commercials That Have it Figured Out by Eugene Farber
- Designer Myopia: How To Stop Designing For Ourselves By Rian van der Merwe
- Myth #14: You are like your users via UX Myths
- A Five-Step Process For Conducting User Research by David Sherwin
- Considering the User Perspective A Summary of Design Issues via WebAIM
- Generations 2010: Trends in online activities via PewResearch
- Stat Counter: Global Stats: See usage patterns of various browsers.
- Internet Stats via InternetLiveStats
Audience – Children
- Kids 4-6: “The Muddy Middle” by Debra Levin Gelman
- Children’s Websites: Usability Issues in Designing for Kids by Jakob Nielsen
Audience – Teens
- Teenage Usability: Designing Teen-Targeted Websites by Hoa Loranger and Jakob Nielsen.
Audience – Older Adults
- Developing Websites for Older People via W3C
- Seniors as Web Users by Jakob Nielsen
- Older adults and internet use BY Kathryn Zickuhr and Mary Madden
- Designing User Interfaces for Older Adults: Myth Busters by Kate Finn
- Not Your Grandfather’s Senior Citizen by Jen Whitesel
Audience – Creating Personas
- A Closer Look at Personas: What They Are and How They Work by Shlomo Goltz
- Personas by Lene Nielsen
Branding – Design
- Why You Should Get Excited about Emotional Branding by Rick Sloboda
- Your About Page is a Robot by Erin Kissane
- Personality in Design by Aarron Walter
- Designing Style Guidelines for Brands and Websites by Kat Neville
- Designing a Brand Identity by Gerren Lamson
- Building Your Personal Brand as a Graphic Designer by Roberto Blake
Branding – Content
- How to Improve Your Branding With Your Content by Rick Sloboda
- Branding 101: We Respond Emotionally To Numbers by Margaret Rhodes
Component/Module Design
- Atomic Design by Brad Frost
- Responsive Deliverables by Dave Rupert
- Design Ideas: Creating Reusable Style Components by Kristin Lasita
CMS
- DD Content Management Systems (11:34)
- Training the CMS by Eileen Web
CMS: Working with PHP
- PHP for Web Designers with David Powers on Lynda.com(Chapters 1 & 2 should be enough to get you going)
- MAMP for Mac
- WAMP for Windows PC
Installing and Running WordPress: MAMP with Morten Rand-Hendriksen on Lynda.com
Installing and Running WordPress: Wamp with Morten Rand-Henriksen on Lynda.com
CMS: WordPress
Critique – Clients
Critique – Peers
- Determine the Root Cause: 5 Whys via iSixSigma
- A Crash Course in The Art of Constructive Critique via Psychology for Photographers
- Do you want critique, or a hug? How to gain valuable criticism on your design by Jon Kolko
- Avoid Problem Solving For Better Critiques by Adam Connor
- AIGA: How to Survive a Critique
CSS – Basics
- Web Platform: Getting Started with CSS
- Almanac of Selectors & Properties via CSS-TRICKS
- CSS Declarations
- CSS Box Model (padding, margin and borders)
- Beginner Concepts: How CSS Selectors Work by Chris Coyier
- W3C CSS3 Specification
CSS – Typography
- Web Platform: Font Related Properties (CSS)
- Trent Walton: Typography Effects
- Confused About REM and EM? by Jeremy Church
CSS – Layout
- All About Floats by Chris Coyier
- CSS Positioning 101
- MDN: CSS Position
- When Pages are not Paper: The Designer’s Guide to Layout Code by Ben Gremillion
- A Complete Guide to the Table Element by Chris Coyier
CSS – Layout – MediaQueries
- CSS Media Queries
- Video 18 Media Queries (17:15)
- Video 19 A Note About Phone Resolution (1:58)
- Media Queries to Target Specific Devices (xpert developer)
- Responsive Resources: Media Queries (Brad Frost)
- Mediaqueri.es (great examples)
CSS – Layout – Flexbox
- What the Flexbox? (Video Tutorials)
- CSS-Tricks: Complete Guide to Flexbox
- MDN: Using CSS Flex boxes
- W3C Specs on Flex box
CSS – Effects
- MDN: CSS Multiple Backgrounds
- MDN: CSS Gradients
- MDN: CSS Transitions
- MDN: CSS Transforms
- Getting Started with CSS Shapes by Razvan Caliman
- CSS Shapes 101 by Sara Soueidan
CSS – Tools
- CSS Validation
- Can I Use?
- Primer: Will create a starter stylesheet based on your HTML.
- Eric Meyer CSS Reset
CSS – Skills
- CSS Diner (Selector Game)
- Interview Questions and Exercises About CSS by Chris Coyier
Designing For Good
- AIGA Design for Good
- Visualizing Information for Advocacy (PDF) by John Emerson
- Games for Change
- Design for Social Impact Guide and Workbook and Toolkit by Ideo
- Design and Social Impact by Julie Lasky
- Think the ALS Ice Bucket Challenge is Stupid? You’re Wrong. by Matthew Herper
- Designing Games to Foster Empathy by Jonathan Belman and Mary Flanagan
Designing for Social Change – Inspiration
- Pivot: Design Against Trafficking by Shandra Woworuntu with Christopher L. Heuertz
- Ether One: The Video Game That Tries to Simulate Dementia by Michael Thomsen
- Campaign Tackles Sexual Violence on Campus by Frank Baseman
- Moscow Subway Station Lets Passengers Pay Fare In Squats by Andrew Bender
- Mechanics are the Message: Designing a Game for Change in 3 Months
by Brian Kehrer - Case Study: NOTHING by Nail Communications
- I wonder what it’s like to be dyslexic
- Documentary shows how One Laptop Per Child helps kids in Peru by Mariella Moon
Email Design
- MailChimp: Guides
- MailChimp: Email Design Reference
- CSS Inliner Tool via MailChimp
- FF Table Layouts and Email Design (20:14)
- Can Email Be Responsive? by Jason Rodriguez
- Vertical Response: HTML Tips for Designing Email
- Vertical Response Marketing Resources
- Email Services: MailChimp, TinyLetter, Vertical Response, Constant Contact
Empathy
- Why You Should Invest in Empathy and Empathy: Design Tool and Outcome (PDF) by Dave McColgin
- From Empathy to Advocacy by Lyle Mullican
- Compassion Vs. Empathy: Designing for Resilience by Dorian Peters, Rafael Calvo
- Empathy on the Edge (PDF) by Katja Battarbee, Jane Fulton Suri, and Suzanne Gibbs Howard, IDEO
- The Scourge of “Relatability” by Rebecca Mead
- Innovation Starts with Empathy By Dev Patnaik
- Designing Games to Foster Empathy (PDF) by Jonathan Belman and Mary Flanagan
Ethics – Art
- The Use of Human Subjects in Art by the College Art Association
- Public Art Works by the College Art Association
- Ethics for Artists by Karen Atkinson
- Social Responsibility and Art by Camillo Mac Bica
The Use of Animal Subjects in Art by the College Art Association
Ethics – Design
- Design Business and Ethics by AIGA
- Ethics and Social Responsibility by Shel Perkins (AIGA)
- In Search of Ethics in Graphic Design by Paul Nini
- The Academy of Design Professionals Code of Professional Conduct by Andy Rutledge
- Last Week Tonight with John Oliver: Native Advertising (11:22)
Ethics – Professional Codes
- AIGA Standards of Professional Practice by AIGA
- Professional Practices for Artists by the College Art Association
- Code of Ethics by the National Education Association
- NAEA Professional Code for Art Educators
Grids
- Content-out Layout by Nathan Ford
- Fluid Grids by Ethan Marcotte
- Thinking with Type: Grid by Ellen Lupton
- Create a modular grid system in Illustrator via Creative Bloq
- Creating Your Own CSS Grid System by Jan Drewniak
Grids – Tools
- Gridulator: Creates PNG files with columns with your specifications
- GridPapr: Many different formats of printable grids
- The Golden Grid System: A Folding 16 Column Grid
- Modular Grid: Photoshop Extension
- Illustrator 974px Grid System (12) by Neil Bradley
Grids – In Use
Forms
- MDN: <form> element
- MDN: HTML Forms Guide
- An Extensive Guide To Web Form Usability by Justin Mifsud
- Web Form Design Best Practices with Luke Wroblewski on Lynda.com
- CSS: Styling Forms with Ray Villalobos on Lynda.com
FTP
- Video 13 FTP (6:01)
- FTP Handout for Oswego Account
- Fetch (FTP for Mac) or FileZilla (Cross-Platform FTP)
HTML Basics
- W3C HTML5 Specification
- Web Platform: The Basics of HTML
- Web Platform: HTML Elements
- MDN HTML5 Elements
- HTML5 Sectioning Element Flow Chart via HTML5 Doctor
- A Complete Guide to the Table Element by Chris Coyier
- MDN: HTML
- W3 HTML Validation
HTML Entities
- HTML Character Codes
- The Trouble With EM ’n EN(and Other Shady Characters) by Peter K Sheerin
- Unicode: Emoji and Dingbats
- Unicode Miscellaneous Symbols and Pictographs (note you need to use a font that includes these emoji characters. For example the unicode for a donut emoji is 1F369 to enter into HTML write as 🍩).
Ideation – Brainstorming
- 7 Tips on Better Brainstorming by IDEO
- Brainwriting for Rapid Idea Generation by Chauncey Wilson
Ideation – Mood Boards
- Mood Boarding Methods for Web Designers by Stephanie Hamilton
- How to Create Mood Boards: 40 Pro Tips and Tools by Creative Bloq
Ideation – Sketching
- Sketching: Things You Didn’t Know Your Doodles Could Accomplish by Laura Busche
- The Messy Art of UX Sketching by Peiter Buick
- Sketching for Better Mobile Experiences by Lennart Hennigs
Images
- Watch Video 12: Background Images(7:41)
- Watch Video 14: Images and Floats (14:19)
- Responsive Images in Practice by Eric Portis
- Fluid Images by Ethan Marcotte
- Designer’s Guide to Image Compression via Creative Bloq
Images – License
Be sure to read and follow licenses carefully.
Images – Tools
- A-Slider (responsive) by Varun Naik
- Placehold.it
Images – Repeatable Patterns
- Drawing Vector Graphics: Patterns with Von Glitschka (see Introduction: What Are Patterns? (3:03), Drawing Out and Refining your Design (09:39) and Building your vector Pattern with a bounding box (15:22) in Chapter 1: Building a Repeating Pattern from Scratch, and Pattern Tool Basics (11:16) from Chapter 2: Building A Repeating Pattern Using the Pattern Tool)
- Illustrator CC One on One: Intermediate with Deke McClelland (see Chapter 15: Seamlessly Repeating Patterns (49:55))
- Creating A Repeatable Pattern for the Web via Adobe
- Export a pattern tile using Illustrator CS6 created with the new pattern tool via adelejeffs852
- How to Make a Repeat Pattern (By Hand) via Design Sponge
- Create a Seamless Repeating Vector Pattern Using Adobe Illustrator by SewHeidi (6:31)
- Guide to Patterns in Photoshop via Republic of Code (pixel based patterns)
Images – Repeatable Textures
- Chapter 4: Working with Scanned Fabric (22:45) and Chapter 6: Adding Texture with Filters (21:25) from Photoshop for Fashion Design: Rendering Techniques with Robin Schneider to learn about creating repeating textures.
- Photoshop Offset Filter: Making Seamless Textures via Design Bash
- The Whys And The Hows Of Textures In Web Design by Jon Savage and Simon H.
Images – Creating Icons
Information Architecture
- Web Style Guide: Organizing Your Information
- Web Style Guide: Interface Design
- Web Style Guide: Information Design
- Web Style Guide: Presenting Information Architecture
- >How To Design Mental Models That Create a Superior User Experience by Leanne Byrom
Information Architecture – Wireframes
- Usability.gov: Wireframes
- Examples: I Love Wireframes Tumblelog
- Tool: Wireframe Templates free from Sneakpeekit
- Tool: Wireframe CC
- Tool: RWD Wireframes
Legal – Copyright
- AIGA Design Business + Ethics
- Copyright.gov (website)
- Compendium of U.S. Copyright Office Practices, Third Edition
- What’s a ‘Work for Hire’ and Why Should You Care? By Neil J. Rosini
- Intellectual Property and the Arts US Copyright: Fundamentals and Documents by the College Art Association
- Intellectual Property and the Arts: Fair Use Guidelines, Practices and Policies
by the College Art Association - Free Culture by Lawrence Lessig (book)
- Center for Media and Social Impact: Fair Use (website)
- Fair(y) Use Tale (video)
- Fair Use or Infringement? by Linda Joy Kattwinkel
- The Difference Between Copyright Infringement and Plagiarism by Jonathan Bailey
- Understanding Copyright And Licenses By David Bushell
- Legalities 6: Follow-Up Questions About Fair Use and Collage by OW&E
Legal – Copyright Case Studies
- Going Ape Over a Photograph’s Copyright by Sergio Muñoz Sarmiento
- Miami Artist AholSniffsGlue Sues American Eagle Outfitters for Intellectual Property Infringement By Carlos Suarez De Jesus
- Cariou v Prince via Clancco
- What Flappy Bird Teaches Us About Content Creation by Jonathan Bailey
- Woman Sues Over Use of Her School Photo on Novelty Flask via Clancco
- ‘Canal Zone’ Collages Test The Meaning Of ‘Fair Use’ by Joel Rose
Legal – Attribution
- How Not to Steal People’s Content on the Web by Corey Eridon
- Best Practices for Attribution (Creative Commons)
- RISD Citing Images with Image Captions (Art Bulletin/Chicago & MLA)
- Chicago Style and MLA (See Visuals) via Hacker
Legal – Contracts
- AIGA Standard Form of Agreement for Design Services
- Why Posting a Legal Notice on Your Facebook Changes Nothing by Jonathan Bailey
- The Collective Legal Guide For Designers (Contract Samples) By Veronica Picciafuoco
Mobile & Responsive Design
- Responsive Web Design by Ethan Marcotte
- Responsive Resources via Brad Frost
- Separate Mobile Website Vs. Responsive Website by Brad Frost
- Sketching For Better Mobile Experiences by Lennart Hennigs
- Determining Breakpoints in a Responsive Design by Tim Kadlec
- Content Choreography by Trent Walton
- Examples: Mediaqueri.es
- Examples: @RWD
- Examples: RG/A This is Responsive
Designers and developers should consider both site-wide and page navigation. In general, provide multiple ways to reach any page on a site. Doing so allows users to chose whatever way of finding pages is easiest for them.
https://usability.yale.edu/web-accessibility/articles/navigation
Placeholders
- Meet the Ipsums (placeholder text)
- Placehold.it (placeholder images)
- HTML Ipsum (placeholder html)
Problem Definition
- Briefly (Documentary) by Basset and Partners
- Creative Briefs in Shifting Times by Terry Lee Stone
- Determine the Root Cause: 5 Whys via iSixSigma
- What Are Design Problems?(PDF) by Andrew J Ko
Prototypes
- Usability.gov: Prototyping
- The Skeptic’s Guide To Low-Fidelity Prototyping by Laura Busche
- The Strategic Web Designer: Creating a Website Prototype by Christopher Butler
- Building Clickthrough Prototypes to Support Participatory Design by Svetlin Denkov
- The Strategic Web Designer: Creating a Website Prototype by Christopher Butler
Storytelling
- A Periodic Table of Storytelling Tropes
- Design Tells an Intentional Story
- Design Tells an Empathetic Story
- Behavior Change Strategy Cards by Nikki Pfar; Toolkit (PDF) by Artefact
- Persuasion: Applying the Elaboration Likelihood Model to Design by Victor Yocco
- 2013: The Year in Interactive Storytelling
Style & Pattern Guides
- Style Tiles as a Web Design Process Tool by Samantha Warren
- Element Collages: An Abstract Way to Document Design for Reading Is Fundamental by Daniel Mall
- Getting Started With Pattern Libraries by Anna Debenham
- Style Guides: A Design Mock-up for the Responsive Web by Tony Thomas
- Creating Style Guides by Susan Robertson
- Front-End Style Guides by Anna Debenham
- How to create a design style guide: 25 pro tips by Paul Wyatt
- Style Guide Best Practices by Brad Frost
Style & Pattern Guides – Examples
- Reading is Fundamental (Element Collage)
- Mobile Entertainment Weekly (Style Tile & Element Collage)
- Busy B (Element Collage)
- MailChimp Pattern Library
- Code For America Style Guide
- Yelp Style Guide
Typography
- Interactive Guide to Blog Typography by Tommi Kaikkonen
- The Elements of Typographic Style Applied to the Web
- A Type Design Brief: What Is In It, And Why Does It Matter? by Nadine Chahine
HOW TO CHOOSE A FONT: Is the Font Easy to Read? Anatomy and Legibility”(PDF) by Laura Franz
Typography – Web Fonts
- W3Schools Web Safe Fonts: Safe fallback fonts to use in the font-stack in case @font-face fonts do not load.
- HTML Character Codes
- Font Squirrel: Source of Free Web Fonts. See Video 8 Finding and Installing Web Fonts for a tutorial on using Font Squirrel.
- Google Fonts: Source of Free Web Fonts. See Chapter 2 of Typography For Web Designers by Laura Franz for a tutorial on using Google Fonts.
- Typekit: Adobe Creative Cloud Subscriptions come with the Portfolio Plan. See Chapter 2 of Choosing and Using Web Fonts by Laura Franz on Lynda.com for a tutorial on using Typekit fonts.
- Adobe Edge Web Fonts (a subset of Typekit that is free)
Typography – Tools
- Typetester: Compare installed web fonts in browser.
- What Font Chrome Extension: A tool to quickly identify fonts and their properties on a webpage.
- Font Friend: A bookmarklet that lets you experiment with Google Fonts and installed fonts on the fly on a live webpage.
User Testing
- Tips for User Testing Each Stage of Your Development Cycle by Stef Miller
- Quick and Dirty Remote User Testing by Nick Bolt
- Tips for User Testing Each Stage of Your Development Cycle by Stef Miller
Web Design Software (FREE)
- Komodo Edit (code editor)
- Brackets (code editor)
- Fetch (FTP for Mac) or FileZilla (Cross-Platform FTP)
- Web Developer extension for Chrome
- Web Developer add-on for Firefox
Web Hosting
Web Hosting – Recommended Hosting Services
Web Hosting – Publishing Platforms
Material design Introduction What is material? Environment Material properties Elevation and shadows Animation Authentic motion Responsive interaction Meaningful transitions Delightful details Style Color Icons Imagery Typography Writing Layout Principles Units and measurements Metrics &
https://www.google.com/design/spec/style/writing.html#writing-capitalization-punctuation