For the remainder of class, either:
1. Put together a one page website that collects your previous work from this class. Have your name, a brief description of the work that is on the site, a nav and a footer. The intention is to have you arrange multiple types of content on a single page, and to build a more complete web page. You may use iframes, anchors, floating elements and positioning as needed.
2. Add content (images, text, etc.) to one of your previous projects. See if you “grow” a design organically from one of your experiments. Content could be “poster-matter”, etc.
And as a wrap-up… go to your author page on the website and make sure you have a “Nickname — first name, etc.” at the top of your site. Here is a fairly good example from session 1. make sure also that your work looks good on that page and links to html files and not images.
And look for the course evaluation by email at the end of the semester.
The term “responsive design” refers to a website’s ability to change layout and shape when seen on different sized browsers or platforms. This shift in layout takes quite a bit of planning and thought.
This assignment asks you to create a work that plays with this concept of responsiveness as an opportunity for animation. Make a work that shifts and alters its experience based on the viewport of the browser. You may also introduce interactivity and interactions within the browser itself. However, the focus of the assignment is the “transition” between states. How can you activate/animate/create unexpected changes in those states, as if your perspective is changing in the 3D space
We’ll look at the latest in CSS3 properties, that allow animation and movement in the browser. When mixed with the event handlers of jQuery, the stabile structures can shift properties upon user interaction.
Websites today are often designed with these subtle shifts in elements. We’ll be making more drastic moves, making the animations and interactions a primary part of our experiments. Start on the below assignment after taking some time in class today to get used to how these interactive elements work.
Complete the following exercises:
On rollover, make an element fill the screen
On click, make one element cover another element
On click, have two different (visual and actual) elements animate
Move an element back and forth across the screen
Sessions 1 and 2
Read the chapter titled “Relations” from Leborg. The author presents an extensive vocabulary of relationships. For example, the terms include: symmetry, balance, groups, coordination and distance.
Make a simple shape and allow the user to change the default relationship in some way. Choose just one type of relationship from Leborg’s chapter for each composition. More than one relationship may occur through your investigation of the one concept.
Title your compositions using the type of relationship that you’re working with. Upload your work to the website and categorize as 5: Shifts in relations.
Firstly, make sure your post is categorized correctly (only 4: Patterns).
Secondly, take a screenshot of your pattern and upload an image of each and link to the HTML page.
Thirdly, provide feedback to the person who appears above and the person who appears below you in the web feed. Add a comment to each of their posts. Do you notice anything exemplary or noteworthy in the coding? Any areas of improvement?
Fourthly, we’ll hear from 3 of you up front about what you’ve seen.
Fifthly, download one of your classmates’ HTML and adjust it to make a new pattern. Upload yours into their post at the bottom. Use a screengrab and put a link to your HTML.
Absolute positioning may be ideal for creating a drawing or a simple layout, however it falters quickly when many elements start stacking up. The web, in short, is not about control. This take-home assignment asks you to take specific elements and repeat them to form a continuous pattern. The pattern may be created from the combination of floating elements and positioned elements.
Start by repeating a single element. Consider refining this first step into a single composition. Note the figure and ground relationships that emerge. Expand your work to include more layers and more shapes. Use only one color per layer.
Upload your experiments to a post on this website and categorize it under “4: CSS Patterns”.
Using Allan McCollum as inspiration, we’ll be making unique compositions by combining abstract parts (or bits!) in a single webpage. Read more about shapes on his website.
Part A: Create a square container that is 25% tall (height and width are 25vh) that holds a your shape. Your shape may be one element or several, but it should be completely nested inside your container div and be black and white. Make sure your classes are unique (use your name, etc.). Take a screen capture of your shape, log in to the website and post your shape to the Assignment 3A category. Log out of WordPress when complete.
<!- – Break – ->
Part B: View source for everyone’s composition and bring whichever ones you like (minimum of 10) into a single document. Make a composition made up of 16 boxes, using solid black or white boxes as desirable. Code the fullscreen composition so that it allows you to entertain as many options as possible. Discover compositions in the code and in the Web Inspector. Finish and upload by end of class to website adn assign to Assignment 3B category.
Create a single abstract shape — a shape that does not need to represent something real (a concrete object). Your shape should be one single HTML element (a div) with a single class of CSS properties. Upload your HTML to the site and insert it into a post as an iframe and categorize that post in the “3A: Abstract shapes” category. Add a link to the HTML file so it’s easy to download. Take no more than 30 minutes to make your shape.
See how far you can push the one shape.
After your shape is uploaded, choose a minimum of two shapes from the class set and create a unified composition. By unified, your elements may touch, overlap or more generally form an aesthetic connection with each other. Your intention is to make one form from your two shapes. How can you create the same tension, dynamism and joy that the printed examples above demonstrate? How does the canvas of the screen house your work? You will likely need to adjust the CSS properties to create a unified composition. Make more than one if you like.
Take a screen capture of your finished composition and upload to the website with a link to your HTML file. Categorize the post as 3B: Abstract Compositions
Designer Paul Elliman has been collecting small found objects that resemble typographic glyphs. Whether found on the side of the road, at someone’s house or at the hardware store, the objects are silhouetted at actual size and placed in his project. He calls the monochromatic collection of objects, Bits. The formal language used can be traced to photograms, a one-to-one photographic black and white copy of an object. The photogram effectively makes two dimensional and graphic any three-dimensional object.
This assignment asks you to collect objects of your own, whether in your home, around town, at RISD 2nd life, etc., and draw them using HTML and CSS. Do not choose iPhones or super-common electronics. Hunt around for unique and simple forms — like a band aid.
With CSS3, it is possible to draw non-rectangular shapes right in the browser. You may use any foreground and any background color, but be sure to use only one color for each — thereby working with form and counterform only. You may stylize (simplify) your original object as needed, but the goal is to make a faithful copy of the object. Consider the perspective that you choose for the object. You are encouraged to plan out your drawings in your F&C course notebook first.
Make five drawings using div tags and css classes. Create an html file for each digital bit, and upload your html files into a post on the class website. Categorize your post to the category CSS Found Objects. Place your name in the tile of the post and the names of the objects above or as part of your link.
Goals for the assignment
Designing websites starts with structural thinking — blocking in shapes in the browser. It’s the exact same thinking required needed to establish blocks needed to form these drawings. This process demands that you both plan your shapes in advance (by sketching) and adapt them to the reality of what you are able to code and what you see while you are coding.
Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to Scandinavian Flag. The size of the flag is up to you.