HI!
  • Home
    • 1.1 HTML
    • 1.2 Intro to CSS >
      • Classes and Ids for Cats
    • 1.3 Web Typography
    • 1.4 CSS Box Model, Display
    • TIPS: Exceptional CSS
    • 1.5 Position and Backgrounds >
      • Advanced Background Power
    • 1.5 Hover States on Buttons >
      • TIPS on 'About Me'
    • 1.6 Responsive Web Development
    • 1.7 Flexbox
    • 1.8 Javascript Basics 1
    • 1.8 JavaScript Basics 2
    • JavaScript Playground
    • JQuery Library >
      • JQuery Basics

UX Interactive Media II
Spring 2020
2:30pm-6:50pm ​(tardy after 2:40pm)

Questions?
Write me at angelawyman@me.com or awyman@pratt.edu. 
​
Our slack channel is: UX Interactive 2 . Check your email for an invite.

List of Code Projects:
If your files are large I suggest sending then through wetransfer.com
  • HTML Poem (email screengrab)
  • 404 page (email screengrab)
  • About Me with social icons (send code)
  • Aesop's Fables (send code)
  • Mid-term Pop Quizzes - quiz is on google forms
  • CSS Positioning 3
​Final Project Covid-19 App
  • Research and Ideation
  • Roughs and Wireframes
  • Asset Building and Visual Direction 
  • Prototyping, Adobe XD, Interactions and Transitions
  • Testing, Fine Tuning, 
  • Final Presentations
Student Learning Outcomes:
By the end of this course you will be able to: 

  • Apply a responsive design approach to creating apps for a range of devices and platforms 
  • Build an information architecture which can be easily maintained and updated. 
  • Use site analytics and social integration to drive development. 
  • Display standard business practices and explore methods of monetization.​
ux_syllabus_v200123.pdf
File Size: 231 kb
File Type: pdf
Download File


 Class Notes


5/7 #15 Final Prototype and PDF 
2:30 Join URL: https://pratt.zoom.us/j/194576996

LAST CLASS WRAPUP
​Google doc whiteboarding exercise we conducted
https://docs.google.com/presentation/d/1u1YlSfR0Xd-WdEfQPYZxDjyEzsS7A0EhPz0D-eMOKsU/edit

Definitive Guide to Setting Up User Testing
​http://sensible.com/downloads-rsme.html

Usability Testing. Write tasks. Observe a user. Write down observations. https://forms.gle/wHi3TwjXfZDK8xsj7

​Conduct a critique.  https://forms.gle/ZnfLFyxv6nBgeECE7
NEWS Apple and Google are the two companies responsible for the software on more than 99% of phones on the planet, and eight out of 10 Americans own a smartphone. Apps built directly into iOS and Android,  will dramatically increase the reach of the public health authorities. When Apple and Google release their system for building exposure notifications into their own smartphones, it will be the most significant development globally. 
Contact tracing is a form of surveillance that can be abused by companies or governments.  It has raised new concerns about surveillance and privacy, and about the trade-offs between health, community well-being, and individual rights. Medical surveillance needs to make privacy a priority by building decentralized systems that make malicious surveillance difficult while still also providing key data to public health authorities. Success is highly reliant on the actions of governments themselves. 
Covid Tracer Project is a list of all proosed apps
https://www.technologyreview.com/2020/05/07/1001354/how-to-submit-a-change-to-the-covid-tracing-tracker-project/?truid=5232b59c8076b40115db6a498db34c26&utm_source=the_download&utm_medium=email&utm_campaign=the_download.unpaid.engagement&utm_content=05-08-2020
FINAL PRESENTATION DUE 5-14
Class Zoom recording:
https://pratt.zoom.us/rec/share/_dZrI6OhpyRIQYXc80jAAKsLAKPleaa80CEWrvULyRl3zSWAY-tnNrl9nTiDiPUB Password: 9B.3X.?I


1.Take screenshots of all your work this semester. Assemble in either Google Slides or Keynote. Add notations where needed. Submit as Final PDF.
Polished example below from a similar class (Coding1)
coding_i_presentation_example.pdf.zip
File Size: 3834 kb
File Type: zip
Download File


4/30 #14 Testing
​
2:30 Join URL: https://pratt.zoom.us/j/194576996

Here is an example of a clickable prototype done in
Marvel https://marvelapp.com/32i3j18/screen/30826528  (Links to an external site.)

