Tan Sing Yee (0359999) Interactive Design

03/04/2023 - 03/07/2023 / Week 1 - Week 14

Interactive Design/ Bachelor of Design (Honours) in Creative Media

Tan Sing Yee / 0359999

Exercise 1 & Exercise 2

INSTRUCTION

EXERCISE 1

Choose 2 website from the link given : https://www.spinxdigital.com/blog/best-website-design/

Review the website that you're 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.

Want 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 colour, typography and imagery.

- Consider the functionality and the website, including its navigation, forms, and interactive elements.

- Evaluate the quality and relevance the website's content, including its accuracy, clarity, and organisation.

- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

2website that I choose:

- https://bruno-simon.com

- https://www.king.com/game/candycrush

Brief Report

The first website is called Bruno Simon. The website is very fun, the first page of the website is a word ' START ' and when ni press the start its poop out a very nice graphic and it have an interaction ( figure 1.1) it have a car and up down left right keycap (figure 1.2). When you press the 4 keycaps the car will move, all the informations are need to found by pressing the 4 keycaps (figure 1.3). Next, when your car is on the open box there it will tell you to press 'enter' to reach the information. The information will get from a new website, the information website is also arrange very well and clear, it provide the price in a box to give user easy to see it and it also have a 'login' and 'start learning now' button on the top right. The colour also well, because it only have few colour inside. When you scroll down they also provide the quantity chapters and lessons of the class, and the below also have short video to explain the class. Therefore, back to the main page in the left part is a playground section (figure1.4), they design a section for user to experience the animation, when you move your car to hit the things it will falls (figure 1.5) this website is very attract users and it is also fun to use.

Figure 1.1

Figure 1.2

Figure 1.3

Figure 1.4

Figure 1.5

The second website is called King. It is a sugar crush website, in this website the colour is very attractive and colourful with full of all the candies in the home page (figure 2.1), and when you press the play button, at the top we can easily see the buttons such as, home, games, jobs, community and login. User can download the game by using the app there provided there and it is very functional (figure2.2). Besides, scrolling down you can see a video about the how they design the games, and it also introduce som featured games under the company. It also provide few language for different country for user to change (figure 2.3) in the bottom of the page. Hence, in the games page they also provide a short video about the producer visit the interview channel. The website is ok it have not much information about the candy crush game, but the colour and the functionality is quite clear.

Figure 2.1

Figure 2.2

Figure 2.3

EXERCISE 2

Our exercise is to replicate TWO (2) existing websites given in the link that lecturer give us. We need to choose any two from the link given. Follow the dimension of the existing website from the width and height. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. We can sue any image form stock image or free stock icon. The image that you will be using does not have to be an exact image. You may replace it with a similar image. Focus on the layout, type style, and colour style. To find similar typefaces/fonts, you can download fonts from Google Fonts.

1. https://www.morganstanley.com

2. https://kinhr.com

3. https://www.wozber.com/en-us

4. https://www.luno.com/en/my

5. https://www.oceanhealthindex.org

I choose :

Figure 3.1 https://www.morganstanley.com

Figure 3.2 https://www.oceanhealthindex.org

I use Adobe Illustrator to do my work

Figure 4.1 Process of the my work

Figure 4.2 Process of my work

FINAL

Figure 5.1 Final of the first link

Figure 5.2 final of the second link

Project 1: Landing Page Design Prototype

I choose Penny juice website to re design it: https://www.pennyjuice.com

This website is to messy and the colour they use is too bright and neon it make buyers headache and not feel to buy or see. The layout also too messy to see and find information. I use illustrator to re design it first then I use Adobe XD to redo it.

I change the colour into softer colour so that the buyer will see with more comfortable and I arrange it with a very simple layout, it is very straight forward what is it. I bold all the heading and I put the box under the image, it is easy for buyers to click it and I the box's colour I choose the same colour of the each information but in different colour tone.

Figure 6.1 Leading page design in JPEG

Figure 6.2 Leading page design in PDF

Project 3

Objective:

The objective of this project is to create a 5-page website focused on the theme of mental health. The website should provide valuable information, resources, and support for individuals seeking to understand and improve their mental well-being. You will be required to showcase your design and development skills while effectively conveying the importance of mental health through their website.

Project Requirements:

Design and create a 5-page website with an appealing and user-friendly interface. The website should have a consistent theme and collar scheme related to mental health. Each page should have relevant content that educates and supports individuals in understanding mental health topics. Implement responsive design to ensure the website is accessible and displays properly on different devices. You can provide links to external resources, outlines, or helpings that offer professional assistance for mental health concerns.

This is the colour scheme I chose: