달력

8

« 2020/8 »

  •  
  •  
  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  •  
  •  


 

 

 

Designing Web Navigation


 

 

https://oreil.ly/2XeYZWY


 



'Development > UI&UX' 카테고리의 다른 글

인터페이스 현황, 인터페이스 현황 작성 시 고려 사항  (0) 2019.09.27
프로토타입(Prototype) 유사 용어  (0) 2019.09.08
Designing Web Navigation  (0) 2019.08.26
사용성(Usability)  (0) 2019.08.15
프로토타이핑의 역할  (0) 2019.08.13
awwwards(어워즈)  (0) 2019.08.03
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

사용성(Usability)

·         Jakob Nielsen 사용성을 학습용이성, 사용효율성, 기억용이성, 최소한의 에러, 주관적 기쁨의 요견을 충족시킴으로써 얻어지는 시스템의 특성이라고 주장하였습니다.

·         UPA(Usability Professionals Association, UXPA)에서는 사용성을 "회사가 비용을 절감시키고 사용자의 요구와 부합되는 제품을 만들어 내기 위해 개발사이클 전체에 걸쳐 사용자의 피드백을 받는 제품 개발 방식" 이라고 정의하였다.

·         어떤 사물에 대한 사용자의 경험적 만족도 의미합니다.

·         사용자가 사물이나 시스템 기술을 얼마나 편리하게 사용할 있는가에 대한 방법론까지 포괄하는 개념이라고 있습니다.

 

 

 

http://bit.ly/2IuMOkG

 



'Development > UI&UX' 카테고리의 다른 글

프로토타입(Prototype) 유사 용어  (0) 2019.09.08
Designing Web Navigation  (0) 2019.08.26
사용성(Usability)  (0) 2019.08.15
프로토타이핑의 역할  (0) 2019.08.13
awwwards(어워즈)  (0) 2019.08.03
UI 설계 절차  (0) 2019.07.13
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

프로토타이핑의 역할

·         다양한 디바이스의 발달로 인터랙션 디자인을 통해 사용자의 경험을 극대화합니다.

·         컨셉 사용성에 대한 문제점 리스크 조기 도출할 있습니다.

·         UX 관점의 스토리라인, 페이지 레이아웃을 가시화합니다

·         요구분석의 어려움을 해결해 줍니다.

·         요구사항에 대해 사용자와 의사소통 수단으로 사용되어 커뮤니케이션 증진 요구사항 합의가 가능합니다.

·         서비스의 플로우 또는 구조를 점검할 있습니다.

 


'Development > UI&UX' 카테고리의 다른 글

Designing Web Navigation  (0) 2019.08.26
사용성(Usability)  (0) 2019.08.15
프로토타이핑의 역할  (0) 2019.08.13
awwwards(어워즈)  (0) 2019.08.03
UI 설계 절차  (0) 2019.07.13
GUI 설계시 고려할 특성  (0) 2019.07.04
Posted by codedragon codedragon

댓글을 달아 주세요


 

awwwards(어워즈)

·         웹디자인과 개발 분야에서 가장 우수한 작품을 선정하는 사이트입니다.

·         전세계 크리에이티브 전문가와 지식을 공유하고 건설적인 비평을 교류할 있는 곳입니다.

 

https://www.awwwards.com/


 


'Development > UI&UX' 카테고리의 다른 글

사용성(Usability)  (0) 2019.08.15
프로토타이핑의 역할  (0) 2019.08.13
awwwards(어워즈)  (0) 2019.08.03
UI 설계 절차  (0) 2019.07.13
GUI 설계시 고려할 특성  (0) 2019.07.04
UI 설계 개발 프로세스  (0) 2019.06.28
Posted by codedragon codedragon

댓글을 달아 주세요

2019. 7. 13. 00:30

UI 설계 절차 Development/UI&UX


 

 

UI 설계 절차

UI 설계부터 구현 검증까지는 해당 프로젝트의 시작부터 종료까지 전반에 걸쳐 진행되며 진행 내용은 다음과 같습니다

 

절차

설명

UI 개발 목표와 범위 수립

·         해당 프로젝트의 목표 정의 단계에서 UI 부분의 목표와 범위에 대한 계획을 수립하는 단계로 프로젝터 계획 전반에 UI 계획을 반영합니다.

