INTERACTIVE DESIGN - PROJECT 2
INTERACTIVE DESIGN - PROJECT 2
Maydeline (0335392)
Interactive Design
Project 2
Troublemakers Manifesto : A Design Colloquium Microsite
LECTURES
Lecture 7 : -
23.05.19 (Week 8)
We had no lecture this week as we continued with our fourth exercise and also we started sketching our project 2 wireframe.
Lecture 8 : Bootstrap
30.05.19 (Week 9)
We were introduced to bootstrap where we briefly learned on how to use it and we can utilise and apply it to our project 2 to make it responsive. The lecturers taught us how to apply it and explained about the grid system(columns).
Lecture 9 : -
06.06.19 (Week 10)
We had no lecture this week as it is an e-learning week but we needed to show the lecturers our wireframe, digital illustrated mock-up, color scheme, moodboard and etc.
Lecture 10 : -
13.06.19 (Week 11)
We had no lecture this week as we continued finishing our project 2 and consulting with the lecturers.
INSTRUCTIONS
PROJECT 2 - TROUBLEMAKERS MANIFESTO MICROSITE
23.05.19 (Week 8)
For this project, we were tasked to create a microsite for our Advanced Typography project which is about Troublemakers Manifesto: A Design Colloquium. The purpose of this website is to invite people to this event.
We were firstly told to sketch the wireframes, illustrate the mock up and also show the color schemes and mood boards (colors, fonts, etc). Firstly, I searched for reference in Pinterest.
 |
| Fig 1.1 Reference |
 |
| Fig 1.2 Reference |
I sketched out wireframes and also digitised them in Adobe Illustrator as a mock-up.
 |
| Fig 1.3 Wireframe Sketch |
 |
| Fig 1.4 Mock up |
 |
| Fig 1.5 Fonts and Color Scheme |
After deciding, I went to ask for an online feedback from Mr Shamsul and got to show him. He told me that I should not use Helvetica and Helvetica Neue. I took the feedback and only used Montserrat SemiBold and Montserrat Light.
30.05.19 (Week 9) - 06.06.19 (Week 10)
I proceed on doing the html and css in Dreamweaver. In addition, I used several bootstraps to make my website responsive.
 |
| Fig 1.6 Bootstrap |
 |
| Fig 1.7 Bootstrap |
I added contents in the website such as images of the logo, the key-artwork and collaterals such as poster, drawstring bag and t-shirt.
 |
| Fig 1.8 Process of coding |
 |
| Fig 1.9 Process of coding |
13.06.19 (Week 11)
This week, I got to consult with Mr Lun because I was facing problems with the responsive website because I forgot to put the column html so he taught me how to do it and it works. I decided to make a little changes on my website such as adding the Follow Us on Social Media on the footer. Here is the final result
 |
| Fig 1.10 Home Section |
 |
| Fig 1.11 About Section |
 |
| Fig 1.12 Event Section |
 |
| Fig 1.13 RSVP Section |
 |
| Fig 1.14 Products Section |
 |
| Fig 1.15 Footer Section |
Here is the final result in link : NOT FINAL
https://maydelinejong.000webhostapp.com/PROJECT2_html/indexx.html#Products
Fig 1.16 Embedded PDF (HTML)
Fig 1.17 Embedded PDF (CSS)
Week 12
Mr Shamsul gave feedback for my microsite and he told me to make some changes such as logo without the border, put pictures on the speakers section, and the footer. The responsiveness is okay, and the rest is also okay but basic. I took the feedback and make few changes.
 |
| Fig 1.18 Final Outcome Website |
Fig 1.26 Embedded PDF Microsite
Link to Microsite (FINAL): https://maydelinejong.000webhostapp.com/PROJECT2_html/Project2Final_html/indexx.html
|
FEEDBACK
Week 8
No feedback was given this week
Week 9
General Feedback: Mr Shamsul said we can either use HTML & CSS or bootstrap but our website must be responsive.
Specific Feedback: For my exercise 4, Mr Shamsul said that my layout is good but it's not responsive but in this exercise it's still okay. I should just fix the spacing and also give the background a better color to make it more exciting.
Week 10
Online Feedback (in facebook) :
 |
