본문 바로가기

GUI

 (11)
[13강] UI 시나리오 문서의 이해와GUI 디자인 & [14강] GUI 리서치 프로세스 1. GUI 디자인 작업 - 픽셀 단위로 UI 디자인을 시각적으로 세밀하게 구현 2. 멀티 디바이스, 멀티 운영체제 - 멀티 디바이스와 멀티 운영체제를 사용하는 트렌드에 맞춰 디자인 해야함 3. 운영체제별 비교 - 운영체제별로 얼마나 다르고 같게 가져갈지 고민하고 적용해야 함 * 데이터 중심 앱 : 모바일 앱에서 가장 많이 볼 수 있는 형태는 데이터 중심 앱이다. 페이스북, 트위터, 이메일, 지메일 등이 대표적인 앱이다. * 이미지 중심 앱 : 이미지와 동영상 중심 앱, 유투브, 인스타그램 등이 대표 * 게임 앱 : 다양한 앱이 존재, 그중에서 디자인시에는 높은 퀄리티와 일관성 통일성이 중요함
[11강] 타이포그래피 & [12강] 레이아웃 1. 아이폰과 타이포그래피 아이폰에서는 앱 디자인시 1개의 폰트 훼밀리를 중심으로 타이포그래피를 디자인하며, 텍스트는 UI의 역할도 겸하고 있는 경우가 있으므로 주의하여 사용한다. 또한 컬러를 적절히 사용하여 UI에 적용되는 텍스트와 일반 텍스트를 구분한다. San Francisco, Apple SD Gothic Neo 아이폰의 디폴트 영문 시스템 폰트는 샌프란시스코이며, 한글은 애플 산돌 고딕 네오 폰트를 사용한다 2. 안드로이드와 타이포그래피 머티리얼 디자인과 타이포그래피 머티리얼 디자인에 타이포그래피 디자인을 위한 디자인 팁에 대해 간략히 알아보았다. 머티리얼 디자인에서부터는 한글 폰트도 확립되었으며, 총 3개의 범주로 폰트의 사용군을 나누고 있다. Roboto, Noto Sans CJK KR 머티..
[9강] 컬러 (1) & [10강] 컬러 (2) * 컬러는 감정의 의미, 브랜드 아이덴팉티의미와 역할, UI 컬러는 yes/no 등 고유의 중요한 역할을 하고 있음 이러한 역할을 알곡 각종 도구를 사용하여 컬러를 배색하여 사용해야 함 1. 아이폰의 컬러 정의 - 메인 컬러와 uI 단순화 서비스의 메인컬러는 1개를 선택하여 전체적으로 일관성을 줌 - 흰색 배경 사용 주로 흰색배경을 사용해 콘텐츠에 주목할 수 있게 배색 2. 안드로이드 컬러 - 구글의 디자인 테마인 머티리얼 디자인 테마를 사용, 메인 컬러와 엑센트 컬러의 2가지로 구분지어 볼 수 있으며, 컬러 선정 후 실제 적용 사례 등을 참조하며 적절히 사용하도록 한다. 3. 마켓 리서치 모바일 디자인을 위해 경쟁 및 관계 서비스들의 컬러를 분석해볼 필요가 있다. 이를 통해 구체적인 사용 사례, 범위 ..
[8강] 모바일 UI/GUI 디자인 컴포넌트 (4) 1. 안드로이드 2. 안드로이드 다이얼로그 : 특정 데스크를 수행하게 함. 텍스트와 UI 컨트롤러 등을 포함
[7강] 모바일 UI/GUI 디자인 컴포넌트 (3) 1. 아이폰 템플릿 아이콘 * 아이폰의 화면에서 보는 일반 아이콘 디자인 스타일 : 심플한 선으로 딪아니하며, 일관성, 통일성이 있어야 함, 표준 아이콘에 맞춰 디자인 아이콘의 형태: 앱의 고유 컬러로 색 적용하되 아이콘 안을 채워 넣거나 반전 형태를 적용하도록 함 앱 아이콘 디자인 가이드 - 사람들이 쉽게 그 의미를 알 수 있게 디자인할 것 - iOS 7 스타일로 앱 아이콘을 심플하게 디자인할 것 - 앱의 메인 콘셉트/기능 등을 직관적으로 알 수 있도록 디자인할 것 - 투명 요소를 포함하지 말 것 - 정사각형으로 이미지를 제출하면 외곽은 자동으로 잘려짐 1. 안드로이드 아이콘 * 안드로이드에서는 시스템 아이콘이라 불림 디자인 스타일 : 모든 아이콘들은 머티리얼 디자인 테마를 적용하고 있으므로, 모든 디..
[6강] 모바일 UI/GUI 디자인 컴포넌트 (2) 1. 아이폰 컴포넌트 종류 * 시스템 버튼, 스위치, 스태퍼, 슬라이더, 피커, 페이지 콘트롤 , 버튼 등 2. 안드로이드 컴포넌트 종류 * 버튼, 플로팅 액션 버튼, 칩, 리스트 콘트롤, 피커, 셀렉션 콘트롤
[5강] 모바일 UI/GUI 디자인 컴포넌트 (1) 참고하면 좋은 사이트 : https://velog.io/@oneook/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EB%B0%98%EB%93%9C%EC%8B%9C-%EC%95%8C%EC%95%84%EB%91%90%EC%96%B4%EC%95%BC-%ED%95%A0-32%EA%B0%80%EC%A7%80%EC%9D%98-UI-%EC%9A%94%EC%86%8C-%EB%B2%88%EC%97%AD 프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역) 원제 : 32 User Interface Elements For UI Designers프론트엔드 개발자는 유저 인터페이스(UI)..
[4강] 모바일과 GUI 디자인 (2) 1. 운영체제와 GUI 디자인 모바일 서비스 개발순서 : 구체적인 UI기획안 작업 -> 안드로이드와 아이폰 중 일부만 개발할지, 둘다 개발할 것인지 결정 아이폰과 안드로이드폰 개발순서 결정 요인 : 한국에서는 안드로이드폰이 점유율이 높은 관계로, 일반적으로 안드로이드 먼저 개발함. 디자인 및 디자인 스타일은 어떻게 결정하는지 : 어느 쪽의 운영체제를 우선 개발하느냐로 보통 결정되며, 해당 운영체제 디자인 스타일을 따라가게 됨 안드로이드에 맞춰 디자인을 다하고 나서, 아이폰을 지원한다면 겪을 어려움 : 안드로이드일 경우, 머티리얼 디자인 스타일을 따라가게 되는데 실제 아이폰의 디자인 스타일과 차이가 많이 나며, 머티리얼 디자인을 아이폰에 그대로 적용할 경우에는 많은 부분에서 문제가 될 수 있음. GUI 디..

티스토리툴바