Learn . Expanded Metrics /  courses  /

Animations and Transitions (Feb 05 — Mar 01, 2024) 

/* Week 1 */

Day 01Mon,  Aug 07

/* Exercises */

D1.E1  •   Introductions / Show & tell

D1.E2  •   Set up IDEs and a personal server (GitHub repository); upload a skeleton index.html file; and deploy page from your repo.

D1.E3  •   Make a basic HTML page:
(A) w. a single linked image, and background colour changed,
or
(B) a splitscreen page, with separate scrolling on each side.
Upload to repo, and add a link from the index page to this new page.
Key: .zip, 3.65 mb ↓

/* Topics */

D1.T1  •   Website files and folder structure

D1.T2  •   Anatomy of an HTML document

/* Resources */

D1.R1  •   Boilerplate webpage: .zip, 1.67 kb ↓

Day 01Mon,  Feb 05

/* Exercises */

D1.E1  •   Introductions / Show & tell

D1.E2  •   Take a walk outside. Spot 8 examples of real-world objects / interactions. Analyse their affordances and signifiers: document 4 examples of good signifiers, and 4 bad ones. Make a presentation explaining your findings.

/* Topics */

D1.T1  •   Intro to Animations & Transitions

D1.T2  •   Fundamentals of Interactions — Affordances and Signifiers

/* Resources */

D1.R1  •   Reading: PRINCIPLES OF Ix (Don Norman) ↓

Day 02Tue,  Feb 06

/* Exercises */

D2.E1  •   Set up a personal server (GitLab repository):
Upload and deploy a simple index page first, and then the previous day’s exercise in a subdirectory.
GitLab INSTRUCTIONS: .txt, 1.67 kb ↓

D2.E2  •   CSS Selectors .zip, 202 kb ↓ .  Key: .zip, 201 kb ↓

D2.E3  •   CSS Layouts (display & position properties) .zip, 203 kb ↓ .  Key: .zip, 202 kb ↓

/* Topics */

D2.T1  •   Website files and folder structure

D2.T2  •   The Document Object Model (DOM) Tree

D2.T3  •   The Box Model and Document Flow

/* Resources */

D2.R1  •   Boilerplate webpage: .zip, 1.64 kb ↓

D2.R2  •   A Periodic Table of HTML Elements (Paul George)

D2.R3  •   CSS Selectors Cheatsheets: on FreeCodeCamp on MDN on W3C

Day 03Wed,  Feb 07

/* Exercises */

D3.E1  •   Studio time to explore button designs and vector graphics:
— Embed a few button elements onto a webpage and style them. Try adding some SVG graphics or icons to your button elements.
— You could add a hover effect or two, changing or revealing some element properties — colours, borders, positioning, fonts, a custom cursor, or a tooltip

/* Assignment */

D3.A1  •   Moral Alignment Test — Button Design:

/* Topics */

D3.T1  •   Intro to on-screen signifiers: iconography, buttons, hover-states, cursors, animations, and tootips

D3.T2  •   CSS for designing buttons: pseudo-selectors, box-shadows, gradients, textures, and SVG

/* Resources */

D3.R1  •   Styling SVG How to scale SVG SVG Properties and CSS Pocket Guide to Writing SVG

/* Week 2 */

Day 04Mon,  Feb 12

/* Assignment */

D4.A1  •   Moral Alignment Test — Button Design (contd):
Studio time for A1.
Informal presentation of work-in-progress, feedback, etc.

Day 05Tue,  Feb 13

/* Assignment */

D5.A1  •   Moral Alignment Test — Button Design (contd):
Present completed webpages in the morning.

D5.A1  •   Moral Alignment Test — Button Design (contd):

/* Topics */

D5.T1  •   Intro to JavaScript: Adding functionality to buttons
— adding events to buttons/elements in markup (onClick, onLoad, onMouseOver, etc.)
— JS selection methods: getElementbyID, getElementsbyClassName, etc.
— Toggling style attribute values of an element using JS (by changing values of the attribute or changing classes)
— adding events to elements in JS using addEventListeners

