Watch the I love UX Design Videos

Two video shorts made by ADDIKT for Adobe describing the roll of the UX designer.

1. ILUVUXDESIGN part I from lyle on Vimeo.

2. ILUVUXDESIGN part II from lyle on Vimeo.

Design for the Web

3. If you haven’t already done so, your first assignment needs to be finished and marked up with semantic HTML5.
4. The first assignment is a preparation for step one and two of Designing for the Web (8 steps) . Make User eXperience the central concern as you work through the eight steps. Finish with a statement on how your final comps reflect UX principles.

5. Read the first chapter Designing Systems, Create design systems, not pages in Atomic Design by Brad Frost. Companion to Designing for the Web.

Document the Design Process

6. The eight steps are the basis for a sketch-book equivalent I call the work-sheet that is to accompany each major assignment. You will end up with two such work-sheets for the course, one for the portfolio site and one for the final. Worksheet Example
7. The purpose of the work-sheet is to organize all the behind-the-scenes creative-decision making. I give credit for good decisions even if they aren’t executed.
8. Jot down notes, questions and anything that helps you track your creative process. I will be looking at these to monitor your progress.

Instructions for creating the worksheet

9. Use the HTML5 Template.
10. Link to the assignment.
11. Write in full sentences and use headers to explain what you are writing about. I like to see work that’s structured in a consistent in a logical way.
12. Write down any questions, comments or observations that you may have in an ordered list <ol> at the top of the document.
13. Assess problems and identify solutions.
14. Include pictures of however many number of thumbnails it took (more is good) and at least one mood board to show the trail of ideas and colors that led you to your final product. Show the creative development, spatial exploration and how you’ve gone about solving the problems you’ve identified.
15. You can photograph or scan in the thumbnails together or as individual pictures and comment them as you wish using <figcaption>
16. Size any and all images to be no larger than the size you present them. Larger pictures take longer to download.

Landing Page

17. You are to create an index.html inside your parsons folder that contains
    1. Make the h1 your name and update the page title to your name.
    2. a picture of you (to help me associate the person with the name)
    3. your major
    4. your minor if you have one
    5. the paragraph you wrote on your learning goals for this semester
    6. links to all of your assignments
    7. and the OpenAI text dialogue.
18. An example of a link to an assignment looks like this: <a href="first_assignment/index.html>Website Analysis</a> I would put the OpenAI discussion below the links to your assignments. This assignment, along with the learning goals paragraph, is new for this semester, and has no precedent in the previous examples. Here is an example from a few semesters ago (expect assignments to be slightly different).
19. Copy and paste this table into a HTML5 Template at the location of the <p> (paragraph) tag, in the <article> tag. You will turn each homework into a link that leads to your assignment. The week 2 link is provided but only works if there is a folder first_assignment with an index.html for the first assignment.
20. See Setting Up Your Server Space for more complete details on how to set up the landing page and the other assignments on the server. See how to create a Relative Address and Creating Tags if you need a reminder of how to do that.

<table >
<tr><th>Date Due</th><th><th style="text-align: right;">Percent</tr>
<tr><td>Week 2<td><a href="first_assignment/index.html">Website Analysis</a> <td>5%</tr>
<tr><td>Week 3<td>Midterm Worksheet  (8 Steps)<td>5%</tr>
<tr><td>Week 3<td>Responsive Mockup<td>5%</tr>
<tr><td>Week 3<td>CSS Selection Exercise  <td>5%</tr>
<tr><td>Week 4<td>Grid Exersize <td>5%</tr>
<tr><td><td><strong class=quartegrade >First Quarter Assessment</strong><td>25%</tr>
<tr><td>Week 5<td>Responsive Wireframe<td>5%</tr>
<tr><td>Week 5<td>Code Portfolio Front Page<td>5%</tr>
<tr><td>Week 5<td>Quiz <td></tr>
<tr><td>Week 6<td>Typography Poster <td>5%</tr>
<tr><td>Week 7<td>Current Topic Website<td>5%</tr>
<tr><td>Week 8<td>Portfolio: Class Presentation <td>5%</tr>
<tr><td><td><strong class=quartegrade >Second Quarter Assessment </strong><td>25%</tr>
<tr><td>Week 9<td>Final: Worksheet<td>5%</tr>
<tr><td>Week 10<td>Final: CSS3 Collateral<td>5%</tr>
<tr><td>Week 11<td>Final: CSS3 Animatic<td>5%</tr>
<tr><td>Week 12<td>Final: HTML/CSS<td>5%</tr>
<tr><td>Week 12<td>Final: Modular Navigation<td>5%</tr>
<tr><td><td><strong class=quartegrade >Third Quarter Assessment</strong><td>25%</tr>
<tr><td>Week 13<td>Final: Multimedia<td>5%</tr>
<tr><td>Week 13<td>Final: Alternatives<td>5%</tr>
<tr><td>Week 13<td>Final: Peer Review<td>5%</tr>
<tr><td>Week 14<td>Final: Forms<td>5%</tr>
<tr><td>Week 15<td>Alternative<td>5%</tr>
<tr><td><td><strong class=quartegrade >Final Quarter Assessment</strong><td>25%</tr>
<tr><td>Week 15<td><strong>Final: Presentation</strong><td>10%</tr>
<tr><td><td><strong>Two assignments dropped:</strong><td>-10%</tr>
<tr><td><td><strong>Total:</strong><td>100%</tr>
<tr><td><td>List of sources and services used <td></tr>
</table>

Grading Criteria

I am looking to see how your coding skill are progressing, in both the homework and the worksheet. The more you code, the better you get at it. Once again, using the validator will help you to deliver a technically perfect document. Use it often if you are having problems, every few lines of code, that way you can see the mistakes you make and correct them one by one.

I want to see you explore your solution in the creative process from how you state the problem to possible answers, and to have you eliminate all that does not work as well as the answer you end up with. Have many thumbnails to document the process, not just the few that lock into the concept that you’ve gone with. While all of this documentation is overkill for the current assignment, you will get into the habit and develop the proper methods when it comes to creating a complete web site.

I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity by which you are able to solve the problems.

Grading Rubric

I realize that English is not everyone’s first language. It is my second language. I am not going to ask the impossible, and I will take such difficulties into consideration. That said, persuasive content is crucial to a successful website.

1. At bare minimum, I expect a couple of paragraphs marked up for each part of the assignment, pictures sized correctly and placed on the page using HTML5.
2. Ideally, I expect the writing to be coherent and informative. This assignment will morph into your midterm portfolio, and I expect you to have some respect for your own work, and show that.
3. I will be pleasantly surprised if you are able to create a story that is engaging and fun to read, and not just coherent and informative.