130 Estabrooke, 2-3:15pm Tuesdays and Thursdays, with separate labs.
Instructor: Jon Ippolito, 207 581-4477, http://jonippolito.net.
Xtine Burrough and Michael Mandiberg, Digital Foundations: Intro to Media Design (New Riders), or free online version.
This class requires a laptop that can run AirPlay, or failing that, AirParrot (see below). The New Media program requires a MacBook Pro; ask your instructor or the main office for details.
USB drive (to transfer files in the lab)
Phone-to-laptop cable (for capturing photos)
Adobe CC, educational subscription (four months minimum)
Slack (free).
Google Classroom (free)
If your laptop can't run AirPlay, you must a purchase (~$12) a non-trial version of AirParrot as replacement software.
Your grade in this class will comprise:
Your participation grade will include an Extracurricular badge that must be fulfilled by visiting two related presentations this term (such as IMRC visiting artists on Tuesdays). Satisfy this badge by posting selfies from two different events to the #extracurricular channel.
-
-
Students empty their pockets and brainstorm what aliens could tell about the users of these objects.
[This result from a CNN survey suggests that design starts with the body.]
[McLuhan argues that technology is extension of human body and sensorium, eg telescope as amplification of eye, yet it also amputates the original appendage or sense by atrophying it.]
[Scarry argues that artifacts "know" their designers, eg a chair knows how much its occupant weighs.]
Use your first name as your username (eg, "jon").
To register your badge at the end, use your maine.edu email address. Don't scrub!
-
Introduce Google Classroom
1. Show file extensions. 2. Make project folder. 3. Open application. 4. New document (Web Minimum). 5. Save in folder as lastname_design_for_humans.ai. 6. Copy to USB for lab (optional).
Open Illustrator and move panels where you would find them most useful. Make sure to include: Color, Swatches, Character, Paragraph, Layers, Tools. Try searching for a pull-down menu item.
You are going to make an image like this sample grid of design successes and failures. Do not include the design value you are illustrating; the class will guess it in the next lecture.
Find four random images on your hard drive (or download them from Google). Open lastname_design_for_humans.ai again, choose File > Place, and navigate to each image, adding it to your document. Click on the corners to resize and position the four images in a grid with some white space between them. Choose File > Export > Export for Screens and save a version in the same folder, as lastname_design_for_humans.png.
Post your PNG file to the Slack channel #design-for-humans.
Pass the quizzes in this interactive tutorial. When you get to the end, authenticate your badge by submitting your University of Maine Gmail account at the prompt (@maine.edu, not @umit.maine.edu). You can find a written version linked from the screencast by clicking the word script.
Important: don't scrub forward or backwards on the timeline, because that can invalidate your badge. The video player will offer you chances to review the material based on your success with the quizzes.
Pick a value from the Design For Humans chart, and find images of analog and digital artifacts that demonstrate successful and failed embodiments of that principle. (Don't worry about copyright for this assignment.) Using the technique shown in lab, post a single .png with the images for all four conditions to the Slack channel #design-for-humans.
Earn Extracurricular Badge by posting selfies at two events during the term to #extracurricular.
"Skeuomorphism" and iOS 7
Analog art: desktop, artboard.
Analog photography: burn, dodge, eyedropper.
Add last name, no spaces or capitals
Illustrator: vector, lines, shapes, symbols, laser, scale.
Photoshop: raster, photos, painting.
Google an image you think was made with Illustrator, and explain why to the class.
Scan or photograph a hand-drawn signature, and save the file (JPEG or PNG) to your hard drive in the folder for this class. Then open Illustrator; create a new ("Web Minimum") document; place your signature on it; and re-size it to fit inside the document. Save the Illustrator file as lastname_vector_signature.ai for future use.
Line art in history (drawings, posters, tattoes)
-
-
Due by by Friday at 11:59pm
Starting from the lastname_vector_signature.ai file you created for the last lecture, select the original layer and choose Layer > Options to make it a template. Then, in a new layer, use the pen tool to make a vector version of your signature. (It's OK if your signature is made up of multiple segments.)
When you're done, select the vector layer and use the Section tool to drag it off to one side of the scanned/photographed signature so you can compare the results. Export the comparison to lastname_vector_signature.png and upload it to the location specified by your instructor.
Practice the Illustrator pen tool, with multiple levels, entirely in the browser.
Presentation on the mechanics and efficiencies of lasercutting by Arturo Camacho.
Due by by classtime Tuesday
This should be an original artwork suitable for lasercutting. It cannot be a design that already exists (sorry, no Patriots emblems). It can, however, be a transformation of something that already exists; for example, you could design a jewelry box based on a template you find online if you change the dimensions or imagery.
For this assignment, export and post a PNG (not the Illustrator file) of your current version to #lasercutting. This is your first draft; you will have a chance to revise this design again later this week.
Guest presentation by Destin Black
-
-
(Mandiberg 12)
Due by by Friday at 11:59pm
Complete a finished design based on feedback received on your draft and post it to the location indicated by your instructor. You do not need to cut the work--just prepare the Illustrator file. Each lasercutter is slightly different, but here are some general guidelines you should follow:
* Set your stroke weight to .01mm or .01 inches.
* Use a red stroke (HSB 0°, 100%, 100% or RGB 255, 0, 0) for lines to be cut all the way through.
* Use a blue stroke (HSB 240°, 100%, 100% or RGB 0, 0, 255) for lines to be vector engraved--that is, only scored rather than cut through).
* Use a black fill for areas to be raster engraved--that is, abraded to a level below the surface without cutting all the way through. You should also expand the stroke around that area using Object > Expand.
* Any type you employ must be converted to paths and outlined by selecting the text and choosing Type > Create Outlines.
* While it's best practice to gather your shapes in layers, lasercutters don't like them--so save a copy of your Illustrator document for lasercutting in which you flatten all the layers by choosing Flatten Artwork from the Layers panel.
Be aware that some appearance properties can't be lasercut. To see how your project will look to a lasercutter, choose View > Outline or toggle Command-Y.
This is a letter grade.
Body symmetry and beauty. Mandberg 37: Gestalt; passive v. active negative space; balance v. imbalance; pattern and focus.
-
Due by by classtime Tuesday
Think of a company, political cause, or other purpose for which you'd like to design a logo. The organization represented by the logo can be fictitious or real. You do not need to design anything yet.
Guides, headlines v. body, color.
Smart guides
-
Due by by Friday at 11:59pm
In Illustrator, create 3 variations on a logo for a company, political cause, or other purpose. For this assignment, make them all black and white. They can be variations on the same design or completely different.
Post all three in a single PNG at least 1024 pixels wide in Slack to #logo-black-white. Your instructors will review your drafts in advance and discuss them in the lecture on Tuesday, after which the graded, color version will be due the following Friday.
See Thursday's assignment
color_meaning_in_corporate_logos_a.png
color_meaning_in_corporate_logos_b.png
Red v. blue states
Inuit v. Welsh
CMYK v RGB v HSL/HSB
Hue v. value v. saturation
Mandiberg 69
-
-
Due by by classtime Thursday
Add color to your logo, either to one of the original forms or a new design. You may create more than one variation if you like. Post the logo/s in a single PNG at least 1024 pixels wide in Slack to #logo-colored.
Due by by Friday at 11:59pm
Incorporate any feedback you received in class, and submit your final logo to be graded in Google Classroom. This is a letter grade.
Emergency icons [This parody of Homeland Security's emergency instructions exploits ambiguities in their choice of icons.]
"Thirty spokes share the wheel's hub
It is the central hole that is of use as a wheel
Shape clay into a vessel
It is the emptiness that is of use as a vessel"
--Lao Tzu, the Tao Te Ching.
Logo examples (FedEx)
Mother files versus exports
-
Due by by Friday at 11:59pm
Choose 1-3 statistics for which you want to design an infographic--a poster-like diagram that explains the statistic in simplified visual terms that the layer viewer can understand. Post this in Google Classroom per your TA's instructions. This is a letter grade.
-
You can do this easily by launching the Creative Cloud app.
Choose one of the two techniques demonstrated in the reading for today, then come to class with either:
A. Your drawing (on paper or screen) of your own original game sprite.
or
B. A rastered sprite (eg, GIF or PNG) that you found online and want to convert to vector.
This is a participation grade.
Web v. print resolution. Source media v. executables. Proprietary v. open.
In class you will follow the instructions in one of the two tutorials in today's reading to create a game sprite, either in raster (A) or vector (B) form.
Choose a photograph that would make a suitable silhouette for use with the Minimalist Movie Poster assignment due later this week. Using the technique shown in the previous lecture, use Photoshop to erase extraneous parts of the image and save. Then open the resulting image in Illustrator and use Live Trace to create a silhouette and fill it with a color of your choice (black is fine). You may choose to crop the silhouette further for use in your poster. Export the silhouette as a PNG and post it to #silhouette.
Diagonals in political posters
Microsoft designs the iPod package
To fix contours with distracting spikes and inflections, adjust Image Trace by reducing Paths and Corners and increasing Noise until you get a smoother outline.
Due by by classtime
Create a movie poster using the simple shapes and flat colors typical of the "Minimalist Movie Posters" shown in class. You should be able to create the entire poster in Illustrator but may use Photoshop as well if you like.
For the purposes of this assignment, you can assume the viewer already knows the movie. You are encouraged to include at least one silhouette but should not use the title or other words that give away the movie. Can you hint at the movie's title or content without being obvious? Try to go beyond knee-jerk ideas (eg, a Death Star or Darth Vader's silhouette) to more subtle hints (just the Death Star's dimple, or just the contour of Vader's helmet). Post your draft to #minimal-poster.
Your classmates will try to guess the movie from the visual hints in your poster.
-
Due Friday.
Include non-destructive editing; applies to HTML, Adobe Lightroom, Bridge, smart objects.
-
Your final poster can work from your Minimalist Poster design or start afresh, but should promote a real or hypothetical event, including but not limited to a political rally, music concert, art exhibition, club meeting, sports tryout, or college or fitness class. You can also choose the same event and text as another student as long as the posters are completely different visually. If you're having trouble thinking of an event, consult the UMaine or Maine Public calendars.
Post the following draft text to #event-poster-text in a single text snippet (language = Plain text):
Due by by Friday at 11:59pm
Submit your design, with any revisions based on in-class feedback, to Google as instructed by your TA. This is a participation grade.
You will post a draft of your final calendar in #event-poster by Thursday's class and submit your final version to Classroom by Friday at 11:59pm.
Raster v. vector
Pixels v. lines
Naturalism v. precision
Canvas v. Artboard
Select area v. object
Deselect by Command-D v. Command-Shift-A
Background locked v. editable
History v. Undo command
Clipping masks below v. above
Effect > Stylize...
Use Appearance panel to turn on and off
Text can be edited as type.
Text can be edited as shapes (expand first).
Background can be repositioned.
Use Direct Selection tool to fill letters with different gradients.
Easiest for adjusting the photo.
Easiest for repainting the mask.
-
Complete two of these online surveys to evaluate your instructor and Teaching Assistant:
Screen (72 dots per inch) versus print (300+ dots per inch)
Mandiberg 109
Take a photo with your phone and import it into Photoshop. Open the Window > Histogram panel. Observe what happens to the histogram and photo when you:
Add a Brightness/Contrast adjustment layer and move the sliders.
Add a Levels adjustment layer and move the slider for R, G, and B separately.
Add a Hue/Saturation adjustment layer and move the Saturation and Lightness sliders.
More in Mandiberg pp. 123-39.
-
Due by Thursday at classtime
Post a draft in #event-poster by Thursday's class and submit your final version to Classroom by Friday at classtime.
Due by Friday at 11:59pm
Your final poster should pair strong visual design with the typographic elements you posted to #event-poster-text.
-
Readings
Soldiers and prisoner
God and Adam in the Sistine chapel
-
-
Create a background image for a variable-width Web page using one of these methods:
Whichever background you choose, export the composite background as a PNG at least 1024 pixels wide. For a tile, make sure that the image shows the tile repeated vertically and horizontally in a seamless fashion. For a vignette, make sure the background shows through around the image. Post this to #web-background.
As instructed in the How To Prepare Your Computer for Web Projects screencast you watched earlier, set your preferences to show your file extensions. Then download and test-drive a simple code editor such as Sublime Text, TextWrangler, or another editor. You will be asked to open this code editor on your laptop in the next lecture class.
In groups, annotate everything wrong with the Web design for the main portal of MaineStreet.
One person from each group downloads the MaineStreet screenshot (or takes another) from #proof-failure and uploads it to ProofMe. Then the rest of the group adds comments and when done posts the ProofMe URL back to the conference.
Hick's law: With every additional choice increases the time required to take a decision.
Progressive disclosure: expanding menus
The rule of seven
Fitt's law: The time needed to move to a target is dependent upon the size of the target as well as the distance to the target.
Make clickable objects larger, eg divs surrounding links, text for radio buttons.
Microsoft Word 1.0, designed for screen resolutions of 640x480 pixels, had 20x20 toolbar buttons with 16x16 icons. Word 2003 kept these for resolutions as high as 1600x1200
Cluster navigational controls.
Prior to Windows 2000, Windows Start button had a single "dead" pixel along the left and bottom sides in which clicking didn't open the Start menu!
Breaking expectations: CyberAtlas
-
-
Alpha channels, adjustment layers, blend modes
Use Illustrator to design a mockup for your Web page that takes into account the navigational principles shown in class and incorporates the background you made (or a revision of it). Try to challenge yourself, eg by including at least 8 links or buttons and a short paragraph. You may also incorporate additional images. Post the result as a single PNG to web-layout-1.
Identify failures of Hicks or Fitt's laws
Adjust the colors of your layout and your images to reflect the principles of limited color palette discussed in class and in the badge. Post the revised mockup as a PNG to web-layout-2.
Identify failures of the Smallest Effective Difference.
<html>
<body>
<div id="logo">
logo
</div>
</body>
</html>
-
-
Open your wireframe in Illustrator and your HTML file in your code editor. Beginning in Illustrator, make sure your units are set to pixels. Then use the Selection tool click on each rectangle one-by-one and note the x (top), y (left), w (width), and h (height) in the ribbon at top.
For each rectangle, open your code editor and click inside the <style> tags. Then type the name of the rectangle's id, a set of braces { }, and then the dimensions between them--like this example:
<html>
<style>
#logo {
top: 280px ;
left: 540px ;
width: 226px ;
height: 146px ;
}
</style>
<body>
<div id="logo">
logo
</div>
</body>
</html>
Round any decimals to the nearest whole number. Note the colon (:) after the dimension and the semicolon (;) after each value. There is no space between the number and px.
Finally, add a line at the bottom assigning a basic background color (red, orange, yellow, green, blue, purple) to each rectangle, eg:
<html>
<style>
#logo {
top: 280px ;
left: 540px ;
width: 226px ;
height: 146px ;
background-color: yellow ;
}
</style>
<body>
<div id="logo">
logo
</div>
</body>
</html>
When you're done, open the HTML document in a browser and you should see something like this. You will use this document in the next class.
-
Due by by Friday at 11:59pm
Take into account any feedback in adjusting the HTML and CSS for your Web design layout. Then make sure the HTML page and all your associated images are in your lastname_web_design folder. Then compress the entire folder into a single .zip file and upload it as instructed by your TA to Google.
Assemble any images for your Web page--logos, photos, backgrounds--in a single folder called lastname_web_design along with the HTML file created in the lab. For each div on the page, add the image filename to its style, as in this example:
<html>
<style>
#logo {
top: 280px ;
left: 540px ;
width: 226px ;
height: 146px ;
background-color: yellow ;
background-image: url( "my_logo.png" ) ;
}
</style>
<body>
<div id="logo">
logo
</div>
</body>
</html>
Load the HTML file in a browser and make sure your images appear where you expect them.
-
Create a sample composition from two photos using at least one technique from each stage:
-
-
Taking advantage of the tips shown in the "Select/Erase/Insert a Shape in Photoshop" tutorials, practice selecting, erasing, and inserting parts of photos using your own or those provided by your TA.
Due by by Friday at 11:59pm
Create a meme from two or more photographs. Your goals are to:
1. Subtract a complex image (such as a person) from a photograph in such a way that you can't tell the image was originally there.
and
2. Insert another complex image (such as a person) to that photograph in a convincing and seamless way.
Your meme may or may not use text. Post the result as a JPEG to #meme by Thursday for review.
-
-
Due by by Friday at 11:59pm