D5.T2  •   Simple JS script — event, function, variable

/* Resources */

D5.R1  •   JavaScript reference onClick event (HTML DOM Events) eventListener method Change element's classList

Day 06Wed,  Feb 14

/* Assignment */

D6.A1  •   A.M: Studio time for A1.2
P.M: Presentation of completed A1 webpages

/* Homework */

D6.H1  •   Research into the history and evolution of GUIs:

/* Week 3 */

Day 07Mon,  Feb 19

/* Exercises */

D7.E1  •   Present homework (History & Evolution of GUIs) in the morning.

D7.E2  •   Design Elements:
Take four photographs of each of the seven design elements. Present your photos in the afternoon.

D7.E3  •   Design Elements:
Make six compositions, on six A5 sheets. Try to achieve visual balance in these compositions (without resorting to symmetry, ideally). Each composition needs the following design elements within them:

D7.E4  •   Creative Transformations:
Once done with D7.E3, take two of the completed compositions — Apply two creative transformations to each (Redraw/ re-create on new A5 sheets).

/* Topics */

D7.T1  •   The Seven Design Elements
(Line, Shape, Form, Colour, Value, Space, Texture)

D7.T2  •   Creative Transformations
(Add, Subtract, Combine, Fragment, Repeat, Transfer, Animate, Superimpose, Substitute, Isolate, Distort, Change Scale)

/* Resources */

D7.R1  •   Creative Transformation Cards (Synectic Tools): .pdf, 805 kb ↓

Day 08Tue,  Feb 20

/* Exercises */

D8.E1  •   From D8.R1, pick an mp3 /music player that you like.
— Identify the ‘atoms’ and ‘molecules’ (a la Brad Frost) on the device’s interface.
— How would this interface translate visually into a mobile / portrait screen format? How would it translate into a desktop / landscape one?
— In your translation / interpretation, keep intact any iconic design elements on the device; also keep the number of ‘molecules’ on the interface roughly the same.
— Make wireframes for your translation / interpretation first, then execute the same as functional code on a single, responsive webpage.

/* Topics */

D8.T1  •   Atomic Design Methodology

D8.T2  •   Responsive Web Design:
— Mobile-first approach
— Media Queries
— Fluid units (%, vw, vh)

/* Resources */

D8.R1  •   GUI reference: Essentials mp3/iPod, Norris & Lee PDF, 12.5 mb ↓ Hi-res jpegs, 60.5 mb ↓

D8.R2  •   Reading: ATOMIC DESIGN METHODOLOGY (Brad Frost) ↓

D8.R3  •   Responsive Web Design: — About: on A List Apart (2010) on Web.Dev — Media Queries: A Beginner's Guide Using Media Queries — Container Queries: on MDN on Smashing Magazine

Day 09Wed,  Feb 21

/* Assignment */

D9.A2  •   Case Studies — Animations & Transitions

Day 10Thu,  Feb 22

/* Assignment */

D10.A2  •   Case Studies — Animations & Transitions

/* Resources */

D10.R1  •   Styling an HTML video element: HTML video attributes Fluid width video

D10.R2  •   Example JS Carousel .zip, 2.11 kb ↓

D10.R3  •   JS Intersection Observer: on Hackernoon Web Dev Simplified (video) Heather Weaver Better Programming

Day 11Fri,  Feb 23

/* Assignment */

D11.A2  •   Case Studies — Animations & Transitions (contd.)
Studio time to work on A2.2.
Present completed webpages by the end of the day

/* Week 4 */

Day 12Mon,  Feb 26

/* Exercises */

D12.E1  •   On a single webpage, incorporate an example each of a CSS Transform, CSS Transition, and CSS Animate.

/* Assignment */

D12.A3  •   Build your own website

