반응형

디자인/UX | UI 6

[피그마] 퍼블리싱 메뉴로 디자인 실시간 공유하기

퍼블리싱이 필요한 이유는 디자인이 순간순간 수정이 될떄마다 전체페이지를 수정해야되는 수고로움을 덜기 위함입니다. 퍼블리싱 버튼만 누르면 전체페이지가 모두 새로운 디자인에 맞춰 업데이트됩니다 전 지금 무료버전 (폴더 1회만 퍼블리싱 가능)으로 사용하고 있는데 그래서 좀 도떼기 형식처럼 다양한 버튼들이 다들어있죠ㅠ 피그마에서 먼저 퍼블리싱을 진행하기전에 컴포넌트로 파일들을 묶어줘야합니다. (그러지않으면 퍼블리싱 자체를 진행할수 없음) 색상을 한번 컴포넌트 시켜주겠습니다. 상단 주황버튼을 눌러주세요 이렇게 작업물들이 묶어집니다. 좌측 메뉴를 보면 이렇게 색상 프레임이 추가된게 보이죠? 완성된 키보드를 한번 수정해볼까요? 위에 있는 숫자를 지워줄게요. 지금 저희가 추가한게 색상과 키보드를 수정했죠? 좌측 상단을..

디자인/UX | UI 2023.10.12

UX/UI 디자인 및 웹디자인 레퍼런스, 참고하기 좋은 추천 사이트

안녕하세요 오늘은 ux/ui 디자인과 웹디자인에 참고하기 좋은 사이트 8개를 가지고 왔습니다. 별점 ★★★★★ 첫번째 사이트는 WWIT-윗 이라는 사이트로 카테고리와 패턴별 분류로 로그인, 회원가입, 알림, 검색등 다양한 uxui 디자인 설계들을 손쉽게 원하는 정보만 검색해서 볼수가 있게 잘 정리 된 사이트입니다. https://wwit.design/pattern/signin Lifeplus 한국의 UI/UX 모바일 패턴을 수집합니다. wwit.design 별점 ★★★★ 다음 추천 사이트는 디자이너스 라는 사이트입니다. 이 사이트는 따로 필터 없이 마음에 디자인 섬네일 3,4개정도만 보여지고 그 섬네일을 클릭하면 이렇게 선택 된 앱의 모든 ux/ui 디자인이 보여지는 형태로 전체적인 틀을 잡을때 사용하면..

디자인/UX | UI 2023.09.20

[Figma] Hug/Fixed/Fill/Add auto layout 정의

피그마 사용시 제일 유용하게 많이 사용하는 Hug, Fixed, Fill, Add auto layout에 대해 알아보자 aoto layout이라 함은 글자수에 상관없이 배치가 일정하게 되게끔 묶어주는 역활을 한다 해당 글자수가 '뒤로가기' '앞으로가기' 등을 이용해도 그영역 그대로 배치될수 있게끔 아이콘과 그 배열에 있는 버튼들을 단축키 Shift+a를 통해 오토레이아웃을 걸어주면 된다. 오토레이아웃이 잘못걸렸을경우 오른쪽마우스를 눌러 리무버 오토레이아웃으로 취소할 수 도 있다. 이렇게 세개의 버튼에 aoto layout 을 성정한 후 Hug를 걸어주면 이렇게 글자수에 맞춰 레이아웃이 일정하게 지정된다. 글자가 끊어지지않고 우측으로 계속 써갈수 있게끔 해주는 옵션은 Fill로 설정을 해주면 딘다. 그리고..

디자인/UX | UI 2023.09.14

웹로그 데이터 용어 정리

용어 설명 퍼널 (Funnels) 설계 의도와 실제 사용자의 행동을 비교하기 위해 사용 히트맵 (Heatmap) 사용자가 자주 클릭하는 요소를 시각적으로 확인 가능 세션 시간 (Session Length) 사용자가 앱을 닫거나 다른 앱으로 전환하기 전까지 사용한 시간 PV (Page View) 사용자가 앱의 한 페이지에 접속한 횟수 UV (Unique Visitor) 특정기간 동안 1회이상 방문한 사용자의 수 (특정기간 동안 앱에 2번 방문 했다면 중복처리 되어 1명의 사용자가 방문한 것으로 기록) 일간 활성 사용자 (DAU, Daily Active User) 매일 앱을 여는 사용자 수 주간 활성 사용자 (WAU, Weekly Active User) 매주 앱을 여는 사용자 수 월간 활성 사용자 (MAU,..

디자인/UX | UI 2023.08.23

픽셀 밀도 및 디바이스별 해상도 알아보기, 앱아이콘 크기

픽셀 밀도란? 물리적으로1인치(2.54cmX2.54cm)안에들어가는픽셀(화소)의수를 의미합니다. 일반적인 웹디자인에서는 72ppi를 사용하고 있습니다. 현재 대부분의 애플에서는 221 ppi를 지원합니다. 72ppi 버튼 세로 px 221ppi 버튼 세로px 맥스 버튼 세로px 44px 88px 132px 그래서 아이콘을 저장시 3가지 버전의 픽셀밀도를 전달하여야합니다. 아이폰 픽셀 단위 pt=dp /안드로이드 픽셀단위ppi=dpi 안드로이드 픽셀밀도는 가지로 압축하여 전달합니다. IOS 앱아이콘 PT PX 디바이스 60 x 60 @3X 180✕180 아이폰맥스 60✕60@2✕ 120✕120 아이폰 83.5✕83.5@2✕ 167✕167 아이패드프로 76✕76@2✕ 152✕152 아이패드,아이패드미니 10..

디자인/UX | UI 2023.08.10

UX/UI의 개념

UX란? 시스템, 제품, 서비스를 사용하거나 사용을 예상하면서 도출된 사용자의 인식과 반응 예를들어 유투브사이트에들어가보면 사용자가 관심있어할만한 영상들이 나옵니다. 제가 요즘 홈트와 뉴진스를 많이 검색했더니 이렇게 결과들이 나오네요ㅎㅎ 이러한 결과나 추측들을 UX(사용자경험)이라고 합니다. UI란? 사용자가 대화형 시스템으로 특정 작업을 수행할 수 있도록 정보와 제어 수단을 제공하는 대화형 시스템(소프트웨어 또는 하드웨어)의 모든 구성 요소 UI는 다양한 형태로 존재합니다. 서비스 디자인에서는 이 개념이 터치 포인트(Touch Point)로 확장했습니다.

디자인/UX | UI 2023.08.05
반응형