Resources Feel free to use an UI kit to get some symbols and icons. UI KIts: What is a UI KIt and Why Should I use one? https://www.enginess.io/insights/whats-ui-kit-use-one (Links to an external site.)
  • https://www.xdguru.com/free-xd-ui-kits/ (Links to an external site.)
  • https://xd.adobe.com/ideas/inspiration/semantic-ui-kit-xd-icons-templates-design-system/ (Links to an external site.)
  • https://www.uplabs.com/

​
Picture
HOMEWORK DUE 5-7
Class Zoom recording:
https://pratt.zoom.us/rec/share/6PEqD_b9xjhLZKPuyF7kdaslFLXlX6a8gHcervALnUacA1BmNx2DaXIlcQVmhJtU Password: 5l&D7!?U



1. Refine your prototype. Cover all the main screens and interactions. Link your screens in Adobe XD prototype. Be sure to have at least 5-6 screens of different types. If your app is super simple you might have a landing page, a sign-in page, a profile page, a main page, a sub-main page, a sub-sub main page. Once you link your app pages try out your app on your phone, adjust and tweak til the user flow is excellent.

​Share your URL.

Feel free to use an UI kit to get some symbols and icons.

If for any reason you have problems with Adobe XD, alternative programs include Figma, Sketch App and Miro

4/23 #13 Prototypes
2:30 Join URL: https://pratt.zoom.us/j/194576996

Picture
How We Feel  a new app from Pinterest
​Report symptoms-  Stop Covid - Donate a meal
https://apps.apple.com/app/how-we-feel/id1503942026?ls=1

Ada Lovelace Report app recommendations for Developers on:
  • Symptom Tracing
  • Digital Contact Tracing
  • Digital Immunity Certification

    Tracking Big Data privacy and data tracking

Color Palettes

consider usability, color blindness, contrasts
  • Adobe Color let's you see colors that look in combination with others, besides the access to color libraries you have through your palette library in Photoshop, Illustrator, etc.
  • www.color-hex.com for picking ranges
  • 0 to 255 is good for selecting subtle shades of differences like you might use on a button on hover
  • 147 Colors www.colors.commutercreative.com/
  • Colorzilla for gradients​

Imagery

  • thestocks.im portal to all the other free stock photo places
  • unsplash.com one of my favorites for photos
  • the noun project every icon ever

Typography

  • You get access to the adobe library of fonts with your Creative Cloud subscription.
  • www.googlefonts.com is our go-to stop for webfonts, you can download fonts from their library to use , too.
  • the league of moveable type provides popular fonts for free
  • www.fonts.com
  • ​www.fontsquirrel.com some oddball fonts for free
  • SkyFonts helps you keep your Adobe fonts organized

Photoshop

Command M for curves
Command U for hue

Photoshop Tips and Tricks 1. Levels, Saturation, Gradients
Photoshop Tips and Tricks: 2. Duotones

​If you are a beginner start with the first two links for tutorials. If you are an intermediate and want to try out some new effects, the last two links are for working with masks and how to create a split image. You can do a lot of looking at the Adobe website and online for other tricks and tips to Photoshop:
  • START HERE: Get to know Photoshop, Change the image size, Work with layers https://helpx.adobe.com/photoshop/how-to/ps-basics-fundamentals.html (Links to an external site.)
  • BEGINNERS https://helpx.adobe.com/photoshop/how-to/make-poster.html (Links to an external site.)
  •  (Links to an external site.)INTERMEDIATE: CLIP MASK WITH TEXT https://helpx.adobe.com/photoshop/how-to/photoshop-for-beginners.html (Links to an external site.)
  • INTERMEDIATE: HOW TO MAKE A SPLIT IMAGE https://create.adobe.com/2020/02/21/how-to-make-split-color-photo-in-adobe-photoshop.html
HOMEWORK DUE 4-30
Zoom recording of class:
https://pratt.zoom.us/rec/share/_MdYIrD01mBLGoGWr3HPaLQrNaboT6a80CUZ8voOyRqg5A576RBFwO5fYkVI5dL3Password: 1s.3J@13


