본문 바로가기

UXUI72

[240111]Figma 활용법2_7주차 프로토타입 1/11 *강의에서 얻은 것 프로토타입 미리보기(실시간 반영) 단축키: shift+space bar 트리거(~하면: 조건)->액션(발생한다: 결과) 1000ms=1초 change to -> 베리언츠끼리 상호작용 스마트 애니메이션에서 가장 주의할 점 ->움질일 요소의 이름이 같은지! ->레이어의 구조가 동일한지! 컨텐츠의 길이가 스크롤보다 길어야 한다. -> 스크롤 할 게 있어야 작동하니까! 포지션: scroll, sticky, fixed 앱솔루트는 오토레이아웃 안에 있어야 작동한다. =앱솔루트는 오토레이아웃 안에서 위치 구애받지 않고 자유롭게 이동시킬 수 있 ->와 앱솔루트 기능 완전... 필요했던 기능인데 대박!!! 피그마 오버레이 안에는 라이트박스의 개념이 포함되어 있다. 오버레이->다이얼로그 활용... 2024. 1. 11.
[240111]UXUI디자인 개인과제 1차_가상의 커머스 앱 디자인하기 1/11 어제 개인과제를 제출하고 1차 완성본 기록한다. 게으름을 피웠는지 23시 55분쯤에 제출을 했다. 이렇게 빠듯하게 제출을 하다니... 다음엔 더 여유롭게 제출하도록 나만의 기한을 미리 정해야겠다. https://www.figma.com/proto/vkQh9OOAeFrTyutzh94woz/%5BA13%EC%A1%B0_%EA%B0%9C%EC%9D%B8%EA%B3%BC%EC%A0%9C_%EA%B9%80%EC%9D%80%EC%95%A0%5D?page-id=0%3A1&type=design&node-id=1-4&viewport=50%2C273%2C0.42&t=pKG219GzSKpbs9bI-1&scaling=scale-down&mode=design Figma Created with Figma www.figm.. 2024. 1. 11.
[240110]TIL_개인과제, 특강 1/10 *특강 메모* 피그마 툴도 중요하지만 세상의 인사이트(유의미한 무언가)가 중요하다. 정량 데이터: 이탈율, 재구매율, 전환율, 유저 1인당 획득비용 등 정성 데이터: 사용자 인터뷰, 사용성 테스트, 도그피딩(직접 사용해 보는 것), 고객의 소리(VOC) 등 디자이너 직군의 향후 발전 방향 : 세분화, 탈디자인화, 기술 지식의 저주: 상대방이 나만큼 알고 있다고 생각해서 발생하는 문제 ->설명하지 않아도 이것정도는 알겠지? ->질문할 때도 주의해야한다! 2024. 1. 10.
[240109]개인과제_가상의 커머스 앱 UXUI 디자인하기 1/9 개인과제가 내일까지 제출인데. . . 막막하지만! 그래도 홈화면, 상품 목록 페이지는 어찌저찌 만들었다. 제품 컴포넌트를 만드는데 이미지랑 텍스트 부분을 같이 묶어서 컴포넌트로 만들었어야 하는데 이미지 10개 붙여넣은 거 바꾸기에 시간이 많이 걸릴 것 같아서 따로 만들었는데... 뭔가 찝찝하다ㅠ!!! 과제를 하면서 느낀 점은 디자인이라는 게 정답도 없고 툴 사용에도 제한이 없기 때문에 방법이 진짜 60000개는 되는 것 같다. 이렇게 진행해도 개발할 때 문제가 없는지,,, 가 제일 걱정이 된다. (계획 및 스케치) 패드에 글씨 쓰는 건 진짜 적응이 안된다... 지금까지 진행한 부분은 이렇다. (홈화면) (상품 목록 화면) 디자인 시스템도 2페이지에서 만들어서 쓰고 있는데 정리를 안하고 만들어 쓰는.. 2024. 1. 9.
[240108]Figma 활용2_ 6주차(UI 설계 시 유의할 점, 와이어프레임) 1/8 *TIL_강의에서 가져갈 것* UI 설계할 때 유의할 점: 사용자 환경을 고려해야한다. 모바일 웹, 앱의 UI는 차이가 있다.->사용자 입장에서 왜 차이가 있는지 궁금했는데 이번 기회에 알게 되었다. 페이지 이동, 뒤로가기 등 UI가 달라짐에 따라 UX도 달라진다. ->그러나 요즘은 사용자의 니즈에 따라 웹, 앱 UX/UI가 비슷해지고 있다. OS(운영체제)에 따라 다른 UXUI -앱 심사 기준이 있기 때문에 다를 수 있다. -홈 인디게이터, 뒤로가기 기능 등 각 운영체제의 기능이 존재 그러나! 사용성을 최우선으로 고려해야 한다. 와이어프레임에서 가장 중요한 것은 습관 형성 모델을 잘 설정했는지 검토할 수 있는 것 -> 사용자에게 몰입력 있는 서비스를 만들 수 있는 중요한 과정 ->최대한 단순하게.. 2024. 1. 8.
[240107]WIL 1/7 헉 금욜에 과제하느라 WIL 쓰는 걸 잊어서 한 주의 마무리 느낌으로 일요일에 작성한다... 주말에 가족 모임도 있었고 알바도 계속 나가서 잠도 부족하고 너무 지치고 힘든데... 왜 시간이 이렇게 빠르게 흐르는 걸까 빨리 2월되어서 캠프에만 집중할 수 있었으면 좋겠다ㅠㅠㅠ!! 사장님 절 놓아주세요 빨리... 여튼 이번 주에는 진짜 UXUI 디자인을 해보는 과제를 진행하는 주였다. 처음엔 감이 안잡혔지만 강의도 듣고 유튜브도 찾아보면서 하나하나 계획하고 설계해 나가고 있다. 지금은 막막하지만 다음 주에 제출할 땐 뿌듯하겠지? 하루하루 성장하는 느낌이라 재밌고 시간이 빨리가는 한 주였다. 다음주도 화이팅! 2024. 1. 8.
[240104]Figma 활용1_4주차(강의정리/HW) 1/4 *4주차 강의에서 가져갈 것* file->select matching layers: 같은 위계의 레이어 모두 선택해줌 [컴포넌트] 컴포넌트란 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품 컴포넌트는 모양이 아니라 기능이 중요하다! UI의 목적, UI의 기능에 초점을 둘 것! 종류 6가지 액션 : 사용자가 중요한 행동을 수행할 때 사용해요. 인풋 : 사용자의 입력을 받을 때 사용해요. 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용해요. 컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트에요. 내비게이션 : 사용자가 페이지를 이동할 때 사용해요. 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용해요. [의사상태] 컴포넌트의 가상의 상태이다. 버튼에 커서를 .. 2024. 1. 4.
[240103]Figma 활용법1_3주차 그리드, 디자인 시스템 1/3 *3주차 강의에서 가져갈 것* 권장 1배수(원본) 디자인: 아이폰의 경우 375 * 812, 안드로이드의 경우 360 * 800 [구현 과정] 1) 1배수 사이즈로 디자인을 한다. 2) 기기는 코드를 읽고 자기 배율에 맞게 확대 또는 축소를 한다. = 랜더링, 아이폰 15프로 기기의 경우, 375 * 812의 디자인을 3배 확대해서 1125 * 2436으로 만듦. 3) 기기 실제 해상도에 맞게 미세 조정 후 화면에 띄운다.(업, 다운스케일) [분기점] 웹, 테블릿, 앱 픽셀값을 나눠서 디자인하기 테블릿은 사용자가 적으니 필요한지 판단을 해볼 것 가로가 1024px 이상이라면 데스크탑 화면입니다. 가로가 768px 이상, 1024px 미만이라면 태블릿 화면입니다. 가로가 768px 미만이라면 모바일.. 2024. 1. 3.
[240103]Figma 활용법 1_2주차(프레임/그룹의 차이, 오토레이아웃/컨스트레이트) 1/3 *강의를 통해 가져갈 것* [프레임vs그룹의 차이] 프레임은 코드 블록을 만드는 기능과 동시에 코드 블록 그 자체이다. 그룹은 여러 개체를 하나로 묶을뿐 [레이어와 정렬] 레이어의 앞 뒤: z축, 모니터랑 어느 게 더 가까운지 여러 객체를 누르고 정렬을 하면 기준과 가장 가까이 있는 객체를 기준으로 삼는다. [오토레이아웃] 오토레이아웃 내에 있는 순서는 단순 레이어랑 반대의 위계를 가짐 [컨스트레인트 Constraints] 부모 컨테이너의 왼쪽, 상단을 기준으로 자식 컨테이너가 움직인다. 오토레이아웃보다 이게 더 헷갈리는 것 같다. *2주차 HW* 주어진 영상과 동일하게 만들어 보기 1~6번 숙제인데 헷갈렸던 건 3번 문제이다. 오토레이아웃 적용이 아닌 부모 컨테이너를 기준으로 어떻게 움직일 건지.. 2024. 1. 3.

티스토리툴바