Interactive Design - Exercises

-

 Exercises

Week 1

First week was a brief about the module and a group exercise. The group exercise was critiquing a a websites on pros and cons.

Week 2 - Exercise 1

This weeks lecture was on HTML and CSS. The lecturer touched on the basics of HTML and gave and exercise on basic HTML on notepad.

Figure 1.1 - Process in notepad

After I finished I uploaded it to Netlify.
https://nostalgic-beaver-a7ecb8.netlify.app/

Week 3

This weeks exercise was to make a wireframe for project 1.

Figure 1.2 - Sketch for wireframe




Figure 1.3 - Wireframe

Week 4

This weeks lecture was on the basics of CSS and getting started with Adobe DreamWeaver.
The exercise was to create a css website using the given content and images.

Figure 1.4 - Coding in Dreamweaver

Figure 1.5 - classing image and changing to block element to center the image

Netlify link : https://pensive-ramanujan-b7e8dd.netlify.app/

Week 5

This weeks exercise was alignment work on last weeks exercise and adding links to sections.

Figure 1.6 - code

Netlify link : https://quizzical-goldstine-ad8036.netlify.app/#section1

Week 6 - Exercise 2

A layout was given and we had to recreate the given layout in DreamWeaver.

Figure 1.17 - Coding process

Netlify link : https://elated-leakey-c57076.netlify.app/

Comments

Post a Comment

Popular posts from this blog

Advanced Animation - Project 1 - Pre Production

-
Image
  Project 1 - Pre Production For project 1 we had to choose a voice clip of our choice and create a scene using that clip. The scene should be about 15-30 seconds long. We had to storyboard, Act and animatics as a pre production process. Figure 1 - Audio clip chosen. Figure 2 - Storyboard Figure 3 - Storyboard Figure 4 - Acting Figure 5 - Animatics/2d Blockout
Read more

Advanced Animation - Project 2 - Production

-
 Project 2 - Production After Animatics and acting was done, we moved onto setting up the set in MAYA. I used a rig for my character called Jasmine Rose by Ahmed Shalaby. I first imported my Acting into Adobe animate and listed out how many frames each scenes used and blocked it out in MAYA. I made set before I did this. Figure 1 - Animation Blocking After I blocked out the scenes I started animating scene by scene. After animating the scenes I added rough lighting to see what it would look like in the final render. I rendered the scenes in this lighting for feedback. Figure 2 - Project 2
Read more

Digital Photography & Imaging - Project 3 (Digital Surrealism)

-
Image
Project 3 - Digital Surrealism The objective this project is to create a surreal artwork in photoshop. Below are some examples of digital surrealism. Process My main idea is to use the first cyborg piece I made and put it into a cyberpunk city. Cyborg image of me Image for background - Artwrok by Chin Fong  https://www.chinfongart.com/art I used quick selection to cut out myself into this image, after using healing brush to remove some of the ninja character which was already in the image. Then it was color matched I used the brush tool to add some glow from the pink sign onto my body in a new layer Saturn image I want to add Whale image I added to the sky, Inspired the the song Gojira - Flying Whales More whale Images Whales and Saturn added in Next I brought it into Adobe after effects for animation. My main idea for animation is to add rain fall into the image. I started by adding the CC rainfall simulation in after effects and playing around with settings a bit. Next step addin...
Read more