Research
App design Guide : 앱 디자인 작업 시작 준비물(?)
App design Guide : 앱 디자인 작업 시작 준비물(?)
2020.06.22앱 디자인에 필요한 작업. 앱 아이콘 화면 디자인 앱스토어 스크린샷 SNS 커버/프로필 웹사이트 랜딩 페이지 * ui 디자인 버튼의 상태 normal / highlighted / selected / disabled 버튼 이미지 뒤에는 _n / _h / _s / _d * 앱 화면 실행시에 부드럽게 연결하기 위해서 런치 이미지를 넣는다. (런치이미지에는 비활성화된 컨텐츠상태이며, 앱 아이콘이나 BI를 넣는것이 대부분이다.) *PPP (Pixel Perfect Principles) - 참고 사이트 및 교과서서 * 앱 아이콘 1024 X 1024 px http://daramghaus.com/icontester/mask iOS_mask.zip Dropbox를 통해 공유함 www.dropbox.com - 이전에 블..
UI guide : 시간 표기법
UI guide : 시간 표기법
2020.06.2212시간 마감 시간 표기하는 방법 12시 대신 그에 약간 못미치는 시간으로 표기하면 된다. 30분이나 1분을 앒당겨 오후 11시 59분으로 표기해도 사용자에게 명확한 날짜와 시간을 전달할 수 있다. 생활패턴을 기준으로 시간을 표기하는 방법 생활 패턴에 따른 자연스러운 인지를 이용하여 표기해주는 게 때로는 정확한 시간보다도 더 정확하게 느껴지는데 이 예시로는 영화관 시간표가 있다. 영화시간표는 오늘 날짜에 25:30 분으로 적혀있는 것은 분명 존재할 수 없고, 이해하기도 어려운 시간이지만 우리는 이것을 보고 다음날 새벽이라고 정확한 표기보다도 더 정확하게 이해할 수 잇다. 영화 예매처럼 영업일과 예약 시간 등이 필요한 서비스라면 충분히 창조할만한 UI 텍스트이다. 낮과 밤, 그리고 새벽 등으로 시간 표기하..
iPhone X : Designing for iPhone X
iPhone X : Designing for iPhone X
2020.06.22아이폰 X 디자인에 관련된 영상 UX/UI 디자이너라면 무조건 봐야함 친한 개발자가 사이트 주소 줌 https://developer.apple.com/videos/play/fall2017/801/ Designing for iPhone X - Tech Talks - Videos - Apple Developer iPhone X features an all-screen Super Retina display, providing more space to display content and create deeply immersive experiences... developer.apple.com Designing for iPhone X - Fall 2017 - Videos - Apple Developer iPhone..
iOS : Apple UI Design Resources
iOS : Apple UI Design Resources
2020.06.22애플 정품 리소스 Design apps quickly by using Photoshop and Sketch templates, plug-ins, and other preconfigured UI elements. https://developer.apple.com/design/resources/#ios-apps%EF%BB%BF Apple Design Resources Design apps quickly by using Sketch and Photoshop templates, plug-ins, and preconfigured UI elements. developer.apple.com
구글 고객센터 : 앱 유료 및 무료 설정
구글 고객센터 : 앱 유료 및 무료 설정
2020.06.22Android 에서 앱을 유료로 설정할지 무료로 설정할지에 대해 고민하던 도중 필요한 페이지를 찾았다. 공유공유 https://support.google.com/googleplay/android-developer/answer/6334373?hl=ko 가격 및 앱 배포 설정 - Play Console 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com
UI : 아이콘에 제대로 된 이름 붙여주기
UI : 아이콘에 제대로 된 이름 붙여주기
2020.06.22이건 신입 디자이너가 봐야해. 아니 경력직도 봐야해.. ㅠ_ㅠ 이런 룰이 있을 줄이야. 너무 늦게 알아버렸다. 회사마다 쓰임새가 너무 다르니깐;; asset type - namespace - asset name - add a qualifier .png direction - shape - outline - status - color - size. png direction - right, left, up, down, back, less more, horiz, vert, portait, landscape shape - square outline - outline, border status - normal, pressed, focused, disabled, selected / bla..
스케치에서 피그마로 디자인 시스템 전환 Transitioning our Design System from Sketch to Figma
스케치에서 피그마로 디자인 시스템 전환 Transitioning our Design System from Sketch to Figma
2020.06.22본문: https://medium.com/servicetitan-design/transitioning-our-design-system-from-sketch-to-figma-ae46b04cbdd1 (중략) 우리는 Invision, Sketch에서 figma로 툴을 변경하는 것으로 결정하였습니다. 설계 시스템을 통해 누굴 지원하나? ServiceTitan은 클라우드 기반 소프트웨어 플랫폼입니다. 회사에서 다루는 업종에는 배관, HVAC, 전기 기술자 및 기타 많은 기술 무역이 포함됩니다. 플랫폼의 범위는 방대하여 전화 서비스, 파견 근로자, 재고 관리, 마케팅 및 기타 많은 제품군과 같은 비즈니스 기능을 위한 제품을 제공합니다. ServiceTitan은 비교적 신생 기업이지만, 많은 제품 디자이너를 고용할 ..
png, jpg 이미지 용량 줄이는 방법 세 가지
png, jpg 이미지 용량 줄이는 방법 세 가지
2020.06.191. Compressor 개인적으로 추천한다. 거의 70% 압축해줌 https://compressor.io/compress Compressor.io - optimize and compress JPEG photos and PNG images compressor.io Compressor.io - optimize and compress JPEG photos and PNG images Compress and optimize your images Up to 90% file size reduction Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a ..
심리학UX : 본 레스토프 효과
심리학UX : 본 레스토프 효과
2020.06.12중요한 정보는 다른 것과 다르게, 눈에 띄게 표시하자. 고독 효과라고도 알려져 있는 본 레프토프 효과는 여러 물체가 함께 잇을 때, 우리는 다른 것 하나만 기억하는 경향이 있음을 의미하는 것이다. 반대의 경우에도 적용된다. : 다른 것보다 덜 튀는 물체들은 덜 기억되는 경향이 있다. 우리는 치명적인 요소들을 만들고 중요한 정보를 사이즈, 컬러, 위치, 모양 등을 조절함으로써 시각적으로 구별시켜야 한다. 드롭 박스의 결제 페이지는 본레스토프 효과가 소비자에게 얼마나 영향력이 있는지를 보여주는 가장 중요한 사례이다. 그들은 주력상품을 시각적으로 구별되도록 만들었다. 이러한 시각적 대조 없으면, 보는 사람이 화면의 텍스트를 보았을 때 무엇을 먼저 보아야 하는지 명확한 디렉션을 받을 수 없다. 반면 시각적 대조..
심리학UX : 듀얼 코딩 이론
심리학UX : 듀얼 코딩 이론
2020.06.12텍스트 + 이미지를 적절하게 섞어 함께 사용하자. 1971년 allan paivio에 의해 창시된 듀얼 코딩 이론은 정보를 전달할 때, 언어와 비언어적 요소를 함께 쓰는 것이 기억하기에 더 용이함을 의미한다. 이 이론은 우리 머리속에 언어정보가 비언어 정보와 서로 다른 인지 시스템으로 처리되며, 두 시스템을 활용하여 정보를 전달하는 것은 독자로 하여금 정보를 정확하게 인식할 수 있게 한다는 생각을 바탕으로 한다. 우리가 이 이론에 배울 수 있는 것은 심플하다. 이해와 기억을 전제로 하는 작업이라면, 보충 설명하는 텍스트와 관련된 이미지 넣기. 여기서 중요한 것은 "관련된"이다. 추상적인 디자인 요소를 사용해서는 안 된다는 말이다. 이해력을 높일 수 있는 의미있는 시각적인 그래프나 도표여야만 한다. 인포그..
심리학UX : Serial position Effect 서열 위치 효과
심리학UX : Serial position Effect 서열 위치 효과
2020.06.12중요한 요소는 처음과 끝에 배치하자. 서열 위치 효과는 리스트의 처음과 끝에 있는 요소가 중간에 있는 것보다 기억하기 쉽다는 의미이다. 리스트의 처음에 있는 요소들은 장기 기억 (중요한 효과)에 저장될 확률이 높고, 반면 마지막에 있는 요소들은 단기 기억 (최신 효과)에 새롭게 다가가는 경향이 있다. 이는 특히 디자인 프레젠테이션, 레포트 또는 부수적으로 학습해야 할 요소들과 관련이 있다. 우리가 프레젠테이션의 마지막을 요약하는 슬라이드로 마무리하는 것과 긴 글의 블로그 아티클에 결론이 매우 중요한 이유도 이 때문이다. 물론 웹 디자인 심리학과 관련이 있다. 중요한 네비게이션 요소는 보는 사람이 기억하고 찾기 쉽도록 네비게이션 바로부터 먼 왼쪽, 혹은 오른쪽에 위치해야 한다.
심리학UX : Centre-stage effect 핵심 위치 효과
심리학UX : Centre-stage effect 핵심 위치 효과
2020.06.12중요한 요소는 가운데에 위치하자. 핵심 위치 효과는 비슷한 요소들의 배열을 제공할 때, 우리는 중앙에 있는 하나를 선호하는 경향이 높다는 의미이다. 이는 소비자가 판매자가 가장 인기 있는 제품을 리스트 중양에 배치한다고 가정하다는 생각과 같다. 그리고 이 생각은 핵심 위치 효과와 일맥상통한다. 이유야 어쨋든, 이는 우리가 제품 판매를 띄어야 할 때마다 고려해야 하는 것이다. 예를 들어 여러 개의 제품이 함께 등장하는 제품 사진은 "중앙에 있는 제품 하나와 그 주변의 것들"로 이루어져야 한다. E- 커머스 플랫폼 역시 핵심 위치 효과를 염두에 두고 디자인 할 수 있다. 당신은 어쩌면 단지 특정 제품을 중앙에 놓는 것만으로도 판매 증진을 기대할 수 있다.