art3870 : Labs & Projects

Assignments

lab0 - Learning Portfolio Homepage

Description:

This page serves as the starting point for all your work in this class. Please make sure that all links work and are clearly labled. Think of this as your personal portfolio. This page should introduce yourself to the visitor and greet them based on the time of day. This landing page will communicate who you are using your art. Introduce yourself with a one paragraph bio / artist statement and a picture of you with your face visible. You should provide the user a way to reach you using the email encoder.

This is your main index page - named index.html - from which all your work for this quarter is linked with a styled horizontal navigation bar. It also needs a headline with your name, your introduction and photo with a distinct visual presence which sets you apart from others.

The index.html page should also implement and modify the live date javascript example.

Links to lab1, lab2 and project 1 have default pages/folders with a coming soon message.
You have a validation link in the footer of each page. I heart Validator logo

(updated 3/26/2017)

Specifications:

  • Pages are responsive using ZURB FOUNDATION's layout grid
  • Pages use HTML5, CSS, and JS
  • Pages use an external CSS stylesheet
  • Pages use semantic html5 tags when appropriate
  • Div tags kept to a minimum
  • Pages validate on w3 Validator
  • All links work error free
  • Pages use a custom Google font
  • Pages incorporate the javascript snippet and a greeting based on the day or time
  • Pages are visually interesting and well designed
  • Pages communicate clearly
  • Pages use target="_blank" for external links

DUE: END OF WEEK 2

lab1 - Hit Me Up

Description:

For this Lab you should create an account on wufoo.
Create a form on woofu (name, email address, comments).
Use html5 form properties to require a valid email. w3schools form review
Download the files needed (share → HTML/CSS Download).
Customize the form making it responsive - zurb forms
sample form
Add the form to your site ( & extend your global menu).
Use zurb foundation to create a user friendly form on large and small screens and a web font.

Specifications:

  • html5
  • linked styleheets
  • div tags kept to a minimum
  • zurb foundation grid
  • minimum one webfont
  • all pages validate without errors at w3c

DUE: START OF WEEK 4

lab2 - It's a Brand New page

Description:

Create a single page that changes its appearance based on one of the
below conditions or other data:
Day of Week
Hour of the Day
quackit.com/javascript/examples/
blog.hubspot.com/marketing/website-personalization-examples-dynamic
hpointerpointer.com/
cachemonet.com/
procatinator.com/
noisli.com
staggeringbeauty.com
omglasergunspewpewpew.com
theuselessweb.com
iloveyoulikeafatladylovesapples.com
developers.marketo.com/blog/dynamically-change-page-content-based-on-a-users-location

Specifications:

All sorts of info:
hackdesign.org
On Web Typography
alistapart.com/article/on-web-typography
An Introduction to Color Theory for Web Designers
webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437
How to Use Images Successfully – Web Design Usability Guide
1stwebdesigner.com/design/images-on-web-design-usability-guide
Efficiently Simplifying Navigation, Part 1: Information Architecture
uxdesign.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture
Content Strategy Within The Design Process
uxdesign.smashingmagazine.com/2011/12/02/content-strategy-within-design-process
Content Strategy & Storytelling
smashingmagazine.com/content-strategy-storytelling

lab3 - Quotes Gallery

Description:

Make a gallery of four pages, one introduction page (index.html) and three other pages.
Create a local navigation that includes them all and put it on each page.
The cover page should have an animated design element* using CSS3 and @keyframes rule. (Not text*)
The inside pages should feature quotes that you choose. Each page should display the quote in a webfont and you should use css3 transform and/or animation properties to enhance the text in a meaningful way.
You should also include additional detail such as information about the author and the context of the quote.
Use js sound within the lab in some way.
The pages must be build on zurb's FOUNDATION and be responsive.
You should consider how they look at smaller and bigger sizes.
keyframe animation syntax
example quote
textillate
css-animated-headlines
text-opening-sequence-with-css-animations
CSS3 Rotating Words

Specifications:

Project 1 - Responsive Redesign

Description:

  1. Find a site in need of redesign that is either a restaurant or another brick and mortar business.
  2. Pitch your idea and why you think it needs a redesign. - Be specific. You have 60 seconds.
  3. Form / Join teams of 2-3 people.
  4. Create a content inventory for the current site.
  5. Create a list of 5 changes that need to be made and justify them with one sentence each.
  6. Create thumbnail sketches for 3 version of the new site for each page type for a mobile and a desktop site. ( i.e the homepage would generate 6 thumbnails).
  7. Create a full set of wireframes for the chosen design and three styletiles.
  8. Code and present the final design in html5, css3, javascript.

