INTERACTIVE DESIGN - PROJECT 1

10/09/19 – 17/09/19 (Week 3 – Week 4)
Arletta Leviani (0337751)
Interactive Design
Project 1

---

LECTURE NOTES

Lecture 3
10/09/19 (week 3)

---

INTRODUCTION

---

EXERCISE

Landing Page Design (week 3)

We are start to design our landing page with whatever topic we wanted, Mr Shamsul said that it is better to pick our own topic of our choice because we will design it better. I start picking my design with things I love and games are something I'm really fond of. A few games that I took interest is Persona 5 and Detroit: Become human. The only problem I had is both games already have their own websites. I was told if I want to make landing page with the same topic, try to find another key to actions. I don't really want to make another websites to buy merchants so I change my topic. I am interested in puzzles so I decided to do topic on Kryptos. My idea is approved and my key to action is sign up to join the discussion to solve the puzzle.

Fig 1.1 Kryptos

I started with my sketch. I have a few things I want to put in my landing page, I tried to make the landing page more flowing with the shapes but after a while, I decided to scrap the idea. I thought that the community of Kryptos solver are people that are professional, so I decided to make everything more professional.

Fig 1.2 Sketches

Week 4

I make mine using Adobe Photoshop. these is all my progression of my landing page. My feedback was that I should put more space between the each section. I was also told that I need to put some information.

Fig 1.3 First landing page

I put some words in my landing page and I was told not to put too much because the readers going to be too lazy too read. I was told to also keep my eyes on the leading so they are not too close with each other.

Fig 1.4 Second landing page

 On my third attempt, Mr Shamsul said that it was okay and could be better. I was told to look at pinterest landing page to get ideas.

Fig 1.5 Third landing page

I decided to make another one because I am too not satisfied. I changed my color scheme and decided to change the background color from black to light grey. The change of color give the landing page look more light. I make my other color based on the color of the Kryptos statue which is green. I change the last part from 'Watch more' to ask to sign up again, the idea is when a viewer scrolling to the bottom, they will be interested to sign up. Even when I change a lot from my last progress, I keep in mind all my feedback to make my final landing page.

Fig 1.6 Landing page progress

Fig 1.6 Final landing page

Fig 1.7 Final landing page PDF

---

FEEDBACK

Week 3
Mr Shamsul suggested not to make a landing page for a web that already exist. If I want to use my topic of game, maybe make a fan page.

Week 4
First specific feedback
Mr Shamsul told me to add some explaination, not only images. I was told to make sure to give space between sections because what I made is really tight.

Second feedback
I was told that I have too much words. Better to cut down a bit so the readers won't become too lazy to read the information. I was also told to make each space between sections height is the same and my text alignment to left alignment.

Third feedback
Mr Shamsul said my third landing page was okay and I was told to find ideas from pinterest. After redoing my landing page, I was told that my fourth landing page is good and clean, better than before.

---

REFLECTION

Experience

Week 3
I had a few problem picking my my topic since I really don't want to make a landing page for selling merchandises. I manage to find a topic after a while.

Week 4

The first problem I had is to pick the color scheme and I had a lot of trouble figuring how much space I needed to make them not cramped. 

Observation

Week 3
I noticed that I sketch my landing page really messily. 

Week 4

I notice that I like using Adobe Photoshop more than Adobe Illustrator. I start my work in illustrator but then just changed completely to Photoshop

Finding

Week 3 
I find it's hard for me to pick a topic when there are a lot of topic I can use for the landing page. I tried to give myself some limits so I can get only some topic and not get confused with a lot of topic.

Week 4
I find that if I try to get some color scheme from the start is really helpful. I tried to make sure the colors can match the images aesthetic. 

---

FURTHER READING

Towards a New Age Graphic Design by NCERT.

week 3-4 (10/09/19 – 17/09/19)

Fig 6.1 INTRODUCTION HTML5 SECOND EDITION

Html structural elements
By using different tags

• <article>
• <aside>
• <header>
• <figure>
• <footer>
• <nav>
• <section>

example:

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8"> 
        <title>Sample HTML5 document</title>
        <script src="samplefile.js"></script> 
        <link rel="stylesheet" href="stylefile.css">
    </head> 
    <body>
      <header>...</header>
      <nav>...</nav>
      <article>
            <section>
              ...
            </section>
      </article>
      <aside>...</aside>
      <footer>...</footer>
    </body>
</html>

Fig 6.2 html structural elements