본문 바로가기

UXUI design

 (33)
[study] 디자인씽킹이란? 📌 디자인씽킹 프로세스를 활용해 음식 배달/외식 시장에 필요한 아이디어를 도출하기  사용자내가 만들 제품을 쓰고 있는 (혹은 쓰게 될) 사용자에게 공감해 봅시다.음식 배달/외식 시장의 주요 사용자는 어떤 사람인가요?문제음식 배달/외식 시장의 사용자는 어떤 문제를 겪고 있나요?어떻게 문제를 발견했고, 왜 문제라고 생각했나요?문제를 해결할 아이디어음식 배달/외식 시장의 사용자의 문제를 해결해 주는 솔루션을 위한 아이디어는 어떤 것들이 있나요?왜 문제를 해결할 수 있을거라 생각하시나요? 디자인 씽킹이란? 사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스를 말한다.    디자이너는 왜 디자인씽킹을 배워야 할까?디자인은 아이디어를 눈에 보이는 것으로 만드는 일이다. 회사에서 일을 한다는..
[Figma] 컨스트레인트, 리사이징의 관계 컨스트레인트 컨스트레인트는 오토레이아웃을 진짜 오토레이아웃으로 만들어주는 기능이다.    부모컨테이너 안에있는 자식 컨테이너를 클릭하면 오른쪽 디자인패널에 다음과같이 되는 것을 확인 할 수 있다. 이 말은  '오른쪽과 위쪽을 기준으로 고정해줘'란 의미다.  파란색 점선이, child 컨테이너가 parent 컨테이너에 가지고 있는 ‘제한’ 즉 컨스트레인트다.  자식컨테이너가 부모컨테이너에 고정되어 움직이는 일종의 핀의 위치를 컨스트레인트라고 한다.  파란점선이 자식컨테이너의 왼쪽과 위쪽에 가있는거 보이시죠. 자식컨테이너는 부모컨테이너의 사이즈가 변할때 부모컨테이너의 왼쪽과 위쪽을 기준으로 고정되어 움직인다는 뜻이다. -> 컨스트레인트는 다른말로 anker라고 할 수도 있다.   즉, 정렬을 사용하는건 부모..
[WIL] 0527 ~ 0531 회고 팀소개 페이지 제작 프로젝트 느낀점 - 무에서 유를 창조하는 디자인 감각이라고 하나, 개인적으로 그 과정이 참 어렵게 느껴졌다.- 팀원들과 소통하면서 합의점을 찾아가는 과정이 꽤 재밌게 느껴졌다. 팀원들이 다 좋은 사람이었기 때문일수도 ....? 나랑 다를뿐 나쁜 사람은 없다! 열린 마음과 수용하는 능력 기르기  - 비교를 멈추고 나만의 감성을 키우고 확장해가는 것이 중요. 4개월동안 많이 보고 만들고 생각하면서 성장하고 싶다.   나의 상태 - 강의의 내용이 매우 기초적인 내용을 다루고 있다는 것은 감각적으로 느껴지지만, 용어가 익숙하지 않고, 부모자식간의 관계나 컨스트레인트 등을 다루는 강의 내용은 이해가 잘 안된다.   적용 - 시중의 많은 제품들을 사옹해보면서 디자인 감각 키우기 - 강의 내용 복..
[미니프로젝트] 팀 소개 페이지 제작 (4) 대격변이 일어났다. 지현님께서 새벽에 잠이 안와 새로운 컨셉의 페이지를 제작해보셨다면서 시안을 보여주셨다. 너무 귀엽다,,,  오늘(5/30)은 팀 소개 페이지 제작(~완성)과 ppt 제작을 했고,모든 일정 후 내일 있을 발표 대본을 준비했다.  다음은 스플래쉬 화면, 시작 화면, 메인 팀소개 페이지와 팀원 소개 페이지다.    다음 이미지는 팀 소개 페이지를 여러가지 버전으로 제작해본 것이다.  우리 팀원들은 짧은 시간이지만, 며칠간 피그마 작업에 몰입하면서떠오른 아이디어를 디자인으로 옮겨내는 작업이 처음보다 빨라지고 뚝딱뚝딱 잘 만들어냈다. ☺︎   만들다 보니, 내용이 부족한 것 같아서 싸이월드를 찾아보던 중, 빠질 수 없는 방명록을 찾게 됐다.  아이디어가 생기면 공유하고, 이를 적극적으로 만들어..
[미니프로젝트] 팀 소개 페이지 제작 (3) 오늘(5/29) 팀소개 페이지 디자인 수정과 프로토타입 연결을 했다. 발표(5/31)때 쓸 ppt를 제작하는 것이 목표였으나, 우리 팀원들은 디자인에 대한 열정이 커서 ppt 제작은 내일의 일로 두었다. 오늘은 수정에 수정을 거치고 기존 페이지에 변화를 주기 위한 새로운 시도도 있었다.  오늘 새롭게 알게 된 내용은 다음과 같다.  ① 하이퍼링크 연결블로그 링크를 이름 옆 네잎클로버에 넣기로 하고, 링크 연결을 했더니  blog에 밑줄이 그어졌다. 알고보니 그 방법은 텍스트 링크 연결이었는데, 구글링을 통해 네잎클로버 자체에 링크를 연결할 수 있는 방법을 찾았다.    개체 클릭 후 ---> 우측 디자인 툴 Prototype 클릭 ---> Interactions 의 + 클릭 --->  None - On ..
[미니프로젝트] 팀 소개 페이지 제작 (2) 오늘(5/28)은 로고 컬러와 폰트를 선정하고, 개별로 생각해온 유저플로우, 와이어프레임, 웹페이지 의견 취합 후 제작했다. 로고 컬러는 럭키비키와 어울리도록 행운의 의미가 있는 초록색을 선정했고, 메인화면 컬러를 함께 고민하면서 두 버전으로 제작했다. 대표 이미지는 네잎클로버이다.  왼 - 의견 종합 / 오 -  취합    취합한 내용을 토대로 와이어프레임과 유저 플로우를 다음과 같이 그렸다.(왼 - 와이어프레임, 오 - 유저플로우)     그리고 마침내 우리는 검정색 배경에 초록색상을 포인트 컬러로 사용하기로 했다.    색상이 정해지고 컨셉이 구체화되면서 수정과 회의를 이어갔다. 메인화면과 팀소개, 팀목표 페이지는 점차 구색을 갖추어 갔는데, 팀원 소개 페이지가 뭔가 부족하게 느껴졌다. 그래서 우리..
[미니프로젝트] 팀 소개 페이지 제작 (1) 오늘(5/27)은 팀원분들과 처음 인사 나누고 주어진 과제에 대한 이야기를 나누었다. 팀 과제는 팀 소개 페이지를 제작하는 것이다.   함께 이야기한 주제는 다음과 같다.   to do list- 팀명 및 컨셉 정하기- 와이어프레임 개별 아이디어 도출 - 조 컨셉에 맞는 레퍼런스 찾기   팀명은 '러키비키'다! 러키비키는 럭키(Lucky)+ 가수 장원영님의 영어 이름(Vicky)를 합성한 단어로, 원영님과 같은 초긍정적 사고방식을 의미한다.    해당 컨셉에 맞게 와이어프레임을 정하는 과정에서 다양한 의견이 나왔는데정리된 의견이 필요하겠다 싶어, 먼저 각자 레퍼런스를 찾고 러프하게 와이어프레임을 만들기로 했다.    나는 핀터레스트와 벨로그에서 레퍼런스를 찾아 정리했다.컨셉은 럭키비키 하우스, 스타일은 ..
[article] 'UXUI 레벨테스트 정리' 분석 출처 https://velog.io/@wns450/UX-UI-%EB%A0%88%EB%B2%A8%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A0%95%EB%A6%AC UX UI 레벨테스트 정리유저 경험을 고려한 UI/UX 기준점들을 정리해보자velog.io 요약 UX/UI 레벨테스트에 직접 참여한 내용을 바탕으로 정리한 아티클이다.  서두 부분에 긴글은 왼쪽 정렬 하는 것이 읽는 사람으로 하여금 편안하게 읽을 수 있도록 한다는 사실을 설명한다. 그 이유는, 우리는 글을 읽을 때 한 글줄을 읽고 자연스럽게 다음 글줄의 시작점을 찾는데, 가운데로 정렬된 글은 글줄의 시작점이 매번 달라져서 피로를 느끼게 한다는 것이다. 그래서 앞으로 블로그는 왼쪽 정렬하여 작성하려 한다. 본 아티클은 유저경험을 어..

티스토리툴바