RealisationA to Z

오늘은 UI 디자인 교과서 제5장 계층과 구조 파트를 요약하고자 한다! 말로만 들어봤지 이론으로 꼭 알아보고 싶었던 파트라 기대가 된다~! 앱/웹사이트 구조는 왜 중요할까? 종이 책과 앱/웹 사이트의 가장 큰 차이점은 링크다! 앱/웹사이트의 경우 입체적인 구조로 이루어져 있어 페이지의 전후가 링크로 연결되어 있다. 이러한 전후 관계를 고려한 내비게이션 디자인이 전체 레이아웃을 통해 반영되기에 구조는 그만큼 중요하다 볼 수 있다. 앱/웹사이트 구조는 어떻게 표현될까? 1. 전후관계 표현 : 비주얼 내비게이션은 이러한 페이지의 관계성이나 전환에 따른 전후 관계를 나타내는 방법중 하나이다. 하단의 애플 공식 홈페이지를 보면 좀 더 쉽게 이해할 수 있다. 상단 헤더에 있는 상품을 선택하면 상품명은 타이틀로 변하..

플로우차트 내 도형은 무엇일까? 여러 플로우차트 사례를 보면 항상 의미를 모르는 도형들이 함께 설계되어 있다. 가장 기본적인 각 도형별 의미와 어떤 상황에 넣어야 하는지 알아보고자 한다. Become a User Flow mapping master with these 10 simple tips in 2023 | User flow, User flow diagram, Flow map As Product Managers, being the central touchpoint between users, your dev team, and the business means we have to navigate the complex interplay between the users’ needs, the available..

색/모양 움직임에 관한 인지 특성 색 : 인간은 색을 빠르게 구별하는 능력을 타고났다. 하지만 색상의 수가 많아질수록 빠른 인지가 불가해져 색의 효과가 줄어들게 된다는 특징이 있다. - 구글의 경우 색을 효과적으로 활용하기위해 무채색 + 소수의 핵심 색깔을 유지한 비주얼 디자인 채택 - 순차적인 요소 파악 - 편리한 카테고리 구분 ex) 녹색으로 가득찬 숲에 빨갛게 익은 과일 모양 : 가시적으로 보았을때 형태가 다를 경우 빠른 구분 가능 ex) 식재료에서 모양이 이상한 불량품 선별 움직임 [움직임의 역할] * 움직임은 단독 / 조합하여 사용이 가능하다 * 움직임을 통해 사용자의 시선을 모으고 선택 가능한 대상인지 인지 가능 주목을 위한 움직임 이해를 위한 움직임 장식을 위한 움직임 ex) 트위터의 하트 ..

앱과 웹의 공통점과 차이점 앱 서비스마다 인터페이스 디자인이 다르다 풍부한 인터랙션 실현 (음성 인식, 모션 인터랙션 등) 설치 조건에 따른 데이터 사용 최소화 가능 터치패널을 통한 다양한 제스처 대응 웹 범용 도구 멀티 디바이스 가능 조작 인터랙션 부족 서비스마다 설치할 필요 없음 소프트웨어 관련 용어 해상도 : 화면이 표시할 수 있는 세밀한 정도 텍스트 텍스트의 경우 이미지화가 아닌 텍스트 그대로 두는 것이 중요! 이를 기반으로 사용자가 복사/붙여 넣기/ 가독성 쉬움 이미지 이미지의 경우 해상도에 대한 대응 중요! svg (백터 이미지는 해상도와 관계없이 가장 적합하게 표시) jpg/gif/png (레스터 데이터 이미지는 해상도 고려 필요) 퍼포먼스 : 조작 대응도 (스피드) 퍼포먼스의 경우 작업 완..

스마트폰, tv, 컴퓨터 등 ui 디자인이 들어가는 디바이스는 상당히 많다. 사용자와의 접점이 가장 많고 물리적인 접촉이 이루어지는 물체이기에 디바이스에 대한 이해가 필요하다. 지금 블로그를 쓰고 있는 티스토리 역시 모바일과 웹사이트의 레이아웃 배치라든지 호버에 따른 반응의 차이가 디바이스에 따라 달라지기에 ui디자인을 하는 사람들이라면 꼭 디바이스별 어떻게 특징이 달라지는지 알아야 한다. 그럼 각 디바이스별 UI 디자인 특성을 알아보도록 하자. 컴퓨터 - 컴퓨터의 가장 큰 특징은 호버가 가능하다는 점! 호버가 가능하기에 클릭 없이 올려놓는 동작으로도 정보를 얻을 수 있다. 커머스 제품 같은 경우 상품의 디테일을 볼 때 이런 호버 기능이 빛을 발휘한다. -세로 스크롤이 가능하다 많은 정보성 글을 부담 없..

UXUI 프로젝트를 진행하면서 대략적인 서비스의 이해, 차별화 포인트를 잡았다면 어떤 방향으로 디자인을 해야 할지 고민할 것이다. 혼자 Pinterest를 찾아가며 콘셉트에 대한 고민이 많았는데 위의 영상을 보며 그 방향을 잡을 수 있었다. Review 작업의 목적을 밝혀야 한다 (백그라운드, 오버뷰) : 이때 자신의 글로 채우는게 아닌 기사만으로 채우는 건 안되고 인용은 어느 정도 하되 해당 시장에서 나의 서비스가 어떤 영역을 차지하고 왜 솔루션을 제시하게 되었는지 이야기하는 것이 좋다 목적을 위한 문제점 해결방법 : 기존 디자인에 문제점을 해결하기 위한 문제점 해결방법 설명 (디자인으로써 문제해결을 어떻게 했는지 알아야한다) 문제해결을 위해 비주얼 표현방법 :비주얼적으로 어떻게 해결을 하려 했는지 형..

UX 개론 (글로벌 기업에서 통하는 UX디자이너의 기본기) Contents Part1. UX 실무를 위한 주요 방법론 1장 '디자인씽킹'으로 디자인을 생각하라 2장 불확실성에 민첩하게 대응하라 3장 '타임 투 마켓'을 단축하라 4장 더욱 빠르게 스프린트하라 Part2. 좋은 제품 디자인하기 5장 사용자의 요구를 충족시켜라 6장 인간의 능력에 맞는 제품을 개발하라 7장 감정을 만들고 이야기를 담아라 Part3 UX는 전략의 중심이다 8장 비즈니스 전략을 이해하라 9장 일관성을 확보하라 10장 기업을 변화시켜라 11장 UX팀의 운영을 위한 가이드 Review 그동안 여러 UX서적들을 읽으며 항상 들었던 의문이 있다. 그래서 어떻게 UX 전략을 짜는 건데? 나의 생각과 달리 대부분의 책들은 UX디자인 입문자들..

1. 경쟁사 3 ~4개 정하기 : 나와 같은 서비스를 운영하는 기업들을 키워드에 따라 검색 및 리서치 진행 2. 사용자가 되어 실제 사용해 보기 : 단순히 UI 디자인만 디테일하게 발견하는 게 아닌 사용자가 되어 내가 만약 유저라면 어떨까라는 생각으로 사용 3. 특정 기능 조사해서 보기 : 계정생성부터 실행단계까지 서비스를 이용해 보며 앱의 메인기능을 사용하고 MVP모델 설계등의 단계 수행 (업로드 방법, 유저 분석 방법 등 각 단계별로 경쟁사를 따로 분석하여 문서화 작업) 4. 경험한 모든 스텝 문서화 : 스크린샷, 노트 테이킹, 비디오 레코드 등 *장점, 단점, 차별화 세 가지 특징 중심 5. 각 프로덕트의 기능비교 : 어떤 기능이 있는지 한눈에 보기 쉽고 추가적 기능을 만드는데 용이

1. 디자이너로서 엔지니어들과 커뮤니케이션을 하는 방법 -> 강의를 듣기 전 내 생각으로는 개발자들과 프로그램을 통해 나름 소통을 한다고 생각했었다. 제플린과 같은 코딩 프로그램을 익히고 전달할 때 소통이 되는 건 아닐까 생각했었는데 강의에 따르면 시각적으로 표현을 주로 하는 디자이너들이 절충해야 하는 부분이 많기 때문에 개발자와 소통 시 작업물을 수정할 것에 수용할 수 있는 태도를 보여야 한다는 것이다. 2. 미래의 ux 디자이너에게 현실적인 조언 -> 현업에서 ux 디자이너는 ui 디자이너와 혼합되어있다. 지금은 디자인뿐만 아니라 + 능력을 요구하는 시대가 되었다. 그렇기에 디자인 백그라운드 이론에 대한 이야기만 하는 게 아닌 어떤 사용자가 디자인을 사용하고 그걸 바탕으로 mvp모델을 만들어내서 가설..

https://www.youtube.com/watch?v=EWDqA5oF3EM lc 공부팁 part 1 그림에 대한 설명으로 맞는 것을 고르면 된다. 모든 그림 옆에 abcd 를 적어놓고 선지 맞는 것을 체크 그림 설명이기때문에 각 인물이 어떤 행동을 하고 있는지 파악 사람이 없다면 어떤 물건이 어디있는지 집중해서 하나씩 ox 동사 진행형 표현에 주의하기 -> 걸고 있다 o 걸려 있다 x 명사 반복적으로 나오는 공간 표현 정리 -> countertop 조리대, railing 난간, waterway 수로, boardwalk 산책로 *part 2 주어진 문장에 알맞은 대답 표를 만들어서 쉽게 마킹 A B C 헷갈릴 때 세모표시를 하는 것을 추천 EX) 우리 무슨 요일에 만날래? 지금 다이어리가 없어 (다이어..