본문 바로가기

UI

(22)
2016 꼭 알아야 할 웹 디자인 트렌드 최근, 구글은 Material Design으로 모바일 친화적인 업데이트를 보여주었습니다. 그에 따라 더 많은 사이트들이 ‘mobile ready’로 움직이며, 반응형 웹 디자인의 인기가 계속되고 있는데요. 작년에 이어 올해에는 어떤 것이 가장 인기가 있을지 AWWWARDS가 소개하는 웹 디자인 트렌드를 전해드립니다. 1. UI 패턴의 증식 반응형 디자인의 부작용 중 하나는 많은 사이트들이 비슷하게 보인다는 것입니다. 하지만 반응형 디자인만의 문제가 아닙니다. 워드프레스 사이트의 대두와 테마 시장의 붐의 영향도 있습니다. Cypress North 그러나 비슷하게 보이는 것이 꼭 나쁜 것은 아닙니다. 우리가 웹을 소비하는 방식이 많은 공통 UI 디자인 패턴을 만드는 방식으로 바뀌었기 때문입니다. 즉, 체크아..
웹, 모바일 디자인을 한다면 읽어야 할 정보 8가지 UI라는 단어는 이제 전문가가 아니더라도 쉽게 들을 수 있습니다. 웹, 모바일 디자이너거나 비디자이너라도 관련 프로젝트를 준비하고 있다면 알아두어야 할 8가지 웹, 모바일 UI정보를 모았습니다. 1. UI의 9가지 상태UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화합니다. 상태나 상황에 따라 여러 가지 형태로 변화합니다. 변화에 따른 다른 데이터를 표현하고, 그 표현 양식이 달라지기도 합니다. UI디지안을 할 때 UI의 9가지 상태를 가이드라인으로 삼으면 사용자를 혼란에 빠뜨리는 일을 예방할 수 있습니다. UI의 9가지 상태 ➔ 더 읽기 2. 모바일 사용자 UX의 시작, 터치 제스처터치스크린 기반 인터렉션의 중요성과 터치제스처의 9가지 용어를 정리했습니다. 터치제스처의 기본 정의와 용어를 이해..
UX를 전문적으로 배울 수 있는 강좌와 스터디를 소개합니다. 사용자 경험(User Experience, UX)은 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등 총체적 경험을 말합니다. UX는 현재에 소프트웨어뿐만 아니라 산업을 통해 제공되는 서비스, 상품, 프로세스, 사회와 문화에 이르기까지 널리 응용되어 사용되고 있습니다. 그렇다면 UX를 어디서 전문적으로 배울 수 있을까요? UX 관련 온오프라인 강좌 및 스터디 그리고 블로그를 소개합니다. T아카데미 과정 - 모바일UI/UX기획 / 무료 오프라인 강의모바일 UI/UX 의 개념 및 사용자 특성에 대한 이해와 디자인 원칙, 그리고 UX/UI 기획/설계에 필요한 디자인 방법 및 프로세스에 대한 학습과 실습을 통해 모바일 단말 및 서비스 UI를 디자인할 수..
새로운 UI로써의 No-UI 올해 8월부터 페이스북은 인공지능을 활용한 가상 비서 서비스 'M'을 출시하고, 일부 페이스북 사용자를 대상으로 테스트에 들어갔습니다. M은 메신저 애플리케이션을 활용하는 텍스트 기반의 서비스이며, 간단하게 메시지를 보냄으로써 식당을 예약하거나 선물을 추천하는 등의 요청을 수행할 수 있습니다. 최근 대두하고 있는 이러한 '대화 중심적'인 애플리케이션들의 공통점은 '메시지'를 중심에 두었다는 것입니다. 특별한 버튼이나 메뉴 없이 대화만으로 사용자가 원하는 것들을 쉽게 제공할 수 있습니다. 메시지의 대두 SMS는 전 세계 사람들이 가장 많이 사용하는 메시지전달 애플리케이션입니다. 3년 전, 그 사용자는 약 40억 명으로 추산되었습니다. 이것은 페이스북 사용자의 4배가 훨씬 넘는 숫자입니다. 메시지, 특히 S..
모바일 사용자 UX의 시작, 터치 제스처 IT 기술이 발전함에 따라 우리가 사용하는 인터페이스(Interface)는 여러 차례 발전을 거듭해왔습니다. PC의 등장으로 키보드나 마우스와 같은 입력장치를 활용하여 사용할 수 있었다면, 현재는 터치 스크린을 기반으로 하는 스마트폰의 대중화로 인해 터치 제스처 인터페이스가 자리 잡게 되었습니다. 우리는 스마트폰 화면에서 손가락 하나로 많은 것을 실행하고, 또 경험하고 있습니다. 여러분은 사진을 확대해서 볼 때 자연스럽게 취하는 그 행동의 이름을 아시나요? 오늘은 터치스크린을 기반으로 하는 인터렉션의 중요성과 터치 제스처 인터페이스의 종류를 몇 가지 소개합니다. 본문에 들어가기에 앞서 간략하게 터치와 제스처에 대하여 정의할 필요가 있습니다. 터치(Touch)손가락이 화면 위에 올려진 상태를 말합니다. 예..
UI의 9가지 상태 들어가며 UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화하는 디자인입니다. 하나의 컴포넌트(화면에 배치되는 U조각)는 상태나 상황에 따라 여러 가지 형태로 변화합니다. 그리고 그 변화에 따라 다른 데이터를 표현해야 하고, 그 내용에 따라 양식(스타일)도 달라져야 합니다. 그래서 UI디자인은 내가 미쳐 생각하지 못한 상황이 있어 더욱 까다롭고 조심스러운 작업입니다. Vince Speelman이 정리한 UI컴포넌트의 9가지 상태에 대해서 알아보겠습니다. 최근 UI 디자인팀은 화면을 구성하기 전에 컴포넌트(UI조각)을 먼저 디자인합니다. 인터페이스는 그저 잘 구성된 컴포넌트의 모임이라는 것이죠. 이는 사용자를 “불행의 길”로 빠져들게 합니다. 기술 시스템이 아닌 페이지를 만드는 것이기에, 잘못된 디..
웹디자인의 완성도를 올려 줄 8가지 체크리스트 조그마한 디테일이 웹사이트의 완성도를 좌우합니다. 이 글은 웹디자인의 디테일을 떨어트리는 사소한 실수를 다루려고 합니다. 아직 디자인 경험이 충분하지 않다면, 웹사이트의 완성도를 높여줄 8가지 체크리스트를 배워보세요*아래 예시들은 원글 작성자에게 피드백을 요청한 웹 사이트입니다. 1. 템플릿의 부적절한 활용템플릿은 여러분의 작업시간을 단축해주지만, 디자인의 통일성이 떨어질 수도 있습니다.템플릿을 사용하면서 생기는 공통적인 문제는 여러분이 준비한 로고와 통일성이 떨어진다는 점입니다. 로고의 컬러가 웹사이트 어디에도 찾을 수 없거나, 사이즈가 안 맞아 엉성해 보이는 경우가 많습니다. 템플릿을 사용했을 때는 반드시 디자이너의 재가공이 필요합니다. 템플릿이 깔끔하더라도 템플릿의 기본 스타일을 쓰지 않길 권합니다..
[웹 활용팁] 버튼색상에도 정답이 있다. 웹 페이지에서 "회원에게만 공개되는 내용입니다. 로그인 해주세요." 라는 창이 뜬 경험은 한번 쯤 있을 텐데요. 그럴 때 뜨는 창을 "모달윈도우(Modal Window)"라 부릅니다. 즉, 모달 창은 일반적으로 사용자의 명령을 인식하기 위해서나, 긴급 상황을 알리기 위해 많이 사용됩니다. 이 기능 사용자가 진행하던 작업의 흐름을 흐트러트리기에 버튼 기능은 더욱 중요합니다. 버튼은 3가지 성격으로 나뉩니다. 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 (전송하기, 더보기) 2. Neutral: 화면의 변화가 없는 버튼, 화면으로 되돌아가는 버튼 (예를 들면 "취소하기"버튼을 말합니다.)3. Negative: 삭제, 리셋, 추가정보를 차단하는 버튼그럼 3가지의 버튼마다 컬러는 어떻게 ..