webdesign 썸네일형 리스트형 [Design] 동국대학교 드림패스 웹사이트 리디자인 3차: Dropdown Nav Bar 제작, 가로/세로 Scroll behavior 및 Interactions 적용, Mypage 페이지 분석 중간 발표 단계로써 Home 페이지의 전반적인 외형이 완성되었다. 먼저, 드림패스 Home 페이지의 원래의 모습이다. 다음은 현재까지 제작한 리디자인 작업물이다.앞서 작성한 분석 내용을 거의 모두 반영하였다. '내 정보'를 표시하는 저 블록...이렇게 보니 옅은 회색이 마음에 들지 않는다.하지만 무슨 컬러로 처리해야 할지 고민이다. 그래도 드림패스 웹사이트를 딱 접속했을 때 저렇게 내 정보를 간략하게 확인할 수 있는 점이 마음에 든다.또한, 사이트 접속 시 내 정보 블록이 잘리지 않고 스크롤하지 않은 상태에서 깔끔하게 보일 수 있도록 패딩값을 처리했다. 그리고 중간 발표를 통해 피드백을 받았다. - 원하는 정보가 꽁꽁 숨겨져 있다는 문제 제기에 대한 마땅한 해결책이 보이지 않는다.정확하다... 더보기 [Design] 동국대학교 드림패스 웹사이트 리디자인 2차: 사이트 카피 및 오토레이아웃 적용 왜 이 사이트를 선정했는지, 왜 이 요소를 보완 필요 작업으로 가져가는지,앞서 사이트에 대한 분석을 마쳤으니이제는 기본 틀을 만들어야 한다. 요즘 찾아 보니, 수많은 피그마 플러그인이 존재하던데사이트 링크 첨부 시 해당 사이트를 수정 가능하도록 피그마에 카피해주는귀한 보석 같은 친구도 있었으나,드림패스 사이트 링크를 첨부하니 로그인 페이지까지만 제공한다. 로그인 페이지는 깔끔하다 생각해서, 건드릴 곳도 없다.쓸모가 없어졌다.결국 처음부터 만들고 조립해야 했다. 초반 작업은 스킵하고 이게 지금 당장의 단계이다.이렇게 업로드하지만, 실제로는 꽤 많은 시간이 걸렸다. 코드잇과 인프런 강의 몇 개를 수강하고줄자(Ruler) 기능, 오토레이아웃(Auto layout) 기능, 프레임(Frame) 및 그룹(Gr.. 더보기 [Design] 동국대학교 드림패스 웹사이트 리디자인 1차: 웹사이트 분석 이번 과제는 프로토타입 미니 프로젝트로써 '학교의 여러 전산 서비스 중 하나를 선택하여 이를 개선하는 프로젝트'이다.나는 우리 학교 웹 서비스 중 가장 먼저 이 드림패스 웹사이트가 생각났다. 이 웹사이트를 선정한 이유. 기본적으로 딱 마주했을 때 디자인이 조금 구리다. 그런데도 리디자인이 가능해 보인다.(UI 디자인이 구린데도 리디자인이 불가할 것 같은 매물도 존재하는 것 같다.) 또한, 내가 평소 드림패스 사이트를 이용할 때,드림패스 사이트에서 제공하는 서비스의 양질에 비해 서비스가 꽁꽁 숨겨 있다는 느낌이 들 때가 많았다. 원하는 서비스를 찾는 데 생각보다 시간이 걸리고,사이트 내부에서 황금 같은 서비스를 발견했는데도'이 좋은 게 왜 여기 숨어 있어? 사람들이 발견하기 쉽지 않겠군...'이라고 느낀.. 더보기 [Design] 쿠팡 웹사이트 분석 및 Laws of UX 적용하기 쿠팡 웹사이트가 촌스럽다는 등 타 웹사이트와 비교했을 때 다소 아쉽다는 의견이 분분하다.이에 일전에 학습한 Laws of UX 페이지에 표현된 UX의 핵심 원칙 몇 가지를현 쿠팡 웹사이트를 직접 사용해보며 찾은 일부 요소에 적용해 개선점을 찾아보고자 한다. - 여행/티켓 페이지 - 지역 선택 시 오른편에 나타나는 구글 지도 API 컴포넌트 [ 현재 ]지도상에서 특정 장소를 가리키는 핀 컴포넌트에 마우스를 드래그할 시,해당 핀 컴포넌트가 지도의 정중앙이 되도록 지도가 즉시 이동한다. [ 문제점 ]유저가 지도상에 표시된 여러 개의 핀 컴포넌트 중 단 한 개의 장소를 알아보기 위해마우스를 해당 핀으로 드래그하기만 해도 지도가 즉각적으로 해당 핀이 중심이 되도록 이동한다.이는 다수의 유사한(근접한) 선택지 .. 더보기 이전 1 다음
