Interactive Design - Project 1
20/09/2018 -27/09/2018 (Week 4 - Week 5)
Kitty Lai Yung Syn (0331933)
Interactive Design
LECTURE 4
20/09/2018
In week 4, we were given a lecture on 'Type for Screen'. The fonts we chose and the size we used on website affect readability ad legibility. In the old days, people were limited to fonts, such as: Arial, Verdana, Helvetica, Georgia and Times New Roman. Looking at the fonts we have now, we have more selections of various type to express and more choices to use. However, some fonts nowadays do not showed as it is. Thus, Mr Shamsul suggested to use web safe fonts, which are total in 15: Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans Ms, Trebuchet Ms, Arial Black and Impact.
PDF File
LECTURE 5
27/09/2018
For this week, we learned about coding (HTML) and World Wide Web Consortium (W3C). Below are the slides we had in class.
27/09/2018
For this week, we learned about coding (HTML) and World Wide Web Consortium (W3C). Below are the slides we had in class.
PDF File
INSTRUCTION
PDF File
PROJECT 1
Week 4
This project is to create a static landing page of our favourite singer, band, sports, team, movie and etc. I chose Lauv, an American singer, who is a very talented singer and song writer.
(After showing Mr Shamsul Lauv official website, the whole page had taken down to update. Plus, I lost all my photos of progress because my laptop could not be opened and all my assignments and data are gone.)
Below is the latest update of Lauv official website. The website has more colour then the previous one, which was suppose to be my reference for this project. Compare to the previous website, personally I think that this latest website is a bit complicated, especially the subscribe button or the sign-up thingy is not easy to be spotted where it placed at the bottom of the first page. Initially, I thought it was a navigation.
 | ||
Lauv Official Website 1
|
 |
| Lauv Official Website 3 |
 |
| Lauv Official Website 4 |
 |
| Lauv Official Website 5 |
 |
| Lauv Official Website 6 |
Mr Shamsul said the 'Tour Dates' section in this website is a good example to take reference as the dates and the information are clear and easy for user. Also, it is very convenient for fans to but tickets online.
Week 5
 |
| Final Outcome |
 |
| Feedback |
FEEDBACK
Week 4: The layout should be clean but we have to manage the white space and do not go too much boxes because it will look complicated and messy. For specific feedback, the design look fine but try not to go boxes on boxes, which makes the website visually complicated and he also said that the arrangement and the idea of 'tour tickets' in my reference website is a good example.
Week 5: For my project 1, I was told that, my design look clean but the separation of sections is not very clear. Good choice of fonts. Too much white space.
Week 6: While we are saving html file, we have to name the first main page as index.html. This is because it is for website to identify the first main page. For specific feedback, Mr Shamsul asked me to add more information, it could also be my hobby.
REFLECTION
Experience
Week 4: After the consultation from the lecturer, I thought there are so much to learn in designing a layout. Personally, I think my ideas are too narrow, should be working more in this part by doing more exploration and look for more references, in order to get inspired.
Week 5: I was so enjoyed in learning codes. It was fun and fresh to me as this is a whole new thing from graphics.
Week 6: Coding is a fun thing to learn. It just like a new language to me and in the same time. I was quite enjoying the process of coding.
Observation
Week 4: When we are designing layouts, there are lots of small adjustments have to pay more attention as it affect readers' emotion.
Week 5: I have observed how the differences of elements in html affects the outcome and how HTML works.
Week 6: I observed how to link CSS to html file in Dreamweaver. Though it was a bit confusing, but after taking some time to tryout and practice, it was not that difficult.
Findings
Week 4: Every font we choose and the arrangement of layout affects readers' emotion.
Week 5: I found that I am very interested in coding and am looking up more about coding myself at home.
Week 6: I found that I am quite into coding, especially the process going through.
FURTHER READING
PUBLICATION DESIGN by Poppy Evans
Using Type to Create Hierarchy
- Editors and publication designers have devised this hierarchical system to attract and engage their readers with the understanding that a headline will catch the reader's attention, a deck or lead-in will pique their interest, and, from there, the reader is led into the body or the text of an article or story.
Typographic Alignment and Grids
- Subheads catch attention and guide a reader in their navigation of written content.
- Pull quotes also help to engage a reader's attention as they browse through this content.
- Captions help the reader identify and learn more about imagery that appears in a layout.
- Related information that is not part of the major content of an article is set apart in a sidebar.
Creating Reader-Friendly Text
- Line length - For best legibility, column. widths or line lengths of text type should be no less than 25 and no more than 50 characters. An ideal line length is about 40 characters. This length works best for text set with "auto" leading, or leading that allows for 2 to 3 points of space between lines of text. (eg. point type with 10 point leading)
- Leading - It is possible to improve readability with long lines of text by adding extra leading.
Comments
Post a Comment