_________________________
— Master Deadline Schedule.ixl
. . . . . . . . . .
_________________________
> Monday :: Gabriel
Design History
9am Click here :: Join Meeting Passcode: 163145
. . . . . . . . . .
> Tuesday :: Jill
Introduction to Design
9 am Click here :: Join Meeting
Passcode: 644998
. . . . . . . . . .
> Wednesday :: Jason
9 am Click here :: Join Meeting
Passcode: 137397
AND
Creative Suite Check In: 1:00 pm Click here :: Join Meeting
Passcode: 526567
. . . . . . . . . .
> Thursday :: Erik
Interactive 1
9 am Click here :: Join Meeting
. . . . . . . . . .
> Friday :: Marc
New Media Mornings
9 am Click here :: PDF file of Zoom Links
_________________________
> Monday :: Jason
Creative Suite :: Illustrator
9 am Click here :: Join Meeting
Passcode: 440085
AND
Creative Suite Check In: 1:00 pm Click here :: Join Meeting
Passcode: 233260
. . . . . . . . . .
> Tuesday :: Gabriel
Design History
9am Click here :: Join Meeting Passcode: 163145
. . . . . . . . . .
> Wednesday :: Erik
Interactive 1
9 am Click here :: Join Meeting
. . . . . . . . . .
> Thursday :: Jill
Introduction to Design
9 am Click here :: Join Meeting
Passcode: 336488
. . . . . . . . . .
> Friday :: Marc
New Media Mornings
9 am Click here :: PDF file of Zoom Links
- Make Tutor Appointments
- How to log into a school computer.pdf
- Printing to the Classroom B&W Printer.pdf
- Printing to the color HPs.pdf
- Printing to the Docucolor.pdf
Syllabus.pdf
_________________________
Read before class:
_________________________
Download before class:
_________________________
Lecture for class:
_________________________
Resources for after class:
_________________________
Homework for this week:
_________________________
Bring to class next week:
Illustrator Adobe Basics: Tools, palettes, menus, art board set up. Graphic Design overview: Basic concepts of space, weight, shape, line, color.
_________________________
— (75 min) Basic Elements video
_________________________
— (21.01 min) Introduction to Adobe Illustrator
— (9.37 min) Intro to Adobe Illustrator: Interface and navigation
— (9.31 min) Intro to Adobe Illustrator: Panels, Workspaces and Artboards
_________________________
_________________________
Graphic Translations :: Infographics
We’ll start working on Project 1 next week in class.
_________________________
Tuesday’s Class: Your finished Road Map to show and share next week.
Monday’s Class’s Road Map will be finished for show and share Oct 12th.
Because the quarter begins on a Tuesday, I designed the syllabus so that this first class is an easy introduction into the curriculum. Since there is no Monday class this first week, Monday’s class will receive this introduction as a recorded video. We will go over the syllabus and review an outline of the midterm project. The midterm project will be done in groups—groups will be assigned during this introduction. There will also be a presentation explaining Outside Project 1.
_________________________
— (6.06 min) Click here for Gabriel Stromberg
_________________________
— Click here to download the MidTerm Groups for this project
Week 1– 4: Research
Use this time for research and investigation. Work to accumulate as much information as possible on your period. Seek out multiple sources. You must use at least three sources to derive your information — you can use both online and analog references.
_________________________
— (7.51 min) Saki Mafundikwa: Ingenuity and elegance in ancient African alphabets
_________________________
— Excerpt from Afrikan Alphabets, Saki Mafundikwa.pdf
_________________________
— Syllabus Link to a Google Doc
Welcome. What to expect. Introductions & icebreakers. A deeper explanation of Project 1. Introductory lecture on HTML / CSS, images for the web, UX research, Personas / User Stories.
_________________________
— Project Descriptions
— Yale HTML files
— Grading Rubric
— Step by Step Instructions
_________________________
Passcode: 6uyQ!QG2
— Click Here for Lecture Notes: For Week 1
_________________________
_________________________
Project 1: Despite being an Ivy League school with an acclaimed Art department, the website for Yale’s School of Art shows up on multiple lists when you search for “Worst website design” http://art.yale.edu/ .
However, the site is also an open-source, organic platform for student expression.
If they approached you and asked you to redesign it, where would you begin? Since you’ve probably been in a similar situation recently, you could start with the axiom, “User stories generate features…” What are some common tasks a user might be trying to accomplish on the site? What needs to be included on the front page? How would you balance aesthetics and usability? How would you build this with HTML/CSS? How would you make it responsive? Additionally, you will need to defend your design decisions on a linear scale from “Vapor Wave” to “Ivy League”. Where 100% “Vapor Wave” would mean keeping all the crazy qualities of the existing site and 100% “Ivy League” would mean making it look conservative and traditional. While there is no right answer, your description should be inline with your visuals.
_________________________
– A site audit which describes everything that’s not working
– A list of ten+ user stories
– An annotated wireframe for the desktop
– A style tile. Colors, fonts, textures, photo, or illustration styles.
Syllabus.pdf
_________________________
Read before class:
_________________________
Download before class:
_________________________
Lecture for class:
_________________________
Resources for after class:
_________________________
Homework for this week:
_________________________
Bring to class next week:
— Morning Lectures Schedule.pdf
(this was also posted in General Info Slack Channel)
Creating containers, shapes and line. Tool overview and page set up. In class: Begin sketching for 1st project. Review sketches, provide feedback
_________________________
— (23.37 min) Basic Shape Tools
— (17.01 min) Basic Line Tools
_________________________
Sketches/Ideas
Please submit the letter detailed in the introductory email.
The Power of Language
This survey of the evolution of written language systems examines contributions from multiple cultures and civilizations. Beginning with prehistoric examples, we will discuss the function that language serves and the investigate the ways in which language systems impact the history and legacy of a culture. There will be a focus on the connection between the visual embodiment of writing systems and the values, beliefs, and technologies within which they develop.
_________________________
— The Power of Language Lecture Slides.pdf
_________________________
Week 1– 4: Research
Use this time for research and investigation. Work to accumulate as much information as possible on your period. Seek out multiple sources. You must use at least three sources to derive your information — you can use both online and analog references.
_________________________
— (35.10 min) F* The Stereotype: Revitalizing Indigenous Perspective in Design, Sadie Red Wing
— (4.23 min) How Korea crafted a better alphabet - History of Writing Systems #11
_________________________
— The History of Type Reading.pdf
— Excerpt from Anatomy of a Typeface, Alexander S. Lawson.pdf
_________________________
_________________________
The magic of FLEXBOX, CSS Box Model, Margin and Padding, Style Tiles, Borders / Radius, Backgrounds + Gradients
_________________________
_________________________
— Building the responsive navbar in 10 minutes (video)
— Building the responsive HTML wireframe in 10 minutes (video)
_________________________
– HTML wireframe with actual content; mobile-first, or single column and desktop, navigation, Google fonts
Creating shapes using the Pathfinder Panel, strokes fills, Stroke Panel, Appearance Panel. Edit corners and corner widgets, change shapes with the Direct Selection Tool. Smart Guides and Shape Builder In class:Review sketches, provide feedback
_________________________
— (19.58 min) Intro to Adobe Illustrator: Transform Panel
— (11.02 min) Direct Selection Tool and Join Paths in Illustrator
— (20.58 min) Learn Corner Widgets in Adobe Illustrator
— (10.32 min) Shape Builder Tool in Illustrator
— (26.08 min) Pathfinder Tool
_________________________
Continue to work on Project 1 Graphic Translations :: Infographics
_________________________
Work-in-progress Project 1
The Printed Word
We will first review the factors that laid the groundwork for the genesis of printing and movable type during the late middle ages including the development of technologies in China which were imported into Europe. We will then explore the evolution of the printed letterform and discuss how printing became a tool for progress and innovation.
_________________________
— The History of Type Lecture Slides.pdf
_________________________
Week 1—4: Research
Use this time for research and investigation. Work to accumulate as much information as possible on your period. Seek out multiple sources. You must use at least three sources to derive your information — you can use both online and analog references.
_________________________
— Colors/Pink: Not so Sweet After All, David Byrne
— Read this lecture notes for class: The Catalyst of Industry 2.pdf
Mobile First, HTML Wireframes, Lists for Navigation, Google Fonts, Typography, Responsive Frameworks, Media Queries
_________________________
— Lecture Notes: Week 3
— (10 min) Lecture on images & responsive logo
_________________________
_________________________
Homework / Bring next week:
– First real critique will be next week, 50% finished. Desktop and mobile views. (Responsive logo, Hero Image, media queries, images. Background vs. foreground images.)
Layers Panel, creating and editing clipping masks, creating compound shapes, using the Layers Panel to find and sort content. Select Same command to find object with similar attributes. Scale corners and scale line weights.
_________________________
— (22.03 min) Clipping Mask or Draw Inside? Which one works best in Illustrator.
— (30.53 min) Layers Panel
— (18.44 min) Appearance Panel
— (6.38 min) Expand and Expand Appearance in Illustrator
— Infographics Presentation.pdf
_________________________
Complete Project 1 Graphic Translations :: Infographics
Graphic Translation :: Object or Animal
_________________________
Project 1 :: Handed in by 9 am
The Catalyst of Industry
There will be a survey of the technological innovations that came out of the industrial revolution. We will discuss how these developments impacted culture and design in the Victorian era and generated counter movements throughout Europe, Asia, and the US.
_________________________
— Accompanying text for next week's lecture: The Lens of Colonialism.pdf
_________________________
Week 4—6: Creative Brief Development
Finish your research and investigation. Begin the construction of the printed creative brief for review during week 6.
_________________________
Positioning, Sticky header, Z-index, Opacity vs. RGBA, Box-shadow / text-shadow, CSS generators
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
– Next week your project should be almost finished and we’ll be having crits.
PROJECT #1 DUE : CRITIQUE
Project naming, required content, file formats and delivery of file: https://www.dropbox.com/s/3vv49tvl5qpabdq/Project%20naming%2C%20contents%20and%20file%20formats.mov?dl=0;
Pencil Tool, Width Shape Tool, Curvature Tool In class: Sketch out examples graphic translation
_________________________
— (13.32 min) Learn the Curvature Tool in Illustrator
— (18.15 min) Width Shape Tool
Make sure your Illustrator is updated to the 2021 version or these will NOT show up. If you do not see the rectangles with the drop shadows, you are not on the most current version. Open this file IN illustrator, don't double-click on it:
_________________________
Work on Project 2 Graphic Translation :: Object or Animal
Video on creating contrast on images to use as the basis for the Graphic Stylization Project #2. This does require photoshop if you don't already have it installed. https://www.dropbox.com/s/y9t0o9mbfj5lud8/Contrast%20on%20images.mp4?dl=0
_________________________
Work-in-progress check in for Project 2
— Tuesday's class: Click here for your Google Docs
— Thursday's class: Click here for your Google Docs
_________________________
The Lens of Colonialism
We will examine the emergence of colonialism in the 1400’s and discuss how conquest and political dominance shaped the European perspective. There will be a specific focus on works from Japan and numerous African countries that became the foundational catalyst for the modernist movement in Europe during the late 1800’s and early 1900’s.
_________________________
— The Lens of Colonialism 2.pdf
— Timeline Japanese History.pdf
_________________________
Week 4—6: Creative Brief Development
This time should be dedicated to the construction of the printed creative brief for review during week 6. Creative brief should be completed for next week's class.
_________________________
_________________________
_________________________
Forms, SVG, Slideshow, Hamburger menu, Dev tools, Browser and device testing, File size and Validation, Skits for UX
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
Project 1 will be due next week.
All about the Pen Tool. In class: Project using the Pen Tool
_________________________
_________________________
Complete Project 2 Graphic Translation :: Object or Animal
Recipe Infographic with icons
_________________________
Project 2 :: Handed in by 9 am, the Week of November 16th
I will check in with every group to evaluate their progress and address any questions or concerns.
The rest of this class will be dedicated to finishing up your midterm projects.
_________________________
— Capitalism and Globalization.pdf
_________________________
Work towards your presentations happening Week 8. Each group will give a 15 to 20 minute presentation.
_________________________
_________________________
*Day after the election*
I suspect the election results will be contested. The class will be informal and I will provide an extension as needed.
_________________________
Discussing the election results or I will improvise… Presentations of projects if possible
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
Project 2: Working in teams of 2 or 3, you will be creating a mobile app prototype and building a responsive landing page designed for its marketing purposes.
Before beginning your design process, you should do some user research and determine what features people are looking for.
My description is meant as a starting point, but your research should refine these features. You will also make up new brand names to replace these generic descriptions.
1. Bank for Tweens:
Banking/Debit Card/Financial management for children ages 10 – 14. This is a new Financial institution that is a subsidiary of some giant-mega-corporate bank. The goal is to develop good financial skills for young people while allowing some involvement from parents.
What are the primary tasks? (Checking balance, making a deposit, sending money, etc). Can parents deposit money like a digital allowance? Can the bank include snippets of content to encourage good financial habits? How important is a physical location with tellers in the age of Venmo and Square? Can the app halt transactions at a balance of $50 (or whatever) to prevent an overdraft?
2. Concierge/AI travel App
Why is booking travel (air/car/hotel) still so time-consuming? Haven’t we already surrendered all of our personal information to our robot overlords? If Chrome auto-fill can store my address and credit card data, surely it knows that my family of four frequently flies to the SF bay area and needs a rental car and hotel for 2 nights. Surely it can scan my browser history and know that I’m always looking for cheap flights to Iceland and Indonesia. Is it possible that an AI assistant can learn enough about your travel patterns and desires that it could be predictive and offer suggestions for routine travel and great deals for vacations as they are discovered?
Some form of initial onboarding would be required, but the system could get smarter as you provided it with more information. Wouldn’t it be great if all your preferences and details were stored in one sort of “digital passport” so that when you were presented with some sort of perfect package that you could just click “book it” (or edit details if imperfect). Assume your audience is affluent professionals, early adopters, frequent travelers, ages 24 – 50. Balance the desire for convenience with the need for privacy. Don’t spam them with hundreds of junk travel deals.
3. Everyone needs fashion advice. Pick a demographic, and have them answer some questions about themselves and their clothing interests (create a profile). Then provide them with a feed of fashion recommendations and allow a series of actions (like, heart, share, save for later, etc) which refines the feed so the algorithm gets smarter over time (thumbs up, down; swipe left, etc) and ultimately becomes a recommendation engine which only displays content which the user is interested in purchasing. Provide notifications for price drops, flash sales, or free shipping. Store payment and address info so purchases can be completed with one click
Make it frictionless so the user never leaves the app. Consider loyalty points for frequent purchases or “influencer” status for writing about what you purchased or fashion trends. Make it Social. Make it become a brand.
_________________________
– Summary of Research. What we know, what we intend to build. (5 –10 slides)
– Persona or empathy map
Video link of recorded class: TBD Password: TBD
Resources for after class:
Articles:
Homework for this week—
Pencil Tool, Shaper Tool, Simplify Path Feature
_________________________
— (17.31 min) Pencil Tool, Shaper Tool and NEW Simplify Path feature
— (12.10 min) Align and Distribute
_________________________
Finish Project 2
_________________________
Project 2 :: Handed in by 9 am, the Week of November 16th
Capitalism and Globalization
This lecture will focus on how modernism emerged in Europe during the twenties and thirties and evolved from a series of avant garde movements within art and design to a dynamic visual language used for marketing the new goods and services of a global post-war economy.
_________________________
— Capitalism and Globalization 1.pdf
— Capitalism and Globalization 2.pdf
_________________________
— No, a film by Pablo Larraín
_________________________
— The Original Influencer, History Today
_________________________
Work towards your presentations happening Week 8. Each group will give a 15 to 20 minute presentation.
_________________________
Empathy, Design Thinking, Blueprint Framework, More HTML/CSS
— Lecture on HTML Framework in 10 min
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
– Sketches or wireframes and task flow for 5-7 screens of the mobile App. Wireframe for website.
PROJECT #2 DUE : CRITIQUE
Blend Tool and Live Paint Tools In class: Sketch out icons for Recipe Infographic
_________________________
— Link Coming
_________________________
Work on Project 3 Recipe Infographic with icons
_________________________
Work-in-progress Project 3
Midterm Presentations
This class will be dedicated to midterm presentations and the completion of outside project number 2.
Each group will give a 15 to 20 minute presentation.
_________________________
_________________________
Outside Project 2
— Marketing, Media, and Modernism.pdf
Link to this week's read, watch, and listen!! https://99percentinvisible.org/episode/mexico-68/
_________________________
Atomic Design, Mental Models, UI Kits / Design Systems, Familiarity vs. Originality
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
– A functional mobile prototype using Adobe XD or Figma (5 – 7 screens). Start coding website.
File formats, save for web and mobile devices, Asset Panel and exporting files.
_________________________
— Click here for this weeks videos. There are 9 videos to watch.
_________________________
Work on Project 3 Recipe Infographic with icons
_________________________
Project 3 :: Handed in by 9 am
Marketing, Media, & Modernism
In the wake of the destruction of World War 2, many cultures used the visual language of modernism as a tool for signifying legitimacy and prosperity. We will investigate the role of modernism in the construction of the global postwar identity.
____________________
— Marketing, Media, and Modernism.pdf
____________________
Link to this week's read, watch, and listen!! https://99percentinvisible.org/episode/mexico-68/
_________________________
Outside project 2
— Monday Class here is the linkg to your google doc to upload project number 2.
— Tuesday Class here is the link to your google doc to upload project number 2.
_________________________
Small group meetings all day
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
– Mobile app is almost finished; Landing page is 50% finished.
PROJECT #3 DUE : CRITIQUE
Create a grid, follow Swiss design principles.
_________________________
— Convert Image to Vector in Illustrator
_________________________
Single Line Icons with Partner Participation
_________________________
Project 4 :: Handed in by 9 am
_________________________
Propaganda and Protest
We will review how design can be used as a force for transformation and connection in both positive and negative ways. There will be a specific focus on different ways that design has been an element in collective action.
_________________________
— How to Survive a Plague, documentary by David France
_________________________
— Do You Want Typography or Do You Want the Truth, Mike Devine
_________________________
— Monday Class here is the linkg to your google doc to upload project number 2.
— Tuesday Class here is the link to your google doc to upload project number 2.
_________________________
Laws of UX
_________________________
Wednesday Zoom: https://zoom.us/j/98110937966
Thursday Zoom: https://zoom.us/j/92761566828
Lecture Notes: https://bit.ly/2S96HBz
Syllabus: https://bit.ly/3hZNfS9
_________________________
– Finished app and landing page. Final Presentations will be next week.
Postmodernism and Digital Culture
A look at the history and evolution of technologies used in the practice and production of works of graphic design beginning with the postmodern movement. We will review how specific technologies relate to specific visual approaches and conventions. This class will end with a discussion of future developing technologies and how these new ways of working will effect our practice.
_________________________
— Protest and Social Action Lecture.pdf
_________________________
— First Things First Manifesto, Ken Garland
_________________________
_________________________
_________________________
Discussion of Winter Quarter
_________________________
Winter Reading List
_________________________
Read before class:
_________________________
Download before class:
_________________________
Lecture for class:
_________________________
Resources for after class:
_________________________
Homework for this week:
_________________________
Bring to class next week:
_________________________
No Class During Finals
_________________________
_________________________
No Class During Finals
Please remember to fill out your evaluations for your classes. You should be receiving Evaluation invitations in your email.