Interactive Design Task 1 :Exercise
28.08.2023-
Guan Wee Lun/0364012
Interactive Design/Bachelor of Design in Creative MediaWeek 1/28.08.2023
Briefing- week 1, Mr. Sam gave us briefing about the module and our project till the end of this semester, we are going to use adobe XD for this Semester and our project one and two is about creating a digital CV, the first one is prototype and the second one is the final work. And also, our final project creating a lifestyle microsite our title is lifestyle for this final project.
Week 2/05.09.2023
Usability-The process of creating a website-
- empathy
- define
- idea
- prototype
- testing
What is Usability?
effectiveness, efficiency, successfulness of a website
UX (User Experience) design-make sure the product can satisfy user.
UI (User interface) is after UX design.
Tried to accommodate 30%-40% of user.
principle of usability
-consistency
layout, color
CSS
-simplicity
simple design, simple for user, simple to read.
-visibility
it's created a visual hierarchy and attention to user.
-feedback
giving user a signal about succeeded or failed a task, progress and status.
-error prevention
alert user when they are making error (example, account, password)
Common usability pitfall
-complex interfaces
-confusing navigation
-poor feedback
-Inadequate error handling
Instruction
Exercises
Task 1
Exercise 1-Web Analysis
For task 1, we are required to review 2 websites from CSS Winner, and do a report more than 500 word in a google slide.
Requirement
Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website and consider how they impact the user experience.
- purpose and goals
- effectively communicated to the user
- visual design and layout of the website
- use of color, typography, and imagery.
- functionality and usability of the website
- navigation, forms, and interactive elements.
- quality and relevance of the website's content
- accuracy, clarity, and organization.
- website's performance
- load times, responsiveness, and compatibility with different devices and browsers
Exercise 2- Web Replication
For task 2, we are going to replicate two websites from three of the links given by Mr. Sam.
Requirement
Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts. You may need to screengrab the website and can begin to replicate the page.
Process:
- I choose Morgan Stanley website and Bantid Running website in the first place, but after I inspect Morgan Stanley, It show that it's using Times News Roman, but the typeface on the website is not Times News Roman, so I kicked out Morgan Stanley, I choose Ocean Health Index website for this assignment
- I screenshot the whole image of the website.
.png)
figure 1.2 Ocean Health Index Website
3.I started the replication with copying the text for Ocean Health Index Website using Helvetica regular and bold and also for Bantid Running website, for the Bantid Running website, there are some typefaces that I cannot find in google font to use it (Tomato Grotesk Typeface), so I use Helvetica to replace is as it's the most similar font I can find.
.png)
Figure 1.3 Ocean Health Index Replication with typefaces
.png)
Figure 1.4 Bandit Running Website with typefaces
4. I started add the same color as the website, And I add on the texture, stroke and layout into it.
.png)
Figure 1.5 Figure 1.5 Ocean Health Index Replication with typefaces and Layout
.png)
Figure 1.6 Bandit Running Website with typefaces and layout.
5.Lastly, I add images to the Task, I use square and round boxes to replace with the logo and icon to prevent copyright problems.
Figure 1.7 Complete Set (Ocean Health Index)
Figue1.8 Complete set (Bandit Exercise)
in adobe illustrator
.png)
Figure 1.9 process in Adobe Illustrator
Final Submission
Figure 2.1 Final Submission website 1
Figure 2.2 Final Submission website 2
Exercise 3
requirement: In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
- Create an HTML file named "index.html."
- Create a section that displays the following information:
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
- Create an external CSS file named "style.css."
- Apply CSS rules to style your recipe card.
- Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., recipe-title, ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
1. Content
the content of recipe is something that I found in website, and I am thinking of Halloween is coming so I find some recipe about Halloween. Then I find in on a website named food network.
the layout is from today class, as navigation, image and description, and title same line, and other put in below.
Figure 2.4 layout
For the heading I use several red colors, and for the text I use black color.
For the font I am using Roboto slab
3.HTML code
.png)
Figure 2.5 HTML 1
.png)
Figure 2.6 HTML 2
.png)
Figure 2.7 HTML 3
.png)
Figure 2.8 HTML4
4. CSS STYLE
.png)
.png)
Feedback
Reflection
Experience
The first exercise I think is easy for me, just Analys the website, write about the pro and cons of its decision of the design, this improved me to do a better designer, as I know how a good website look like, this is a reference for me, especially the portfolio that made by Anna Utkina, it's my future goal of making my own portfolio like this, this exercise let me experience how I can made a good website, what is the thing that I need to remembered and avoid it. Exercise 2 is a little bit hard to do it, website analysis let me know about theory, website replication is just like a practical for me, if I am the designer of the website, what is the element I would use as the designer of the website I choose for exercise 2, the combination of color, layout design and the decision of the typeface is important, each of the decision making will affect the reader experience, readability and the effort to continue reading it.
Observation
I have learnt that how interaction with the viewer is important, not just building website to read, that will be the same as reading a book, boring, lack of interaction that can attract viewer attention. there are still many things for me to learn the element of the website, the layout, combination. combination is just 1+1=2, it can be 1+1= 0, but also, it can be 1+1= 3, there are many possibilities of making these combinations, I will need to learn that how can I improve my technique and also my knowledge to make me a good designer.
Findings
I find out that I have a hole in my knowledge, now it's just all kind of knowledge building a circle outline, but the circle is empty, so I need to learn by basic to fill up the circle, I am not prepared yet to be better. What I know about interactive design is about 0, I need to learn more about how to use software more, the more I learn, the more I am familiar with using the software, I will do my assignment more efficiently, I lam ack using the software including knowledge.
Comments
Post a Comment