THE WEBS CODING

시안디자인 제작하기 UX/UI 기반의 시안디자인 제작 일관된 UX를 고려하여 편리한 사용자 환경을 디자인하고 제작할 수 있다. UX/UI 디자인 프로토타입(prototype) 제작 프로토타입의 이해 프로토타입은 앱 개발 접근법의 하나로서 HCI(Human Computer Interaction) 분야에서는 개발 초기에 시스템의 원형(archetype), 또는 전형적인 예, 기초 또는 표준을 만드는 것을 의미한다. 프로토타입을 만들어 사용자에게 직접 사용해 보게 하는 사용성 테스트를 통하 여 기능, 콘텐츠, 디자인의 추가나 변경, 삭제 등의 수정 및 요구사항을 수집한다. 이를 반영하여 앱의 개선 작업을 수행하고 사용자가 만족할만한 사용자 환경을 구축할 때까지 반복해 나가면서 시스템을 개선해 나가는 방식이다...

시안디자인 제작하기 심미성 부여 기획된 스타일가이드를 바탕으로 심미적인 디자인을 제작할 수 있다. 사용자 경험의 요소 용자의 경험을 이루는 다양한 요소 중 심미성에 대한 바른 이해를 바탕으로 앱의 목적 및 타깃의 니즈에 부합하는 심미적 디자인을 제작하도록 한다. 심미성(aesthetics) 심미성은 사용자가 화면의 시각요소나 전반적인 앱의 느낌에 대해 ‘아름답다’ 또는 ‘세련되었다’, ‘매력적이다’ 등으로 표현하는 감성적 평가이자 반응이라고 할 수 있 다. 앱 디자인으로부터 전달되는 심미성은 단지, 그 자체가 중요시된다고 하기보다는 다른 사용자 경험 요소와의 상관관계 있어서 중요한 역할을 한다는 점을 이해하여야 한다. 앱 디자인의 심미적 구성 요소 앱 디자인 핵심 콘셉트를 컬러를 통해 구현할 수 있도록 ..

시안디자인 제작하기 디자인 콘셉트와 스타일가이드 조합 기획된 콘텐츠와 앱 디자인 콘셉트와 스타일가이드를 조합할 수 있다. 일관성 적용을 위한 화면 디자인 메인화면 스타일을 결정하기 위해 시안 제작과 발표를 통해 피드백에 따른 수정 작업을 거쳐 시안을 확정하였다면, 앱 콘텐츠 및 디자인 콘셉트와 GUI 스타일가이드를 바탕으로 하여 세부화면 디자인을 수행해간다. 세부화면 디자인 시 명료한 정보 표현을 바탕으로 일관되게 스타일가이드를 적용하여 제작되도록 하여야 한다. 일관된 화면 제작 가이드 사용자가 직관적으로 화면을 이해할 수 있게 명료성을 확보하였다면, 다음으로 중요하게 고려해야 할 사항은 일관성이다. 일관성은 인터페이스 구성 요소들의 통일된 상태를 말한 다. 스타일가이드를 기반으로 앱의 GUI 구성 요소..

스타일가이드 제작하기 스타일가이드를 통한 이해 관계자와의 소통 제작된 스타일 가이드를 바탕으로 다양한 관계자들과의 소통을 원활히 할 수 있다. 주요 화면(key screen)에 대한 스타일가이드 적용 GUI 스타일가이드 문서를 토대로 주요 화면에 대한 시안 디자인을 수행하여 스타일가이드 의 적합성을 확인해보고, 기획자와 개발자, 디자이너 간의 이견 조율을 통해 스타일가이드 를 결정하여야 한다. GUI 스타일가이드 적용을 통한 시안 디자인 목적 GUI 스타일가이드 적합성 확인 및 수정 사항 발견 팀원들 간 원활한 소통하기 본격적인 디자인 개발 전 오류의 최소화 사용성 검토 전체적인 룩 앤 필(look & feel) 검토 모바일 앱 GUI 디자인의 원칙 단순성 및 사용성 심미성, 명확하고 직관적인 정보 전달..

