B. Projects - risdesignet/wd-winter2020 GitHub Wiki
- Compile all of your work into a single website. These should all be linked from an index.html file living at your repository root.
- Be sure to organize your files into appropriate folders (avoid spaces and capitals)
- Be consistent in your naming
- Site should work for both large and small screens
- Your site should include the following: 1) projects 1, 2, and 3; 2) reading responses to Louise Druhle, Olia Lialina, and Laurel Schwaltz; 3) documentation of any process work like site mockups, wireframes, research, or additional web based work/sketches you created; 4) an about me section; 5) any exercises you would like to include that you worked on in class;
- A note on site structure: Every Project, Reading Response, and Exercise should be in their own respective folder. Include any process images (sketches, etc.) in a process folder, but please do not include raw psd files. Size the images down to the exact dimensions you will be using them for your site to keep from slowing down your web page. Your "About Me" section can be in any form you would like to represent yourselfβshort bio, artist statement, a poem etc.βbut it should also include your name and a link to your github page. Below is a sample folder structure:
repository-name(root)
βββ index.html
βββ style.css
βββ script.js
β
βββ projects
β βββ project1
β β βββ project1.html
β β βββ project1.css
β β βββ images
β β βββ img1.jpg
β β βββ img2.jpg
β β βββ img3.jpg
β βββproject2
β β βββ project2.html
β β βββ project2.css
β .
β .
β .
βββ exercises
β βββ exercise1
β β βββ ex1.html
β β
β βββ exercise2
β β βββ ex2.html
β β βββ ex2.css
β .
β .
β .
βββ about
β βββ about.html
β βββ about.css
β .
β .
βββ reading_responses
β βββ responses.html
β βββ responses.css
β .
β .
βββ process
.
.
.
- Due Wednesday February 5
Choose a span of time to represent as a multi-page or single page website. This might be your personal history (every year of your life), your activities over a 7 day week, or a 24-hour period. There should be at least 6 events in your timeline. Use JavaScript objects and/or arrays to store data about each event. Make the timeline responsive by displaying information or triggering animations through user interaction, meaning elements of the site should be revealed through user engagement. While it is good to think about creating a narrative experience for your timeline, or creating a design system to display the information, you should place greater attention this week towards executing the following: 1) Storing data in JavaScript Objects and Arrays to be later accessed through user interaction; 2) Adding event listeners to the DOM to record user interactions; 3) Manipulating the DOM once a user interacts with the page; 4) Embedding sets of instructions in functions. Deliverables:
- Gather data and contents (imagery, etc.) Consider different forms of media. Store data using JavaScript.
- Determine a navigational system suitable for your framework: is it linear or modular? How do you build a sequence? How do you express the passage or experience of time? What is the website about? Pay close attention to the user experience. What information orients / disorients?
- Incorporate at least one interactive element to the page using JavaScript Event Listeners.
- Manipulate the DOM using JavaScript.
- DUE MONDAY 1/27
Pick a work from the RISD Museum or Special Collections at the Fleet Library. What strikes you about the work? Break down its visual characteristics: size, texture, color, composition, context, materiality etc. Maybe it's the sound it makes, its smell, the way it moves, or the way it is sequenced. Sit with it a while and study it closely. Write down what you observe. Make a sketch of it in your journal or take a picture or video of it that you can use as a reference. Turn your observations into variables and use them to create a new work for the web. How can you translate what you observed into a new work that utilizes the materiality and characteristics of the web? For example, if the artwork you've chosen is massive, how can you create that sense of largeness on the web with your work? If it's delicate, how do you simulate delicacy on the web? If it smells of wet decaying leaves, how can you trigger that smell to your viewer? How do you represent decay on a webpage? If your work is a mottled red, how do you replicate those changing hues? In this project, we want you to practice visual research and translation as a means of creating new works. You should place a heavy emphasis on experimenting with methods of translating your sensory experiences of another work onto the web.
- Due Tuesday January 21.
Project 1. The internet is a revolutionary publishing platform, allowing for the global distribution of content for relatively little cost. In this project, we want you to think about designing a reading experience for a particular audience on the web. What should publishing or reading be like on the internet? Should it imitate previous mediums, like books or magazine publications, or should it be something else entirely? Redesign and program the chapter you were assigned from the Paul Ford "What Is Code" text paying particular attention to typography, composition, voice, sequence, and audience.
- Analyze the content of your text. Create a taxonomy and/or informational sitemap of the different elements that need to be designed for.
- Pick an audience to design for: RISD Parents, Millennials, Your five year old self, Plants. Write a few personas to help identify the core objectives to keep in mind for your site design. ex. βAs a graduate student, I want to be able to search for the cheapest textbook and have it arrive as soon as possible.β
- Create a blueprint of your website using some combination of wireframes, mockups, moodboards, and design manual.
- Build your site! It can be a single page, or multiple pages. It is up to you to decide what the reading experience should be.
- Reference on designing for the screen: What Screens Want
- Due Monday January 13.