INTERACTIVE DESIGN - PROJECT 2

23.05.19 - 13.06.19 (Week 8 - Week 11)
Catherine Starlie (0336261)
Interactive Design
Project 2: The Troublemakers Manifesto: A Design Colloquium Microsite


LECTURES

Lecture 8: -
23.05.19 (Week 8)

We didn't have any lecture for this week.

Lecture 9: Bootstrap
30.05.19 (Week 9)

This week, we learned how to use Bootstrap and column.

Another bootstrap components can be found from the link here:  https://getbootstrap.com

Lecture 10: -
06.06.19 (Week 10)

We didn't have any lecture today due to Public Holiday.

Lecture 11: -
13.06.19 (Week 11)

We didn't have any lecture for this week.


INSTRUCTIONS





PROJECT 2

For this project, we were told to do a microsite for "The Troublemakers Manifesto: A Design Colloquium". I started it by sketching and finding some references first.

Fig 1.1 Reference
Fig 1.2 Reference

Fig 1.3 Colour Scheme
Fig 1.4 Sketch of The Layout
I also made a gif for the photo.
Fig 1.5 First GIF
Because I felt that the gif is too long and it kinds of weird if I putted it into the website, I changed the gif again.

Fig 1.6 Second GIF
Then, I started to do the website but I couldn't really doing well with the colour of the mood board so I tried to use another colour that within the range.

Fig 1.7 First Attempt
After I getting some feedback, I changed some of the codes and layout again but it kinds of failed (which was about the a href="" but I couldn't find it out where to change it again).

Fig 1.8 Final HTML

Fig 1.9 Final CSS



FEEDBACK

20.06.19 (Week 12)

Mr. Shamsul told me that the gif is nice but the "About" section had a large font and it the space could be minimized. Then when they minimized the website, there's no sidebar. After that, when they tried to click the other section, it scrolled smoothly but it covered up the words. He also suggested me to use the colour that I used for my poster.


REFLECTION

EXPERIENCES

23.05.19 (Week 8)

I suddenly thought about making a gif based from the logo and I chose static or error gif to make it more trouble and it somehow worked.

30.05.19 (Week 9)

I had a hard time just because the nav didn't work like what I wanted.

06.06.19 (Week 10)

I tried to figure it how why the first things on the body could be covered up by the navbar.

13.06.19 (Week 11)

I just knew that there are many components that we could use from bootstrap such as cards, carousels, and so on.

OBSERVATIONS

23.05.19 (Week 8)

There are many different designs from different people and it somehow inspired me more.

30.05.19 (Week 9)

I didn't know how to use bootstrap so I tried to ask people around and search it online.

06.06.19 (Week 10)

I still had a hard time to understand bootstrap so I still observed it.

13.06.19 (Week 11)

There are different ways to use bootstrap for websites, depends on ourselves.

FINDINGS

23.05.19 (Week 8)

Actually designed a mock up like the project 1 or mood board are actually helped us to design our own websites. But sometimes I prefer to do it directly because it could suddenly give me another idea to design it.

30.05.19 (Week 9)

Actually bootstrap helped a lot to those people who wanted to build their own websites.

06.06.19 (Week 10)

I just found out if we minimized the website, the texts in the navbar would be changed into sidebar but somehow it didn't work for my website.

13.06.19 (Week 11)

I found out that cards can be used if we wanted to show many images in a line.


FURTHER READINGS

Mastering Type: The Essential Guide to Typography for Print and Web Design by Denise Bosler

Designing with Pages

Pages are where all of the content and elements come together because they pull the whole story together and it is crucial to develop a design that communicates properly. A designers sure want their reader to immerse themselves in the page.

Publication Design

Multi-page documents usually require particular attention to design in a way different than single-page documents. The visual concept must flow from page to page and so on.

Comments

Popular Posts