[UXUI] 아이콘 - UXUI_4
·
📚 스터디/디자인
문자, 메일을 수신할 때 위와 같은 아이콘을 클릭하지 않는가? 메일이나 문자가 보낼 때가 있다면 위의 아이콘을 클릭해 문자, 메일 서비스를 이용한다. 그렇다. 우리는 일상 속에서 아이콘으로 쉽게 이해하고 행동하기에 익숙해져있다. 이번 시간에는 일상 속에서 나도 모르게 새겨든 "아이콘"에 대해서 알아보도록 하겠다 아이콘이란? 지하철 역에서 화장실이 급할 때, 화장실을 우린 어떻게 찾았나? 화장실 표지판을 보고, "화장실이다!!!" 라고 외치며 달려간다. 그렇다. 아이콘은 이처럼 빠르게 정보를 이해하고 행동하기 위해 만들어진 기호이다. 아이콘은 일상에 너무나 당연하게 녹여들여져 있다. 그러나, 모든 아이콘이라고 해서 좋은 아이콘이 될 순 없다. 아이콘을 보자마자 무얼해야될 지를 이해할 수 있다면, 좋은 아이..
[UXUI] 컬러의 역할 - UXUI_3
·
📚 스터디/디자인
컬러 컬러는 디자인에서 중요하다. 대다수 비전공자들은 컬러의 중요성을 인식하지 못한다. "컬러? 그냥 느낌, 감각적으로 사용하면 되지" 라고 생각하기 나름이다. 그러나, 컬러의 역할은 UI 디자인에서 큰 역할을 담당하고 있다. 위의 사진과 같이 컬러는 서비스의 브랜드를 각인시켜줄 힘이 있다. 우리 같이, UI 디자인에서 컬러가 어떤 역할을 하며 어떻게 사용되어야 하는지 알아보자. UI 디자인에서 컬러가 중요한 이유 UI에서는 컬러를 어떻게 사용하냐에 따라 유저들이 받아들이는 바가 달라진다. 1. 우선 순위에 따른 컬러 표현이 가능하다. UI 디자인에서 돋보이는 컬러로 핵심 기능과 관련된 행위나 컨텐츠엔 주색과 같은 메인색을 사용한다. 그 외로 부가적인 기능들에 대해선 보조색과 같은 서브색을 사용한다. 이..
[UXUI] 레이아웃과 그리드 시스템 - UXUI_2
·
📚 스터디/디자인
레이아웃 화면 크기, 텍스트, 이미지, 여백 등의 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것을 의미한다. 그리드 시스템 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙을 말한다. 그리드를 활용하면 시각적 통일성을 줄 수 있다. 반응형 웹 반응형 웹은 PC 부터, 노트북, 태블릿, 휴대폰에서 접근할 수 있는 웹이다. 반응형 웹은 PC와 노트북과 같은 화면비율이 넓기에, 12단 그리드로 다소 복잡하게 디자인이 진행된다. 이렇듯, 12단 그리드는 다양한 기기와 해상도 맞춤을 위해서 활용된다. 모바일 앱 모바일 앱은 안드로이드, IOS 에서 작동되는 Application이다. 대표적으로 유튜브, 인스타그램, 페이스북이 있다. 모바일 앱은 웹과 비교해보면, 화면 비율이 좁기에, 4..
[UXUI] UXUI가 뭔데? - UXUI_1
·
📚 스터디/디자인
UXUI의 필요성 UXUI 를 왜 배워야할까? 아래의 사진을 살펴보자 UXUI는 사용자 경험에 기반해 작업한 디자인이다. UXUI를 전혀 고려하지 않고 상품을 디자인하면, 위의 사진과 같이 사용자인 애기는 불필요한 모빌의 엉덩이만을 보게된다. 그렇다. 디자이너는 UXUI 기반으로 디자인 작업을 수행해 사용자들이 보다 더 쉽고 올바르게 정보를 얻고 서비스들을 누릴 수 있도록 제작할 필요가 있다. UXUI는 뗄 수 없는 관계 UXUI의 관계는 아래의 사진과 같다. UI가 있다면, UX는 무조건 존재해야 한다. 만약, UX 없이 UI를 디자인한 서비스 혹은 상품은 유저들의 관심을 받을 수 없게 될 것이다. 따라서, UXUI는 뗄 수 없는 관계임을 인지하고 UI에서의 UX를 무조건적으로 고려하자. UXUI 디자..