INTERACTIVE DESIGN - PROJECT 2
25/10/2018 - 1/11/2018 ( Week 9 - Week 10 )
Chong Siong Loong Ron
Interactive Design
Project 2 : Typosexual Typographic Exhibition - Collateral
LECTURE NOTES
25/10/2018 ( Week 9 )
For this week, plan was change from e-invitation, but instead the lecturer change it to microsite. Microsite is a websites that is separated from the main site, and it usually has a specific goal or target audience to it. Which is also a benefits such as cost, speed, good for experimental tool, having detailed information and more.
We was were introduced to bootstrap, and we got to briefly learn about bootstrap so that we can apply it to our designs.
1.1 Grid System in Bootstrap
INSTRUCTIONS
MICROSITE
25/10/2018 ( Week 9 )For this project, it is connected with our project from Advanced Typography class. We have to use our key artwork and we have to put in our collaterals for this project which we have done it in our Advance typography class.
We have to Create a microsite for the exhibition, we have to create a microsite to invite people to the exhibition or to sell our collateral or we can put in both of it to the microsite, and it should be in one page. We have to create the wireframe sketch and show it to Mr Shamsul before the class end, and we should make sure that the design have to relate back to our key artwork and consistency in the whole microsite. we have to also start thinking about the purpose of the website as well as the target audience. The main purpose of this microsite is to mainly promote the Typosexual Typographic Exhibition where at the same time we can invite people to our event and promote our merchandise shop. " Target Audience is : students, designers and anyone who is interested.
1.2 Original key art work
1.3 Collateral Item
1.4 Poster for the Exhibition
Sketches for the layout
1.5 Progress " Live view "
1.6 Progress " Live view "
1.7 Progress " Split view "
1.8 Progress " Split view "
1.9 Progress " Code view "
2.0 Progress " Code view "
After the html is done, we have to upload our file to a free website hosting which is "000webhost.com", due to some technical problem I cant upload my file to the website, I showed mr Shamsul and mr Shamsul I have to change some the image size and file name. After trying all the possible problem cause, I still have problem uploading the file to the hosting website after that mr shamsul said in that case I have to just pass up my html file and I have to compress and zip the file and hadn't it in to the google classroom.
2.1 Final microsite layout
2.2 Final microsite layout
2.3 Final microsite layout
2.4 Final microsite layout
2.5 Final microsite layout
2.6 Final layout of microsite
After trying to upload for many many times I finally can upload it on to the server already.
FEEDBACK
25/10/2018 ( Week 9 )
Specific Feedback : For this project, my wireframe was acceptable and relatively good which I can proceed with creating the microsite.
1/11/2018 ( Week 10 )
Specific Feedback : Mr Shamsul said my websites looks good and nice and is very responsive.
REFLECTION
EXPERIENCE
25/10/2018 ( Week 9 )
For our project 2 we have to create a microsite for the typosexual typographic exhibition, we have to use the information given by our lecturer and we have to put in our key artwork that we have created in our advance typography class and we have to make sure that everything in the microsite has to be consistent.
1/11/2018 ( Week 10 )
I showed my project to mr Shamsul, we said that my website is good and simple, and I feel that bootstrap is not easy to use where u must to understand the file well enough than it will be much more easier to edit and create the website.
OBSERVATION
25/10/2018 ( Week 9 )
I observed that if we do a small little mistake in typing in the code it will, it will affect the whole layout. so we have to be very careful while we are doing the project.
1/11/2018 ( Week 10 )
I observed that the file must be save in a curtain name so it will be able to upload into the free websites.
FINDING
25/10/2018 ( Week 9 )
I found out that, our file and images must be placed in a specific place because we cant simply move in and out the file because the file will not function and the layout will be in a mess. we cannot move the file around in the laptop.
1/11/2018 ( Week 10 )
I found out that the images we put into the website has a to save it to a curtain dpi because if the image is too big because when we upload into the website, the image wont be able to upload.
FURTHER READING
Article : "What are HTML imports and how do they work ?"
Introducing HTML Imports
HTML imports is an easy concept to grasp; it is a way to insert other HTML pages into an HTML page. You’d think that this is not that a big deal but it is; you couldn’t do that with ease before. The funny thing is, HTML is a basic file yet it did in fact require the most effort to work with sometimes. Even PHP files had the capability of includes, why not HTML? Thanks to web components we can now include HTML documents in another HTML documents; you can also load other CSS and JavaScript files with the tag as well. (Life just go that much more awesome.)
Work Around Tricks
Some previously common options included using an iFrame; which are load-heavy elements within the HTML page inside a separate window on the page. It’s kind of out of context and they weren’t the best when it comes to manipulation and display. iFrames can be fascinatingly frustrating to work with. The second most popular option was AJAX, where you preloaded the page through JavaScript and embedded the content. This is a very inconvenient and tedious way to embed content actually.
Basic Syntax
Before we go over the examples, let’s briefly go over the syntax of loading a file through the HTML import tag. Imports are a new type of link tag so it should be easy to understand with the following line of code:
1
| <link rel="import" href="/folder/page.html"> |
They are placed in the header like you’d like a JavaScript or a CSS file.
Basic Example
In order for the imports to work, you need to have all the pages in question set up on a local server. Now, let’s get started with index.html. Here is a basic HTML page with a basic import:
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>What are HTML imports and how do they work</title> <link rel="import" href="/intro.html"> </head> <body> <h1>Hello from Designmodo</h1> </body></html> |
Comments
Post a Comment