/* Topics */

D12.T1  •   CSS Specificity Weight

D12.T2  •   Further CSS:
CSS Transforms, CSS Transitions, and CSS Animate

/* Resources */

D12.R1  •   Further CSS CSS Transforms CSS Transitions CSS Animate

D12.R2  •   JS example (e) function + SVG map .zip, 6 kb ↓

Day 13Tue,  Feb 27

/* Assignment */

D13.A3  •   Build your own website (contd.)
Studio time to work on A3.
Present A3 website content and wireframes by the afternoon.

Day 14Wed,  Feb 28

/* Assignment */

D14.A3  •   Build your own website (contd.)
Studio time to work on A3.

Day 15Thu,  Feb 29

/* Assignment */

D15.A3  •   Build your own website (contd.)
Studio time to work on A3.

Day 16Fri,  Mar 01

/* Exhibition */

« «   » »  •   Open Studio —  Go to online version

Animations and Transitions (Feb 05 — Mar 01, 2024) 

/* Week 1 */

Day 01Mon,  Feb 05

/* Exercises */

D1.E1  •   Introductions / Show & tell

D1.E2  •   Take a walk outside. Spot 8 examples of real-world objects / interactions. Analyse their affordances and signifiers: document 4 examples of good signifiers, and 4 bad ones. Make a presentation explaining your findings.

/* Topics */

D1.T1  •   Intro to Animations & Transitions

D1.T2  •   Fundamentals of Interactions — Affordances and Signifiers

/* Resources */

D1.R1  •   Reading: PRINCIPLES OF Ix (Don Norman) ↓

Day 02Tue,  Feb 06

/* Exercises */

D2.E1  •   Set up a personal server (GitLab repository):
Upload and deploy a simple index page first, and then the previous day’s exercise in a subdirectory.
GitLab INSTRUCTIONS: .txt, 1.67 kb ↓

D2.E2  •   CSS Selectors .zip, 202 kb ↓ .  Key: .zip, 201 kb ↓

D2.E3  •   CSS Layouts (display & position properties) .zip, 203 kb ↓ .  Key: .zip, 202 kb ↓

/* Topics */

D2.T1  •   Website files and folder structure

D2.T2  •   The Document Object Model (DOM) Tree

D2.T3  •   The Box Model and Document Flow

/* Resources */

D2.R1  •   Boilerplate webpage: .zip, 1.64 kb ↓

D2.R2  •   A Periodic Table of HTML Elements (Paul George)

D2.R3  •   CSS Selectors Cheatsheets: on FreeCodeCamp on MDN on W3C

Day 03Wed,  Feb 07

/* Exercises */

D3.E1  •   Studio time to explore button designs and vector graphics:
— Embed a few button elements onto a webpage and style them. Try adding some SVG graphics or icons to your button elements.
— You could add a hover effect or two, changing or revealing some element properties — colours, borders, positioning, fonts, a custom cursor, or a tooltip

/* Assignment */

D3.A1  •   Moral Alignment Test — Button Design:

/* Topics */

D3.T1  •   Intro to on-screen signifiers: iconography, buttons, hover-states, cursors, animations, and tootips

D3.T2  •   CSS for designing buttons: pseudo-selectors, box-shadows, gradients, textures, and SVG

/* Resources */

D3.R1  •   Styling SVG How to scale SVG SVG Properties and CSS Pocket Guide to Writing SVG

/* Week 2 */

Day 04Mon,  Feb 12

/* Assignment */

D4.A1  •   Moral Alignment Test — Button Design (contd):
Studio time for A1.
Informal presentation of work-in-progress, feedback, etc.

Day 05Tue,  Feb 13

/* Assignment */

D5.A1  •   Moral Alignment Test — Button Design (contd):
Present completed webpages in the morning.

D5.A1  •   Moral Alignment Test — Button Design (contd):

/* Topics */

