*
     Classistant

Boston University College of Fine Arts
808 Commonwealth Ave, #406D

  1. T +1 475 441 1665
  2. E mh656@bu.edu

Introduction to Web Design ar581

Course Description

This course addresses the principles, problems, and applications of web design. HTML and CSS will be explored, giving the students the ability to control the design and presentation of online information in its most basic form. Emphasis is on content, usability, site architecture, navigation and interactivity.

Goals

This course aims to introduce web design to graphic designers from a formal / visual – content-driven – standpoint. Throughout presentations, discussions, readings and most importantly workshops, the students will learn to act upon online networks. In class and at home through assignments, they will explore web languages. By any means, at the end of the semester, the students should be understanding the implications encountered in the implementation of an online platform. Students will not turn into expert coders from scratch but will increasingly become interested hoarders... gathering enough knowledge and resources to build a solid web lexicon. This should also facilitate the exchange with expert coders.

Web design no longer means just designing a website. At one time a website was actually just called a webpage, but when it grew up it became a series of pages. A website is not a singular thing and when designing and building something for the web, what you make and what it is called is largely dependent on the needs of your audience. (James Grady, Web Design I, 2017)

So, this is not a very complicated coding course although we will explore HTML and CSS while introducing more complex and powerful coding languages such as JavaScript. Therefore, coding knowledge is not a prerequisite to this course. However, a solid foundation in graphic design is a plus.

Debugging

In the occasion of hoarding code from other sources and not understanding fully what they means, it should be understood that I might not be able to help on the debugging of your website. Furthermore, carelessly mixing code from different sources can create conflicts in the long run. Please, own and understand your script.

Sketching ideas

In the occasion of hoarding code from other sources and not understanding fully what it means, it should be understood that I might not be able to help. Furthermore, carelessly mixing code from different sources can create conflicts in the long run. Please, own and understand your script.

Attendance

Attendance to all classes is essential. Un-excused absences will result in faults to the participation evaluation. Keep me updated if you need to miss class. In any case, the students are responsible for being up-to-date. Being late will be perceived the same way.

Evaluation

You will be evaluated according to your overall engagement in the projects and exercises. Your active participation during the semester will also be taken in account.

  • Anticipation and Participation 10%
  • Assignment 1 (30%)
  • Assignment 2 (30%)
  • Assignment 3 (30%)

Requirements

  • Computer
  • FTP Software
  • Server Host
  • Coding text-editor

Assignments Criteria

  • Originality / point of view / attitude
  • Formal approach + web typography
  • Execution shows technical skills
  • Execution shows novel code learnings beyond class coverage
  • Give your idea a chance
  • Strangeness factor (Extra points)

“ Your Positioning” Criteria

  • F shows no interest in the course by not showing up. No participation in class and no demonstration of acquired knowledge.
  • D comes late at our evening class. One unexcused absences. Shy at demonstrating a basic understanding of what we are covering in class.
  • C comes late at times. Respond to exercies and assignments with diligence but makes unintersting/uninterested works.
  • B is always present or/with excused absences. The student’s work is formally strong and uses innovative solutions. OR she/he shows an impressive learning curve in class.
  • A is always present and delivers the work on time. The student pushes further OR demonstrates a tremendous progress. The form and concept is clever. The student exceeds expectations and/or is not afraid of the strange.

Calendar

  • January 22
    1. ▫ Course introduction / attendance
    2. ▫ Syllabus overview, at home, and ongoing projects
    3. ▫ My introduction, who am I? What do I do?
    4. ▫ Introducing internet, the web (or www) and networks
    5. ▫ Quick note on images, screen and resolution
    6. ▫ Lil local structure (local / online)
    7. ▫ Installing softwares (Adobe, FTP, Brackets, Github)
    8. ▫ A note on the Sketch Software

    9. at home
    10. ▫ Short write-up using Slack: Have you done any coding in HTML, CSS, or JavaScript? What kind of experiences you have with Graphic Design? List your three favorite typefaces. Please write full sentences.
    11. ▫ Setup your softwares
    12. ▫ Shay Howe’s lessons 1 and 2
  • January 29
    1. ▫ Max’s fav websites
    2. ▫ Your first web page (local)
    3. ▫ Introducing HTML and CSS
    4. ▫ Introducing Mallarmé and typography
    5. ▫ Assignment 1

    6. at home
    7. ▫ Shay Howe’s lessons 1 and 2

    8. ongoing project
    9. ▫ Assignment 1, level 1 and 2
  • February 5
    1. ▫ Max’s fav websites
    2. ▫ Review of lessons 1 and 2 (your work)
    3. ▫ Block and inline levels
    4. ▫ More CSS and the block model

    5. at home
    6. ▫ Shay Howe’s lessons 3 and 4

    7. ongoing project
    8. ▫ Assignment 1, level 2 and 3
  • February 12
    1. ▫ Max’s fav websites
    2. ▫ Typography online
    3. ▫ Workshop: Assignment 1 + menu
    4. ▫ Workshop: Shay Howe’s chapter 5

    5. at home
    6. ▫ Working on Assignment 1
    7. ▫ Shay Howe’s lessons 5 and 6

    8. ongoing project
    9. ▫ Assignment 1, level 1 to 5
  • February 19
    1. ▫ Max’s fav websites
    2. ▫ Assignment 1 ends / projected presentations
    3. ▫ Assignment 1 starts
    4. ▫ Presentation: drawing with CSS and Z-index
    5. ▫ Workshop: Assignment 2
    6. ▫ New CSS Grids Intro (not an homework)

    7. at home
    8. ▫ Working on Assignment 2
    9. ▫ Completion of assignment 1 / Phase 2 (navigation)

    10. ongoing project
    11. ▫ Assignment 2
  • February 26
    1. ▫ Max is in Amsterdam with COMA / Education
    2. ▫ Assignment 1 + Phase 2 delivery

    3. at home
    4. ▫ Working on Assignment 2
    5. ▫ Shay Howe’s lessons 7 to 10

    6. ongoing project
    7. ▫ Assignment 2
  • March 5
    1. Spring Recess

    2. at home
    3. ▫ Working on Assignment 2
    4. ▫ Shay Howe’s lessons 11 and 12

    5. ongoing project
    6. ▫ Assignment 2
  • March 12
    1. ▫ Max’s fav websites
    2. ▫ Assignment 2 delivery
    3. ▫ Review: positioning content
    4. ▫ Review: Assignment 2

    5. at home
    6. ▫ Shay Howe’s advanced lessons 1 and 2
  • March 19
    1. ▫ Max’s fav websites
    2. ▫ Review: assignment 2
    3. ▫ Review: completed Shay Howe
    4. ▫ Font-face
    5. ▫ Grid exercise

    6. at home
    7. ▫ Continue grid exercises
    8. ▫ Shay Howe responsive design

    9. ongoing project
    10. ▫ Assignment 3
  • March 26
    1. ▫ Max’s fav websites
    2. ▫ Introducing responsive websites

    3. at home
    4. ▫ Grid exercise + responsive

    5. ongoing project
    6. ▫ Assignment 3
  • April 2
    1. ▫ Max’s fav websites
    2. ▫ Looking at website structures (what’s in there?)
    3. ▫ Work in class / last project

    4. at home
    5. ▫ Shay Howe’s advanced lesson 3

    6. ongoing project
    7. ▫ Assignment 3
  • April 9
    1. ▫ Max’s fav websites
    2. ▫ (closed on Mondays...) Visiting the ICA (ART IN THE AGE OF THE INTERNET)
    3. ▫ Review of advanced lesson 3

    4. at home
    5. ▫ ?

    6. ongoing project
    7. ▫ Assignment 3
  • April 16
    1. ▫ Max’s fav websites

    2. at home
    3. ▫ ?

    4. ongoing project
    5. ▫ Assignment 3
  • April 30 (LAST CLASS)
    1. ▫ Max’s fav websites
    2. ▫ Visiting Critiques
    3. ▫ Assignment 3 delivery

Spring 2018 Students