Interactive Design: Troublemakers Manifesto Microsite/ Project 2
Interactive Design: Troublemakers Manifesto Microsite/ Project 2
15/10/19 - 29/10/19 (Week 8 - Week 10)
Sia Man Sheng
0333877
This week, we were told that our collateral is no longer an e-invitation, but instead a microsite. I learned that microsite is essentially a website that is separated from the main site, and it usually has a specific goal or target audience to it. There are also a handful of benefits such as cost, speed, good for experimental tool, having detailed information and more.
Moving on, we were introduced to bootstrap, and we got to briefly learn about it and how we can apply it to our designs. I also got to learn about the grid system in bootstrap.
LECTURE NOTES
Lecture 6: Responsive Web Design
This week, we were told that our collateral is no longer an e-invitation, but instead a microsite. I learned that microsite is essentially a website that is separated from the main site, and it usually has a specific goal or target audience to it. There are also a handful of benefits such as cost, speed, good for experimental tool, having detailed information and more.
Moving on, we were introduced to bootstrap, and we got to briefly learn about it and how we can apply it to our designs. I also got to learn about the grid system in bootstrap.
Figure 1.1 Grid System in Bootstrap
INSTRUCTION
Bootstrap Exercise
For this project, we are to create a microsite for Troublemakers Manifesto using Bootstrap 4. The microsite should contain all the collateral we have done as the merchandise to sell online. This is an exercise on Bootstrap learnt from Mr.Lun.
Figure 1.2 Bootstrap Exercise in HDML
Figure 1.3 Bootstrap Exercise in Google Chrome
Brainstorming
Figure 1.4 Sketches on Layout
Firstly, I was to think of the layout and composition of the microsite while considering what content should I include. After looking at references and senior's work, I have decided on the main content are main cover, about the event, speakers, merchandise and footer. I came out in 3 options but each sections might interchange in order to create the most satisfy outcome.
Process
Figure 1.5 Reference from Bootstrap- Carousel
Figure 1.6 Process done in Dreamweaver
Navigation Bar
As to consider the readability and complexity of a website's logo, I reduce the complexity of my key artwork to monochrome and has removed additional decorative element. Here is the outcome:
Figure 1.7 Key Artwork (Navigation Bar)
Figure 1.8 Logo (Navigation Bar)
Main Cover
As I want to make a impressive main cover to give a impactful impression to visitors, I did my main cover in Illustrator. But after I consider the design style of my microsite, I decided to work on simple and minimalistic design.
Figure 1.9 Background Image- First Attempt (Main Cover)
Figure 1.10 First Attempt (Main Cover)
Figure 1.11 Background Image- Second Attempt (Main Cover)
Speakers
As I want to match the style of speaker's image to my microsite while first considering the consistency. I recreate them by tracing the face in illustrator as well as adding some yellow basic shapes to bring out the identity of my microsite.
Figure 1.12 Ms. Suzy Sulaiman (Speakers)
Figure 1.13 YB Fahmi Fadzil (Speakers)
Figure 1.14 Ms. Liew Pik Svonn (Speakers)
Figure 1.15 Mr. Murtuh Nedumaran (Speakers)
Figure 1.16 Ms. Liew Pik Svonn's Illustration (Speakers)
Figure 1.17 Ms. Suzy Sulaiman's Illustration (Speakers)
Figure 1.18 YB Fahmi Fadzil's Illustration(Speakers)
Figure 1.19 Mr. Murtuh Nedumaran's Illustration (Speakers)
Figure 1.20 Erzena Marwan's Illustration (Speakers)
Merchandise
Figure 1.21 Poster (Merchandise)
Figure 1.22 Poster (Merchandise)
Figure 1.23 T-shirt (Merchandise)
Figure 1.24 Landyard (Merchandise)
Figure 1.25 Flat Lay (Merchandise)
Figure 1.26 Poster (Merchandise)
Final Outcome
Figure 1.27 Final Artwork (Troublemakers Manifesto Microsite)
Link to the website:https://larkish-stoppering.000webhostapp.com/project%202/project%202.2.html
FEEDBACK
Week 10
You have a very clean website, the composition are fine. Good work.
REFLECTION
EXPERIENCE
For this project, I got to create a microsite for the Troublemakers Manifesto. I got to use the information and artwork I've created from Advanced Typography class and incorporate it into the microsite, making sure the style, colours and typefaces used have some sort of a connection with the artwork and other collaterals done. With that said, I got to gain experience on coding the html and css files in Dreamweaver to create the microsite. Overall, this was a good experience as I got to be more familiar with coding.
OBSERVATION
Through creating the microsite, I observed that it is not as easy as it seems and it can be frustrating at times. One slight adjustment to an element could potentially affect the arrangement of other elements, as well as how sometimes the codes wouldn't work as it is typed and placed incorrectly. Besides, I observed that it is important to name the file as index.html and not something else as it can affect the outcome.
FINDINGS
I found myself to be struggling at times where I couldn't get the microsite to look like how I want it to be through coding in Dreamweaver. This project was quite a challenge for me as I am not familiar with coding, but I also found that I was quite satisfied with the outcome even though it's not the best. Through it all, I found that I learned new things regarding coding which will help me when it comes to the final project.
FURTHER READING
Figure 2.1 Web Design - Introductory Concepts and Techniques by Shelly Napier Rivers
Web Design - Introductory Concepts and Techniques by Shelly Napier Rivers
This book consists of informative content, such as the consideration of target audience, design principles, colours, typography and others that's needed to be thought about while creating successful websites. The book also has content about HTML which I thought would be great to read up since we're learning about it.
HTML (Hypertext Markup Language)
- This is one of the markup language used to create web pages
- HTML markup language defines how the elements of a web page are formatted and presented with predefined codes that are called HTML tags.
- HTML tags should be in lowercase, surrounded by brackets and inserted in pairs
- Example: <html>web page content</html>
- When a web page is opened into a browser, the HTML tags are red and interpreted to show the page with the organised content such as text, images and links.
- Creating a simple web page can be done by typing HTML tags along with the content into a documents that's created in a plain text editor such as Notepad.
I also got to read up and learn about the basic web design principles.
Basic Web Design Principles
- Balance: harmonious arrangement of elements
- Symmetry: centered/balanced, suggests a safe and peaceful atmosphere
- Asymmetry: off balanced, for a more fun and energetic mood
- Proximity: placing elements that have a relationship close to each other
- White Space: empty space surrounding text/images
- Contrast: mix of elements to stimulate attention
- Unity: sense of oneness/belonging
- Visual Identity: combination of design elements identified with site and publisher
- Alignment: placements of elements in fixed or predetermined positions, rows or columns
Comments
Post a Comment