본문 바로가기

Category

(320)

버튼에 시각적 무게를 두면 행위를 유도할 수 있다 출처 : https://brunch.co.kr/@ebprux/1001 버튼에 시각적 무게를 두면 행위를 유도할 수 있다 UX 디자인 원칙 | 버튼에 시각적인 무게를 두면사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 brunch.co.kr 버튼에 시각적인 무게를 두면 사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 버튼에 시각적 무게감을 두는 것은 사용자의 시선을 끌어모으는 데 유용합니다. 그래서 주요 액션 버튼에 시각적 무게감을 둬야 합니다. 반면에, 주요 액션 버튼이 아닌 부차적인 버튼이라면, 시각적 무게감은 덜 줘야..

가능한 화면 요소를 덜어내고 덜어내자 출처: https://brunch.co.kr/@ebprux/987 가능한 화면 요소를 덜어내고 덜어내자 UX 디자인 원칙 | 가능한 화면 요소를 덜어내고 덜어내고 덜어내자 전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈 brunch.co.kr 전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈트 법칙 중 폐쇄성의 법칙과 연관성이 있습니다. 하지만 디자인 트렌드가 많이 바뀌었습니다. 플랫 디자인과 미니멀리즘이 디자인 트렌드가 된 지 어느 정도 시간이 많이 흘렀습니다. 이에 맞춰 웹에 있는 박스나 구분 선을 제거하는 등 화면 구성 요소를 더 간결하게 보여주고 있습니다..

디스플레이 단위(PX, DP, SP, PT) 알아보기 출처: https://brunch.co.kr/@zalhanilll/407 디스플레이 단위(PX, DP, SP, PT) 알아보기 UI 디자인 시작하기 | PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드 brunch.co.kr PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드로이드에서 주로 쓰이는 단위. DP는 디스플레이의 좌표라고 생각하면 된다. "픽셀..

가변, 고정 영역에 대한 이해 출처:https://brunch.co.kr/@zalhanilll/406 가변, 고정 영역에 대한 이해 UI 디자인 시작하기 | 디스플레이 단위(PX, DP, SP, PT) 이해하기 글을 먼저 보고 오시면 이해에 도움이 됩니다. 처음 UI 디자인을 시작하면 생각보다 알아야 할게 많아서 놀라곤 하는데, 그중 하나는 brunch.co.kr 디스플레이 단위(PX, DP, SP, PT) 이해하기 디스플레이 단위(PX, DP, SP, PT) 알아보기 UI 디자인 시작하기 | PX(Pixel) 웹에서 주로 쓰이는 단위. 화면을 구성하는 가장 기본이 되는 단위이다. 해상도를 나타낼 때 쓰인다. (Picture Element에서 유래됐다고 한다) DP(Density Independent Pixel) 안드 brunch.c..

너도 나도 UX를 한다지만, 하는 일은 다르다구요 게임 회사 넥슨에서 유저 경험을 분석하고 있는 UX리서처의 일, 문화, 그리고 생각에 대한 생생한 이야기를 전해드릴게요! 이런 분이 읽으시면 좋습니다! 고객의 경험을 기반으로 진행되는 UX 업무에 관심이 있는 분 UX직무들이 각각 어떤 일을 하고, 차이가 무엇인지 알고 싶으신 분 UX, User Experience, 사용자 경험이라는 개념은 이제 많은 사람들에게 있어 그렇게 낯선 개념은 아닙니다. 특히 IT업계에 계신 분들에게는 많이 친숙해진 개념이죠. 하지만 개념으로써의 UX가 아닌 하나의 업무로써 UX가 어떤 일을 하는 것인지에 대해서는 아직 낯선 부분이 많이 있습니다. UX라는 개념이 너무 광범위한 개념이기도 하고, UX라는 개념의 범위가 넓은 만큼 UX를 다루는 업무 또한 매우 다양하기 때문이죠...

타이포그래피로 음악을 표현하는 방법 출처: https://brunch.co.kr/@notefolio/106 타이포그래피로 음악을 표현하는 방법 18만 창작자 회원이 활동하는 크리에이티브 네트워크 '노트폴리오'는 매주 발행되는 뉴스레터를 통해 노트폴리오 픽으로 선정된 작업의 창작 과정의 인터뷰를 소개하고 있습니다. 만약 레터를 brunch.co.kr by 김도연 타이포그래피라는 것은 기본적으로 시각 디자인의 영역에 속합니다. 즉, 사람의 눈에 보여지는 것에 영향을 받을 수 밖에 없습니다. 그런데 여기 이러한 경계에서 벗어나서 보이지 않는 영역을 시각적으로 표현하기 위해 도전한 디자이너가 있습니다. 오늘은 음악을 그래픽으로 풀어낸 타이포그래피 작업, 김도연 디자이너님의 를 소개합니다! 음악을 어떻게 시각적으로 표현할까? 주제에 대한 최초 스케..

위메이드, ‘미르M’ 전용서체 ‘전쟁과 모험체’ 만들다 [자료제공: 위메이드] 인터뷰이: 윤디자인그룹 타이포디자인센터 정유권, 이찬솔, 김미래, 김류희 위메이드가 MMORPG (이하 미르M)만을 위한 전용 서체 ‘전쟁과 모험체’를 개발했다. 전쟁과 모험체는 부드러운 붓글씨 형태의 서체로 의 게임 분위기와 조화를 이루어 게임 몰입감을 높였을 뿐만 아니라 UI 배치와 어울리도록 적용해 가독성을 높였다. 서체 ‘전쟁과 모험체’는 윤디자인그룹 타이포디자인센터와의 협업을 통해 만들어졌다. 작업에 참여한 디자이너들과 전용 서체 개발 소감과 작업 과정에서의 에피소드에 대해 이야기를 나눠봤다. Q. 전쟁과 모험 제작을 담당한 팀에 대해 소개 부탁드립니다. A. 안녕하세요, 윤디자인그룹 타이포디자인센터의 정유권, 이찬솔, 김미래, 김류희 입니다. 저희 타이포디자인센터의 폰트..

