APPLICATION DESIGN II - PROJECT 1

-

12/04/2023
Hansel Ribowo / 0350008
BDCM (UI/UX)
Application Design II - Project 1

Exercise

In this first class of the semester, we start with the introduction of the MIB and the module task, and projects for our first task our lecturer wanted us to review our application from the final project Application Design I, and determine what things that can be changed to make it a better application.

  • Navbar
    I change the navbar because I think it is a bit flat and some logo is not suitable I change the logo button to a steam logo to make it more suitable and I also add some curve at the edge of the navbar, drop shadow, and inner shadow to give the 3d effect looks to it so it is not really flat.

    Before Review

    After Review
    Fig 1.2 After Review
  • The word "Ratings" and "Achievement" colors
    I change     the color of the word "Ratings" and "Achievement" because it is hard to read when using orange for the word with blue background and I thought it's better to use white instead of orange because it is more readable and does not make my eye hurt. Before Preview
    After Preview

  • Adding Inner Shadow and Drop Shadow
    Here I add some inner shadow and drop shadow to the some of the elements in my app because it will make it more suitable with the app and also to have 3d looks for the elements. The elements that I add this shadow are "Search Game" bar, Price tag bar, "Type Text" bar, and "Payment Method" tab.

    Before Review




    After Preview

Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II - EXERCISE 1

-
Image
12/04/2023 Hansel Ribowo / 0350008 BDCM (UI/UX) Application Design II - Exercise 1 Exercises In this first week, Mr. Razif explains to us about MIB and what task and project we will do this semester after that we learn how to use Chat GPT to make a website after that Mr. Razif asks us to do some exercises which make a website using Chat GPT. Here my website uses Chat GPT Fig 1.1 Home Page Fig 1.2 About Page Fig 1.3 Portfolio Page Fig 1.4 Contact Page Fig 1.5 HTML Coding in Visual Studio Code Fig 1.5 HTML Coding in Visual Studio Code Fig  1.6 CSS Coding in Visual Studio Code Fig  1.7 CSS Coding in Visual Studio Code Fig  1.8 CSS Coding in Visual Studio Code ...
Read more

APPLICATION DESIGN II - LECTURE

-
Image
03/05/2023 Hansel Ribowo/BDCM App Design II Lecture Lecture In this week we learning how to animate our website. We start by learning how to use Gsap website to help us with the animation of the website, Then we try to animate our website logo by using script that we copy from Gsap. First we need to load Gsap into HTML page we need to add script in visual studio code which is this After adding the script now we can add the animation from Gsap, our lecture want us to the animation for the logo so this the code for the animation First we need to add id to the logo. and then add the Gsap at the java script section. This one is for adding ease in/out for the animation After that, we added some animation delay to make it come one by one. This animation for the side panel that when we press it will show the menu to animate the section we need to add the animation when open and close the panel. now we making the main lo...
Read more