UX Interactive Media II |
List of Code Projects:
If your files are large I suggest sending then through wetransfer.com
|
Student Learning Outcomes:
By the end of this course you will be able to:
| ||
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) 
| ||
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.)
|
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
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:
Color Palettesconsider usability, color blindness, contrasts
Imagery
Typography
PhotoshopCommand 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:
|
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:
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:
|
STYLE GUIDE
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 
Art Direction: Social Media Icons
Solid circles in teal 
|
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 
Overall looking for an 80's Peewee Memphis highly patterned super saturated Vibe
|
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:
|
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 
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/ 
The two articles discuss contact tracing- these images are from other sources
|
Zoom Recording
audio only: https://pratt.zoom.us/rec/share/tJArHqHq_E5LBZXwsF_ORJMiLonhX6a81SUervpcyBl3RglC6lr7TPH0qQJA1jAr
Handout
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.
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)
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
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.
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.
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
|
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? 
Review for MIDTERM these selectors
|
|
KEYNOTE
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.
HOMEWORK DUE 3-26
1. Review MIDTERM Quiz notes.
2. CSS Positioning. Recreate 3 CSS Layouts as shown in the file below.
| ||||||
2/27 #6 Flexbox
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 |
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
|
HANDOUTS
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.
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
|
HANDOUT
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/ 
| ||||||||||||||
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
CLASS EXERCISE
Match the mockup.
Little boxes
Use id and classes
HANDOUT
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 
| ||||||||||||||
1/30 #2 CSS Review
|
CLASS NOTES
Up next is learning the box model and how to apply classes.
|
KEYNOTE
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/
| ||||
1/23 #1 Revisit HTML and UX Design Cycle
|
CLASS NOTES
The Design Cycle from D School Stanford
John Maeda Design Report 2018 Computational Design
LEARNING RESOURCES
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:
|
KEYNOTE
CLASS EXERCISE
HOMEWORK
You will bring to class next time:
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. | ||||||||||||