| Fig 2.1 Online Feedback |
Week 11
Specific Feedback : Sr Lun told me to use column to make my website responsive cause I forgot to put it in my event section. The button in home page is too big, he told me to reduce the size.
Week 12
Specific Feedback : Mr Shamsul said my website is responsive, it's basic but okay. The logo on navigation bar should be removed from the ul. For the about section, it should be heading, sub-heading then content. In the event section, I need to add pictures. For footer, the middle area is a bit empty so I could delete the "Follow Us on Social Media" and place the social media logos in the middle. The RSVP section also isn't clear, maybe I could change the form to name and email address.
REFLECTION
Experiences
Week 8
While I was searching for reference for my project 2, it was interesting to see how designers have clear but exciting layout for their website therefore overall pleasing to look at and it gave me ideas.
Week 9
I learned how to use bootstrap and it wasn't as easy as I thought but it was helpful for my project 2 website.
Week 10
As I got used to the bootstrap, I have taken some components from some bootstraps based on my liking on the navigation/section. It is much easier for me to use the bootstrap and modify than making it from scratch.
Observations
Week 8
I observed different templates that were made by several designers and I found the template very unique and appealing. It was very experimental and something modern.
Week 9
I observed how bootstrap provides several layouts, nav bars and footers so it was convenient for me to pick and modify and utilise for my website.
Week 10
I observed how aligning, spacing and size are very important and how they could affect the visual of the website. After fixing in css, I become more aware of those components. In addition, it is easy how some layouts already include the columns to be responsive.
Findings
Week 8
I found out how important it is to sketch the wireframe first before proceeding in design so that we could make sure how the website will be lay out and we could follow it while coding in Dreamweaver.
Week 9
I found out that bootstrap provides demo and also guide so that we know which link to add into our HTML file so that the bootstrap will work. The lecturers also taught us how to use it as well.
Week 10
I found out some tutorials and extra cool effects in youtube/other website that I could use as an additional component in my project 2 website. It was exciting and interesting to try different things and be experimental.
FURTHER READINGS
Week 8 - Week 9
Why Responsive Design is Important and Google Approved
https://freshsparks.com/why-responsive-design-is-important/
How to Build a Responsive Design
There are a number of things to think about when creating a responsive layout. It is as process that requires a design system and hierarchy of content across devices.
There are 3 main components of a responsive web design:
- A fluid grid
- Flexible text & images
- Media queries
A Fluid Grid
This grid is cubical element for creating a responsive layout. A fluid grid used for responsive websites will ensure that the design is flexible and scalable. Elements will have consistent spacing, proportion, and can adjust to a specific screen-width based on percentages.
 |
| Fig 3.1 Image of grid |
Flexible Text & Images
The way to display text varies depending on what device a user is viewing your site on, but it should be readable no matter what. On mobile responsive websites, there is an opportunity to increase font size and line height(the spacing between each line of text) for legibility.
Flexible text and images adjust within a layout width, according to the content hierarchy set with the CSS (stylesheet). Text can now be legible regardless of the end user's device. With a flexible container(within the grid), text can wrap with an increase in font size on smaller devices.
Flexible images can prove to be more challenging because of load times on smaller device browsers. But these images can scale, crop, or disappear depending on what content is essential to the mobile experience.
 |
| Fig 3.2 Responsive text and image |
Media Queries
This is code that powers the flexibility of a layout on responsive websites. Media queries specify the CSS to be applied accordingly, depending on a device's breakpoint. Media queries allow for multiple layouts of a design, which use the same HTML coded web page.
 |
| Fig 3.3 Media Queries |
10 Top Principles of Web Design
https://shortiedesigns.com/blog/10-top-principles-effective-web-design/
1. Purpose
Each page of website needs to have a clear purpose, and to fulfil a specific need for your website users in to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.
2. Communication
It is important to communicate clearly and make your information easy to read and digest. Some effective tactics to include in your website: organising information using headlines and sub headlines, use bullet points instead of long windy sentences, and cutting the waffle.
3. Typefaces
The ideal font size for reading easily online is 16px and stick to a max of 3 typefaces in a maximum size of 3 point sizes to keep your design streamlined.
4. Colours
A well thought colour palette can go a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly such as buttons and call to actions. White space/negative space makes your website a modern and uncluttered look.
5. Images
Choosing the right images for your website can help with brand positioning and connecting your target audience. Considering using infographics, videos and graphics as these can be much more effective at communication than most well written piece of text.
6. Navigation
Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, designing clickable buttons, and the following 3 click rule which makes users will be able to find the information they are looking for within 3 clicks.
7. Grid based layouts
Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.
8. F Pattern Design
Effective designed websites will work with a reader's natural behaviour and display information in order of importance (left to right, and top to bottom).
9. Load time
Tips to make page load times more effective include optimising image sizes (size and scale), combining code into a central CSS or JavaScript and minify HTML,CSS, JavaScript.
10. Mobile friendly
Websites could be accessed from multiple devices with multiple screen sizes if it's mobile friendly so it needs to have a responsive layout.
Comments
Post a Comment