UIUX디자인스쿨 37

[8주차-3] 8dp 디자인과 그리드시스템

1. 1x mdpi 360x640안드로이드의 dp를 기준으로 1배수 mdpi에 보편적으로 사용되는 스탠다드 크기는 360x640이다.그러나 세로의 길이는 콘텐츠의 양에 따라서 스크롤로 조절하기 때문에 우리는 세로 길이는 신경 쓰지 않아도 된다. 스케치나 어도비 xd 또는 피그마 같은 벡터 프로그램을 사용 할 때안드로이드의 기준 크기가 되는 1배수 mdpi의 비율을 그대로 사용하는 것이 권장된다.하지만 비트맵 프로그램인 포토샵에서는 또 이야기가 달라진다.갤럭시s 시리즈와 노트의 크기는 1배수인 경우 모두 넓이가 360인 것을 알 수 있다.그런데 density는 갤럭시 s1을 제외하고는 모두 xxxhdpi다. (xxxhdpi는 mdpi의 3배 크기)360x640 크기의 mdpi를 xxxhdpi로 적용하기 위..

[8주차-2] 포트폴리오 벤치마킹 인프라 구축 / 비핸스 무드보드 보는법

이번 주부터 포트폴리오 작업에 들어가게 되었다.어떤 서비스를 할지 기획하고 벤치마킹할 포트폴리오 인프라를 구축하는 것이 이번 주의 과제였다. 인프라 구축은 UIUX 디자이너들을 팔로우하고 벤치마킹할 포트폴리오의 폴더트리를 만든 뒤왜 그 포트폴리오들을 벤치마킹했는지 적는 것이었다.과정 자체는 쉬웠지만 자존감이 떨어지는 것이 어려웠다..🫠 (간지좔좔 포트폴리오들을 보니까 세상엔 참 천재가 많다 싶었다^_ㅠ)핀터레스트, 인스타그램 등 다양한 채널 중 나는 비핸스를 선택했다.핀터레스트는 일러스트 관련으로 저장해놓은 것들이 많아서 UIUX 포트폴리오까지 저장하면 피드가 망가질 것 같았고인스타그램은 잘 사용하지 않기도 하고 개인적으로 데스크탑 환경을 선호해서 비핸스를 선택하게 되었다. https://www.beh..

[8주차-1] 마이리얼트립 클론디자인 (웹사이트)

클론디자인 3번째, 이번에는 마이리얼트립 웹사이트를 클론디자인 해보았다.그전에 했던 무신사와 마켓컬리는 과제로 주어졌던 것이었고이번주에는 자유주제로 하라고 되어있어서 어떤 서비스를 클론디자인할까 고민하다가최근에 가장 많이 사용했었던 마이리얼트립을 해보기로 했다.(올해 여름의 유럽 여행 경험이 레퍼런스 분석부터 클론디자인까지 영향을 미치고 있다..🤪) 마이리얼트립은 모바일과 데스크톱, 두 기기 모두에서 서비스중이다.왜 앱이 아니고 웹사이트를 클론디자인 했냐 하면, 우선 내가 마이리얼트립을 사용했을 때웹사이트 위주로 많이 사용하기도 했었고그동안은 모바일 앱 위주로 클론디자인을 했었어서, 웹사이트도 클론디자인을 해보고 싶어서웹사이트 클론디자인을 진행하게 되었다. 그런데 클론디자인을 진행하면서... 굉장히 거..

레퍼런스 분석 8주차 [캐치테이블]

0. About 캐치테이블 맛집 예약부터 웨이팅까지 한 번에, 쉽게!캐치테이블로 즐거운 미식 생활을 시작하세요. 캐치테이블은 식당 예약 서비스를 제공하는 플랫폼이다.위치, 음식 종류, 가격대 등을 기준으로 식당을 검색하고, 간편하게 실시간으로 예약을 할 수 있다.이 외에도 캐치테이블은 고객 리뷰나 평가를 제공하고, 일부 식당에서는 미리 결제나 할인 혜택을 제공하는 경우도 있다.2021 구글 올해를 빛낸 앱 선정 및 2022 앱스토어 오늘의 앱 선정 등 많은 사람들에게 사랑받고 있는 서비스다.    1. 화면 구성 분석  1) 홈 (메인화면)  ① Header [검색] [북마크(마이페이지)] [알림] [검색] Input에는 '흑백요리사를 검색해보세요!'와 같이 검색 키워드 추천 Placeholder를 보여..

[7주차-3] 그룹 프로젝트 마무리!

마참내 약 한 달 가량의 그룹 프로젝트의 마무리를 지었다!   초반에는 UX 리서치도 처음이고, 그룹 프로젝트에 부담감도 많이 느꼈어서사막에서 바늘을 찾는 듯한 부담감이 느껴졌었다.중간에 우여곡절도 많았지만 UX 리서치도 처음하는 것 치곤 나름 잘 된 것 같았고와이어프레임 및 프로토타입도 잘 나온 것 같아서, 바늘을 찾는 데 성공한 것 같은 기분이 들었다!ㅎㅎ 이제 곧 있을 포트폴리오 작업에도 이번 경험이 아주 큰 자양분이 되지 않을까 한다.물론 팀원들 없이 나혼자 시작하려면 또 어버버 하고 감을 못잡을 수도 있을 것 같긴 한데..ㅋㅋ그래도 경험이 있고 없고의 차이는 크니까! 그룹프로젝트 시작 이후로 강의랑 개인 공부도 좀 소홀해졌는데이제 다시 강의도 열심히 듣고 공부를 시작해야겠다..👀