The new site should use all the useful information located at the current old site.

Use the existing logo, although you may change colors based on your understanding of what is necessary for the branding and what can be changed based on the content of the site. The resulting work will be used to communicate to current and future customers.

Specifications:

  • html5
  • linked styleheets
  • zurb foundation grid
  • minimum one webfont
  • all pages validate without errors at w3c
  • Site must be functional on the server
  • MOBILE FIRST design
  • You may use stock images from clearly identified sources such as istockphoto or creative commons on flickr, etc.
  • All pages must use zurb foundation grid, responsive images and content using zurb interchange described here: http://foundation.zurb.com/docs/components/interchange.html
  • Your site must have consistent navigation throughout.
  • All pages must have consistent code, look and feel (teamwork, css).
  • All pages must use a single and shared css document.
  • Each member codes one page or more and puts their name in the code using:
    <meta name="author" content="tina fey, art 3870, spring 2017" >
  • Your site must use html semantic markup wherever possible.

  • Part 1.1: sketches and change list → DUE Mon April 17
  • Part 1.2: content inventory → DUE Weds April 19
  • Part 1.3: wireframes → DUE Mon April 24
  • Part 1.4: styletiles → DUE Mon April 24
  • Part 1.5: Code the final design in html5, css3, javascript.
  • User Testing - site 90% complete → DUE Monday May 1
  • Part 1.6: Full site complete and on ADA sites of each team member. Presentation. → DUE Weds May 3
  • A 150-word reflective statement on the project in the comments section of blackboard, one by each team member. Submit screenshots of all pages and URL of project index.

12 questions to ask before redesigning a website
How To Successfully Redesign Your Website
A Beginner’s Guide to Wireframing
See wireframe of any site
How to Read a Wireframe
All sorts of info - https://hackdesign.org/
On Web Typography
An Introduction to Color Theory for Web Designers
How to Use Images Successfully – Web Design Usability Guide
Efficiently Simplifying Navigation - Part 1: Information Architecture
Content Strategy Within The Design Process
Content Strategy & Storytelling

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399

http://styletil.es

Project 1 - Presentation

Create a slide presentation with Google slides.
Set timing in Pecha Kucha style: 20 slides @ 20 seconds each for 6 minutes total.
Do this by chosing file --> publish to the web --> embed.
Choose Medium size, auto-advance slides every 30 seconds.
Time in code is measured in miliseconds. Look at the iframe code and edit the part "delayms=30000" to 20000, which equals 20 seconds.
Copy the code for the iframe.
Create a new page in your root folder, NOT inside the project1 folder. Call it p1slides.html. Create a link to this page in your global nav on your home page.
Paste the iframe into the body element. Test the page in browser and upload to the server.

  • Show screen grabs of your website, code and sketches. Tell a story, your approach to the project, why and what you chose, at least 2 design challenges and how you solved them.
  • Present specific parts of code at large font size shown to illustrate a specific design solution.

    • Presentations are mandatory and part of your grade.
    This is a team presentation.

    Project 2 - onereallylongwebpage

    Make an extra long, scrolling webpage using html and css. The page should teach us something, be an info-graphic or a narrative. It can scroll vertically or horizontally and must use a combination of fixed and relative positioned elements. At least some elements must overlap.

    • Part 2.1: Sketch of entire long page, assets & storyboard of
      min. 3 screens → DUE Monday May 22
    • Part 2.2: WORKING animated wireframe -
      moving grey boxes with JS pixel counter → DUE Weds May 24
    • Part 2.3: Completed Project on ADA server → DUE Weds June 7
    • Part 2.4: Presentation → DUE Weds June 7

    PRESENTATION:

    • ignite style 20 @ 15 seconds each for a total of 5 minutes. Presentation must be uploaded prior to class.
    • Presentations are mandatory and part of your grade.
    • Show screen grabs of your website, code and sketches. Tell a story, your approach to the project, why and what you chose, at least 2 design challenges and how you solved them.
    • Present specific parts of code at large font size shown to illustrate a specific design solution.

    Requirements:

    • html5 semantic elements
    • Linked external style sheets and external javascripts
    • Div tags kept to a minimum
    • Approximately 7-10 screen views
    • 3-5 content pieces (text, images, etc) per page/screen for 21-50 total. Content pieces are headline, image or paragraph etc.
    • -
    • About page - Explain your idea, give story title, author, dates, etc.
    • List references and citations for text, images, sounds etc. you used.
    • Consistent branding, color use, and typography as needed.
    • Consistent navigation (minimum: links to About page at top and return to top on last screen.)