스타일가이드 제작하기 스타일가이드 제작 OS별 인터페이스 규격에 따른 스타일가이드를 제작할 수 있다. 모바일 운영 체제(operating system)별 UI 특성 이해 모바일 OS란 모바일 장치나 정보 기기를 제어하는 운영 체제를 말하는 것으로, 대표적으 로 높은 개방성을 특징으로 하는 구글의 안드로이드(android)와 강력한 보완성을 특징으 로 하는 애플의 iOS가 있다. 타깃의 니즈에 부합하는 앱 디자인을 하기 위해서는 사용자 에게 제공하려는 콘텐츠를 어떤 형태로 구현할 것인지가 중요한 사항이 되므로, OS별 모 바일 화면 레이아웃 구성요소의 차이점을 고려할 수 있어야 한다. 최근 사용자들이 이용 하는 앱들은 OS에 기본 탑재된 네이티브 앱(native app)보다는 대부분이 OS에서 다운로 드 ..

스타일가이드 제작하기 스타일가이드 작성 이해 수립된 디자인 컨셉트와 앱 개발 계획을 바탕으로 스타일가이드를 제작할 수 있다. 스타일가이드(style guide)의 작성 스타일가이드란 모바일 앱 화면의 디자인 요소들을 규정한 표준 문서를 말하는 것으로, 일관되고 통일성 있는 UI를 지속해서 유지, 관리하기 위한 것이다. 스타일가이드에는 디자 인 개발 중 계속해서 사용하게 되는 디자인 요소들에 대한 지침서로써 활용되며, 용어 사 용에서는 표준화가 되어 있지 않은 실정으로 UI 디자인가이드, 개발가이드, 스타일가이드 등으로 혼용되고 있다. 모바일 앱 스타일가이드 작성 목적 스타일가이드의 목적은 사용자에게 일관된 사용자 경험을 전달하기 위해 여러 화면에 대 한 스타일과 형식을 같게 적용할 수 있는 디자인 표준안..

스타일가이드 제작하기 디자인 요소 정의 일관성 있는 앱 화면 디자인을 위해 화면 디자인 요소들을 정의할 수 있다. GUI(Graphic User Interface) 디자인의 구성요소 GUI(Graphic user interface)는 사용자와 시스템 간의 상호작용과 소통을 원활하게 하기 위 한 그래픽 기반의 인터페이스를 말한다. 사용자 작업을 지원하는 기능들의 정보를 그래픽 적으로 제공함으로써, 사용자가 시각적으로 이해하기 쉽고 사용하기 편리하며 친숙하게 접근할 수 있는 환경을 제공하려는 방법이다. 모바일 앱 GUI 디자인 특징 모바일 UI 디자인 시 가장 중요한 점은 작은 디스플레이 화면 크기에서 사용자 경험(UX) 을 고려해야 한다는 것이다. 많은 양의 정보를 제한된 디스플레이 화면을 통해 전달하기 ..

디자인 콘셉트 수립하기 디자인 콘셉트 수립 수립된 디자인 콘셉트와 분석된 업무 플로우를 연결하여 디자인 콘셉트를 수립할 수 있다. GUI 콘셉션 수행 GUI 콘셉션(conception) 디자인 콘셉트를 가시화하는 단계로 주요 화면에 대한 시안을 디자인하거나, 참조 이미지, 벤치마킹 이미지 등을 활용하여 콘셉트를 검토할 수 있는 무드보드를 제작하는 단계이다 무드보드(mood board) 제작 무드보드란 프로젝트와 관련된 여러 이해 관계자들과 디자인 콘셉트에 대한 회의를 하거 나, 혹은 클라이언트와 소통하기 위한 것으로 본격적인 디자인 작업을 하기에 앞서 디자 인의 방향성을 검토하기 위해 사용된다. 무드보드에는 사이트맵, 레이아웃, 색채, 새로운 영감을 주는 이미지, 패턴, 타이포그래피 등이 이용된다. 타이..

디자인 콘셉트 수립하기 플로우 단계별 디자인과 스타일 정의 적용할 디자인과 스타일을 세분화하여 업무 플로우 단계별로 설정, 정의할 수 있다. GUI 컨셉션(conception) UI/UX 디자인 콘셉트에 대한 방향성 도출 디자인 키워드에 의한 화면 디자인 방향 수립 이미지 수집 GUI 이미지 무드보드 제작 화면 디자인 콘셉트 시각화 색채, 레이아웃, 타이포그래피, 이미지 등 디자인 요소들을 활용하여 무드보드를 작성 함으로써 디자인 콘셉트를 표현하고 개발 방향성을 시각화한다. 디자인 콘셉트의 시각화 요소 시각디자인 요소 앱의 시각 디자인의 요소에는 크게 타이포그래피(typography), 색채(color), 레이아웃 (layout) 등이 있다. 앱 디자인에서 타이포그래피가 이미지로 사용될 경우에는 시인성이..