Interactive Design / Exercises
3.4.2023 - ..2023 (Week 1- Week 8)
Loke Yan Ling / 0344602
Interactive Design / Bachelor of Design in Creative Media
Exercises
Instructions
Exercise 1: Web Analysis
The link of 43 awarded websites are provided, we are required to pick 2 websites and analysis with several aspect.
What To Have in The Analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing in not more than 500 words. Include a screen capture of each section or page of the website to explain.
Figure 1.1 Pdf version of the website analysis
Figure 1.2 The starting page
Figure 1.3 Chapter 1 Last Touches
Figure 1.4 Chapter 2 Goodbye Words
Figure 1.5 Chapter 3 The Journey
Figure 1.6 Chapter 4 A New Adventure
Figure 1.7 The last page
Other than that, I have founded another interesting website which is a compelling story website with illustration, interaction and animated storytelling experience. Nomadic Tribe included 4 chapter in the story, it is about a psychological interpretation of the journey from the old year to the new one. The visual design really appealing and attractive, the layout is satisfied by using safety margin. The superb colour scheme delivers an immersive comic book-like effect. Take a try to enjoy the interactive and immersive journey.
I leave some my own interpretation here. The first chapter was in the scene of an island full with flowers, and the story captions was about "Mission in this year has come to an end with a last flower bloom." These flowers are your achievements and memories from the year, and they grow as well as you do. The second chapter is a process of purification of the crystal, and the chapter title was about goodby words. It maybe means you bid a very solemn farewell to your year. Chapter 3 is travelling to a new island which means a new year and the sunrise and new bloom in chapter 4 is about a new year has begin with a new start.
Exercise 2 / Replicate Website
Your task is to replicate two (2) existing websites are given in the link below to gain a better understanding of their structure. Choose any two from the link given. This exercise will help you develop your design skills using software and gain insights into web design best practices. Focus on the layout, type style, and color style.
- Follow the dimension of the existing website from the width and height.
- Photoshop or Adobe Illustrator
- Image from stock image or free stock icon
- Does not have to be an exact image (replace it with a similar image)
Image link: https://www.pexels.com/
Google Fonts link: https://fonts.google.com/
First replicate website link: https://kinhr.com/
Figure 2.1 Confirming the dimension of the website
Figure 2.2 Picking colour
Figure 2.3 Selecting colour
Figure 2.4 Icon
To make sure the exact dimension, I have screenshot all the pages one by one and place it into illustrator. The reason I pick this website is due to the dark background which bring up the contrast which is my favourite. The elements were traced and the colours are picked from the google Chrome extension, but sometimes the colour is not that accurate, it will be lighter than the original or the elements is too small. Thus, the colour have to adjust manually.
Figure 2.5 Shadow
Tutorials:
Ctrl + C -> Ctrl + B(place it directly at the back) -> Colour -> Effect -> Gaussian Blur (5pixel) -> Blending tool (optional) -> overlay
At first, I replicate and the shape of box and just place it behind, it looks a bit too rigid. Thus, I think maybe the Gaussian Blur could make it better. After the effect applies, the value can be alter at the appearance tool box. This website takes longer time to replicate than the website 2 chosen due to it have more elements.
Figure 2.6 Final Replicate Web Page 1, JPEG
Figure 2.7 Clipping Mask
Figure 2.8 cute logo
Same as the website 1, tracing the elements and find suitable font. The font sources would be from the Google font which provided by lecture. Replicate website hardest part would be the selection of font. The typeface has it own unique character thats make it hard to find. I have tried my best to find a more similar font to replace it.
Figure 2.9 Image source 1: Pexels.com
Figure 2.10 Image source 2: Google
Figure 2.11 New method for me
This website used images as the background and categories. The first image source is form the Pexels.com. The second would be the search engine from Google. The third source was a really new approach for me, taught by Jayden.
The third source:
Right click -> Inspect -> find the image source link with the word "img" -> click the link
Figure 2.12 Photoshop
In this website, the logo is place at the above and the bottom of the website. The bottom can replicate by using screenshot, while the logo on the above have to use another way because of the different colour in background. I used the screenshot and make it transparent background and white in colour.
Figure 2.13 Gradient
On week 2 tutorial class, Mr Shamsul teaches how to make the gradient. The gradient with one side of 0% opacity and the one side would be the 100% opacity of the bottom colour.
Figure 2.14 Final Replicate Webpage 2, JPEG
Exercise 3 / HTML: Personal Profile Page
In this exercise, we are required to create a personal profile page using HTML. The goal of this exercise is to practice HTML skills and create a webpage that showcases personal interests.
Instructions:
Things to include in profile page:
- Name, a photo, a brief bio, and some personal interests.
- HTML tags to structure your content.
Example: headings (h1, h2, etc.) & paragraphs (p) to make your content more readable.
Example: headings (h1, h2, etc.) & paragraphs (p) to make your content more readable.
- Lists (ul or ol) to showcase your personal interests.
For example, you could create a list of your favorite books, movies, or hobbies.
- Links (a) to your profile page.
You could link to your social media profiles or to other websites that you find interesting.
- Image (img) on your profile page.
This could be a picture of yourself or something that represents your interests.
Once you have completed your profile page, you can publish it online using a free hosting service like GitHub Pages or Netlify. This will give you a chance to see your webpage live on the web and share it with others.
I have tried to use Visual Studio Code and Adobe Dreamweaver as platform for this exercise. I prefer to use Adobe Dreamweaver because It can split the screen into half, one is for the coding, one is for the showcase. Thus, I can see what changes I have made instantly through the split showcase window.
I feel that maybe I can add some decorations on my personal profile page because I want the information to be organized. Then, I do some research about table coding in html. I pick a cookie image as my profile image from pinterest.
Fig 3.1 First Draft
I start with a small introduction of myself then straight to my interest. Personal interest is divided into 3 sections and differentiate by headings. The three sections are movies, crystals and cooking games. Unordered list and ordered list are used accordingly on different part. Background color, table color and text color were added which help to express the way I want. Instead of full screen size of wording, I like to have more negative space.
Fig 3.2 Prototype
After finalize overall, upload whole file into netlify, then change the site name as per request.
However, Mr. Shamsul said that most of us have done the job and done more than he wanted to. He show us more useful skills in class, such as how does navigation bar button work, using css to change background color, typeface, adding background image and so on.
Fig 3.3 linking to same page css
Final Personal Profile Page: https://yanling-exercise3.netlify.app/
Exercise 4 / CSS: Layout Exercise
Based on the content provided (text and images), we are required to create a responsive grid layout for a website. The design and alignment should be visually appealing and functional across different screen sizes, allowing for optimal viewing on both desktop and mobile devices. Upon completing the task, upload the exercise to Netlify and submit the link here. You may want to explore media queries for ensuring that your website is responsive and different link styles to improve the usability and aesthetic of the website.
Fig 4.1 Basic html
The basic structure such as headings and paragraphs are build first. Then, add the links with _blank to keywords accordingly as I remember Mr Shamsul said except the link that connect to current page, the others should add target="_blank" to the webpage is open in new window.
Fig 4.2 Image size
Fig 3.3 Image resolution
Fig 3.4 Export
Fig 3.5 Export settings
All the image have been processed by Photoshop to ensure the image size and resolutions can fit into the webpage. The resolutions should not exceed 5 seconds because people's patience is limited. The image size is then been altered in dreamweaver because no matter the image size is decrease in Photoshop, the image still show the same size in preview. Maybe there is limitation on the smallest size of image in dreamweaver, so the image size is altered by style="width: 300px".
Fig 3.6 Link colors
The grid layout, background color, text colors and link colors are done in css part. The layout gridding for navigation bar and logo are the hardest, the position cannot be fixed easily. This is the best I can do. I do like more the navigation bar on the top. I still need improvement on placing the button on navigation bar.
Fig 3.7 Layout and Navigation 1
Fig 3.8 Layout and Navigation 2
Fig 3.9 Mistake should avoid
Again, I upload the file into netlify after finalize overall， there is an error occured. I have tried many times upload the files again and again still the same results. Finally, I found out the problem was the name of the html file. It should name properly, index.html.
Fig 3.10 Before Justify
Fig 3.11 After Justify
Last, final checking for optimal viewing on both desktop and mobile devices. On mobile device, I have noticed that the paragraph really not visually appealing, so change all of the style of paragraph into justify.
I still not satisfied the navigation bar, so I rewatched the lecture video again then rearrange the elements by using display: flex and align the items center.
Fig 3.12 Navigation Bar
Final Css Layout Exercise: https://yanling-exercise4.netlify.app/
Comments
Post a Comment