·         과정을 수행하기 위해서는 해당 프로젝트의 이해 당사자(Stake Holder) UI 요구 사항 조사하고, 정의하며 UI 트렌드 해당 서비스의 사용자를 분석합니다.

UI 전략 수립

·         서비스를 사용할 사용자 조사 시장 조사 통해 UI UX 대한 전략을 수립하는 단계로 사용자 물론 기술적 관점에서도 전략을 수립하는 것이 중요합니다.

사용자 요구 사항 분석 정의

·         사용자 조사와 페르소나(Persona) 결과를 기반으로 사용자의 요구사항을 추출하고 선별하여 사용자 요구 사항을 분석합니다.

·         이를 통해 해당 시스템 전반에 적용되는 UI 컨셉을 설계한다. 이때 페이퍼나 도구를 활용한 프로토타입(Prototype) 제작 진행됩니다.

UI 상세 설계

·         UI 대한 콘셉트가 정의되면 이를 토대로 실제 설계와 구현을 위한 모든 화면에 대해 상세 설계를 진행하게 된다. UI 기능에 대한 구조와 화면 간의 상호 흐름, 예외 처리 등의 UI 전반에 걸친 설계 이루어집니다.

구현

·         UI 설계에 따른 구현에는 다양한 기술들이 사용되며 HTML5, CSS3, JavaScript 등과 같은 기본적인 언어들은 물론 jQuery 같은 JavaScript 라이브러리 또한 범용적으로 사용된다. , UI 구현은 UI 디자이너들과 협업으로 이루어지게 됩니다.

테스트

·         테스트 단계는 일반 사용자를 대상으로 해당 개발 소프트웨어의 사용성을 검증하는 단계로 사용성에 대한 계획을 수립하고, 계획을 토대로 테스트를 진행하게 됩니다.

 

 




'Development > UI&UX' 카테고리의 다른 글

프로토타이핑의 역할  (0) 2019.08.13
awwwards(어워즈)  (0) 2019.08.03
UI 설계 절차  (0) 2019.07.13
GUI 설계시 고려할 특성  (0) 2019.07.04
UI 설계 개발 프로세스  (0) 2019.06.28
인터랙션 디자인 원칙  (0) 2019.06.21
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

GUI 설계시 고려할 특성

GUI 설계를 통해 개발 소프트웨어의 시각적 콘셉트를 정의하고 표현합니다.
GUI
설계를 통해 전체 UI 구성에 대해 이해 있습니다.

 

특성

설명

통일성(Unity)

·         GUI 설계에서 통일성은 UI 요소들이 공통적으로 갖는 특성 뜻합니다.

·         통일성을 나타내는 방법은 색상, 모양, 스타일, 요소들의 배치 다양하게 존재합니다.

우선순위

(Priority)

·         우선순위는 화면에 보이는 요소들의 나열되는 순서라고 있습니다.

·         우선순위는 사용자가 해당 페이지를 바라보는 시선에 따라 정해지며, 우선순위에 영향을 있는 요소로는 UI 요소들의 위치, 색상, 크기 등이 있습니다.

외의 요소들

·         GUI 설계에서 고려해야 부분은 통일성, 우선순위 외에도 비율과 균형, 인터랙션과 모션 등이 있습니다.

 

 



'Development > UI&UX' 카테고리의 다른 글

awwwards(어워즈)  (0) 2019.08.03
UI 설계 절차  (0) 2019.07.13
GUI 설계시 고려할 특성  (0) 2019.07.04
UI 설계 개발 프로세스  (0) 2019.06.28
인터랙션 디자인 원칙  (0) 2019.06.21
UI(User Interface;사용자인터페이스)  (0) 2019.06.13
Posted by codedragon codedragon

댓글을 달아 주세요


 

 

UI 설계 개발 프로세스

 


 

단계

설명

UI/UX 기획

제공하려는 서비스에서 상호작용을 설계하여 좋은 사용성과 상호작용 수단과 방식을 제공합니다.

UI 설계 문서 작성

프로젝트 사업을 진행할 여러 이해관계자가 원활하게 커뮤니케이션을 하기 위한 문서를 성합니다.

GUI 디자인

설계 문서를 기반으로 그래픽 디자인 작업 합니다.

GUI 가이드라인

그래픽 작업을 통하여 생성된 이미지를 이용하여 화면에 배치하는 작업을 합니다.