1. Create a Style Guide in Adobe XD.  This should include a typeface for your headings, a typeface for your body copy. A consistent approach to photography. A 3-5 paint chip palette.  What color are your buttons? Your buttons on hover? Are the corners rounded?
​Do you use social icons? Do you use illustrations? PDF on Style Guides.
Look at the PDF on Style Guides Please read for further details and examples. 
Your style guide must include:
  • Your Logotype- this is the name of your app and you are making the decision what that should look like for your branding. You can add a symbol to it if you want. Example: NAME OF MY COMPANY🦋 [All uppercase, bold black sans serif typeface, with a blue butterfly symbol]
  • Main Heading this is used for Headlines (large title). Font family name and font size. Go shopping! Choose your typefaces: you can use what is packed with your computer, what you get with fonts.adobe.com or take a look at Google fonts, and /or font squirrel.  
  • Sub Heading (title 2)Font family name and font size.
  • Paragraph or Body Copy, usually 14px for mobile, 16px for web (apple has this as 17px)Font family name and font size.
  • Paint Chips Palette (3-5 colors) Main, secondary, tertiary.
  • Button States (2) hover and rest state. Do you reverse colors on hover, switch to a border for your button? are your buttons rounded? Does the button stand out as a Call to Action?
  • Social Media Icon set - Go shopping! Choose from free icons here, or if you don't see any you like google search or take a look at the Noun Project. https://buffer.com/library/social-media-icons. (Links to an external site.)
  • Notations on Art Direction: Imagery and Photography..
    ​Are you using kid friendly rounded friendly illustrations? Super saturated polarized Photography? Shots of only people on beaches. How do you indicate a caption for a photo?
  • Details: these are specific to your app. Directions for playing a video? How do you want your search bar to appear? Gamification badges? Add any thoughts on the overall style that don't fall under the other categories. 
HOW TO MAKE A STYLE GUIDE IN ADOBE XD
https://www.youtube.com/watch?v=SaNTNNI7HJ4 (Links to an external site.)

2. Let's start your app. Create an artboard for your first page and create a LOGIN or SIGNUP pages.
Follow the 4 minute tutorial below ( or freestyle if you are comfortable with Adobe XD). Project files linked in the description on youtube.
https://www.youtube.com/watch?v=dRkYLs2aTdA (Links to an external site.)


RESOURCES
Not required reading. Human Interaction Guidelines for iOS. (Links to an external site.) There is a section in Visual Design that goes over typography sizes (under the icon section). This is a bit dense,  but will provide you with lots of details on accessibility, usability, responsive web design, etc. Fairly standard typography for mobile below:

Do these tutorials if you didn't get to them last week!!
Download Adobe XD for your computer and for your mobile phone. Become familiar with the interface and the design view and prototype view. We begin with creating pages and artboards in design view and then we connect them and define interactions in the prototype.
Read or watch the following beginner tutorials:
  • This article goes over the beginner's tutorial in detail: https://medium.com/drill/learning-the-basics-of-adobe-xd-in-one-hour-3537f3ac02a3 (Links to an external site.)
  • XD Get Started tutorials straight from Adobe(Get Started 4 min, Layout and design 20 min, Create and Preview 8 min): https://helpx.adobe.com/xd/tutorials.html (Links to an external site.)
  • Optional reading, Adobe XD manual https://www.xdguru.com/adobe-xd-guide/

STYLE GUIDE

H1 Main Title 
Font-family: Droid Sans Bold; 
Font-size: 30px/34px leading
Color: teal, hex##008080;
Text-transform: capitalize;
Text-align: left;


​H4 HEADING Sub title
Font-family: Droid Sans Bold;
Font-size: 16px/30px;
Letter-spacing: 1px;
Text-transform: uppercase;
Text-align: left

P for Paragraphs
​Font name: Glegoo
Color: black 
18px/ 20px leading
​Short columns, flush left

Rule Lines
1px silvergrey 
Art Direction: Icons
​Friendly, line art with tints
Picture
Picture
Art Direction: Social Media Icons
Solid circles in teal
Picture
Palette 
Main Color
Second Color
Tertiary Color
Button On Hover
Button Styling
Font Family, ALL CAPS
​Black text, Clear background
Centered
1px border, squared
​:hover grey tint
Art Direction: Images
Highly posterized, saturated colors, closely cropped, lots of faces
Caption Text,: Glegoo, Centered Italic, 9px/10px, Black.
​Always place above the image
Picture
Overall looking for an 80's Peewee Memphis highly patterned super saturated Vibe
Picture
Picture

4/16 #12 Assets and Art Direction for your App
​
2:30 Join URL: https://pratt.zoom.us/j/194576996


EVENT NEWS FOR GAME DESIGNERS
​Field Trip Online Register here:  https://withfriends.co/event/4514157/wordhack_online_w_paolo_pedercini_and_everest_pipkin

