목록본캠프 (63)
UI/UX 공부기록

10/29 일일 목표📝 디자인 카타 '랜딩페이지'피그마 3~6주차 강의듣기 📖 오늘 배운 내용 디자인 카타에서 랜딩페이지에 대해 발표하고, 튜터님의 설명을 듣게되었다.다른 사람들이 찾아온 랜딩페이지들을 보니, 좋은 예시든 나쁜 예시이든 공부하기 좋은 것 같다. 랜딩페이지어떠한 상품이나 서비스를 홍보하는 목적의 제작물깔끔한 디자인을 유지하는 것이 사용자의 목적의 명확성을 높이는데 중요 랜딩페이지 메인, 즉 히어로섹션에는 목적이 정확한 한가지를 유도하는 것들이 설명되어 있는 반면, 홈페이지 내에서는 홍보를 위한 여러가지 배너들을 붙여놓는 섹션을 메인에 늘어 놓은 것을 볼 수 있다. 랜딩페이지의 목적에 따라 왼쪽 사진처럼 버튼으로 사용자들을 신청, 구독을 유도할 수 있고 오른쪽 사진에 있는 예시들..

10/28 일일 목표📝 새로운 팀과 인사하기피그마 1~3주차 강의듣기 📖 오늘 배운 내용 처음으로 시작한 디자인카타 28~29일 디자인 카타 주제는 랜딩페이지에 대한 조사였다. 랜딩페이지란?소비자가 검색 엔진 혹은 웹/앱의 광고를 통해 도달하는 페이지이기 때문에 착륙이라는 뜻의 랜딩(Landing)을 붙여 사용사용자가 하이퍼링크를 클릭했을 때 사용자 에게 제일 처음 보여주고 싶은 페이지방문자에게 제품 구입, 회원 가입과 같은 특정한 액션을 유도하는 페이지 랜딩페이지와 홈페이지의 구분이 내가 알고 있던 것과 조금 차이가 있던 것 같아서 흥미로웠다.여러 랜딩페이지를 찾아보면서, 약간은 정의가 된 것 같다.랜딩페이지는 제품 홍보나, 제품 가입유도 등 한페이지에 설명을 넣고 목적이 있는 페이지인 것 같다..

10/25 일일 목표📝강의 복습할 부분 듣기프로젝트 발표프로젝트 추가 수정 📝1주차를 돌아보는 WIL 지난 일주일 동안 가장 인상 깊었던 배움에는 뭐가 있었지?드디어 프로젝트 발표날, 발표를 마치고 튜터님께서 피드백을 해주셨다. 1.앞으로는 우리가 왜 이런 컨셉의 웹사이트를 디자인한걸 자세히 공유 2.조금더 디테일한 디자인요소 3.디자인 가이드를 폰트나 색체외에도 제작 (그외 글자 크기나, 자간 등) 4.바디폰트가 작음 (본문글) 5.줄간격이 타이트해서 가독성이살짝 안좋음 (레퍼런스를 여러개 봐서 가독성이 좋은걸 보편적인걸 확인하고 디자인을 하기) 요 피드백을 참고하여, 다시 팀원들과 상의하여 줄간격과, 폰트크기를 수정하였다. 다시 튜터님께 가니, 아직은 UI 에 대해서 많이 모르기 때문에 레퍼런..

10/24 일일 목표📝 팀 프로젝트튜터님들과의 질의응답 📖 오늘 배운 내용 오늘은 드디어 팀 프로젝트 마지막날, 최종 수정을 하기 위해서 모였다.... 어제 튜터님께서 해주신 피드백으로, 약간 우리 팀의 컨셉인 여행, 발자국으로 성장한다. 는 느낌이 너무 없어서 그 부분을 한번 수정해보았다. 팀원분들이 다들 괜찮다고 하셔서 결과적으로 넣게되었다.... 다행....😂 그리고 마지막 깃발이 너무 맘에 드는 것이 없어서 말씀드렸더니 같은 팀인 재경님께서 많이 찾아와 주셔서 같이 해결했다!!! 팀원들과 같이 소통하면서 마지막을 장식한 깃발아이콘.. 만족스럽다. 발표 자료를 만들다가 발표자 사다리 타기를 했는데 내가 당첨됐다.내가 발표라니.. 내가 발표라니.. 너무 떨린다......😳그래도..

10/23 일일 목표📝 3주차 강의 다시듣기팀 프로젝트튜터님들과의 질의응답 📖 오늘 배운 내용! 팀원들과 다시 한번 수정해서 확인하는 시간을 가졌다. 우선 메인부분 약간의 피드백으로 위에 컨텐츠 가이드를 잡고 윗 줄의 컨텐츠 간격을 수정하였다. 수정하고, 다음 발자국 느낌을 내려고 넣었는데 선이 너무 애매한 기분이 들어서 팀원분들의 피드백을 받고 나서 완성본 쓸데없는 선을 빼고 그냥 발자국만 넣으니까 깔끔하고 괜찮은 것 같다. 만족! 수정의 수정의 수정을 거쳐 튜터님의 피드백을 받으니, 각오페이지에 두명을 보여주는 것이 의도된 바가 있는지.....역시 디자인을 할때는 왜 그런식으로 디자인했는지 뒷받침하는 근거! 가 필요하다는 점을 느꼈다.보기에만 예뻐보인다고 좋은 디자인이 아닌걸 ,,, 우..

10/22 일일 목표📝 3주차 강의 다시듣기팀 프로젝트 📖 오늘 배운 내용! 팀 프로젝트로 같이 레이아웃을 완성하고 디자인에 들어갔다. 레이아웃을 정하고 튜터님께 한번 물어보러 갔더니, 양쪽 여백을 신경써야 한다고 말씀해주셨다.데스크탑 스크린 해상도 192x1080이 독보적으로 많이 쓰이지만, 더 작은 해상도도 신경써야한다.1920 디스플레이로 제작하면, 반응형 디자인이기 때문에, 작은 맥북에서는 잘려 보일 수 있다! https://designbase.co.kr/sketch-4/ 반응형 웹디자인을 위한 최적화된 그리드 시스템 – 스케치 강좌 | 디자인베이스스케치 강좌 네 번째입니다. 반응형 웹디자인을 위한 최적화된 그리드 만들기를 해보겠습니다. 크게 4가지가 있습니다. 최대폭(max-width)..

10/21 일일 목표📝 OT듣기팀원노션 만들기프로젝트 상의 📖 오늘 배운 내용! 첫 팀 프로젝트를 위해서 서로 컨셉과 레이아웃을 정함 서로 주제에 대해서 떠오르는 내용들을 브레인스토밍해서 모은 다음, 팀 소개 프로젝트 컨셉을 결정했다. 😂 서로 레퍼런스를 찾고 레이아웃을 만들어옴 각자 어떤 레이아웃을 하고 싶은지 만들어 와서 이야기 하는 시간들이 좋았다. 👩🏫 오늘 진행하며 어려웠던 부분 본캠프 첫날이어서 처음 만나는 팀원들과 서로 낯가려서 말꺼내기가 어려웠다. 그리고 첫 프로젝트여서 어떻게 해나가야 하는지 정해진게 없어 조금 버벅거렸다.소통하는 부분에 있어서 조금 더 노력해야겠다.. 👀 어려웠던 부분을 어떻게 해결했을까? 처음에 낯설었지만 그래도 OT빼고 거의 9시간 정..