D5.T1  •   Intro to JavaScript: Adding functionality to buttons
— adding events to buttons/elements in markup (onClick, onLoad, onMouseOver, etc.)
— JS selection methods: getElementbyID, getElementsbyClassName, etc.
— Toggling style attribute values of an element using JS (by changing values of the attribute or changing classes)
— adding events to elements in JS using addEventListeners

D5.T2  •   Simple JS script — event, function, variable

/* Resources */

D5.R1  •   JavaScript reference onClick event (HTML DOM Events) eventListener method Change element's classList

Day 06Wed,  Feb 14

/* Assignment */

D6.A1  •   A.M: Studio time for A1.2
P.M: Presentation of completed A1 webpages

/* Homework */

D6.H1  •   Research into the history and evolution of GUIs:

/* Week 3 */

Day 07Mon,  Feb 19

/* Exercises */

D7.E1  •   Present homework (History & Evolution of GUIs) in the morning.

D7.E2  •   Design Elements:
Take four photographs of each of the seven design elements. Present your photos in the afternoon.

D7.E3  •   Design Elements:
Make six compositions, on six A5 sheets. Try to achieve visual balance in these compositions (without resorting to symmetry, ideally). Each composition needs the following design elements within them:

D7.E4  •   Creative Transformations:
Once done with D7.E3, take two of the completed compositions — Apply two creative transformations to each (Redraw/ re-create on new A5 sheets).

/* Topics */

D7.T1  •   The Seven Design Elements
(Line, Shape, Form, Colour, Value, Space, Texture)

D7.T2  •   Creative Transformations
(Add, Subtract, Combine, Fragment, Repeat, Transfer, Animate, Superimpose, Substitute, Isolate, Distort, Change Scale)

/* Resources */

D7.R1  •   Creative Transformation Cards (Synectic Tools): .pdf, 805 kb ↓

Day 08Tue,  Feb 20

/* Exercises */

D8.E1  •   From D8.R1, pick an mp3 /music player that you like.
— Identify the ‘atoms’ and ‘molecules’ (a la Brad Frost) on the device’s interface.
— How would this interface translate visually into a mobile / portrait screen format? How would it translate into a desktop / landscape one?
— In your translation / interpretation, keep intact any iconic design elements on the device; also keep the number of ‘molecules’ on the interface roughly the same.
— Make wireframes for your translation / interpretation first, then execute the same as functional code on a single, responsive webpage.

/* Topics */

D8.T1  •   Atomic Design Methodology

D8.T2  •   Responsive Web Design:
— Mobile-first approach
— Media Queries
— Fluid units (%, vw, vh)

/* Resources */

D8.R1  •   GUI reference: Essentials mp3/iPod, Norris & Lee PDF, 12.5 mb ↓ Hi-res jpegs, 60.5 mb ↓

D8.R2  •   Reading: ATOMIC DESIGN METHODOLOGY (Brad Frost) ↓

D8.R3  •   Responsive Web Design: — About: on A List Apart (2010) on Web.Dev — Media Queries: A Beginner's Guide Using Media Queries — Container Queries: on MDN on Smashing Magazine

Day 09Wed,  Feb 21

/* Assignment */

D9.A2  •   Case Studies — Animations & Transitions

Day 10Thu,  Feb 22

/* Assignment */

D10.A2  •   Case Studies — Animations & Transitions

/* Resources */

D10.R1  •   Styling an HTML video element: HTML video attributes Fluid width video

D10.R2  •   Example JS Carousel .zip, 2.11 kb ↓

D10.R3  •   JS Intersection Observer: on Hackernoon Web Dev Simplified (video) Heather Weaver Better Programming

Day 11Fri,  Feb 23

/* Assignment */

D11.A2  •   Case Studies — Animations & Transitions (contd.)
Studio time to work on A2.2.
Present completed webpages by the end of the day

/* Week 4 */

Day 12Mon,  Feb 26