Let's gather ONLINE with the Babycastles Twitch stream (twitch.tv/babycastles) for talks and performances from:
PAOLO PEDERCINI (molleindustria.org)
EVEREST PIPKIN (everest-pipkin.com)
Zoom Recording
https://pratt.zoom.us/rec/share/4PFXE7zw701LTLOKsVDZQI4bFJ2ieaa80yYY8qAOykwwCoU-rlXPjQJpCL2hmRv0 (Access Password: f5*%..o&) 
HOMEWORK DUE 4-23
1. List your ten best names for your app along with only a one to three sentence description that works for all the names. This should reflect your a positioning statement: answer who the app is for, how it will help, service or entertain others, how you do that and why this is important. Yes, ten names is a stretch, but that will help you break through to better ideas, in practice we will come up with a list of 50-100. Example: "Covid Booty", "I Want That, Give Me This",  "I Got That", "Sharing is Caring", "Helpful Hands", "Point A to B", "X Marks the Covid", "Community Pot", 'Stone Soup" is a bartering app for people who need ingredients, by helping them trade and geocache items, with others nearby in this time of crisis. ​

2. USERFLOW: Submit as PDF. Include your name in the title of the file. First, read this how-to, and follow the pictorial conventions for creating 'decision diamonds' and 'action circles', : https://careerfoundry.com/en/blog/ux-design/how-to-create-a-user-flow/  (Links to an external site.)
​
This also provides a more indepth guide" https://www.lucidchart.com/pages/decision-tree
User flows are diagrams that display the complete path a user takes when using a product. What information needs to be provided in order for the user to effortlessly interact with your product? The user flow lays out the user's movement through the product, mapping out each and every step the user takes—from entry point right through to the final interaction. Indicate what happens when a user opens your app, be sure to cover the main functions and objectives.
You can create this in a program of your choice (such as Illustrator, Pages, InDesign, JustInMInd, Sketch, Google? and be sure to take a look at LucidChart.com, ) OR start to work in Adobe XD. 

3. Familiarize yourself with Adobe XD. This will be the software we use for our final product. If you didn't do your wireframes last week, you might try them doing them this week in Adobe XD.

Adobe XD tutorials. Download Adobe XD for your computer and for your mobile phone. Become familiar with the interface and the design view and prototype view. We begin with creating pages and artboards in design view and then we connect them and define interactions in the prototype.
Read or watch the following beginner tutorials:
  • This article goes over the beginner's tutorial in detail: https://medium.com/drill/learning-the-basics-of-adobe-xd-in-one-hour-3537f3ac02a3 (Links to an external site.)
  • XD Get Started tutorials straight from Adobe(Get Started 4 min, Layout and design 20 min, Create and Preview 8 min): https://helpx.adobe.com/xd/tutorials.html (Links to an external site.)
  • Optional reading, Adobe XD manual https://www.xdguru.com/adobe-xd-guide/ (Links to an external site.)​

4/9 #11 Wireframes 
2:30 Join URL: https://pratt.zoom.us/j/194576996

App Ideas Winners

Work on a one sentence description of how you describe your app. See positioning statement below. This should answer who? (who are you making this app for) what? (what does the app allow you to do) how? (how does it do this) and why? (what emotional impact does this help you create?)

I deliberately wrote short descriptions below - you can do better!

You don't have to choose your winner, and in fact you may find you KNOW you don't want to do your winner now, just don't deliberate anymore, select your topic, as we must move forward.
Keep in mind creative thinking once you come up with an idea, see if you can come up with an opposite- this is called divergent thinking and allows you to chart new territories. 

Claire - a keyword pairing app,

Candy - digital job hunting app

​Jamie - delivery services

Jean Carlo - slow (and possibly illegal) hobbies for indoor times

Bryan - art expertise with videos

Rei - educational app for kids and parents about Covid-19, simple and fun, dispelling any misinformation from places like Facebook

Barry - forthcoming
Picture
Click for larger image
Resources

What Is the Discovery Phase of the UX Process And Why You Should NEVER EVER Skip It [article]

How to Create Your First Wireframe in 6 steps [article and video]

​16 Excellent free wireframe [links]
App Examples

"Share your stories about Covid-19" This functions like an app, from pinkvilla. Organized stories into these categories: Childcare, Petcare, Friends and Family, Dating, Work, Supplies.
Simple interaction: Tell your story/Read a story.

​Here is an example of an app released this week:  https://openforbusiness.nyc/

Picture
The two articles discuss contact tracing- these images are from other sources
Picture
Zoom Recording
https://pratt.zoom.us/rec/share/tJArHqHq_E5LBZXwsF_ORJMiLonhX6a81SUervpcyBl3RglC6lr7TPH0qQJA1jAr ​
audio only:   https://pratt.zoom.us/rec/share/tJArHqHq_E5LBZXwsF_ORJMiLonhX6a81SUervpcyBl3RglC6lr7TPH0qQJA1jAr
​
Handout
11_sitemaps_userflows_wireframe_examples.pdf
File Size: 323 kb
File Type: pdf
Download File

