전체 글(181)
-
앱 UI 디자인 기본 : 아이콘 디자인시 알아야 할 개념 및 가이드라인
아이콘 제작시 고려해야 할 핵심 1. 직관적인 아이콘 2. 통일된 스타일 아이콘 3. 단순한 아이콘 4. 아이콘 규격 및 시각보정 지나치게 단순화 하거나 디자이너 본인만 아는 아이콘은 절대 사용하지 않는다. 통일된 스타일로 아이콘을 제작한다. 아이콘 스타일 종류 두께에 따라 다른 느낌 아이콘 예시 🧐 오른쪽 아이콘이 너무 단순해서 왼쪽 아이콘이 더 잘된 아이콘일까? ➡️ 24x24 실제 사이즈로 아이콘을 살펴보면 왼쪽 아이콘의 경우 형태를 파악할 수 없다. 단순하게 표현한 오른쪽 아이콘이 작은 크기에서도 한 눈에 뜻을 파악할 수 있다. 아이콘 사이즈 부피에 따른 느낌 같은 100x100 사이즈이지만 왼쪽이 더 커보이는 착시현상같이 느껴진다. 실제로 원의 넓이는 πxr^2이다. 아이콘 사이즈 - Keyline
2023.11.17 -
문제를 해결하는 프로덕트 디자인
프로덕트 디자이너 = 디지털 프로덕트를 설계해 문제를 해결하는 사람 = 사용자와 끊임없이 소통하는 사람 ➡️ 모바일 앱을 사용하는데, 어딘지 모르게 어색함을 느낀다면 그때가 바로 프로덕트 디자인이 필요한 순간 프로덕트 디자인 단계 1. 탐색(Discover) - 현상 파악 2. 정의(Define) - 문제가 무엇인지 정의 3. 설계(Design) - 문제를 해결할 수 있는 제품 설계 4. 전달(Deliver) - 사용자에게 제품을 전달하는 단계를 거쳐 디자인이 완성 UX 디자이너 : 제품 설계의 1단계인 탐색을 담당 사용자를 이해하고, 목표 달성을 위해 어떤 과정을 거쳐야 하는지 연구하는 직군 UI 디자이너 : 시각화에 집중하는 직군, 3단계인 설계를 담당 UX 단계에서 도출한 워크플로우나 프로토타입을 ..
2023.11.16 -
[보기 좋은 프로덕트의 비밀] 레이어
레이어는 그래픽 툴에서 가장 중요한 기능입니다. 어떤 요소가 있는지 어떻게 사용하는지 레이어의 기초부터 배워봅시다. 디지털 프로덕트를 디자인할 때 이런 레이어 요소를 어떻게 하면 보기 좋고, 더 쓰기 좋은 프로덕트를 만들 수 있는지 먼저 어떤 속성을 갖고 있는지를 설명한다. 레이어 속성 8가지 형태 : 모양에 대한 속성 형태는 이미지, 글자, 네모가 거의 대부분 테두리 그림자 : 형태의 외곽선에서부터 바깥으로 그라데이션되어 표현된다. UI 디자인을 할 때 중요도가 높을수록 높이가 높다. ex) 네비게이션바 -> 언제 어디서나 작동하고, 클릭할 수 있어야 한다. 표면 Solid : 단색 Gradient : 기울기 Image : jpg, png 형태 Translucent : 이미지 뿌옇게 표현 투명도 특정 ..
2023.11.14 -
[하루 5분 UX] 시각 디자인의 원칙
시각적 무게 시각적 무게 개념은 직관적이다. 레이아웃에서 어떤 것들을 다른 것들보다 더 무겁게 보이게 해야 한다. 사용자가 의미 있는 정보를 알아차릴 수 있게 하는 것이 디자이너의 일이다. 사용자가 목표를 이루는 데 방해받지 않는 것도 중요하다. 디자인의 특정 부분에 시각적 무게를 줌으로써 사용자의 시선을 좀 더 쉽게 유도할 수 있고, 그들의 시선이 다음에 어디로 가야 할지 결정할 수 있다. Constrast 밝은 것과 어두운 것의 차이 밝은 것과 어두운 것의 차이가 확연할수록 콘트라스트가 더 높다. Depth와 사이즈 뎁스와 사이즈는 시각적 무게에 변화를 준다. 일반적으로 중요한 것을 덜 중요한 것에 비해 크게 만든다. 이는 한 페이지 안에서 시각적 계층을 만들어내며, 사용자가 훑어보기 쉽게 한다. 색..
2023.11.14 -
[보기 좋은 프로덕트의 비밀] 아이콘
UI에서 아이콘의 중요성과 어떻게 만들어야 좋은지 배워봅시다. 개성을 부여하기 쉽고 다양한 실험이 가능한 시각 언어인 아이콘은 어떤 법칙으로 제작해야 하는지 배워봅시다. 아이콘 : 누구나 아이콘을 보면 무슨 뜻인지 알 수 있는 것이 장점이다. 아이콘 = 이미지의 일종으로 볼 수 있음 이미지란 기호의 경계에 있는 요소인데 사진처럼 복잡한 어떤 이미지 전체를 전달하는 것이 아닌 구체적으로 무슨 내용을 압축해서 설명할 때 자주 쓴다. ex) 올림픽 - 종목 설명 : 픽토그램 종목을 강렬하고, 간결하게 표현한다. 픽토그램도 아이콘의 일종이라고 볼 수 있다. 디지털 프로덕트 안에서는 아이콘으로 불리고 있음 스마트폰 안에서 앱 아이콘을 볼 수 있다. (브랜딩 아이콘이라 불림) 프로덕트 안에서 동작하는 것들도 아이콘..
2023.11.13 -
[보기 좋은 프로덕트의 비밀] 타이포그래피
디자인에서 문자는 어떻게 사용해야 하는지 타이포그래피 기초에 대해 배워봅니다. 웹, 지면, 모니터, 모든 화면에서 많은 분량을 차지하는 문자 디자인에서 문자는 왜 중요하며 어떻게 사용하는 것이 좋을지 알아봅시다. 추상적인 어떤 개념을 설명할 때는 문자를 이용해서 전달하는 것이 빠르다. 집단 안에서 문자는 약속이다. 문자 : 사람들 간의 약속 타이포그래피(Typography) : 문자를 배치하는 모든 활동을 총칭하는 언어 ✔️ Typo(글자) + graphy(기술법) 타이포그래피에서 가장 중요한 것 1. 판독성(Legibility) : 글자와 글자를 구분할 수 있는 정도 2. 가독성(Readability) : 쉽게 읽을 수 있는 정도 판독성이 안좋은 예시 LLIIIIiioo0066 글꼴 수는 적을수록 보는..
2023.11.10