본문 바로가기

Web

(4)
UI 디자인에서 영문 타이포그래피 잘 쓰는 법 이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński가 작성한 "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다). 들어가며타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다. 예시로 보여드릴게요타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능..
웹 그리드시스템을 위한 가이드 흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다. 그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다. 1. 고려 사항그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의..
웹사이트 디자인에 대한 이해 높이기 웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요. 1. 짤방으로 이해하는 웹 디자인의 역사 웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다. 짤방으로 이해하는 웹 디자인의 역사 (→글 읽기) 2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭..
무심코 사용하는 UX, 어떻게 바꿀까 오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. North는 “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 1. 슬라이드 배너(Carousel) 슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화..