HOMEWORK DUE 4-16
Specifications: Choose the size of the phone you own. If you don't own a smartphone then make your wireframes for an iPhone 7. 750 x 1334 px , 326 ppi.
  • You can find the width and height in pixels of any phone here or Google: (Links to an external site.) 
  • Look at the type of screens, such as log in, profile, home, splash, etc here. (Links to an external site.)

​1.  Come up with a positioning statement for your app. this should answer who? (who are you making this app for) what? (what does the app allow you to do) how? (how does it do this)  and why? (what emotional impact does this help you create?)

2. Create low fidelity wireframes for your key screens: for example: landing page=>categories=>products=>shopping cart=>profile=>popup modal. You can try to find a preexisting UI kit to use. Include at least 6-10 screens. If you are hand drawing take shots with your camera and see if you can assemble into a PDF (try your best- I know home-schooling has limited resources). Send a PDF to my email.
Hand drawn Wireframes Examples (click for larger)
Lo Fidelity Wireframes done digitally (click for larger images)
Picture
The left is a Wireframe, the right: is called either a Mockup or Prototype

4/2 #10 UX Design Thinking: Brainstorming 
​2:30 Join URL: https://pratt.zoom.us/j/194576996

Picture
Some Covid-19 Apps and Websites
​
Consumers spent record $23.4 billion on apps in Q1 2020, thanks to being stuck indoors

Here is an example of an app released this week:  https://openforbusiness.nyc/

Make masks:
stitchroom.com
​

Help others:
invisiblehands.com

Self reporting App-​How We Feel is a mobile app available for both iOS and Android, which is free to download, and which is designed to make it very easy to self-report whether or not they feel well — and if they’re feeling unwell, what symptoms they’re experiencing. It also asks for information about whether or not you’ve been tested for COVID-19, and whether you’re in self-isolation, and for how long.
https://tcrn.ch/2URZlmM


​Art and Data Driven http://getwellsoon.labr.io/
​
"We tend to place illness and revolution opposite each other on the spectrum of action: illness is on the end of inaction, passivity, and surrender, while revolution is on the end of movement, surging and agitating.  Data & Society 2016-2017 Fellow Tega Brain and Sam Lavigne's project, Get Well Soon!


Zoom Recording
Start Time : Apr 2, 2020 02:31 PM (2:10 min appx)
Meeting Recording:
https://pratt.zoom.us/rec/share/15RkHarCrDlIQY2W1hDVf547RrndX6a8gyBPrPQPy0nAVAJcq4vQS6CcMt5O-QmH
Keynote on UX
HOMEWORK DUE 4-9
1. Submit a PDF to my email that includes your 3 ideas, and 3 sub-ideas that have social impact. These should be based on your research, state a problem and the app based solution. Generate lots of ideas and brainstorm before settling. Include in your PDF any preparatory sketches or screen grabs of research.

1. Research: you want to canvas a broad spectrum of news from highly personal to highly public and universal. 
  • Be curious. This is an ongoing challenge from United Nations https://www.talenthouse.com/i/united-nations-global-call-out-to-creatives-help-stop-the-spread-of-covid-19
  • You can join a local community to research problems, Greenpoint Community Strong  that's my neighborhood - but try to find one for your area,
  • you can read the paper online
  • talk and listen to friends
  • look at government sites like ww.nyc.gov , nyc service.org (Links to an external site.),  look at civic organizations.
This is a link to further resources put together by my running group and a Survival Guide to Cabin Fever  from USCalifornia.  Gather facts: this buzzfeed article has some great charts.

2. Research Google Trends and Google keywords. While I'm aware that a pandemic is skewing the results, nevertheless, if you go through the workflow steps to understand how this is done. it may be useful. Read this article for how-tos if you need more guidance: Market Research for App ideas (Links to an external site.) If you want to show your results, take a screengrab COMMAND SHIFT 3.
​
3. Research Your Competition - Go ahead and start downloading apps and looking at competitor ideas or similar apps in the past for research. See how they handle similar problems, notice what was a good approach and what you felt was bad, intrusive, clunky, laborious, unnecessary. This will change your ideas and approaches and add depth and insight to your app that you can share.

3/19 #9 Study Week 2:30 Join URL: https://zoom.us/j/194118501