[7주차-2] 디자인 시스템의 유형

디자인 시스템을 구축하는 데는 두 가지 유형의 정보가 포함될 수 있다.첫 번째는 기업의 미션, 비전, 타겟 사용자 그리고 브랜드 핵심 가치를 통해서 명확한 브랜드 아이덴티티를 수립하는 것두 번째는 로고, 컬러, 타이퍼 그래피와 같이 아이덴티티 구성 요소에 대한 디자인 스타일 가이드를 통해서 비주얼 아이덴티티 지침을 수립하는 것이렇게 두 가지의 디자인 시스템 유형 중에 디자인 스타일 가이드는 후자인 비주얼 아이덴티티에 더 포커싱된다. 1. 브랜드 아이덴티티브랜드 아이덴티티는 기업이 사용자와 소통하고 경쟁사와 차별화할 수 있도록 브랜드 경험을 만드는 방법이다.또한 기업이 가지는 성격을 병합한 방향으로 설정을 해두면 모든 팀과 채널에 걸쳐서 일관된 방식으로 소통할 수 있게 도와준다.브랜드가 지지하는 바는 무엇..

레퍼런스 분석 7주차 [스포티파이]

0. About 스포티파이 스포티파이는 스웨덴의 세계 최대 음원 스트리밍 플랫폼으로음악 스트리밍 점유율 30% 이상을 차지하며 현대의 세계 음악 시장을 주도하는 앱 중 하나로 평가되고 있다.2006년 스웨덴의 작은 스타트업으로 시작되었으며 이름의 뜻은 spot과 identify의 합성어로이용자들의 음악 취향을 적극 반영해 좋아할 만한 음악을 제공해 주겠다는 의미를 담고 있으며,광고를 기반으로 한 무료 스트리밍 서비스를 제공한다는 가장 큰 특징이 있다.    1. 화면 구성 분석  1) 홈 (메인화면)  홈 화면 상단에 [프로필]  [전체] [음악] [팟캐스트] 4개의 카테고리로 구분된 버튼이 있다.내 핸드폰은 라이트모드임에도 불구하고 스포티파이는 검정색 배경의 다크모드 디자인만을 지원하고 있다.버튼이 활..

[7주차-1] 마켓컬리 클론디자인

6주차 무신사 클론디자인에 이어 7주차에는 마켓컬리 클론디자인을 하게 되었다.https://cy79.tistory.com/51 [6주차-3] 무신사 클론디자인6주차부터 여러 서비스를 클론디자인하는 과제가 주어졌다.이번주는 무신사를 클론디자인 해야 했다. 클론디자인 과제를 하면서 이미지 영역을 채울 땐 Unsplash 플러그 인을 사용했다.https://www.fcy79.tistory.com 무신사 클론디자인을 했을 때 폰트때문에 꽤 애를 먹었었는데마켓컬리는 무신사보다는 폰트 분석이 쉬웠다.여기서 폰트 분석 팁을 주자면, 'ㅈ'자와 'ㅎ'자 위주로 구분하면 쉽다.   나눔바른고딕의 'ㅈ'은 'ㄱ'에 획추가한 듯한 모양이고 'ㅎ'의 모자(?)부분이 평행하다.애플산돌고딕의 'ㅈ'은 좌우대칭 모양이고 'ㅎ'은 ..

[6주차-3] 무신사 클론디자인

6주차부터 여러 서비스를 클론디자인하는 과제가 주어졌다.이번주는 무신사를 클론디자인 해야 했다. 클론디자인 과제를 하면서 이미지 영역을 채울 땐 Unsplash 플러그 인을 사용했다.https://www.figma.com/community/plugin/738454987945972471/unsplash클론디자인 시 폰트까지 무조건 똑같이 할 필요는 없다고 생각해서 대부분은 내 최애 폰트인 프리텐다드를 사용하긴 하지만이번 클론디자인을 할 때는 폰트도 유의하면서 진행했다.폰트가 다운로드 받을 수 있는 폰트인지, 시스템 폰트인지 서치하는 과정에서 시간이 많이 소요되었다.검색해보니 무신사는 자체적으로 서체를 만들어서 사용하고 있었다. 그 외의 폰트는 나눔바른고딕과 프리텐다드, 그리고 정체모를 폰트(?)로 구분할 ..

[6주차-2] 플로우차트

플로우 차트란? https://brunch.co.kr/@b30afb04c9f54dc/25 유저플로우(User Flow) 그리는 방법유저님, 어디로 가시나이까- | 지난 유저 스토리, 유저 시나리오에 이어 두 번째 공부할 내용은 바로 유저 플로우(User Flow)이다. (기획엔 참으로 유저 들어가는 내용이 많다... ㅎㅎ) https://brunch.co.kbrunch.co.kr https://brunch.co.kr/@bc97281a20374ce/7 기획과 서비스의 User Flow나의 플로우차트(Flow Chart) 활용법 | 다음글: PM의 랜딩페이지 기획 Intro 신규 프로젝트를 기획하는 과정에서 플로우 차트의 중요성을 체감한 경험이 있습니다. 신규 서비스 기획 초기에 서비스를brunch.co.k..