넷플릭스 새로운 사용자 평가 옵션 '쌍따봉' 보셨나요? 출처 : https://brunch.co.kr/@ywkim36/81 넷플릭스는 지난 4월 중순부터 TV 프로그램이나 영화에 대한 평가가 단순히 '좋아요'이상을 보증할 때 '더블 썸업(double thumbs up): 쌍따봉' 이라는 새로운 사용자 평가 옵션 UI를 공개했습니다. TV, 웹, Android 및 iOS 모바일 장치의 싫어요 와 좋아요 버튼 옆에 이 옵션이 있습니다. 넷플릭스의 추천 엔진(NRE: Netflix Recommendation Engine)은 매우 정확하고 관련성이 높기 때문에 넷플릭스 시청자 활동의 약 80%가 엔진의 개인화된 추천에 의해 주도됩니다. 개인화 엔진에 관한 리포트 The Netflix Recommender System: Algorithms, Business Value..

좋은 UI와 훌륭한 UI의 차이 출처: https://brunch.co.kr/@c62b100079f3466/10 좋은 UI와 훌륭한 UI의 차이 UI 마이크로 인터렉션을 개선하기 위한 실용적인 제안. | 좋은 것에서 더욱 좋은 것으로 바뀌는 UI 인터랙션 몇 가지 예를 살펴보겠습니다. 약간의 수정을 통해 디자인 퀄리티를 높일 수 있습니다 brunch.co.kr 좋은 것에서 더욱 좋은 것으로 바뀌는 UI 인터랙션 몇 가지 예를 살펴보겠습니다. 약간의 수정을 통해 디자인 퀄리티를 높일 수 있습니다. Material Motion, IBM의 Animation Principles 및 The UX in Motion Manifesto의 지침을 따랐습니다. 탭을 활성화할 때, 콘텐츠 영역에 슬라이드 인터랙션 넣기 왼쪽의 콘텐츠가 페이드 인 및 페이드..

개발자와 디자이너가 보는 디테일의 차이 출처: https://brunch.co.kr/@sarayun/50 -여기는 시안이랑 똑같이 해주세요. -어디가 다른데요? 흔한 개발자와 디자이너의 QA (quality assurance) 대화 이 대화의 문제는 서로 다르게 보고 있음에 의해 발생합니다. 눈이 예민한 사람이 보기에는 명백히 차이가 있는데, 둔감한 사람에게는 그 차이가 인지되지 못하기 때문입니다. 비단 디자이너와 개발자 사이의 문제는 아닌 것 같습니다. 디자이너끼리도 눈의 레벨이 다르고, 현재의 나와 과거의 나의 눈도 다릅니다. 자신의 예전 작업물을 다시 봤을 때 미묘하게 틀어져 보이는 것들을 볼 수 있게 되면 예민함을 캐치하는 눈이 발달하고 있다는 증거입니다. 어쨌든 디테일에도 높은 레벨의 것과 낮은 레벨의 것이 있습니다. 분노는 기본적인..

디자인 보는 눈 레벨업, 컬러 조합 공식 출처 : https://brunch.co.kr/@sarayun/53 망하지 않는 컬러 고르는 공식 디자인 기초 공식 | 세 번째 공식인 컬러 공식입니다. 컬러는 네 가지 공식 중에서 개인의 취향이 가장 많이 반영되는 요소입니다. 그럼에도 불구하고 망하지 않는 컬러 공식이 있으니 컬러 사 brunch.co.kr/@sarayun/32 11화 망하지 않는 컬러 고르는 공식 디자인 기초 공식 | 세 번째 공식인 컬러 공식입니다. 컬러는 네 가지 공식 중에서 개인의 취향이 가장 많이 반영되는 요소입니다. 그럼에도 불구하고 망하지 않는 컬러 공식이 있으니 컬러 사 brunch.co.kr 제가 쓴 브런치 칼럼 중에서 가장 많은 반응을 불러온 글이 '망하지 않는 컬러 고르는 공식'이었습니다. 이전 글이 컬러를 고르는 ..

그 디자인은 틀렸다. WCAG2 명도 대비 출처 : https://brunch.co.kr/@heavenlych/2 그 디자인은 틀렸다. WCAG2 명도 대비 3:1, 4.5:1 이 익숙한 명암대비가 사실은 틀렸다면? | 4.5:1, 3:1과 같은 명암비를 들어본 적 있나요? 혹은 이를 나의 디자인에 반영해 본 적이 있나요? 프로덕트 디자이너/UIUX디자이너라면 한 번쯤은 brunch.co.kr 3:1, 4.5:1 이 익숙한 명암대비가 사실은 틀렸다면? by 이프노즈 Feb 04. 2022 4.5:1, 3:1과 같은 명암비를 들어본 적 있나요? 혹은 이를 나의 디자인에 반영해 본 적이 있나요? 프로덕트 디자이너/UIUX디자이너라면 한 번쯤은 으레 화면을 그린 다음 플러그인을 통해 명암대비 확인을 해 보았을 것입니다. 구글의 Material 디자인 ..

이전 1 2 3 4 ··· 27 다음

LIST

티스토리툴바