​Come say hi. This week is optional so we can try out tools and get comfortable.
If you can’t attend send me an email so I can mark you present for this week.
I prefer you all go video please.
Let’s catch up. Bring your pets.

SPRING BREAK


3/12 #8 Midterm Class Cancelled

Have a great Spring Break!!
HOMEWORK DUE 3-26
  1. Complete 3 positioning homework
  2. Take quiz.
  3. Study JavaScript from Solo Learn Modules 1-3. 
  4. Check in on our Slack channel here, you may need an invite: https://prattuiuxinte-uns1266.slack.com/home

3/5 #7 Responsive Design

REVIEW:

* universal selector

div, p, h2 
comma separate grouped selectors

div + p this must have p IMMEDIATELY after div to apply

div > p any paragraph inside of any parent div

.mobile  is a class selector

#scooter is an id selector

Can I use an id selector AND a class selector on an element? 
Picture
Review for MIDTERM these selectors
https://placeholder.com/
Picture
Picture
KEYNOTE
07_ux__responsive_web_design_mobile.pdf
File Size: 25066 kb
File Type: pdf
Download File

IN-CLASS EXERCISE
Keep in mind you will need to CLEAR any elements that happen after FLOAT, especially the footer. You will see the html code for this commented out. Uncomment the code to use CLEARFIX. 

Once you have the layout complete, get the media query to work. ​
yolk-student-2020.zip
File Size: 5191 kb
File Type: zip
Download File

HOMEWORK DUE 3-26
1. Review MIDTERM Quiz notes.
​2. CSS Positioning. Recreate 3 CSS Layouts as shown in the file below.
homework_css_positioning_three_versions.pdf
File Size: 74 kb
File Type: pdf
Download File


2/27 #6  Flexbox 

  • pop HTML quiz preparation
  • CSS quiz preparation following week
  • Flexbox Froggy
  • Flexbox Quiz https://kaitlynbro.github.io/flexbox-quiz/?

How do I see window size in Chrome?
Open Chrome Dev tools(F12 or Control Click)
While you are resizing, notice the top right corner displays a small notification showing the current window size which will disappear shortly.

For small measuring:
Mac built-in For screenshots and measuring select a region of the screen by pressing Command–Shift–4 and then hold the left mouse button down while dragging the mouse cursor on the screen. As long as you keep the mouse button pressed, you will be able to see the pixel size of your selection and use it to measure things on the screen.

Try out a chrome extension:
to help with picking colors. Also find one that resizes windows and resolutions.


600K users - Window Resizer

100K users -  Resolution Test

https://browsersize.com/

2000K users-  Colorzilla Eyedropper and Gradient tool

20K users - Pixel measurer and color dropper in one 
c1.9_flexbox_flowchart_handout.pdf
File Size: 958 kb
File Type: pdf
Download File

1_assignment-flexbox-navbar.zip
File Size: 95 kb
File Type: zip
Download File

2_starter_code_coffee_shoppe.zip
File Size: 4605 kb
File Type: zip
Download File

HOMEWORK DUE 3-5
1. Work through the two flexbox assignments in the above files. The answer for the first assignment, "blue nav bar" is here: ​https://codepen.io/angela/pen/abOWwXQ
Second assignment, "coffee shop", has the code done but you will need to add a media query. If you want more a challenge, then add more mediaqueries, and play with flex: grow.
2. Finish up Aesop's fables. Submit next week, 3-5-2020.

2/20 #5 Backgrounds and Gradients

  • CSSmatic www.cssmatic.com/ for gradients

  • CSS Filters bow tos
    https://css-tricks.com/almanac/properties/f/filter/

  • CSS Blender to preview background blend mode. Remember to add a background color!
    https://www.sarasoueidan.com/demos/css-blender/

  • Backgtound Blend Mode
    ​https://tympanus.net/codrops/css_reference/background-blend-mode/
Picture
HANDOUTS
1.5ux_keynote_backgrounds_gradients_copy.key.zip
File Size: 12452 kb
File Type: zip
Download File

c1.6_filters.pdf
File Size: 216 kb
File Type: pdf
Download File

HOMEWORK DUE 2/27
1. Due  2/27: your about me page. This is one of your projects. Place all your code in one folder, compress the folder, give it your name, example: "wyman_angela_about_me.zip"  and then send to me. 
Besides the code files, take a screenshot COMMAND SHIFT 3. Submit the screenshot, too - this will be used for the Associate Dept examples of student work.


