Writing about UX/UX&UI
-
뉴모피즘, 너는 누구냐?Writing about UX/UX&UI 2020. 7. 28. 12:59
내가 알고 있는 뉴모피즘의 깊이 (내가 이 글을 준비한 이유) "새로운(new) + 스큐어모피즘(skeumorphism)을 합친 신조어" "그림자를 활용해 입체적인? 3D 같은 느낌을 주는 디자인" 한 마디로, 정의만 알뿐 그 외에 디자인에 필요한 정보는 모르고 있는 상황 나를 위한 스터디를 진행해보자! 뉴모피즘을 디자인하는 기본 규칙 2가지 규칙 1번 : 2개의 그림자를 이용하라! 밝은 부분은 기본 색상보다 밝은 색을, 어두운 그림자는 기본 색상보다 어두운 색상을 사용한다. 규칙 2번 : 기본 색상은 '밝은 색 + 어두운 색' illustrator에서 해당 색상 2개를 선택해 메인메뉴 "개체" > "혼합" >"만들기(단계 설정값은 2)"라고 하면 기본 색상을 도출할 수 있다. 뉴모피즘을 디자인 시, 이..
-
웹 UI 레이아웃 그리드의 종류Writing about UX/UX&UI 2020. 5. 9. 23:39
01. 단일 칼럼 레이아웃 (Single column layout) 단일 레이아웃은 가장 기본적인 레이아웃이며, 랜딩 페이지(Landing pages)에 사용된다. 제품이나 브랜드를 향상시키기 위한 큰 이미지들을 사용할 수 있다. 단일 레이아웃 안에 있는 것들은 개별 모듈이며, 모바일로 확장시키기 편리하다. 단일 레이아웃은 감정을 자극하는 데 유용하기 때문에 홈페이지나 소개 혹은 신제품들을 위한 일반적인 레이아웃으로 사용된다. 각각의 모듈에서는 다른 그리드 칼럼으로 분할될 수 있지만, 전체적인 레이아웃은 보통 12개의 칼럼을 사용한다. [1] 그리드 사용 위의 Wework 예시를 살펴보면 칼럼에 맞게 정렬되어 있는 것을 보아 확실히 단일 레이아웃을 사용하고 있다는 사실을 알 수 있다. 나는 이러한 예시들..
-
디자인을 도와주는 6가지 피그마 플러그인Writing about UX/UX&UI 2020. 5. 9. 22:20
01. Arrow Auto (Create user flows) Arrow Auto는 Figma에 플로우차트 기능을 추가하여 사용자 플로우 맵을 만드는 데 유용하다. 캔버스에서 두 개체를 선택하면 화살표 자동을 사용하여 두 개체 사이에 커넥터를 그릴 수 있다. 또한, 커넥터를 그대로 유지하면서 커넥터 방향을 전환하고 연결된 물체를 이동할 수 있는 기능 등 더 많은 기능을 가지고 있다. 02. Clean Document (Auto-clean documents) Clean Documents는 숨겨진 레이어를 삭제하고 지능적으로 정렬하며, 원하는 대로 이름을 바꾸고 단일 레이어 그룹을 해제하며 치수를 가장 가까운 픽셀까지 반올림할 수 있게 만들어준다. 03. Viewports (Change the viewpor..
-
에어비앤비(Airbnb)가 랜딩 페이지(Landing page) 디자인을 통해 사용자의 행동을 유도하는 방법Writing about UX/UX&UI 2020. 5. 3. 22:37
사용자들의 에어비앤비의 경쟁자들을 잘 모르는 이유가 있다. 렌트나 예약 서비스는 10년 동안 세계 시장에서 성장해왔지만 여전히 에어비앤비에 맞설 만한 경쟁자는 나타나지 않고 있다. 에어비앤비의 이런 성장은 디자인팀이 다른 유사 서비스보다 뛰어난 사용자 경험을 만들기 위해 지속적으로 노력해왔기 때문이다. 나는 에어비앤비가 그들의 디자인적 도전에 대해 어떻게 접근하고, 어떻게 몇 년 동안 변화를 가져올 수 있는지에 대해 항상 놀라웠다. 때문에 이 글에서 나는 어떤 점이 에어비앤비의 랜딩 페이지를 다르게 만들고, 왜 그것이 성공하는 지에 대해 이야기하려고 한다. 01. 시각적 명확성과 미니멀리즘 "나는 디자인에서 단순성과 명확성, 두 가지를 위해 노력한다. 훌륭한 디자인은 이러한 것들로 탄생한다." - Lin..