INTERACTIVE DESIGN PROJECT 1
10 Sept 2019 - 17 Sept 2019(week 03-week 04)
Ating Otobong Melvin Abang(0333700)
Interactive Design
Project 1-Landing Page Design.
LECTURES
Lecture 3
10/9/2019(week 3)
we learnt about the history and the background of the web. and i learnt a few things about the Internet here.
That the Internet was created for Communication between allied countries during the war
Web standards - Design websites using the same language(html & css)If not complied with web standards most likely to unable to access for most people.
Here is the PDF file of this week's Lecture Note.
Lecture 4
17/9/2019 (Week 4)
Today's Lecture was mainly on the intro to HTML(Hyper text Markup Language.
<html> <head> <title> Title </title> </head> <body> </body> </html>
INSTRUCTIONS
PROJECT 1
We we're told that we can choose to design a landing page for anything we want, with minimum of 3 sections. After confirming the idea, we had to do 5 sketches and get approval.
I wanted to do a sports landing page so I sketch a few layouts of how it would look like. So I decided to go for football being my favorite sport and Barcelona being my favorite club.
So after checking out how a football landing page should look like I then thought about Making One for Taylor's called FC Taylors and I did 5 sketches as we were instructed to Do.
After Sketching I then moved on to digitization of the Landing Page
I then proceeded to add Buttons on the Dropdown menu and created the Page and the arrows that switch the info displayed on the Home page i added a gradient tool to the colors
I then created the Match Information page Just like FC Barcelona's, at this point was were I was stopped and given feedback on my landing page and the gradient was too much, everything looked boy and I used more than 2 typefaces.
AFTER FEEDBACK
After the Feedback given I then desired to look upon pin trest examples of sporty landing pages and then one stood out to me and from then i decided to use that as a guide in restarting my landing page.
I liked the Composition of this new landing page and everything wasn't boxy, the type used was consistent and the colour too wasn't more than 2.
Lecture 3
10/9/2019(week 3)
we learnt about the history and the background of the web. and i learnt a few things about the Internet here.
That the Internet was created for Communication between allied countries during the war
Web standards - Design websites using the same language(html & css)If not complied with web standards most likely to unable to access for most people.
Here is the PDF file of this week's Lecture Note.
Lecture 4
17/9/2019 (Week 4)
Today's Lecture was mainly on the intro to HTML(Hyper text Markup Language.
<html> <head> <title> Title </title> </head> <body> </body> </html>
INSTRUCTIONS
PROJECT 1
We we're told that we can choose to design a landing page for anything we want, with minimum of 3 sections. After confirming the idea, we had to do 5 sketches and get approval.
I wanted to do a sports landing page so I sketch a few layouts of how it would look like. So I decided to go for football being my favorite sport and Barcelona being my favorite club.
 |
| Fig 1.1 FC Barcelona's Landing Page |
 |
| Fig 1.2 Scrolled Further Down New's Column. |
 |
| Fig 1.3 Their Matches Info. |
 |
| Fig 1.4 first sketch(Approved) |
 |
| Fig 1.5 Other 4 sketches. |
After Sketching I then moved on to digitization of the Landing Page
based on the Approved sketch.
 |
| Fig 1.6 Arranging using rulers to arrange the top section. |
 |
| Fig1.7 Adding Buttons |
 |
| Fig 1.8 Match Info |
 |
| Fig 2.1 Reference Page. |
I liked the Composition of this new landing page and everything wasn't boxy, the type used was consistent and the colour too wasn't more than 2.
 |
| Fig 2.2 Top section/Home page of Landing Page. |
and it was quite challenging to find a vector image that would best suit the theme of the landing page's call to action.
For my second Section of the Landing Page, I was adding the match info and a little info about the Club.
I put the info of the Next match and I added a duration until the Next match which was Taylors vs Sunway.
and then I added Future Matches to the Second section.
FEEDBACK
Week 3
Mr. Samshul and Mr. Lun advised that my landing page had too much information going on and that I should use a maximum of 2 typefaces, and color and my layout should look more interesting rather than boxy.
Week 4
No feedback is given.
Here is the Vector image.
 |
| Fig 2.3 Vector Image used. |
 |
| Fig 2.4 Scrolled down of reference page Second Section. |
 |
| Fig 2.5 My Second Section. |
 |
| Fig 2.6 Continuation of Second Section. |
I put the info of the Next match and I added a duration until the Next match which was Taylors vs Sunway.
 |
| Fig 2. 7 Adding Future Matches. |
Here is the Final Outcome of the Landing Page.
 |
| Fig 2.8 Final Landing Page Outcome. |
FEEDBACK
Week 3
Mr. Samshul and Mr. Lun advised that my landing page had too much information going on and that I should use a maximum of 2 typefaces, and color and my layout should look more interesting rather than boxy.
Week 4
No feedback is given.
Comments
Post a Comment