INTERACTIVE DESIGN - PROJECT 2
Alicia Lee Hui Min ( 0331719 )
25/10/18 - 1/11/18 (Week 9 - Week 10)
Interactive Design
Project 2
LECTURE NOTES
25/10/18 (Week 9)
This week, we were told that our collateral is no longer an e-invitation, but instead a microsite. A microsite is a website that is separated from the main site, and it usually has a specific goal or target audience.
We were also introduced to bootstrap and got to briefly learn about it and how to apply it into our designs. I also learned about the grid system in bootstrap.
 |
| Fig1.1: Grid System in Bootstrap |
 |
| Fig1.2: What the different codes mean |
INSTRUCTIONS
This project is connected with our project from Advanced Typography class. In the project, we needed to use the key artwork that we have created and apply it to 3 different mediums. One of the medium is an e-invitation, which is to be done in this class.
MICROSITE
25/10/18 (Week 9)
This week, Mr Shamsul mentioned that we are no longer creating an e-invitation. Instead, we needed to create a microsite for the exhibition. The goal of the microsite could be to either invite people to the exhibition, sell the other collateral or both, and it should be in one page.
To start off, we should sketch out some wireframes, select our fonts and colour scheme. We should also make sure our design relates back to our key artwork so there is some sort of connection. I started to think about the purpose of the website as well as the target audience.
Goal: Promote the Typosexual Typographic Exhibition, and at the same time invite people to attend the exhibition with a Register Now button. Merchandise of this exhibition can also be purchased from here.
Target Audience: Students, designers, and basically anyone that is interested in typography.
Here are the sketches for the wireframe.
 |
| Figure 1.3 Wireframe sketches |
 | ||||||
Figure 1.4 Colour Scheme
|
 |
| Figure 1.8 Key artwork with event details |
 |
| Fig1.9 First Attempt |
 |
| Fig1.9 First Attempt |
 |
| Fig1.10 First Attempt |
| ||||||
Figure 1.11 Colour Scheme
|
 | ||||||||
Figure1.15 Key artwork and date
|
Mr Shamsul told me to make some small changes like adding the logo, adding captions under the merchandise and increasing the margins for about. After tweaking the microsite, here is the final outcome.
 |
| Fig1.20 Final Outcome |
 |
| Fig1.21 Final Outcome |
 |
| Fig1.22 Final Outcome |
 |
| Fig1.23 Final Outcome |
 |
| Fig1.24 Final Outcome |
PDF of web layout
FEEDBACK
Week 9
Specific feedback: For the second project, the wireframe sketches I’ve done are acceptable and I can proceed with creating the microsite.
Week 10
Week 10
General feedback: The file should always be named as index.html, and not something else.
Specific feedback: For the about section, the box should align with the top words. Since my colour scheme was black and white, Mr Shamsul suggested me to use off white instead of pure white.
REFLECTION
Experience
Week 9;This week, I started to sketch out the wireframes and use the grid system to layout my microsite. Week 10, I found it quite though to use bootstrap at first but soon got the hang of it after a while.
Observation
Week 9; I observe that using the grid to layout is much easier. Week 9; This week, I observe that when coding it is of utmost importance to make sure everything is correct as one small mistake could everything to go wrong or move.
Findings
Week 9; I found that using the grid to layout is much easier Week9; I found that using the grid helps the content to resize accordingly when the web page is resized.
FURTHER READING
500 Simple Website: Hints, Tips, and Techniques by Jamie Freeman
 |
| Fig 2.1Book Cover |
This book contains 500 tips and hints on planning your site, either for personal or professional purposes. This book serves as a guide to the basics of web design and also includes essential advice. It also mentions how the functionality of a website is important, as a successful website needs to be accessible to as many users as possible.
Starting out with the basics, I learned that it is important to start with planning. Planning phase can account for 60% of the time requires, but it is time that's well spent. Planning by drawing a site map is great as it helps to plan the overall structure of a site. Another thing to keep in mind is that users browse websites page to page, so all of the pages need to be clear no matter what order it is viewed as. Having a purpose for the website is essential as well. When planning and designing a website, remember to have easy and clear navigations back to the home page as some users may have followed a link that bypasses the home page. Having too many choices in the main menu is not ideal as it may appear cluttered. Therefore, organising content into section with hierarchy should be done. Identifying target audience is important aspect of creating a website as well, because without a clear idea of the audience it'll be harder to plan accordingly and your site may never quite hit the mark. I also learned understood that information architecture is the process of planning out where things should be on the site and how users will navigate around it.
Comments
Post a Comment