필터
팔로우
-
05화 얼떨결에 프로덕트 오너
삐빅! 슬립 테크 프로덕트 오너로 환승합니다! | 약 4개월 전만 해도 디자이너로 하루를 살았다. 피그마나 프레이머를 사용해 직접 컬러를 관리하고 컴포넌트를 디자인했다. 디자인 관련 글을 썼고, 만나는 지인들도 대체로 디자이너들이었다. 방송에 출연해 디자이너 입장에서 이야기를 하고, 어렵사리 한 권의 디자인 책도 냈다. 디자이너로 불리는 게 익숙하고 편했다
06화 스타 디자이너의 종말?
린 UX와 디자이너의 새로운 역할 | 디자인 산업은 꽤 오랫동안 스타 디자이너에게 의존하는 시스템으로 흘러왔습니다. 배경의 중심에는 디자인 에이전시의 오래된 비즈니스 모델이 존재합니다. 클라이언트는 디자인 에이전시에 작업을 의뢰한 뒤 산출물에 대한 비용을 지급합니다. 디자인의 시장 성과가 아닌 산출물 자체에 비용을 내야 하기 때문에 이름 있는 에이전시나 스
04화 예쁜 디자인이 중요할까?
UI/UX에서의 심미적 사용성 효과 | '예쁘다'는 말은 종종 천대받는다. 예쁜 것을 볼 때 겉만 번지르하고 알맹이는 빠져있을 거라 추측하는 *인지 편향{Cognitive bias} 때문이다. 정말 그런 경우도 있지만 디자인에 있어 아름다움은 생각보다 더 기능적인 역할을 한다. 최근 UI/UX 분야에 MVP 강조나 디자인 시스템에 대한 관심이 높아지며 아름
03화 사용자 습관 형성을 위한 6가지 방법
앵커와 내부 트리거 활용하기 | 디지털 서비스를 만드는 메이커들은 대부분 비슷한 갈증을 가진다. '사용자가 습관처럼 사용하는 앱을 만들고 싶다.' 하지만 생각처럼 늘지 않는 리텐션과 쭉쭉 빠지는 이탈률을 볼 때마다 상심에 빠진다. 이번 글에서는 UX 실무와 제품 성장에 충분히 활용할 수 있는 사용자 습관을 만드는 6가지 방법에 관해 소개할까 한다. [목
01화 디지털 프로덕트를 만들며 깨달은 11가지 사실
꼼수 없음, 완벽 없음, 공식 없음 | 재직 중인 회사의 앱 출시가 코 앞으로 다가오며 실무자들과 밀도 깊은 이야기를 나누고 있다. 문득 디지털 프로덕트를 지금까지 꽤 오래 만들며 깨달은 사실들을 정리하고 싶다는 생각이 들었다. 앞으로 소개하고 싶은 11가지 이야기들은 프로덕트를 만들 때 항상 염두에 두고 있는 것들이다. 글의 특성상 뇌피셜이 많으니 업계
02화 화면이 복잡할 때 꺼내 읽기 좋은 UX 이야기
복잡함과 혼란스러움 구별하기 | 단순함은 좋은 가치다. 본질을 쉽게 파악할 수 있기 때문이다. 하지만 단순함 자체가 언제나 목표일 필요는 없다. 피아노 건반은 88개나 있지만 건반의 수를 줄여야 한다고 주장하는 사람은 드물다. 모든 건반을 다 활용해 연주를 하는 사람이 거의 없다 하더라도 말이다. 비행기 조종실의 복잡성 역시 이유가 있다. 조종사들은 뚜렷
피그마, 마케터의 치트키가 될 수 있을까?
큐레터 담당자의 브라우저 엿보기 ① 아이보스 사이트② 어도비 포토샵 & 일러스트레이터 : 큐레터에 필요한 이미지를 제작해요.③ 스티비(stibee) : 큐레터를 편집하고 발송하는 사이트예요.④ 구글 애널리틱스(GA) : GA를 통해 큐레터 콘텐츠의 성과를 확인하고 있어요.⑤ 엑셀 : 콘텐츠의 성과를 분석하고 기록하기 위해 엑셀은 필수예요.⑥ 카카오 뷰 창작
안드로이드 개발자가 되려면 알아야 하는 것들
#안드로이드개발#개발자_로드맵#안드로이드_공부
안드로이드 개발자가 되려면 어떤 공부를 해야 할까요?
프론트 앤드 개발자가 되려면 어떤 공부를 해야 하나 ? 개발자 로드맵 함께 보시죠~ (feat. roadmap.sh )
개발자 로드맵이 있네요. https://roadmap.sh
함께 봐요~
빈티지 시대에서 영감을 받은 10가지 색상 팔레트 - Shutterstock 블로그 한국어
20세기의 각 10년에서 영감을 받은 레트로 컬러 팔레트로 시간을 거슬러 올라가 보세요 모든 시대는 1940년대의 보수적인 카키와 브라운, 1970년대의 흙빛 머스터드와 오렌지 등 그 시대를 규정하는 색상이 있습니다. 그 시대의 패션 및 스타일을 특징짓는 색상 결합이 특징인 10가지 무료 색상 팔레트가 사랑의 여름 또는 재즈 시대 같은 시대를 전달합니다.
2022년 인스타그램 광고 디자인 가이드 - Shutterstock 블로그 한국어
매초 1,000개 이상의 사진이 인스타그램에 업로드됩니다. 다음은 광고주가 인스타그램 광고를 최대한 활용하는 방법입니다. 인스타그램 광고는 현재 꽤 오랫동안 브랜드가 찾는 솔루션이었습니다. 인스타그램 광고는 8억 명 이상의 인스타그램 사용자에게 도달하는 한편 일반적인 SNS 광고보다 34% 더 높은 전환율을 발생시키기도 합니다.
04. Lottie interactivity로 애플 웹사이트 따라하기 - LottieFiles 강좌
오늘 만들어볼 예제는 애플 인터렉션 따라하기 입니다. 스크롤을 내려보면 만들어놓은 애니메이션이 움직이는 것을 볼 수 있죠. 실제로 로티를 사용한 부분을 따라서 직접 구현해볼 예정입니다.
일러스트레이터 파일에서 작업한 그래픽을 어떻게 에프터이펙트로 옮기는지, 그리고 그 옮긴 에펙에서 어떻게 애니메이션을 구현하는지, 마지막으로 애니메이션을 로티파일즈로 보낸 후 Lottie Interactivity를 활용해서 스크롤 인터렉션을 구현하는 방법을 배워보도록 할게요.
*참고로 해당 강좌는 코드로 작업할 예정이기 때문에 기본적인 html, css, js 정도는 알고 있어야 따라오기 편합니다.
로티 인터렉티비티 링크 : https://lottiefiles.com/interactivity
00:00 시작
00:22 배워볼 예제
01:22 일러스트레이터에서 그래픽 작업
03:23 에프터이펙트 작업
09:15 로티파일즈로 내보내기
10:07 코딩 작업
14:51 다양한 인터렉션 제공
#로티 #로티파일즈 #인터렉션 #모션 #lottie #lottiefiles #js #html #css #에프터이펙트 #일러스트레이터
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
03. Figma에 LottieFiles 사용하는 방법 - LottieFiles 강좌
오늘은 로티파일즈 플러그인을 통해 피그마에서 로티 애니메이션을 사용하는 방법을 알려드릴게요.
요즘 많은 디자이너분들이 UI 작업을 피그마에서 사용하고 있죠. 이 피그마 프로토타입에서 GIF를 지원하다보니까, 이런 부분을 공략한것 같아요. 로티 파일즈 플랫폼 내에 업로드 되어잇는 애니메이션을 gif로 변환해서 올릴 수 있는 기능을 제공하고 있습니다.
00:00 시작
00:23 UI에 모션 활용하기 좋은 상황
01:24 피그마에서 플러그인 사용법
03:23 예제 2번
#로티 #로티파일즈 #인터렉션 #모션 #lottie #lottiefiles #피그마 #figma
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
02. 에프터이펙트에서 작업한 모션을 로티로 적용하는 방법 - LottieFiles 강좌
안녕하세요. 이번시간에는 에펙에서 작업한 결과물을 로피타일즈를 통해 웹사이트에 올리고 json으로 저장해서 활용하는 방법을 알려드릴게요.
00:00 시작
00:34 로티파일즈 플러그인 설치
01:37 로티파일즈 사용
05:26 로티파일즈 웹사이트 내에서 보기
#로티 #로티파일즈 #인터렉션 #모션 #lottie #lottiefiles #에프터이펙트
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
01. UI 내 모션은 이미 대세, 로티 파일즈를 소개해드릴게요! - LottieFiles 강좌
안녕하세요 여러분~!
로티파일즈는 단순히 작업한 애니메이션을 JSON으로 출력해서 로티를 쉽게 사용하도록 도와주는 것 뿐만아니라 작업물을 프라이빗하게 공유하거나 임베드 기능을 통해서 같이 일하는 디자이너, 프론트엔드 개발자와 같은 이해 관계자들과 협업시에 도움을 주는 기능을 제공하고 있습니다. 그 외에도 웹사이트 내에서 로티 관련된 다양한 기능들을 제공합니다.
최근 디자인스펙트럼과 로티파일즈가 개최한 Why Motion 행사에서 모션이 중요해지고 있는 상황을 같이 살펴보면서 로티파일즈를 살펴볼게요.
제가 준비한 로티파일즈 강좌를 크게 구분지어 보자면,
- 로티파일즈란?
- 에프터이펙트에서 로티파일즈 사용 방법
- 피그마에서 로티파일즈 플러그인을 통해 ui내에 gif를 적용하는 방법
- 로티 인터렉티비티를 통해 실제 코드로 애플 인터렉션을 구현하는 방법
- 그 외에는 로티파일즈 모바일 앱에서 확인하는 방법부터 로티 파일즈 플랫폼 내에 제공하는 여러 유용한 기능들을 소개
Lottie.js에 대해 궁금하신 분들은 아래 영상을 통해 확인이 가능합니다.
https://youtube.com/playlist?list=PLkbzizJk4Ae9c78CwuPVFFSIz8EnhmFQt
로티파일즈 : https://lottiefiles.com/kr
디자인스펙트럼 : https://www.designspectrum.org/
토스 - Why motion : https://blog.toss.im/article/why-motion-in-finance
00:00 시작
00:43 로티파일즈 소개
03:10 모션이 중요해지는 이유
05:08 로티파일즈 웹사이트 살펴보기
#로티 #로티파일즈 #인터렉션 #모션 #lottie #lottiefiles
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
