본문 바로가기

전체 글

 (325)
피그마로 디자인 시스템 세팅하기: ①디자인 토큰으로 토대 만들기 출처 : https://yozm.wishket.com/magazine/detail/1619/ 피그마로 디자인 시스템 세팅하기: ①디자인 토큰으로 토대 만들기 | 요즘IT 스타트업으로 이직 후 디자인 시스템을 0에서부터 구축하는 과정에서 새로 배운 것이 많아 비슷한 고민을 하는 사람들을 위해 공유하고자 한다. 디자인 시스템이란 서비스의 일관성과 작업의 yozm.wishket.com 스타트업으로 이직 후 디자인 시스템을 0에서부터 구축하는 과정에서 새로 배운 것이 많아 비슷한 고민을 하는 사람들을 위해 공유하고자 한다. 디자인 시스템이란 서비스의 일관성과 작업의 효율을 위한 UI 컴포넌트 가이드를 뜻하며 색상, 글꼴, 그리드, 간격 등이 해당한다. 밥알이 모여 주먹밥이 되고 원자가 모여 분자가 되듯 디자인 ..
구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts 출처 : https://yozm.wishket.com/magazine/detail/1631/ 구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts | 요즘IT 폰트 정보를 떠올릴 때, 우리가 가장 먼저 생각하게 되는 서비스는 ‘구글 폰트'가 아닐까 싶습니다. 그만큼 다양한 폰트가 포함되어 있고, 원하는 조건에 따라 빠르게 찾아볼 수 있기 때문입니 yozm.wishket.com 폰트 정보를 떠올릴 때, 우리가 가장 먼저 생각하게 되는 서비스는 ‘구글 폰트'가 아닐까 싶습니다. 그만큼 다양한 폰트가 포함되어 있고, 원하는 조건에 따라 빠르게 찾아볼 수 있기 때문입니다. 아래 이미지에서 볼 수 있는 것처럼 한글 적용이 가능한 폰트가 꽤 많이 담겨 있기도 하고요. 다만, 구글 폰트의 페이지 로딩 속도가 느려..
버튼에 시각적 무게를 두면 행위를 유도할 수 있다 출처 : https://brunch.co.kr/@ebprux/1001 버튼에 시각적 무게를 두면 행위를 유도할 수 있다 UX 디자인 원칙 | 버튼에 시각적인 무게를 두면사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 brunch.co.kr 버튼에 시각적인 무게를 두면 사용자의 다음 행위를 적극적 유도할 수 있습니다 시각적 무게감은 유저가 정보의 우선순위를 한눈에 알아볼 수 있는 방법 중의 하나입니다. 특히 버튼에 시각적 무게감을 두는 것은 사용자의 시선을 끌어모으는 데 유용합니다. 그래서 주요 액션 버튼에 시각적 무게감을 둬야 합니다. 반면에, 주요 액션 버튼이 아닌 부차적인 버튼이라면, 시각적 무게감은 덜 줘야..
스타트업의 '한글 로고' 사랑 출처: https://yozm.wishket.com/magazine/detail/1622/ 스타트업의 '한글 로고' 사랑 | 요즘IT 다른 분야보다 유독 스타트업의 앱(App) 서비스에 한글 로고가 많은 이유는 무엇일까요? 배달의민족, 직방 같은 이제 스타트업이라고 부르기 힘들만큼 성장한 브랜드는 물론이고 타다, 당근마켓, yozm.wishket.com 다른 분야보다 유독 스타트업의 앱(App) 서비스에 한글 로고가 많은 이유는 무엇일까요? 배달의민족, 직방 같은 이제 스타트업이라고 부르기 힘들만큼 성장한 브랜드는 물론이고 타다, 당근마켓, 여기어때, 오늘의집, 세탁특공대 등 매우 많은 브랜드가 한글 로고를 사용하고 있습니다. 심지어 '위메프'나 '맘시터'같은 영어로 된 이름을 가진 브랜드들도 한글 발음..
가능한 화면 요소를 덜어내고 덜어내자 출처: 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..
모두가 즐길 수 있는 디자인 검토 회의 만들기 출처: https://yozm.wishket.com/magazine/detail/1380/ 모두가 즐길 수 있는 디자인 검토 회의 만들기 | 요즘IT 제품 디자인 프로세스에서 건설적인 피드백이 중요하다는 사실은 모두가 알고 있습니다. 여기에서는 사전 준비가 필요하지 않고 비판에서 자유로운 새로운 아이디어를 공유 방식을 제안하려고 yozm.wishket.com 요즘IT의 번역글들 본문은 요즘IT와 번역가 윌리(Willy)가 함께 만든 해외 번역 콘텐츠입니다. UX 디자인을 다루는 블로그 매체 ‘UX Collective’의 글을 번역했습니다. 필자인 Justyna Kusa는 Blinkist의 수석 제품 디자이너로, 이번 글에서는 모두가 즐길 수 있는 디자인 검토 회의에 대한 여러 팁을 전달하고 있습니다. 글..
반응형
LIST

티스토리툴바