본문 바로가기
디자인 벤치마킹 :: benchmarking 벤치마킹 디자인에서 드리블이나 핀터레스트를 혹은 비핸스를 레퍼런스의 가장 기본으로 생각한다. 하지만 콘셉트 레퍼런스를 찾기 전에 UX의 관점에서 어떠한 의도와 목적으로 레퍼런스를 찾아야 하는지 한번 생각해보자. WHY? 벤치마킹은 왜 필요한가? 1. 내부고객 설득: 이해관계자 및 클라이언트 설득. 2. 내부고객과 End유저사이의 눈높이를 맞춤. 3. 내부고객의 추상적 생각을 구체화. (인터뷰) 4. 아이디어를 뒷받침하고 확장시키기 위함. 5. 인터뷰를 대체할 정도의 효과 : 사용자들은 인뎁스 인터뷰에서 경쟁사에 대한 이야기를 하므로 충분한 경쟁사 분석은 인뎁스인터뷰 효과를 내기도 함. HOW 벤치마킹은 어떻게 찾아야 하는가? 1. 매크로 벤치마킹 (초기기획단계 :: 전략기획) - 전체적인 큰 틀의 벤치마.. 2023. 10. 16.
UX :: 이것이 UX / UI 디자인이다. 이것이 UX / UI 디자인이다. 1.1 Ux 디자인이란 UX 정의 "유저가 인지하는 경험의 품질" 1. 유저가. 2. (어떤 서비스나 물건을) 사용하고. 3. (이성적, 감성적) 판단을 내리는 것. 이라고 볼 수 있다. UX 디자인에 대한 오해. 1. UX ≠ UI UX는 총체적 관점, UI는 시각적 관점으로 보면 될 것이다. 즉, UX > UI, GUI, Interaction, IA, Process, contents...+(User의 니즈) UX 영역 1. UI 2. IA 3. user flow 4. Interaction 5. GUI 1. UI : 화면구성 2. IA : 정보의 전체 체계 (search, filter, tag, lable 등에 영향) 3. user flow : 사용자가 서비스를 이용하.. 2023. 9. 23.
피그마 필수 플러그인 6 :: Figma Plugin Top6 피그마에서 활용할 수 있는 플러그인을 소개해보고자 한다. 1. remove.BG Remove BG | Figma Community Remove the background of images automatically with just a single click - using the remove.bg API. Note: You will need a remove.bg account for this plugin. www.figma.com 원 클릭으로 이미지의 배경을 제거해주는 플러그인. 웹사이트에서 로그인을 하고 무료 API키를 받아서 사용해야한다. API키를 받는데 귀찮을 수 있지만 설치만 하면 상당히 유용하다. 피그마 안에서만 사용가능한게 아니라 윈도우용,맥용으로 별도 프로그램으로도 사용가능하다. 누끼 퀄리터.. 2023. 9. 11.
프레이머 :: Framer 프레이머 프레이머는 코드 기반(React, typescript, jsx : 웹 기술)의 프로토타입 툴이다. 1. 프레이머가 다시뜬다고? 최근 상무님께서 프레이머 툴을 한 번 알아보라고 하셔서 관련 정보를 리서치하게 되었다. 이 툴을 쓰는 대표적인 회사가 토스인데 그들은 프레이머로 내부 디자인 시스템을 구축하고 새로운 워크플로우를 개선하여 업무의 효율성을 높였다고 이야기한다. 사실 개인적으로 2년전 React 개발도 해보고(github링크) 프레이머 온라인 커뮤니티(페이스북) 활동에 참여해봤고, 개인적으로 만들고 싶었던 서비스를 프레이머를 이용해 만들어 봤었지만 실제 코드로 디자인시스템을 구축할 수 있다는 것은 생각도 못했었다. 하지만 최근 토스-플랫폼디자인팀에서 프레이머로 디자인 시스템을 구축했다는 것은.. 2022. 8. 8.
(실무) 린 UX :: lean UX 실무 린 UX 린 UX는 비주얼 디자인(GUI)과는 대척첨에 있다. 빠르게 문제를 해결하고 피드백을 받아야하는 이 프로세스는 비지니스와 기술 측면에는 그 빛을 발하지만. 진득하게 퀄리티를 높이는 그래픽 디자이너에게는 꽤 힘든 일이 될 수 있을것이다. 하지만 문제가 있다면. 분명히 해결방법도 있을것. 그것에 대해 함께 고민해보자. (디자이너는 문제해결사니까 ^^) Why 먼저 우린 왜 "린UX"를 알아야 하는것일까? 현 시대는 갑작스런 변화가 일어나는 특이점의 시대이다. 빅데이터, 블록체인, 사물인터넷 5G기술, VR/AR, AI 등 많은 기술들이 앞다투어 우리삶에 침투하고 있고, 그에 따라 우리 인간들의 경험 또한 빠르게 달라지고 있다. 빠른 시대에 대응하기위해서는 그에맞는 비지니스 전략과 기술방법론이 .. 2021. 3. 23.
프로토타입 툴 :: Prototype Tool 대략 3000여명을 대상으로 프로세스별 어떤 툴을 선호하는지 조사가 진행되었다. UXTools 참고 설문조사 응답 1. 브레인스토밍 툴 1위. 종이와 화이트보드 2위. 스케치 3위. 피그마 4위. XD 2. 와이어프레임 툴 (UI 전 단계) 1위. 스케치 2위. 피그마 3위. XD 4위. Axure 3. UI디자인 툴 1위. 스케치 2위. 피그마 3위. XD 4위. 포토샵 4. 프로토타이핑 툴 (UI + Interaction) 1위. 스케치 2위. 인비전 3위. 피그마 4위. XD 4. 프로토타이핑 툴 (성장률) 1위. 피그마 2위. XD 3위. 스케치 4위. 인비전 5. 핸드오프 1위. 제플린 2위. 피그마 3위. 인비전 4위. XD 곧, 2021년 통계가 발표되겠지만 현재는 스케치를 가장 많이 사용하.. 2020. 12. 5.
로티 :: lottie 로티 정의 : 애프터이팩트의 애니메이션 -> .json(자바스크립트 객체 : 코드화) 파일로 변환해주는 툴 디자인 작업을 하다보면 animation에 대한 욕구가 솓구칠 때가 있다. 하지만 리소스를 많이 잡아먹으면 어떻하지? 개발자가 반대할텐데... 이런생각으로 포기할때가 많다. 하지만 Airbnb에서 개발한 오픈소스 라이브러리가 있다. 애프터이팩트 (이하, 애팩)에서 작업한 파일을 json로 추출해주는 방식인데 메모리에도 영향을 적게준다. 자세히 알아보자. airbnb.design/lottie/ Lottie Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that .. 2020. 11. 27.
유저 플로우 :: user flow user flow (이용 흐름 설계) 유저플로우(user flow)는 비슷한 용어가 참 많다. (task flow, wire flow, flow chart) 등등. 복잡한 듯 보이지만 하지만 한마디로 정의한다면 새로운 형태의 "와이어프레임" 정도로 정의하면 되겠다. 정의 1. 사용자가 특정한 작업 (task)를 완료하기 위해 서비스 내에서 움직이는 경로를 정리하는 것. 2. 사용자 시나리오보다 구체적이며, UI(화면), 행동, 판단으로 표현된다. 구성요소 1. 목표(user goal) : 사용자가 서비스를 통해 얻고자 하는 결과. (상품 구매, 정보 획득, 소통 등) 2. 작업(task) : 목표를 위해 유저가 수행하는 것. (로그인, 회원가입, 장바구니 담기, 검색 등) 3. UI: 화면. (검색화면,.. 2020. 11. 23.
글자 크기 :: type scale Type scale 정의 Typograph 1. 안드로이드 가이드 기준 a. google material design 구글 material > the type system b. 6+2+2+3이 기본 i. headline ii. subtitle iii. body iv. etc( btn, caption, overline) c. font weight / size / letter spacing로 type 단계별 디테일 높임. d. 프로젝트의 크기에 따라 Headline 수 조절. (참고) Headline폰트와 body폰트종류를 나누어 진행할수도 있는데. Headline은 디자인의 아이덴티티 측면을 body폰트는 가독성을 고려해서 선정하면 좋다. 2. 기타 참고 사이트 a. The typographic scale.. 2020. 11. 3.

티스토리툴바