/* Exercises */

D12.E1  •   On a single webpage, incorporate an example each of a CSS Transform, CSS Transition, and CSS Animate.

/* Assignment */

D12.A3  •   Build your own website

/* Topics */

D12.T1  •   CSS Specificity Weight

D12.T2  •   Further CSS:
CSS Transforms, CSS Transitions, and CSS Animate

/* Resources */

D12.R1  •   Further CSS CSS Transforms CSS Transitions CSS Animate

D12.R2  •   JS example (e) function + SVG map .zip, 6 kb ↓

Day 13Tue,  Feb 27

/* Assignment */

D13.A3  •   Build your own website (contd.)
Studio time to work on A3.
Present A3 website content and wireframes by the afternoon.

Day 14Wed,  Feb 28

/* Assignment */

D14.A3  •   Build your own website (contd.)
Studio time to work on A3.

Day 15Thu,  Feb 29

/* Assignment */

D15.A3  •   Build your own website (contd.)
Studio time to work on A3.

Day 16Fri,  Mar 01

/* Exhibition */

« «   » »  •   Open Studio —  Go to online version

Participants

  1. Advaith Ramesh
  2. Amor Laroiya
  3. Devika Nair
  4. Pragya Singh
  5. Sanat Sarin
  6. Syed Ahmeed

D7.E1: A WALK IN THE BROWSER

×

Exercise:

Make groups of two. Each group documents two websites from a category below:

  1. Portfolios

    1. Doubleday & Cartwright, Otolith Group
    2. Gregory Page, Bureau Brut
  2. Webstores

    1. Actual Source, Bookshop Library
    2. Fidele Editions, Sternberg Press
  3. Arts & Culture

    1. Khoj Studios, ZK/U - Center for Art and Urbanistics
    2. Liquid Architecture, CHAT (Centre for Heritage, Arts and Textile)
  4. Type Foundries

    1. ABC Dinamo, Typefaces of the Temporary State
    2. Gruppo Due, Florian Karsten
  5. Online Magazines & Journals

    1. Exmilitary, Bomb Magazine
    2. Developments, e-Flux Journal
  6. Radio Stations

    1. EOS Radio, Veneno
    2. Callshop Radio, Cashmere Radio
  7. Databases & Archives

    1. Pad.ma (Public Access Digital Media Archive), For Print Only
    2. Hallo Internet, Asia Art Archive


Document the websites by taking screenshots. Here’s your checklist:

  1. Home page (website.com)
  2. Other index pages or lists, if they exist (website.com/section1/, website.com/section2/ etc)
  3. Single-page types — i.e. layouts for pages or entries under the different website sections (like website.com/page1, or website.com/section1/page1). Do up to 3 single-page types, w. minimum 2 examples for one page type. (If there are few overall page types, give more examples of the ones that do exist)
  4. Important menu and navigation elements.
  5. Interactive elements that are specific to the website category (like the type tester that type foundry websites have) — 2 examples.
  6. Any other interesting interactivity (hover states, animations, popups, favicons etc) that you noticed.

All of the above 6 things need to be documented at: * desktop, * tablet, and * mobile viewports (choose breakpoints that the website uses); and at the * start of the page, * mid-page and * end-page (or mid-carousel/ end-carousel ..) — document appropriate to the website without giving or losing too much information.



After browsing through the website and looking at the menu navigation, URL paths, and sitemap (if any), make an informed guess and chart out the file and folder structure of the website. Write down any other notes or annotation that you think is relevant to know along with the screens. (You’ll use these notes in the second exercise for the day, where you’ll be presenting these screenshots)

Wireframe for D1.E2 (A)

×

Wireframe for D1.E2 (B)

×

D7.E1: A WALK IN THE BROWSER

×

Exercise:

Make groups of two. Each group documents two websites from a category below:

  1. Portfolios

    1. Doubleday & Cartwright, Otolith Group
    2. Gregory Page, Bureau Brut
  2. Webstores

    1. Actual Source, Bookshop Library
    2. Fidele Editions, Sternberg Press
  3. Arts & Culture

    1. Khoj Studios, ZK/U - Center for Art and Urbanistics
    2. Liquid Architecture, CHAT (Centre for Heritage, Arts and Textile)
  4. Type Foundries

    1. ABC Dinamo, Typefaces of the Temporary State
    2. Gruppo Due, Florian Karsten
  5. Online Magazines & Journals

    1. Exmilitary, Bomb Magazine
    2. Developments, e-Flux Journal
  6. Radio Stations

    1. EOS Radio, Veneno
    2. Callshop Radio, Cashmere Radio
  7. Databases & Archives

    1. Pad.ma (Public Access Digital Media Archive), For Print Only
    2. Hallo Internet, Asia Art Archive


Document the websites by taking screenshots. Here’s your checklist:

  1. Home page (website.com)
  2. Other index pages or lists, if they exist (website.com/section1/, website.com/section2/ etc)
  3. Single-page types — i.e. layouts for pages or entries under the different website sections (like website.com/page1, or website.com/section1/page1). Do up to 3 single-page types, w. minimum 2 examples for one page type. (If there are few overall page types, give more examples of the ones that do exist)
  4. Important menu and navigation elements.
  5. Interactive elements that are specific to the website category (like the type tester that type foundry websites have) — 2 examples.
  6. Any other interesting interactivity (hover states, animations, popups, favicons etc) that you noticed.

All of the above 6 things need to be documented at: * desktop, * tablet, and * mobile viewports (choose breakpoints that the website uses); and at the * start of the page, * mid-page and * end-page (or mid-carousel/ end-carousel ..) — document appropriate to the website without giving or losing too much information.



After browsing through the website and looking at the menu navigation, URL paths, and sitemap (if any), make an informed guess and chart out the file and folder structure of the website. Write down any other notes or annotation that you think is relevant to know along with the screens. (You’ll use these notes in the second exercise for the day, where you’ll be presenting these screenshots)

Wireframe for D7.E2

×

Wireframe for D9.E1

×

Wireframe for D9.E2

×

Wireframe for D15.E1

×

Wireframe for D15.E2

×

Wireframe for D15.E3

×

Design Elements for D7.E3

×

D1.T1: Website directory structure

×

D9.T2: CSS Specificity weight

×

D9.T3: JS event, function, variable

×

D1.T1: Website directory structure

×

D12.T1: CSS Specificity weight

×

D12.T1: CSS Specificity weight

×

D2.T1: Website directory structure

×

D5.T2: JS event, function, variable

×

D14.A3: Build your own website

×

Assignment A3

Build a website using the methods and techniques covered over the last few weeks (and any more you may have discovered since then). The concept, content, and design of the site is entirely up to you. Below is a checklist that needs to be fulfilled:

  1. Ensure that your website is self-contained and fully functional. It cannot be an incomplete site.

  2. Your website needs to be responsive and look consistent and proportionate across all screen sizes. Make use of the appropriate techniques for this, like CSS media queries, custom properties (variables), Flexbox, Grid, and/or relative units.

  3. The <head> on every page needs to have all the relevant metatags filled out, including a favicon for your site, and images for sharing on social media.

  4. Your code needs to be formatted and commented on — keep your markup indented properly to show clear nesting, and use comments on all your code files, so that a third person (or you, in the future) can parse through it easily.

  5. As part of your A3 submission, please also make a directory ‘key’ to your website (which lists the file/folder structure of your website), and a DOM ‘key’ for each page design/ template. (i.e. even if your website spans multiple pages, if there is only kind of page design on your website, then show the DOM structure for just that one design/ template).



For the concept and content for your website, allocate no more than 1/3rd of your total time for A3 to flesh this out. The remaining bulk of your time should ideally be spent on making wireframes, preparing assets, coding/programming, and possibly researching methods, techniques, or libraries specific for what you’re trying to accomplish.

