피그마 필수 플러그인 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. 프로토타입 툴 :: 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. 인포그래픽 :: infographic 인포그래픽 정보의 양이 급속도로 증가함에 따라 비주얼 콘텐츠의 중요성이 강조되는 이 시점에서 사물에 대한 본질을 바라보는 통찰력이 중요시되고 있다. 그런데 텍스트로만 빼곡히 채워져 있는 정보가 있다면 누가 읽으려고나 할까? 그래서 정리해 봤다. 인포그래픽의 정의 1. 복잡한 데이터나 많은양의 정보를 단순화 시키는것. 2. 라인, 도형, 그래프, 다이어그램등으로 정보를 간소화하고 직관적으로 전달하는것. 인포그래픽의 종류 1. 통계형 인포그래픽 2. 지도형 인포글래픽 3. 대칭, 비교형 인포그래픽. 4. 프로세스형 인포그래픽. 적용사례 1. 웹사이트 2. 어플리케이션 3. SNS 및 기타 영상 매체 앞으로 갈수록 시각적인 의존도가 높아지게 될텐데 인포그래픽은 다양한 매체에서 제각기 다양한 영향력을 행사할것이.. 2020. 10. 23. 2020 디자인트렌드 :: 2020 design trend 2020 디자인트랜드의 고찰 트렌드가 빠르다고 UX에 꼭 도움이 되는것은 아니다. 트렌디한 디자인을 따라가다가 잘못된 사용성으로 서비스의 질에 누를 끼칠 수 있다는 말이다. 드리블과 인스타에서 주목받고 있는 최근트렌드를 살펴보고 그 트렌드의 문제점도 함께 생각해보자. 아 잠깐. 디자인트랜드를 이야기하기전에 기본적인 디자인 트렌드에는 어떠한것들이 있는지 살펴보고 가자. 기본 트렌드 1. 스큐어모픽 사물의 모습을 그대로 표현하는 디자인. 2. 플랫디자인 단순한 구성과 색상을 통해 직관적으로 인식할 수 있는 디자인. 3. 머티어리얼 디자인 구글이 개발한 시각언어로 그리드 기반의 레이아웃과 규칙적인 색상설계, 의도적으로 여백을 디자인. 새로운 트렌드의 문제점 1.뉴모피즘 (체험하기) 스큐어모피즘에서 탄생한 뉴모.. 2020. 9. 5. 해더 디자인 :: header design 해더 디자인 특징 1. 비주얼 디자인은 웹사이트에서 중요한 역할을 하며 전체적인 사이트의 분위기를 주도한다. 2. 시각적으로 자극적인 것들이 많고 미니멀리즘이 조금씩 밀려나고 있는 상황에 비주얼디자인의 중요성이 더 커지는 추세라고 볼 수 있다. 3. 디자이너가 몇달에 걸쳐 만들 프로젝트들도 짧게는 17초, 길게봐서 50초 만에 평가가 된다. 해더디자인 = 웹 비주얼 디자인 웹사이트 비주얼 디자인을 헤더디자인 으로 명명하기도 한다. 예전에 헤더는 GNB를 의미해 로고, 주요메뉴, SNS등이었지만 최근에는 비주얼을 포함하는 추세이다. 주요구성 - 로고 - 네비게이션 (메뉴) - 텍스트 헤드라인 - CTA 버튼: 행동을 유도하는 주요버튼 - 검색 등 비주얼 이미지의 크기 (header size) 정확한 픽셀보.. 2020. 9. 2. 황금 비율 :: . golden ratio 황금 비율 정의 : 고대 그리스에서 발견된 것으로 기하학적으로 가장 조화가 잡힌 비율로서 미적 감각이 뛰어나 붙여진 이름 특징 1. 황금비율은 시각적 안정감을 준다. 2, 조형적 아름다움을 위해서는 변형이 필요하다. (다양한 그리스 시스템 이해필요) 예시) 웹 디자인에 적용을 하면 폰트크기 13일때 라인하이트 값은 17이나 21이 좋다. 왜냐하면 8:13 의 비율을 생각해서 13폰트일때 아래위의 간격4 픽셀씩 하면 8픽셀이라는 비율이 나온다. 기존 폰트크기 13크기에 4를 더해서 라인하이트 값이 18이된다. 황금비 황금각도 황금비율 계산 사이트 metallicratio 2020. 8. 27. 타이포그래피 :: typography 타이포그래피 타이포디자인 가이드라인 본문 vs 제목 본문용 타이포 : 작은 사이즈에서 판독 및 가독이 편함. 간격이 넓음. 얇은 획을 포함. 제목용 타이포 : 강한개성과 정교함을 가짐. 판독성과 가독성 무시가능. 타이포 간격 : 답답하거나 심심하지 않다. 디자인 전반에 걸쳐 고른 간격을 가진다. 디자인의 디테일 부분에 해당한다. 타이포그래픽 일러스트레이션의 혼합 영문과 국문의 혼합의 경우, 폰트크기와 높이를 맞추어야한다. 세리프 vs 산세리프 (Serif, San serif) 타입 최고의 원칙은 세리프와 산세리프를 섞어서 사용하는것. 타입의 특징을 파악해서 사용한다. 가벼움 vs 무거움 (Light, Heavy) 무겁거나 또는 가벼운 무게의 타이포는 강한 시각적 대비를 이룬다. 이 테크닉은 종종 세리프체.. 2020. 8. 26. 이전 1 다음
