일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- growthhacking
- 개발일지
- 프론트엔드
- GA4
- 데이터너겟
- 피그마
- figma
- 그로스마케터
- Datanugget
- 구글애즈
- 마케팅
- 컴포넌트
- 그로스해킹
- 인터뷰
- LABBIT
- 데이터분석
- 개발자
- 구글애널리틱스4
- 위어드섹터
- UTM
- 개발공부
- 구글애널리틱스
- 개발스터디
- 프론트엔드개발자
- Weirdsector
- 디자이너
- UX
- JavaScript
- 개발자인터뷰
- 그로스해커
- Today
- Total
목록Design (11)
위어드섹터 공식 블로그
안녕하세요 ! 디자이너 JJ입니다. 저번 글에서는 Figma에서 가장 유용하게 사용할 수 있는 Component에 대해 알아봤으니 이번 글에서는 그 Component를 활용하는 Variants기능에 대해 알아보겠습니다.🧐 1. Variants란 무엇일까요? Variants란 변형이란 뜻으로 컴포넌트들을 조합하여 컴포넌트 세트를 만들어 좀 더 체계적으로 사용하는 기능입니다. 이 기능을 사용하여 토글버튼의 on/off상태를 만들 수도 있고 버튼의 Default, hover, focus, disabled를 사용할 수 있습니다. 예를 들어 이런 토글을 사용할때 각각의 컴포넌트를 만들어 사용하기보단 컴포넌트에 variant 속성을 부여해 하나의 컴포먼트로 토글의 [on/off]를 사용하는 것이 더 편리합니다. 2..
✏️ 안녕하세요 디자이너 JJ입니다. 오늘은 Figma를 사용하면서 가장 유용하게 사용할 수 있는 사실 반드시 알아야 할 component에 대해 소개해 보겠습니다. 1. Component(컴포넌트)란 무엇일까요? 디자인작업에서 생산성과 효율성을 높여주는 component란 무엇일까요? compenet의 사전적 의미는 요소, 부품 등을 의미합니다. Figma에서도 컴포넌트는 화면을 구성하는 모든 요소들입니다. (텍스트, 이미지, 버튼, 아이콘 등) 이런 요소들중 재사용하는 요소들을 정의해 필요할 때마다 검색해 사용할 수 있도록 만든 것이 바로 컴포넌트 기능입니다. 2. Componet 만들기 (1) 자주사용하는 버튼을 제작합니다. (2) 버튼을 클릭후 위에 2개의 버튼 중 맨 왼쪽 다이아 4개짜리를 선택..
UI에서 색상이 주는 의미와 중요성에 대해 공부해보았습니다. UI에서 색상이란 사용자에게 디자인을 직관적으로 이해시킬 수 있는 강력한 시각 요소입니다. 색상이 잘못 사용된 디자인은 사용자에게 혼란을 주고 서비스의 집중도를 떨어트립니다. UI에서 색상만 제대로 사용해도 사용자를 원하는 방향으로 이끌어 줄 수 있습니다. I 색상의 용도와 해석 색상은 어떠한 이미지와 의미를 같이 동반합니다. 문화에 따라 색을 해석하는 경우가 다를 수는 있지만 공용적으로 색이 나타내는 의미가 있는데 이를 안전색채라고 부릅니다. 안전색채란 색으로부터의 연상과 상징을 이용해 위험을 제거하거나 예방하기 위해 만들어진 색입니다. 표준에 따르면 빨강은 오류, 금지 위험을 노랑은 주의, 녹색은 진행, 안전을 의미하는 것으로 정해져 있습니..
데이터 너겟 서비스의 UI화면을 디자인하던 도중 버튼에 인터랙션을 넣는 방법을 알아보았습니다. 그전에 XD에서 인터랙션을 넣어야 하는 이유는 무엇일까요? 디자이너가 머릿속에서 상상하는 인터랙션을 개발자 또는 퍼블리셔에게 설명하는 것은 생각보다 어렵습니다. ‘슈-욱 하게 올라오다가 빡!하고 버튼이 눌리는 느낌’이라고 설명하면 스스로의 설명에 현타가 오기도 하고 원하는 방향대로 개발자가 이해하지 못하는 경우도 많습니다. 이런 이유로 원하는 인터렉션이 있을 때는 최대한 구현을 해서 개발자에게 전달하는 게 좋습니다. 다른 툴에 비해 어도비 XD같은 경우에는 애프터이펙트나 플래시 등을 배우지 않고도 손쉽게 인터랙션을 넣을 수 있어 어도비 XD의 인터렉션을 넣는 방법을 찾아보았습니다. 제가 이번에 서비스 화면에 넣..