Your website needs to be coded, and not made with a website builder service. (Your craftsmanship with regard to design and code is what will be assessed more than the concept of the site, so prioritise accordingly.)

D7.A2: Educational Webcharts

×

Assignment A2.1

Make an educational webchart based on the print chart assigned to your group, using the CSS techniques covered over weeks 1 to 2. The webchart will be an online replica of the printed version, and should look as close as possible to it.

  1. All the images from the print chart need to be scanned and inserted/coded as individual images into the webchart. Images or illustrations that have a solid background need to be edited and inserted as PNGs with transparent backgrounds, so that its parent container can be resized/responsive, while maintaining the images’ positions and proportions.

  2. All the text from the print chart (incl. single alphabets and Devanagari script) must be coded as text* and cannot be scanned images. (*except for the logos, which may be scanned and inserted as images.) Do some research and embed the fonts which look closest to the ones on the printed one.

  3. The overall layout, as well as the sizes/ratios of the individual thumbnails needs to be responsive and therefore legible at all screen sizes. The column count of the webchart’s grid need not be the same as the printed chart, for all viewport sizes.

  4. Use CSS Grid to design the overall chart layout with thumbnails. Play around with the column widths and counts for different breakpoints — see what works best for your particular chart’s content and design. Use CSS Flexbox to design each thumbnail internally.

  5. There are no pre-defined breakpoints for this assignment. Work with the content and define your own breakpoints, so that the images and text can be viewed comfortably and is legible at different screen sizes.

  6. The header from the print chart needs to be sticky/fixed on the webchart; the footer can be static positioned.

  7. Colours and other decorative elements such as lines, borders, etc. also need to be matched as far as possible!



As part of your A2.1 submission, please also make a DOM ‘key’ to your webchart, which lists (in text format or as a simple line drawing,) the general DOM structure for the main elements of your webpage.

Wireframe for D7.A2

×

D12.A2: Design Elements and Visual Priming

×

Assignment A2

Select a visual template from any website that falls under the following categories below:

  1. Landing pages for any large business or SaaS website (e.g. Shopify, Salesforce, MailChimp, Razorpay, Heroku, Simplecast)
  2. Browsing/ thumbnails page from any streaming website (e.g.: YouTube, Spotify, Netflix, HotStar, Jio Cinema, Prime Video)
  3. Shop pages from any webstore / eCommerce site (e.g. Amazon, Crossword, Ikea, Shoppers Stop, FabIndia, The Body Shop)

What are the ‘visual expectations’ from any of these templates? Select one and change up its look to create some design ‘friction’ and make the page look more interesting, by adding or modifying at least TWO Design Elements: SPACE, and any other Design Element of your choice (Line, Shape, Form, Colour, Value, or Texture).    


 

Furthermore, the content of this page needs to be changed as well — the page content should talk only the design elements covered today (for instance, a landing page that asks you to sign up to some design elements, or a webstore for different kind of lines, or a streaming service to only view videos of textures, …etc). For the website content you could either use the photographs taken as part of today’s exercise, create new drawings, or look for online images that work with the theme of your website.  
 



For this assignment, create wireframes or mockups of the design first, and then develop it as a webpage that is accessible and legible on various screen sizes — putting into practice the CSS and responsive web design techniques from the last two weeks.

D18.A3: Make Your Own Hypertext Narrative

×

Assignment A3

Make a hypertext story or narrative, using the devices and techniques covered so far in this course.

  • The story/narrative can either be fictional, or based on nonfiction, but needs to have a narrative arc of some sort which is original and mediated/delivered through the website you build.

  • Use hyperlinks, HTML Inputs, JavaScript functions, grid layouts, images and other graphic elements wherever applicable, to come up with an interesting and engaging website.

  • Ensure that the website is legible and accessible on different screen sizes.

