Interactive Design: Project 2
15/10/19 - 29/10/19 (Week 8-Week 10)
Angelina Lee An Qi (0334272)
Interactive Design
Project 2
Lecture Notes
Lecture 8: Introduction to the moduleWeek 8 (15/10/19):
Responsive web design, method that makes web pages render well on different screens and devices.
- adjust content based on screen, size, platform and orientation.
- not leave out info to fit smaller screens, but adapt content to fit any device.
- achieved with fluid grid concept
Page elements in relative units:
<img scr="photo.jpg" class="img-fluid">
.img-fluid{
width: 100%;
height: auto;
}
How to use media queries:
@media only screen and (max-width: 600px) {
body{
background-color: lightblue;
}
}
Starter template:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Instructions
Project 2
 |
| Fig. 1.1 |
 |
| Fig. 1.2 |
 |
| Fig. 1.3 |
 |
| Fig. 1.4 |
 |
| Fig. 1.5 |
 |
| Fig. 1.6 |
 |
| Fig. 1.7 |
Feedback
The logo on the navigation bar was too small, as well as the picture on the footer section. The rest was fine.Reflections
Experience:
At first it felt very hard to get used to using Bootstrap. However I practiced some other layouts in my own time and now I feel like I am able to translate that into this layout.Observations:
The logo and picture in the footer was too small, so I tried to find another way to make it work. I decided on designing a new logo and picture for it.Findings:
I designed a new Troublemakers logo and picture separately based off of my key artwork to be big enough to fit. It was quite a last minute thing, so I was glad that they blended in with the theme of the layout.Further Reading
What Puts the Design in Interaction Design by Kevin SilverInteraction design sparks a reaction when a user does an action. It does not have to be digital, however it seems to be based on the popularity of digital media in recent years. One could say that interaction design is the unity of the physical and virtual world. In the year 2019, one does not need to use a mouse when there is virtual reality.
Comments
Post a Comment