디자인 2일차
(병원 갔다옴)
== 적응형 웹 디자인 ==
1. 사용성(Usability)
- 사용자 인터페이스 설계 시 우선적으로 고려해야할 요소
- 사용자가 제품이나 시스템을 얼마나 빠르고, 쉽고, 편리하고, 효율적으로 사용할 수 있는지
- 유용성(Utility)
- 디자인이 제공하는 기능
- 사용자가 원하는 기능이나 필요한 요소를 제공하고 있는지를 평가
--
== 사용자 인터페이스 (User InterFace, UI) ==
: 일반적으로 두 다른 세계가 만나 소통하는 접점
= 사용자 인터페이스 종류 =
- GUI : 그래픽 인터페이스
- Touch UI : 터치 사용자 인터페이스
- Voice UI : 음성 사용자 인터페이스
- Gesture UI : 제스처 사용자 인터페이스
- CLI(Commance Line Interface) : 명령 줄 인터페이스
== UI 구성 요건 ==
- 학습의 용이성
- 제품이나 시스템의 기능과 조작 방법이 직관적이고 배우기 쉬워 별도의 학습 없이도 사용 가능해야함
- 사용의 효율성
- 최소한의 노력과 시간으로 원하는 결과를 얻을 수 있어야 하며, 빠르고 단순해야함
- 오류의 최소화
- 사용자가 쉽게 오류를 저지를 수 있는 상황 미연에 방지, 오류 발생 시 즉시 인지 및 수정할 수 있는 기회 제공
- 기억의 용이성
- 사용자가 매번 조작 방법을 배우지 않아도 친숙하고 논리적인 절차에 의해 쉽게 기억할 수 있어야 함
- 사용자 만족
- 제품이나 시스템이 사용자의 기대에 부합하고 만족스러워야 함
- UI 레이아웃
- 화면에 로고, 텍스트, 사진, 그림 등을 일관성 있게 배치하여 사용자가 편리하게 조작할 수 있도록 디자인
== UI 가이드 라인 ==
- 메타포 사용 : 아이콘을 통해 문화적, 언어적 장벽을 극복
- 직접 조작 : 사용자가 화면상의 정보나 객체들을 직접 조작하는 느낌을 받을 수 있게 하며, 조작에 대한 즉각적인 피드백 제공
- 보고 선택하기 : 사용자들이 스크린에 제시된 대안을 보고 선택할 수 있으며, 자신이 무엇을 하고 있는지 바로 인지할 수 있도록 함
- 반응과 대화 : 시스템이 무슨 일이 일어나고 있는지 사용자에게 지속적으로 알려주어 즉각 반응하며 시각적, 청각적 신호 제공
- 관대함 : 사용자가 시스템을 안전하게 탐색할 수 있도록 하며, 어떤 행동이던 시스템에 손상을 주지 않아야 함
- 미덕 완전함 : 시각 디자인 원칙에 맞게 정보가 잘 표현되며, 불필요하게 많은 버튼이나 복잡한 아이콘으로 사용자 혼란 초래 금지
- 사용자에 대한 이해 : 대상 사용자의 특성을 잘 이해하고 디자인 반영
(사이트 많이 보기)
== 사용자 경험(User Experience, UX) ==
: 사용하거나 사용하려는 제품, 시스템, 서비스에 대한 인식하고 반응하는 것
: 사용자가 느끼는 감정, 만족감, 생각을 포함하며, 인지 심리학, 인체 심리학 등 다양한 학문과 연결
== UI/UX 디자인의 이해 ==
(본문 내용 참고 P . 59~)
: 명령어 기반 인터페이스를 그래픽 위주의 인터페이스로 전환
- 컨텐츠 시각화
: 컨텐츠 시각화를 위한 관련 분야
- 인포그래픽
- 정보 시각화
- 과학적 가시화
- 통계적 그래프
- 컨텐츠 시각화 작업 절차
-
- 컨텐츠의 기획 : 소재 요구 분석, 아이디어 회의, 마스터 플랜 등을 통해 기획
-
- 데이터 수집 : 컨텐츠에 필요한 다양한 데이터를 수집하고 분류, 분석
-
- 연결고리의 구성 : 나열된 정보들을 계층적 또는 평면적으로 구성, 이들간 연결고리 생성
-
- 문제점 파악 : 기술적 , 그래픽적 요소의 문제점을 찾아내고 해결 방안 모색
-
- 포맷의 선택 : 컨텐츠에 맞는 그래픽 소스와 포맷을 선택하여 시각화
-
- 시각적 접근 방법의 선택 : 데이터를 차트나 그래프로 표현하거나, 일러스트와 메타포를 이용해 표현하는 방법 결정
-
- 정재와 테스트 : 불필요한 반복, 과잉 표현, 무거운 실행 파일 등을 피하기 위해 결과물을 정제하고 테스트(이 과정 반복 후 완성도 높임)
== 매체별 구성요소 분석 ==
- 웹(Web)
: www
: HTTP
- 특징
- 문자, 소리, 그림, 동영상을 통해 정보 전달
- 하이퍼링크로 연결해 정보 탐색 가능
- 웹 문서는 주로 HTML로 구성
- 웹 디자인 고려 사항
- 웹 표준 준수, 모든 브라우저에서 기능 작동
- 로고, 그래픽, 텍스트를 일관된 위치에 배치하여 UI를 직관적으로 설계
- 자바스크립트(JS)르 ㄹ최소화하여 성능 최적화
- 텍스트의 가독성을 높이고, 특정 태그나 플러그인 의존 지양
- 웹 디자인 가이드라인
- 디자인 일관성 유지
- 운영 및 관리를 위한 지침 제공
- 신속하고 효율적으로 제작
- 모바일 기기용 웹 디자인
- 간단한 디자인과 세로 열 중심의 탐색 구조를 채택
- 반응형 웹 디자인을 통해 화면 크기에 맞게 레이아웃 조정(필수!!)
- 모바일에서 지원하지 않는 디자인 기능은 사용하지 않음
- 컴퓨터(Computer)
- 데스크톱 컴퓨터
- 노트북 컴퓨터
- 모바일 디바이스
- 키오스크
-
특징
-키보드를 사용하지 않고 터치 스크린을 통해 쉽게 조작
-1대부터 무한대의 디스플레이로 컨텐츠를 송출하고 관리
-사용자에게 직관적인 그래픽과 아이콘을 사용하며, 실수를 용인하는 UX 설계가 필요 -
용도
-민원 서류 발급, 상품 정보 제공 및 주문, 예약 등
-은행, 공항, 도서관, 영화관
- 디지털 사이니지
-
특징
-광고, 공공서비스, 맞춤형 정보를 제공하여 쌍방향 커뮤니케이션 가능
-LCD 등 하드웨어 단가 하락과 네트워크 발전으로 활용 범위 확장
-TV, 인터넷, 모바일에 이어 4차 산업혁명 시대의 새로운 미디어 -
응용 분야
-게임, 음악, 헬스케어 등 다양한 컨텐츠로 확장
-공익적, 예술적 목적으로도 활용되면 사용자 체험과 경험 극대화 -
기술적 특징
-스마트 기기와 연동하여 사용자 맞춤형 서비스를 제공
-플랫폼과 소프트웨어 기술 경쟁력이 중요하며, 스크린 다양화
== 와이어 프레임 ==
-
개념
: 실제 디자인을 진행하기 전, 화면의 구성, 정보체계, 기능, 컨텐츠를 간단한 선(Wire)으로 표현한 스케치
: 색상, 타이포그래피, 이미지는 최소화 하여 전체적인 레이아웃 표현
: 주로 도식, 청사진, 프로토타입 형식
: 그래픽 요소보다는 계층적 정보와 구조 구현에 초점
== 와이어 프레임 작성 방법 ==
1. 화면 비율 고려
2. 콘텐츠 최소화
3. 기본 스케치와 점검
4. 컨셉과 레이아웃 설계
== 와이어 프레임 작성 도구 ==
1. 핸드 드로잉
2. 목업 툴
== 스토리 보드 작성 ==
-
스토리 보드
개념
: 웹 사이트나 애플리케이션 개발을 위한 설계도이자 작업 지침서
특징
: 각 화면의 흐름과 상세한 정보를 포함
: 스토리보드의 오나성은 기획 단계의 마무리를 의미하며, 디자이너 - 시각 인터페이스 설계, 개발자 - 프로그램 설계, 코딩 진행
== 스토리보드 작성 과정 ==
1. 표지 작성
2. 개정 이력
3. 정보 구조도(Information Architecture)
- 서비스 흐름도 (Flow Chart)
- 화면 설계
- 5-1. 페이지 정보 여역
- 5-2. 화면 설계 영역
- 5-3. 화면 설명 영역
- 5-4. 하단 영역
