본문 바로가기

ui

UI 디자인 - IOS or Android 디자인 가이드 기기마다 특정 OS에 맞추어 모든 것이 돌아가기 때문에 기기 제조사 중에서도 특히 OS 제조자들은 해당 OS당 디자인이 어떻게 되어야 하는지 가이드를 제작해서 배포한다. 구글 vs 애플. 탭바의 차이. 탐색버트의 모양등이 다르다고 한다. 뒤로가기의 위치가 다르곤 하다. 위젯의 Picker 앱 아이콘의 설정 차이 더보기
UI 디자인 - 앱 디자인 그리드 설정 모눈종이처럼 모든 걸 격자로 재단해서 디자인의 깔끔함 내지는 통일성을 추구하는 시스템이라고 생각하면 좋다. 가령 그리드를 적용한 것과 그렇지 않은 디자인의 예시이다. 각자 필요에 따라 적용하고 적용하지 않기도 한다. 확실한 건 격자에 맞추면 깔끔하다는 것이다. margin은 바깥 여백, 칼럼은 컨텐츠 등이 포함되는 공간으로 열, 거터는 단 구분이라고 보면 될 것 같다. pt에 맞춘 그리드 시스템이다. 해상도에 맞춰서 커지고 작아짐에 따른 차이가 발생할 수 있기 때문에 폰트 같은 요소등을 기준으로 비율과 그리드 시스템을 설정해놓는 편이 좋다. 제 글은 강좌들을 다시 기록하면서 아 이거였지 떠올리기 위함으로, 제게 필요한 내용들을 제 의식의 흐름대로 정리하였습니다. 압축되고 축약되어 일부의 내용만 담겨있을 .. 더보기
UI 디자인 - 디자인 컴포넌트별 벤치마킹 벤치마킹이란, 선두인 기업이거나 혹은 우리보다 앞서 나가는 상대의 장점이 무엇인지 캐치해서 반영을 하는 것을 말한다. 지피지기면 백전백승이란 말처럼, 상대를 잘 알면 이길 수 있다. 단, 과도한 카피, 표절은 역풍을 맞을 수 있다. 벤치마킹은 딱 특장점까지로 규정지을 수 있다. 서비스 기획에서는 어떠한 경우에 벤치마킹을 할까? 위와 같은 경우에 한다. 폰트, 컬러, 비주얼, 인터랙션..등등 특징을 뜯어서 분석해볼 수 있다. 가령 스크롤은 어떻게 되는지 배치는 어떻게 되는 지 뜯어봄으로써 소비자들에 대한 대략적인 이해를 하는 데 도움이 된다. 그! 러! 나! 핸드폰 공간은 사진만 찍어도 금방 가득 찬다. 경쟁사의 모든 앱을 깔 수는 없는 노릇! 이럴 때는 어떻게 해야할까? 바로 벤치마킹 전문 사이트를 사용.. 더보기
앱디자인 UI 아이콘 1. 아이덴티티 컬러, 셰잎등을 통해 최대한 기업/ 대상의 아이덴티티를 표현한다. 2. 디자인 스타일 라인 디자인이 있고 면 디자인이 있다. 라인의 경우 두게, 스타일, 컬러 등에, 면의 경우 투명도, 라운딩 등의 디테일 차이를 줄 수도 있다. 3. 사이즈, 단위 Android : 최소 48dp ios : 최소 44dp 이용자가 스마트폰을 터치해야하기 때문에 이러한 차이가 생긴다. 18px , 24px, 36px, 48px 정도의 사이즈는 알아두자. dpi dp px 이러한 변환 차이에 대해 이해 및 수시 확인 필요! * 자세한 내용은 인프런에서 확인하세요. 더보기
컨텐츠를 디자인으로 구성하기 * 인프런의 UX/UI 시작하기 : UI 디자인 (Inflearn Original) 강좌를 토대로 학습하였고, 그를 바탕으로 자신만의 깨달음이나 생각등을 정리하였습니다. -------------------------------------------------------------------------------------------------------------- ◈ 컨텐츠를 디자인으로 구성하기 - IA 정리하기, 레벨구조 만들기 IA (Information architecture)란? → 앱의 정보가 담긴 구조물. IA는 일반적으로 엑셀에 적곤 한다. 열에는 화면의 depth(레벨구조), 행에는 각종 절차와 서비스 if 처음부터 구성하기 어렵다면? 포스트잇에 작성해서 구성하기! 구분되는 큰 특징 위주.. 더보기
기획서는 필요한가? 디자이너가 디자인을 기획하는 방법 * 인프런의 UX/UI 시작하기 : UI 디자인 (Inflearn Original) 강좌를 토대로 학습하였고, 그를 바탕으로 자신만의 깨달음이나 생각등을 정리하였습니다. ------------------------------------------------------------------------------------------------------------------- 디자이너가 기획서를 안다는 것은? UI 설계 ------ UX ----- UI 디자인 UI/ Flowchart / Description 레이아웃/이미지 편집/ 이미지 추출 점차 한쪽만 할 줄 아는 디자이너보다 양쪽 모두 할 줄 아는 디자이너들이 더 인정받는 시대가 열리고 있다. 기획서를 작성하기 전에는, 업무(요구사항)에 대한 확실한.. 더보기
UI 디자인 : 애자일과 워터폴 * 인프런의 UX/UI 시작하기 : UI 디자인 (Inflearn Original) 강좌를 토대로 학습하였고, 그를 바탕으로 자신만의 깨달음이나 생각등을 정리하였습니다. ◈ 디자인 프로세스 : 애자일 vs 워터폴? 우선은 워터폴이란 Analysis → ( Goal → Ideas → ) Plan → Design → Developement → Testing → Deployment가 순차적으로 이뤄지는 형태를 말한다. 즉 일반적인 업무 진행이 물이 내리듯이 순차적으로 흘러가는 것을 말한다. 반면, 애자일이란, 이것이 반복적으로 이뤄지는 형태인데, 즉 Goal → Ideas → Plan 까지는 같은데 이후 과정이 Sprint 를 통해서 계속 피드백을 주고 받으며 부족한 점이 있으면 Plan을 계속 수립하고 조정.. 더보기

티스토리툴바