개발

개발자는 GUI 가이드 문서를 이용하여 실제 화면을 코딩합니다.

 

 


Posted by codedragon codedragon

댓글을 달아 주세요


 

 

인터랙션 디자인 원칙

원칙

설명

가시성

(Visibility)

·         기능을 만들 사용자의 눈에 띄어야 합니다.

피드백

(Feedback)

·         사용자의 행동 일어난 변화를 적절히 피드백합니다.

제한요소

(Constraints)

·         특정 상황에서 사용자의 행동 범위를 명확하게 규정합니다.

·         미리 오류를 방지하기 위해 이용방법을 제한합니다.

맵핑

(Mapping)

·         사용자가 특별한 설명이나 도움 없이도 대상의 기능을 쉽게 떠올릴 있어야 합니다.

일관성

(Consistency)

·         적용된 디자인은 일정한 패턴, 예측 가능한 일관성을 지닙니다.

·         사용자가 쉽게 회상할 있어야 합니다.

행동 유도성

(Affordance)

·         사용자에게 기대하는 행위가 자연스럽게 인지, 유도되며 일어날 있도록 디자인합니다.

 

 



Posted by codedragon codedragon

댓글을 달아 주세요



 

 

UI(User Interface;사용자인터페이스)

·         사람들이 컴퓨터, 시스템, 기기, 도구 사이에서 일어나는 상호작용(Interaction) 매개하는  

·         사용자와 사물 등의 사이에서 의사소통 위해 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적·가상적 매개체입니다.

·         사용자들과 상호작용을 하도록 설계된 모든 정보 관련 고안품 포합니다. (디스플레이화면, 키보드, 마우스, 문자, 아이콘 )

·         응용 프로그램, 웹사이트 등이 상호작용을 초래하거나 그것에 반응하는 방법입니다.

·         UI 사용자의 입자에서 사용의 보편성과 사용의 편리함을 제공합니다.

 

 

 


 

The Reactable, an example of a tangible user interface

(실감형 사용자 인터페이스)


 

 

http://bit.ly/2XcDd60

https://namu.wiki/w/UI

http://bit.ly/2IjniiX

http://www.terms.co.kr/UI.htm

https://en.wikipedia.org/wiki/User_interface

 




Posted by codedragon codedragon

댓글을 달아 주세요


 

UI 프로토타이핑(Prototyping)

·       해당 프로젝트의 모든 기능 또는 일부 기능을 그리거나, 묘사하고 테스트(검토)하는 활동을 의미

·       사용자 경험과 관련된 이슈들을 정의하는 과정이므로 반복적으로 수행된다.

·       결과물이 아닌 과정의 일부이다.

·       과정에 대한 결과는 UI/UX 디자인을 보완하고 개선할 있도록 실행 가능한 피드백이 이루어져야 한다.

https://codedragon.tistory.com/4103

https://codedragon.tistory.com/8076

https://codedragon.tistory.com/4091

 

 

 

유스케이스 상세의 용도 특징

·       유스케이스 상세는 사용자와 시스템간의 이벤트 흐름을 파악할 있게 한다.

·       유스케이스는 기능과 목적이 아닌 이벤트 흐름이 기술된다.

·       유스케이스는 시스템과 사용자 사이의 상호 작용과 시스템 행위를 이해할 있다.

·       유스케이스와 연결되지 않는 액터는 표한하지 않는다.

 

https://codedragon.tistory.com/5372

https://codedragon.tistory.com/4126

 

 

 

 

HTML 이용한 프로토타이핑 방법

절차

설명

1

프로토타이핑의 대상이 되는 UI 화면의 구조와 구성 요소들을 파악한다.

2

HTML 다양한 태그를 통해 화면의 레이아웃 구성한다.

3

UI 표현 요소들을 적절한 HTML 화면 구성 요소들을 이용해 배치하고 표현한다.

https://codedragon.tistory.com/7465

https://codedragon.tistory.com/9084

 

 

 

 

도서 목록 검색 페이지의 액티비티 다이어그램

https://codedragon.tistory.com/5352

https://codedragon.tistory.com/4125

 

 

 

 

 

제시된 입력 폼의 프로토타입 작성하기

https://codedragon.tistory.com/6293

 

Posted by codedragon codedragon

댓글을 달아 주세요