APPLICATION DESIGN - Project 1

-

 29/03/2022
Hansel Ribowo (0350008) / BDCM
Project 1

Lectures
Week 2
UI vs UX
UX would say that button should physically press down when you click it.
UX Designer

  • UX Designers focus on the structure and layout of content, navigation and how users interact with them.
  • The types of deliverables they produce include site- maps, user flows, prototypes and wireframes, which are more focussed on the underlying structure and purpose of the software. 
  • The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
The UI would be a series of buttons and how they look.

UI Designer
  • Focus on the way the functionality is displayed and the fine detail of how users interact with the interface.
  • They produce the visual comps and functioning front-end code. 
  • This is very much about polished final production quality outputs.
Designing for the USER

Successful user interface design improves product. In fact, in some ways the UI is the product, according to Jakob Nielsen, User Advocate and Principal of the Nielsen Norman Group “If people can’t use a product, it might as well not exist,” This concept is especially true in a world where every marketplace-from books to electronics-is highly competitive.

Common Characteristics
  • There are a couple of standards that identify effective design across the board (regardless of media or discipline)
  • First consideration is determining who the user is
  • The design must be as broad or narrow as necessary to accommodate the intended user 
  • There is no recipe that’s going to make your design appropriate for all applications and users  
  • “There’s no such thing as good design,”- Nielsen 
  • What to do?
  • Listen to your users and observe them interacting with your design
  • Think ahead of who will actually be using your product and go from there
  • Graphic designers have been reared on a variety of formulaic methods and approaches for successful design.
  • It helps to think of any designed piece as an interface, be it a book, shampoo bottle, retail store, or Web site
  • In order to make a connection with the user, the design’s interface must achieve its mission- communicating information through the printed word, dispensing a product, projecting and image or creating a space that’s easy to navigate
  • Changing the focus from the designer’s aesthetic to the user’s need allows the product to be designed in a way that helps the user succeed 
  • From here, the aesthetic considerations can follow
Golden Rules of Interface Design

Interface expert Nielsen identifies five usability attributes
designers should heed when creating a design interface,
no matter what their medium:
  • Ease of Learning
  • Efficiency of Use
  • Memorability
  • Minimize Errors
  • Satisfy the User
Do’s and Don’ts of UI Design
  • Strong Logo Position
  • Provide Hierarchy
  • Don't Use Placeholder as Label
  • Primary CTA button should always stand out
  • Format the text properly
  • Don't use radio button instead use card
  • Provide sample and use simple email address text field
  • Use Color Psychology
  • Horizontal Alignment
  • Keep fields minimal
  • Properly place your CTA button
Introductions
Progress

In this first week we get a task to do, we need to search for a bad app for our task and I choose Steam Mobile App for this task. After that I use miro for the progress of my task like making the user persona user empathy and etc.


I also do an interview and survey for the steam app to make my user persona



After I did all the tasks our lecturer want us to compile all the progress into the presentation slides so I use canva to make the presentation.


Reflection
In this project at first i confuse what should i do with the user person and the other because i am not use to it but after i learn from the lecture and after the interview that i conduct i manage to get it done.

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