Design 썸네일형 리스트형 [Design] 동국대학교 드림패스 웹사이트 리디자인 3차: Dropdown Nav Bar 제작, 가로/세로 Scroll behavior 및 Interactions 적용, Mypage 페이지 분석 중간 발표 단계로써 Home 페이지의 전반적인 외형이 완성되었다. 먼저, 드림패스 Home 페이지의 원래의 모습이다. 다음은 현재까지 제작한 리디자인 작업물이다.앞서 작성한 분석 내용을 거의 모두 반영하였다. '내 정보'를 표시하는 저 블록...이렇게 보니 옅은 회색이 마음에 들지 않는다.하지만 무슨 컬러로 처리해야 할지 고민이다. 그래도 드림패스 웹사이트를 딱 접속했을 때 저렇게 내 정보를 간략하게 확인할 수 있는 점이 마음에 든다.또한, 사이트 접속 시 내 정보 블록이 잘리지 않고 스크롤하지 않은 상태에서 깔끔하게 보일 수 있도록 패딩값을 처리했다. 그리고 중간 발표를 통해 피드백을 받았다. - 원하는 정보가 꽁꽁 숨겨져 있다는 문제 제기에 대한 마땅한 해결책이 보이지 않는다.정확하다... 더보기 [Design] 동국대학교 드림패스 웹사이트 리디자인 2차: 사이트 카피 및 오토레이아웃 적용 왜 이 사이트를 선정했는지, 왜 이 요소를 보완 필요 작업으로 가져가는지,앞서 사이트에 대한 분석을 마쳤으니이제는 기본 틀을 만들어야 한다. 요즘 찾아 보니, 수많은 피그마 플러그인이 존재하던데사이트 링크 첨부 시 해당 사이트를 수정 가능하도록 피그마에 카피해주는귀한 보석 같은 친구도 있었으나,드림패스 사이트 링크를 첨부하니 로그인 페이지까지만 제공한다. 로그인 페이지는 깔끔하다 생각해서, 건드릴 곳도 없다.쓸모가 없어졌다.결국 처음부터 만들고 조립해야 했다. 초반 작업은 스킵하고 이게 지금 당장의 단계이다.이렇게 업로드하지만, 실제로는 꽤 많은 시간이 걸렸다. 코드잇과 인프런 강의 몇 개를 수강하고줄자(Ruler) 기능, 오토레이아웃(Auto layout) 기능, 프레임(Frame) 및 그룹(Gr.. 더보기 [Design] 동국대학교 드림패스 웹사이트 리디자인 1차: 웹사이트 분석 이번 과제는 프로토타입 미니 프로젝트로써 '학교의 여러 전산 서비스 중 하나를 선택하여 이를 개선하는 프로젝트'이다.나는 우리 학교 웹 서비스 중 가장 먼저 이 드림패스 웹사이트가 생각났다. 이 웹사이트를 선정한 이유. 기본적으로 딱 마주했을 때 디자인이 조금 구리다. 그런데도 리디자인이 가능해 보인다.(UI 디자인이 구린데도 리디자인이 불가할 것 같은 매물도 존재하는 것 같다.) 또한, 내가 평소 드림패스 사이트를 이용할 때,드림패스 사이트에서 제공하는 서비스의 양질에 비해 서비스가 꽁꽁 숨겨 있다는 느낌이 들 때가 많았다. 원하는 서비스를 찾는 데 생각보다 시간이 걸리고,사이트 내부에서 황금 같은 서비스를 발견했는데도'이 좋은 게 왜 여기 숨어 있어? 사람들이 발견하기 쉽지 않겠군...'이라고 느낀.. 더보기 [Design] Double Diamond(더블다이아몬드) 4가지 정리 DISCOVER발견인간은 말하고, 생각하고, 행동하고, 느끼는 것이 각각 다르다.고객 분석 중 차이가 크다면행동하는 쪽을 선택하는 것이고객 이해에 대한 정확도가 높아진다. 몰입소비자의 입장이 직접 되어 보는 것. 피상적이면 안 된다.20대 디자이너가 80대 노인의 분장을 하고 일상생활을 해 보았다.임산부를 이해하기 위한 가능한 방법 중에는직접 무거운 짐을 배에 두고일상생활을 해보는 것이 될 수 있다. 섀도잉고객의 해당 상황에 직접 방문하여고객을 뒤따라가며 행동을 관찰하는 것.단계 별로 고객의 행동을 작성하고특이사항을 분석한다. DEFINE1. 발견 단계 결과 종합2. 발상과 컨셉 브리프1) 데이터 패턴: 사용자의 경험과 감정을 중심으로2) 아이디어 발상 도출: 양 > 질3) 컨셉: 하나의 컨셉으로 정의수.. 더보기 [Design] 쿠팡 웹사이트 분석 및 Laws of UX 적용하기 쿠팡 웹사이트가 촌스럽다는 등 타 웹사이트와 비교했을 때 다소 아쉽다는 의견이 분분하다.이에 일전에 학습한 Laws of UX 페이지에 표현된 UX의 핵심 원칙 몇 가지를현 쿠팡 웹사이트를 직접 사용해보며 찾은 일부 요소에 적용해 개선점을 찾아보고자 한다. - 여행/티켓 페이지 - 지역 선택 시 오른편에 나타나는 구글 지도 API 컴포넌트 [ 현재 ]지도상에서 특정 장소를 가리키는 핀 컴포넌트에 마우스를 드래그할 시,해당 핀 컴포넌트가 지도의 정중앙이 되도록 지도가 즉시 이동한다. [ 문제점 ]유저가 지도상에 표시된 여러 개의 핀 컴포넌트 중 단 한 개의 장소를 알아보기 위해마우스를 해당 핀으로 드래그하기만 해도 지도가 즉각적으로 해당 핀이 중심이 되도록 이동한다.이는 다수의 유사한(근접한) 선택지 .. 더보기 [Design] 'Laws of UX' - UX 원칙 정리 HEURISTIC 심미적 사용성 효과 // Aesthetic-Usability Effect유저는 예쁜 디자인을 사용성이 더 좋은 디자인으로 인식한다.심미성: 미적으로 기분 좋은 디자인.이런 디자인은 사람들의 뇌에 긍정적인 반응을 일으키면서 실제로도 그것이 더 잘 작동한다고 믿도록 한다. 유저는 제품이나 서비스의 디자인이 심미적으로 만족스러울 때 사소한 사용성 문제에 더 관대하다. 피츠의 법칙 // Fitt's Law타겟 지점에 달성하는 시간은 타겟까지의 거리와 타겟의 사이즈에 비례한다.T: 동작을 완수하는 데 필요한 평균 시간D: 대상 물체의 중심 지점까지의 거리W: 움직이는 방향을 축으로 하였을때 측정되는 목표물의 폭 접근할 타겟은 유저가 그것을 정확하게 접근할 수 있을 만큼 크기가 충분해야 한다.접근.. 더보기 이전 1 다음