If your file is large, then send through wetransfer.com. I don't accept google drive files. If you are stuck on the code, we can review, and go over any changes needed in class next week.
Final submission will be due 2/27.
​
2. On your fixed and scrolling backgrounds of Aesop's files try out some CSS filters and background blend modes. Be sure to include the moral of the story and indicate which Google fonts you used. For references see the class website here.

2/13 #4 Fixed & Scroll Background Attachment Property

IN-CLASS EXERCISE
Follow the prompts in the code below to experience fixed, relative and absolute positioning. 
position_three_code_examples.zip
File Size: 5 kb
File Type: zip
Download File

IN-CLASS EXERCISE

About Me (squirrel) site

How to here: https://www.codingoneandtwo.com/tips-on-about-me.html

For font awesome icons take a look at the handout, listed to the right. YOu can also follow the excellent tutorial on the W3 Schools website:   https://www.w3schools.com/icons/fontawesome_icons_intro.asp
​
squirrel-site-start.zip
File Size: 8705 kb
File Type: zip
Download File

HANDOUT
fontawesome_icons.pdf
File Size: 68 kb
File Type: pdf
Download File

handout_centering_hacks.pdf
File Size: 140 kb
File Type: pdf
Download File

handout_displayandposition.pdf
File Size: 106 kb
File Type: pdf
Download File

handout_transitions_buttons.pdf
File Size: 82 kb
File Type: pdf
Download File

handout_buttons.pdf
File Size: 110 kb
File Type: pdf
Download File

HOMEWORK DUE 2/20
1. Due in two weeks, 2/27: your about me page. This is one of your projects. Place all your code in one folder, compress the folder, give it your name, example: "wyman_angela_about_me.zip"  and then send to me.

If your file is large, then send through wetransfer.com. I don't accept google drive files. If you are stuck on the code, we can review, and go over any changes needed in class next week.
Final submission will be due 2/27.

2. Due next week 2/20. Go here to the site below,  download the code. Swap out the background colors, find new photos to use on unsplash.com, maybe change some text. Basically, get more exposure to looking at the code, reading it and making small changes without breaking it. 
Bring your finished code to class and we will work with it to try out some new effects.

​https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

Click on download, that will take you to gitub, click on green button download as zip button. (see below)

You will be working primarily with the style.css file. (ignore Sass the .scss file)

This looks like one line of code, so run it through a unminifier, Here: https://unminify.com/

Picture

2/6 #3 Box Model

Take the box model challenge!

Learn to code in 2020- working with the box model  for padding , margins, and borders. Also notice the new element "section"!

Rei sent in a link to a negative margins article:
https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/
KEYNOTE
c1.3_keynote_boxmode_currentl.pdf
File Size: 3007 kb
File Type: pdf
Download File

CLASS EXERCISE
Match the mockup.
2019_border-student-version.zip
File Size: 4146 kb
File Type: zip
Download File

Little boxes
2020-little-boxes-student.zip
File Size: 309 kb
File Type: zip
Download File

Use id and classes
4__keynote_fixed_absolute_positon_cssreset.pdf
File Size: 452 kb
File Type: pdf
Download File

HANDOUT
c1.3_handout_box_model.pdf.zip
File Size: 132 kb
File Type: zip
Download File

handout_3_box_positioning.png.zip
File Size: 515 kb
File Type: zip
Download File

handout_3_specifishity.pdf
File Size: 979 kb
File Type: pdf
Download File

HOMEWORK DUE 2/13
​1. Review pages 1-17 of Learn CSS Layout, it is mainly diagrams and graphics. 
​
2. 
Homework: Recreate from scratch the layout shown on page 12 (shown below). Once that is finished see if you can add small images to each of the boxes. Did you break your layout? Did you use absolute and relative position combined?
​http://learnlayout.com/float-layout.html
Picture

1/30 #2 CSS Review

CLASS NOTES
Up next is learning the box model and how to apply classes.
KEYNOTE
ux2_2_intro_to_css_link_syntax_cascade_directoried.pdf
File Size: 8136 kb
File Type: pdf
Download File

HOMEWORK DUE 2/6
Easy week.
1. Finish your 404 page. Make sure you have a link to a website, a link to an image, a perfect full background, google fonts. 
​2. Complete the HTML challenge below "2 exercise newyear-resolution.zip". 
(we will do the more advanced challenge in class as it introduces a new concept)
3. Memorize these 10 CSS basic properties: background-color, color, font-family, font-size,  font-weight, line-height, letter-spacing, text-transform, text-align,  and text-decoration. 

You are always welcome to get more practise in by doing the SOLO Learn tutorials on CSS here: https://www.sololearn.com/Course/CSS/
ux2_2_exercise-_newyear-resolution.zip
File Size: 1558 kb
File Type: zip
Download File


