0607 금 uiux 46일차

0607 금 uiux 46일차

웹코딩 참고 사이트(김영원 강사님) ( https://kimyws.tistory.com/29 ) ( https://webstoryboy.co.kr/ ) 플렉스 개구리 ( https://flexboxfroggy.com/#ko )

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ). 자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ ) 자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script ) 피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모 작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스 자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

.

UI UX

GUI( Graphical User Interface )

 

추상적 개념을 포함하고 있다.

Interface, Interaction, Information

시각적인 아름다운 결과물

그래픽적 디자인적 접근 x

Interface(접점) 프로그램언어

사용자가 시스템과 상호작용하는 요소, 사용자가 어떻게 인식하고 사용하는지 직접적인 영향을 미침

 

 

Interaction 상호작용하는 방법

행동과 반응

 

초점

1) 시각적, 배치적 집중

2) 사용자의 행동, 시스템의 반응에 집중

 

목적

1) 사용성 높이고, 직관적 디자인 제공

2) 효율적인 상호작용을 통해 경험을 최적

 

구성

1) 정적인 요소(레이아웃, 디자인)

2) 동적인 요소(사용자 입력, 피드백)

 

시스템 구성(인포메이션 아키텍쳐)

사용자가 시스템 웹사이트에서 정보를 쉽게 찾을 수 있도록 구조화하는 것

사용자 효율 높일 수 있고 만족도 향상

 

1) 목적

사용자 효율 향상

정보의 접근성 증가

일관된 사용자 경험 제공 (모든 페이지에 일관된 정보 구조 → 사용자의 혼란 ↓ )

 

제품디자인 / UX 디자인 (효용, 사용성 디자인 어떻게 사용하게끔 할 것인지)

예) 포스트잇 - 절대 떨어지지 않는 접착제 → 잘 떼어지는 (사용 목적에 대해서 다르게 생각)

 

인터렉티브 제품에서 구현되는 디자인적 요소 제공

 

사용의도가 어떻게 변화하느냐에 따라 디자인&환경 변경

 

 

 

.

---

웹

 

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

상단 1차 시도 ( https://codepen.io/YoungHeom/pen/mdYwvGX )

 

 

 

 

 

 

 

 

강사님 메모 UI UX  GUI 추상적 개념 포함 하고 있다. Interface, Interaction, Information 근본 개념,  시각적인 아름다운 결과물 만드는것이 그래픽 디자인적 접근 X Interface (접점) 프로그램언어 사용자가 시스템과 상호작용하는 요소 언어를 몰라도 어떻게 작용하는지 몰라도 휴대폰 사용 문제 없다. 웹 접점 사용을 한다. 인터페이스 : 가시적인요소 사용자가 어떻게 인식하고 사용하는지 직접적인 영향을 미침 Interaction 상호작용하는 방법 행동과 반응 초점 1. 시각적, 배치적 집중 2. 사용자의 행동, 시스템의 반응에 집중 목적 1. 사용성을 높이고, 직관적 디자인 제공 2. 효율적인 상호작용을 통해 경험을 최적 구성 1. 정적인요소(레이아웃, 디자인) 2. 동적인요소 (사용자 입력, 피드백) 시스템 구성 사용자가 시스템 웹사이트에서 정보를 쉽게찾을수 있도록 구조화 하는것 사용자 효율 높일수 가 있고 만족도 향상 1. 목적 사용자 효율 향상 정보의 접근성 증가 일관된 사용자 경험 제공 (모든 페이지에 일과된 정보 구조가 있어서 사용자의 혼란 줄여야 한다. 제품디자인 / UX디자인 효용, 사용성 디자인 어떻게 사용하게 끔 포스트 잇 예전부터  (절대 떨어지지 않는 접착제) 사용목적에 대해서 다르 게 생각하니 인터렉티브 제품에서 구현되는  디자인적 요소 제공 사용자 상황 변화에 맞춰 적용되는 디자인 사용의도가 어떻게 변화느냐에 따라서 디자인도 변경, 환경변경 기술의 발전에 따라 디자인이 변경된다. 점점 시간이 지나면 초보 퍼블리싱, 디자인X AI에게 물어보면된다. 사용자 경험 생각해보면서 디자인 디자인이 쉬워야 하고 유쾌함 즐김 인터 페이스 - 터치 Multi 터치  제스쳐 - AR - VR - MR 웹페이지  - 사용자 (누구 사용하는지) 노인, 어린이, 장애인, 일반 맞춤으로 디자인을  일반적 디자인 특정인을 위한 사이트 포트폴리오에 UIUX 조금더 들어간 사이트 사용자 분석과 반응하는 형태 구조화 GUI / UIUX 넷플릭스 블랙미러, 당신과 자연의 대결 인터렉티브 디자인 입력 과 출력이 어떻게 되어 지는지도 알고 디자인을 구성하면 좋다. 디자인 4/3 구성 4/1 구현 인터랙션의 주요 고려사항 - 어떤 목적을 가진 상호작용인지 이해 디자인 - 아름답고 편리하고 즐길만 하게 설계 - 버튼이 눌렸을때 입력이 제대로 되는지 (같은행동이 반복되지 않아야 한다.) - 사용자가 잘 알아볼수 있도록 정보제시 반응이 있어야 한다. 사용자 경험 환경요소 인구분포, 상황인식, 플랫폼 3가지  웹, ios, 안드로이드 사용자 경험, 디자인 목적