02 Homework

Posted on by
  1. Your server should be set up.
  2. Your first assignment should be finished and marked up with semantic HTML5.
  3. The first assignment has been an exploration into how a website works.
  4. Now use that information to shape the user experience of your portfolio website

    Watch the I love UX Design Videos

  1. ILUVUXDESIGN part I from lyle on Vimeo.

  2. ILUVUXDESIGN part II from lyle on Vimeo.

Landing Page

  1. You are to create an index.html inside your parsons folder that contains your name, a picture, and a link to all of your assignments. Here is an example from a few semesters ago (expect the assignments to be different).
  2. Assignments, when they are due and how much of your grade they represent: You can copy the list and paste it into a HTML5 Template, and turn each topic into a link that leads to your assignment. I did week as an example. 
    <ol>
<h3>Week 2</h3>
<li><a href="relative_link_to_your_assignment.html">Website Analysis*</a>
<h3>Week 3</h3>
</li><li>landing page— links to your assignments and a picture next to your name.
</li><li>HTML markup of Analysis
</li><li>Worksheet: behind the scenes on creative process for midterm (7 steps)*:
<h3>Week 4</h3>
</li><li>Portfolio exhibiting the CSS selections
</li><li>HTML Wire Frame from PhotoShop comp
<h3>Week 5</h3>
<li>incorporate CSS Layout Strategies in web site
<h3>Week 6</h3>
<li>Quiz
<li>Peer Review Notes / Advice
<h3>Week 7</h3>
<li>Typography Poster
<li>Finished Midterm: Portfolio
<h3>Week 8</h3>
<li>Final Worksheet*
<h3 >Week 9</h3>
<li >Responsive Redesign of Portfolio
<h3>Week 10</h3>
<li>CSS3 Collateral
<li>Class Exercise
<h3>Week 11</h3>
<li >CSS3 Animatics
<li>Class Exercise
<h3>Week 12</h3>
<li>Final: Modular Navigation
<h3>Week 13</h3>
<li>Multimedia Demonstration
<h3>Week 14</h3>
<li>Forms
<li>Peer Review Notes / Advice
<h3>Week 15</h3>
<li>Final
</ol>
  3. 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 how to do that.

Structure Every Documents Using HTML5

The last part of the Semantic Markup article has the correct HTML5 elements you are required to use for all assignments. Most are present in the HTML5 template, so use them to organize your page.

  • section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
  • aside represents a piece of content that is only slightly related to the rest of the page. For complimentary content to the main content (Taken from XHTML 2.0 specification)
  • hgroup represents the header of a section.
  • header represents a group of introductory or navigational aids.
  • footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
  • nav represents a section of the document intended for navigation.
  • figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document. 
    <figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
  • figcaption can be used as caption (it is optional).

Designing Your Web Site

  1. Figure out your Target Audience and address them as you define the problem your portfolio has to solve. The first assignment will be your guide.
  2. Do the 7 steps involved in designing a web site. These steps are relevant to any creative project. Apply them to your portfolio website.
  3. Step #7 is to create a comp using photoshop, Illustrator or Indesign. The comp should answer the problem set forth in step #1 and demonstrate the solution, using the material that you have researched, written and collected.
  4. Set the measurements in Photoshop, Illustrator, Fireworks, or Indesign to pixel information so it is easily translates into the pixels when developing the layout in CSS. This way 350 pixels wide in Photoshop will translate to width: 350px; in the code.

Documenting the Design Process

  1. The seven 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.
  2. The purpose of the work-sheet is to organize all the behind-the-scenes creative-decision making. I will give you credit for good decisions, even if you cannot execute them.
  3. Jot down notes, questions and anything that helps you track your creative process. I will be looking at these to monitor your progress.
  4. As they require almost no coding, I expect them to be finished by the date that they are due.

Instructions for creating the worksheet

  1. Use the HTML5 Template.
  2. Set the article width to something like 700px in the <style> in the <head> of the document.
  3. Link to the assignment.
  4. 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.
  5. Write down any questions, comments or observations that you may have in an ordered list <ol> at the top of the document.
  6. Topics will follow the 7 steps in Designing for the web, such as writing in the target audience.
  7. Assess problems and identify solutions.
  8. Include pictures of at least four thumbnails or two mood boards to show the trail of ideas that have led you to your final product. The point here is to show creative development, spatial exploration and how you’ve gone about solving the problems you’ve identified.
  9. You can photograph or scan in the thumbnails together or as individual pictures, and comment them as you wish using <figure> and <figcaption>
  10. Size any and all images to be no larger than the size you present them. Huge pictures take much longer than necessary to download.

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.