본문 바로가기

디자인4

좋은 UI 디자인 알아보기 (2편) : 위계 적용 좋은 UI 디자인을 위해서는 일관성을 유지하는 것이 사용자 편의에 좋으며, 이를 어떻게 디자인에 반영할 수 있는지 살펴봤습니다. 이번에는 위계에 대해 알아봅시다. 위계란 중요한 내용과 그렇지 않은 내용을 잘 드러내서 인터페이스를 더 이해하기 쉽게 만드는 것입니다. 색이나 거리, 크기 등을 조정해서 좋은 위계를 만든다면 사람들이 인터페이스를 더 잘 이해할 수 있게 됩니다. 그렇다면 위계를 디자인에 어떻게 반영하는지 살펴보겠습니다. 1. 정보를 미리 나누는 작업 먼저 위계를 적용하기 위해서는 정보를 적절한 크기로 나눠주는 작업이 필요합니다. 보통 UI를 살펴보면, 다른 페이지로 이동할 수 있는 버튼이 있는 내비게이션 영역과 페이지를 간단하게 소개할 수 있는 배너 영역, 각 품목들을 보여주는 콘텐츠 영역.. 2024. 8. 10.

좋은 UI 디자인 알아보기 (1편) : 일관성 유지 좋은 UI 디자인의 정의를 생각해보신 적 있나요? 색상이나 폰트를 잘 사용하거나, 배치를 잘했다는 명확한 기준이 있을지 생각해봅시다. 우선 좋은 UI 디자인은 버튼이나 텍스트, 컬러 등이 어떻게 사용될 지 규칙을 만들어서 사용자가 UI를 쉽게 이해할 수 있게 만듭니다. 요소마다 일관성 있는 스타일을 부여하여 사용자는 큰 노력 없이도 인터페이스를 빠르게 이해할 수 있게 됩니다. 좋은 디자인이 반영된 UI는 사용자가 어디에 집중해야 할 지 시각적으로 보여줍니다. 폰트, 색상, 크기, 여백 등 여러 요소를 통해 중요한 부분은 부각되고, 중요하지 않은 것들은 잘 보이지 않게 만들 수 있습니다. 중요한 정보가 정확하게 강조된 인터페이스는 사용자가 빠르게 사이트를 탐색하여 자신의 목적을 효과적으로 달성하는 것을 돕.. 2024. 8. 10.

피그마의 주요 기능 알아보기 (1편) : 그룹, 프레임, 안내선, 내보내기 이전 글에서는 UI, UX의 정의와 이를 효과적으로 디자인 할 수 있는 강력한 도구인 피그마를 살펴봤습니다. 그렇다면, 이번 글에서는 피그마의 주요 기능을 한번 살펴보도록 하겠습니다. 이번 1탄에서는 그룹과 프레임의 차이, 안내선을 만들 수 있는 줄자 기능을 살펴보고 이후에는 좋은 디자인이란 무엇인지 여러분에게 질문을 드리고 함께 생각해보려고 합니다. 1. 그룹, 프레임 기능먼저 피그마는 그룹과 프레임을 통해 요소를 묶어서 관리할 수 있습니다. 그럼 그룹과 프레임의 차이는 무엇일까요? 먼저, 여러 레이어를 그룹화하면 자동으로 요소의 크기에 맞춰 그룹 크기가 결정됩니다. 또한 내부 요소의 크기가 변경되거나 개체가 삭제되는 경우, 그 크기에 따라 그룹의 크기가 맞춰서 변합니다. 다시 말해, 그룹은 여러.. 2024. 8. 6.

UI 디자인 기초 : UI의 개념과 피그마를 알아봅시다 안녕하세요. 오늘은 UI/UX의 기본 개념과 디자인 툴로 많이 쓰이는 피그마를 소개하는 글을 작성해보려고 합니다. IT 기업에 다니거나, 서비스를 기획하는 분들이 강조하는 개념으로 UX/UI가 있습니다. UX는 User Experience의 줄임말로 사용자가 어떤 시스템이나 제품, 서비스를 직접적으로, 혹은 간접적으로 느끼고 생각하게 되는 총체적 경험을 의미합니다. 그렇다면 UI는 무엇의 줄임말일까요? 하단에서 함께 살펴보겠습니다. 1. UI (User Interface)란 무엇인가요? UI는 User Interface의 줄임입니다. 사용자가 무언가를 하기 위한 도구라고 생각하시면 됩니다. 다시 말해서, 사용자가 컴퓨터를 사용하기 위한 도구입니다. 폴더를 만드는 방법은 명령어를 통해 폴더를 만들거나,.. 2024. 8. 6.

이전 1 다음

티스토리툴바