D5.A1: A Website Study

×

Assignment A1.1

Document and analyse 2 websites by taking screenshots and annotating, or writing comments on them. Make a presentation for the same (due on Wednesday, October 4th).

Pages and elements to be documented on each website:

  • Home / Index page
  • 2-3 (Sub)Pages
  • Menu and Navigation Elements

Document the above at various screen sizes (roughly: desktop, tablet, and mobile), but also observe how the layouts change at different points.



Here’s your checklist for what needs to be analysed across these websites:

  • Design Principles (hierarchy, balance, patterns, contrast, etc.)
  • Typography (font types, combinations, sizes)
  • Layouts (spacing, grids, columns)
  • Interaction Elements (buttons, cursors, input fields)
  • Micro Interactions (hover states, scroll interactions, animations, transitions)
  • Indicators & Signifiers (process bars, call-to-actions, etc.)


For the first website, choose something from the collection on Hallo Internet, that you personally find inspiring.

The second website can be any one that you’ve come across elsewhere, and that you feel is an example of a good website.

Wireframe (A) for A1.2

×

Wireframe (B) for A1.2

×

A2.2: Case Studies — Animations & Transitions

×

Assignment A2.2
 
 
Make a simple webpage to present your website screenshots, screen recordings, and analysis from A2.1.

Come up with a presentation layout that works for your content, with the following requirements:

  • Ensure that each website screenshot/recording takes up the bulk of the viewing area on your webpage
  • Add some <a> anchor tags on a sticky or fixed <nav> element to this webpage, to jump to different sections of your presentation.
  • Incorporate an animation or transition from your case studies into your presentation itself (if possible).

Wireframe for A2.2 (A)

×

Wireframe for A2.2 (B)

×

D12.A3: Build your own website

×

Assignment A3

Build a website using the methods and techniques covered over the last few weeks (and any more you may have discovered since then). The concept and content of the site are entirely up to you.

Come up with a design for the same, with the following requirements:

  1. The website must have some animations and transitions that convey various interactions.

  2. The website’s content should be legible and accessible across different device sizes.
     


 
As part of your A3 submission, please also make a DOM ‘key’ for each page design/ template.

A1.1: Moral Alignment Test — Button Design

×

Assignment A1.1

Make a webpage with a ‘moral alignment test’ (lawful good — chaotic evil,) consisting of 9 buttons in a 3x3 grid.
 
Design the buttons according to the particular alignment, and also provide a brief explanation of each button’s concept as a text somewhere on the page.

Wireframe for A1

×

A1.2: Moral Alignment Test — Button Design

×

Assignment A1.2

Add some functionality to all the buttons made so far, using JavaScript. Make each button do something (eg: make a pop-up appear, change the colour or some other style values of an element, etc.)

Design/program the button’s actions according to its characteristics.

A2.1: Case Studies — Animations & Transitions

×

Assignment A2.1
 
 
Make groups of two. Each group picks one of the four sets of portfolio websites, below:
 



Observe the websites in your chosen set: Look out for animations and/or transitions that communicate any sort of affordance on the site (2 – 3 examples for each website).

Analyse how each animation and/or transition communicates:

  • That something can happen,
  • That something is happening, and
  • That something has happenned.

Document the same in the form of screenshots (or screen recordings), and comments.

Homework — History & Evolution of GUIs

×

Homework
due: Day 07 / Mon, Feb 19

Do some research on the history and evolution of GUIs (Graphical User Interfaces) across various screen-based interfaces. Gather at least 10–12 different examples. Document/present this research in the form of images with annotations.

A few ideas to help you start out:

  1. Command line interfaces from the early days of computers
  2. Old mobile phone interfaces
  3. Media Player screens (CD players, Walkmans, HiFi systems, DJ consoles, etc.)
  4. OS (Operating system) interfaces through the decades

OPEN STUDIO — AT RAAH 003, SMI

×