base camp
This page contains a chronological list of downloads to help you in the class. Items are upoladed as they are introduced throughout the semester.
week 1
- Schedule: ArtV 330, Mon/Wed
- Slides: What is Interaction Design?
- Reading: Responsive Design and the Role of Development in Design, Adam Couldwell
- Vocab sheet: Web Standards and HTML+CSS Syntax Basics
- Slides: Web Standards + Syntax Basics
- Starter Exercise 1: html structure
- Introduce Project 1: Technical Basis: Favorite Things Page
- Project templates: Project 1 files
- Resource: onepagelove.com
week 2
- Vocab sheet: Site Basics and Layout Intro
- Slides: Site Basics and Layout Intro
- Tool: HTML5 Cheat Sheet
- Tool: CSS3 Cheat Sheet
- Tech Tips: File Management: Folder + Files Structure
- Tech Tips: Dreamweaver: New Site Creation
- Starter Exercise 2a: Layout Intro
week 3
- Reading: Mandel’s, “CSS Grid for Designers”
- Vocab Sheet: CSS Layout with FlexBox and Grid, and Image Basics
- Slides: Layout with CSS Grid and FlexBox, Image Basics
- Starter Exercise 2b: Layout with CSS Grid and FlexBox, Image Basics
- Vocab Sheet: Web Typography Part I and Links
- Slides: Web Typography Part I and Links
- Starter Exercise 3: Web Type Part I and Links
week 4
- Slides: Design Unity + Elements
- Studio: Site scripting / styling
- Studio: site scripting / trouble-shooting
week 5
- Schedule—REVISED as of Feb 5: ArtV 330, Mon/Wed
- Studio: site scripting / trouble-shooting
- Due Date: Project #1 (Favorite Things Page)
- Introduce Project #2: Type on Screen: Digital Type Specimen Page
- File bundle: Project #2 html + css templates and content word bank
week 6
- Vocab Sheet: Web Type Part II and Navigation Links
- Slides: Web Type Part II, Navigation Links
- Starter Exercise 4: Web Type Part II, Navigation Links
- Studio: Font choice confirmed, content selection / style tile development
- Video: Watch Jen Simmons’ talk about Grid (70 mins)
- Studio: Tight sketches, typesetting ideas, css scripting
week 7
- Demo: anchor links + styling
- Studio: Site design / scripting
- Studio: Site design / scripting / production
week 8
- Studio: Site scripting / trouble-shooting
- Due Date: Project #2 (Digital Type Specimen Page)
week 9
- Spring break: No class — enjoy!
- Spring break: No class — enjoy!
week 10
- Project 3: Responsive Web Design: Microsite (option chosen today)
- File bundle (option 1): Convention Microsite
- File bundle (option 2): Restaurant Microsite
- File bundle: Social media icons
- Responsive Thumbnailing Tool
- Vocab Sheet: Responsive + Intrinsic Web Design
- Slides: Responsive + Intrinsic Web Design
- Starter Exercise: Media Queries
- Reading: Miller, Ch 2 and Duckett, Ch 18
- Studio: Research review; Discuss design process: wireframing, usability
- Slides: Web Design Process
- Studio: Concepting and Wireframing (sketched on paper or in Figjam; can also use pop app)
week 11
- Reading: Duckett, Ch 3 + 14, and “Variable Fonts Are Here to Stay,” by Crossland & Penney
- Vocab Sheet: Web Type, Part III (variable fonts)
- Slides: Web Type, Part III (variable fonts)
- Starter Exercise: Web Type, Part III (variable fonts)
- Review: concept sketches / big ideas + wireframes
- Studio: Mood boarding / style tile development
- Review: Style tiles / mood boards
- Studio: Asset gathering and creation
week 12
- Studio: Work on designs for home page layouts (not yet coding/building)
- Studio: Work on designs for interior page layouts (not yet coding/building)
week 13
- Prelim. Design Review: Responsive Layout Variations (whole group crit of printed design mock-ups)
- Slides: Review grid/flex layout, discuss layout mapping; Introduce Webflow option; Studio: design fine-tuning
- Studio: Design fine-tuning; link up nav (as a group)
week 14
- Reading: Cope: “CSS Transitions & Transforms for Beginners”
- Vocab Sheet: CSS3 Possibilities: Transitions and Transforms
- Slides: CSS3 Possibilities: Transitions and Transforms
- Starter Exercise: Transitions and Transforms (trials via past starter files and resources)
- Studio: Site production (stage 1)
- Webflow University: How transforms work
- Webflow Feature: Build animations and interactions visually
- Webflow Demo page (with how-to!): Build 3D Transforms Visually
- Studio: Do nav + links together; image generation; site scripting/production (Stage 2)
week 15
- Studio:Site scripting/production (Stage 2)
- Tech Tips: How to Make an Animated GIF in Photoshop
- Studio: Site scripting/production (stage 3)
- Optional: Practice NKU personal web server space uploads together; Tech Tips: Step-by-Step instructions for uploading web files to your personal NKU student web server space
- Slide: WebFlow build: Housekeeping items
week 16
- Review: Usability tests (small group share)
- Studio: Site scripting/production (stage 3)
- Studio: Site scripting/production (stage 3)
- Demo: Checking font weights in head tag and zipping umbrella folder
finals week
- Project #3 due (Event or Restaurant Micro-Site)
- Whole project folder zipped and submitted via Canvas (for official turn-in); projected from browser or WebFlow for critique. Refer to our Canvas home page (bottom) for details about final exam period and final turn-in.