1/23 #1 Revisit HTML and UX Design Cycle

CLASS NOTES
Picture
The Design Cycle from D School Stanford
  • introductions/ student questionnaire
  • break times, print shop, vending machines, 
  • website, syllabus: i'm sick, you're sick/tardy/ late policies
  • how to learn coding? online, tutorials, boot camp, school, meetups. why learn it?
  • click site- clickclickclick.click
  • html entities for those ampersands, trademarks, etc
Picture
John Maeda Design Report 2018 Computational Design

​LEARNING RESOURCES
​
  • Sublime Text - our code editor
  • Learn to Code HTML & CSS – Tutorials by Shay Howe​
  • Jon Duckett's book on HTML and CSS., and Javascript JQuery book
  • For basic questions and demos: w3 schools. For more advance problems go to stack overflow.​ For accurate answers and more detailed explanations go to Mozilla Developers Network. And there is always CSS Tricks and CoDrops tutorials. 
  • For royalty free images for backgrounds these are great: unsplash.com/ and  thestocks.im  a portal ​
  • More advanced students: install package control for Sublime. Instructions here. Then install Live Reload to facilitate automatic refreshing. 
Picture
NOTE: IF you get an error like the above, while using SublimeText it is most likely because you moved your folders/directories location while working on the file. 
EASIEST SOLUTION Use 'File>SAVE AS...' to save your file again to the new location.

NOTE: If you are having troubles with your sign-in to the computer please call The Pratt Information Technology Service Desk, 718.636.3765 or email at services@pratt.edu. 
MUSEUM MEMBERSHIP Because of our memberships at the following museums, student, faculty and staff may obtain free admission to:
  • Brooklyn Museum
  • Brooklyn Botanic Gardens
  • The Cooper-Hewitt 
  • The Frick Collection
  • The Guggenheim Museum (+3)
  • The New Museum
  • Museum of Arts and Design (MAD) and
  • The Whitney Museum of American Art.
Please bring valid ID to obtain entry.
KEYNOTE
keynote-html-css-review.pdf
File Size: 1770 kb
File Type: pdf
Download File

CLASS EXERCISE
handout_html.pdf
File Size: 123 kb
File Type: pdf
Download File

handout_css_typography.pdf
File Size: 82 kb
File Type: pdf
Download File

handout_box_model.pdf
File Size: 155 kb
File Type: pdf
Download File

ux_student_questionnaire.pages.pdf
File Size: 57 kb
File Type: pdf
Download File

HOMEWORK
ux_poem_html_typography.txt_1.zip
File Size: 1 kb
File Type: zip
Download File

You will bring to class next time:
  • your finished poem
  • your handouts CSS stylesheet

1. Download and work through the homework packet Assignment: typeset a poem. Try out a variety of tags.
Bonus Exercise: finish the missing tags sheet included with the homework files. 

Advanced Challenge: try doing a full page background image. We will cover this in next class. See here on how-tos:  https://css-tricks.com/perfect-full-page-background-image/  For royalty free images for backgrounds these are great: unsplash.com/ and thestocks.im  a portal ​for images.  Keep in mind connotation vs denotation when choosing a visual direction for your work.


​2. Memorize the HTML tags below. Try out span for extra dazzle! Look for your img tag near the frog! 
Read this article to review the top ten most common tags to use. Don't see any you like? You can also check on w3 schools here for a complete list of tags, demos and definitions. <h1> - <h6> Headings, <p> Paragraph, <a> Anchor, <ul> & <li> Unordered List & List Item,<hr/> Horizontal Rule, <img> Image, <div> Divider block aka Box and <span> Span, 
<blockquote> Blockquote, 
​
​3.  
Solo Learn  Lessons until inline after tables.  https://www.sololearn.com/Course/HTML/ ​
​
4. Bring in an example of a good website and a bad website.
  • Home
    • 1.1 HTML
    • 1.2 Intro to CSS >
      • Classes and Ids for Cats
    • 1.3 Web Typography
    • 1.4 CSS Box Model, Display
    • TIPS: Exceptional CSS
    • 1.5 Position and Backgrounds >
      • Advanced Background Power
    • 1.5 Hover States on Buttons >
      • TIPS on 'About Me'
    • 1.6 Responsive Web Development
    • 1.7 Flexbox
    • 1.8 Javascript Basics 1
    • 1.8 JavaScript Basics 2
    • JavaScript Playground
    • JQuery Library >
      • JQuery Basics