INTERACTIVE DESIGN - PROJECT 1
Alicia Lee Hui Min ( 0331719 )
13/09/18 - 20/09/18 (Week 3 - Week 4)
Interactive Design
Project 1
LECTURE NOTES
20/09/18 (Week 4)
This week, we had a lecture on type for screen. We learned about how presenting beautiful type on websites nowadays are easy as there are popular web font services such as Adobe Typekit and Google Fonts. We also talked about web safe colours, web safe fonts and also system fonts which are the fonts that are installed in the operating system.
PDF of Week 4's Lecture Slides
INSTRUCTIONS
13/09/18 (Week 3)
In this class, we were given the brief on our first project, where we will be designing a static landing page for any one of our favourite singer, band, or movie. We were told research on the size/resolution that will be used. In our landing page, we need to include a call-to-action. Colours can be used as well as any fonts from Google Fonts. We should also look up and read about mobile friendly websites even though we are designing for a desktop.This project can be done on either Photoshop or Illustrator. Our task was to come up with sketches of the layout.
I decided to go with my favourite band which is Paramore. The target audience are fans or anyone that's interested in knowing more about them. The goal is to promote their latest album which is after laughter and their tours. As for the theme and colour scheme, I went with the style and colours of the album.
13/09/18 (Week 3)
In this class, we were given the brief on our first project, where we will be designing a static landing page for any one of our favourite singer, band, or movie. We were told research on the size/resolution that will be used. In our landing page, we need to include a call-to-action. Colours can be used as well as any fonts from Google Fonts. We should also look up and read about mobile friendly websites even though we are designing for a desktop.This project can be done on either Photoshop or Illustrator. Our task was to come up with sketches of the layout.
I decided to go with my favourite band which is Paramore. The target audience are fans or anyone that's interested in knowing more about them. The goal is to promote their latest album which is after laughter and their tours. As for the theme and colour scheme, I went with the style and colours of the album.
 |
| Fig 1.0 First Sketch |
 |
| Fig 1.1 Second Sketch |
 |
| Fig 1.2 Colour Swatch |
 |
| Fig 1.3 Typeface used |
20/09/18 (Week 4)
For this week's class, we started on our landing page. We could create it in either Photoshop or Illustrator. Before I started, I went to find some inspiration and references. We were to submit our project on Google Classroom and update our blog link.
 |
| Fig 1.4 Inspiration/ references |
 |
| Fig 1.5 Process of tour dates |
 |
| Fig 1.6 Process of after laughter |
 |
| Fig 1.7 Process of gallery |
 |
| Fig1.8 Final Outcome ( 1280 x 3000 ) |
After that, I've received feedback on the landing page and made some changes to it.
 |
| Fig 1.9 Final Outcome (Revised) |
FEEDBACK
Week 4
General feedback: It's important for a landing page to have a footer.Grids should also be used because alignment is important.
Specific feedback: Mr Shamsul told me that I should use grids while designing the landing page as alignment is important.
REFLECTION
Experience
Observation
Week 4;I observed that I had to constantly be aware of the alignment and make use of the grids so that the placement of the elements are well aligned and aren't all over the place.
Findings
Week 4; I found that using grids is helpful in keeping the elements align.
FURTHER READING
Web Design Principles by Joel Sklar
20/09/18 (Week 4)
 |
| Fig3.0 Front Cover of Book |
I decided to read up on the handheld devices section which was under designing a website. Designing for handheld devices presents a lot of challenges for Web designers including an endless list of protocols and standards, minuscule screen sizes, and inconsistent support for JavaScript applications or Flash animations.
A method for handling display settings on handheld devices is the CSS handheld media type. CSS Media Queries allows one to specify style rules for each media destination. The handheld media type lets a web designer to provide rules for how they want their Web page to be displayed on a handheld device.
By specifying a style sheet specifically for handheld devices, a web designer can customise the page layout such as by designing the content to appear in a single column or providing navigation customised for smaller screens.
Comments
Post a Comment