15/10/19 - 29/9/19 (Week 8 - Week 10)
Neoh Kar Yan (0339338)
Interactive Design
Project 2 - Microsite
LECTURE NOTES
Lecture 8: Responsive Web Design
15/10/19 (Week 8)
Today, Mr. Lun conducted a lecture about responsive web design and we were introduced to bootstrap. We learned about the grid systems in bootstraps and other features to be applied to our designs.
 |
| Fig.1.1 Grid systems in bootstrap |
 |
| Fig 1.3 Bootstrap HTML |
Lecture 9: -
22/10/19 (Week 9)
There was no lecture conducted this week as we planned out our wireframes for the microsite.
Lecture 10: -
29/10/19 (Week 10)
There was no lecture conducted this week because we were focusing on our microsites.
INSTRUCTIONS
Project 2 - Microsite
In this second project, it is a continuation of the Advanced Typography second project, which is creating the collaterals. We are required to create a microsite about the Troublemakers Manifesto Colloquium incorporating the works we've done in Advanced Typography. We were encouraged to apply an existing framework called Bootstrap to aid in the making of this project.
The microsite should include all details on only one page. We are to incorporate the collaterals made into the site, showcasing our works.
Prior to creating the site, we are to sketch out wireframes for the layout of the site. Here are the wireframes I sketched out:
 |
| Fig 1.1 Wireframes sketch #1 |
 |
| Fig 1.2 Wireframes sketch #2 |
 |
| Fig 1.3 Wireframes sketch #3 |
Here are the elements I've used:
 |
| Fig 1.4 Logo |
 |
| Fig 1.5 Collaterals Used |
 |
| Fig 1.6 |
After looking at my first attempt, Mr. Shamsul suggested to change the colour of my RSVP button to make it more obvious instead of being the same colour as the background. For the rest, he said that it looks good and consistent.
Here is the mood board for my site:
 |
| Fig 1.7 Moodboard |
Link to my site: https://sleepy-snyders.netlify.com/
 |
| Fig 1.8 Microsite #1 |
 |
| Fig 1.9 Microsite #2 |
 |
| Fig 1.10 Microsite #3 |
 |
| Fig 1.11 Microsite #4 |
 |
| Fig 1.12 Microsite #5 |
 |
| Fig 1.13 Microsite #6 |
 |
| Fig 1.14 Microsite #7 |
 |
| Fig 1.15 Microsite #8 |
FURTHER READING
1. Web Design Aesthetics by Paul Mcarthy
8/10/19 - 15/9/19 (Week 7- Week 8)
There are a few things to consider when it comes to web design aesthetics.
1. Look at your homepage
Is it engaging? Does it spark any interest? Does it give a clear message? Does it bore you? Even if you're working solo, with free website templates, the first impression must always be considered. If it looks cheap and tacky, then it will not excite users and it will make users be doubtful of what you're trying to offer. Because of this, they will mostly click off before they even go through the first page.
2. Site Design and Eye Appeal
Websites should be appealing, but different users have different taste and one can be more attracted to the website than the other. Elements of visual design should be considered. What is being designed should be based on a selected target audience.
3. Site Demographic
Product selection, tone of screen text, motifs, marketing strategies, links-virtually everything should be targeted with precision. The target audience should be considered so in order to make it easier, list down keywords that describe the target market, like what are their concerns, their needs, their emotions? Market research should be done to so it makes your job easier.
4. Market expectations
For this, we have to know what does the target demographic expects when they shop online. A certain attitude? Warm and fuzzy? All of these have to be considered so that they can come together and play with other elements.
2. 6 Reasons to Choose the Bootstrap CSS Framework by Paul Mcarthy
22/10/19 - 29/10/19 (Week 9 - Week 10)
Bootstrap is built on responsive 12-column grids, layouts, and components. "Whether you need a fixed grid or a responsive, its only matter of a few changes." Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
Another useful set of features is the responsive utility classes using which you can make a certain block of content appear or hide only on devices based on the size of their screen. It is said to be very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to an element, will make it visible only for desktop users. There are similar classes for tablets and phones.
Comments
Post a Comment