분류 전체보기 (41) 썸네일형 리스트형 심미성과 사용성의 상관 관계 - 심미성은 시대, 국가, 민족, 사회, 유행, 가치관에 따라 다르게 나타난다. - 국가별 선호하는 시각 언어가 다르다. (->보편적인 심미성, 혹은 대상 타겟이 선호하는 심미성을 분석하고 공부하는 과정이 필요한 이유) -사용자는 인터페이스를 대할 때 심미적인 디자인을 더 사용하기 쉬운 것으로 인식한다. -외형은 사용성에 심리적인 영향을 끼치는데, 시각적으로 행복한 상태에 놓이면 문제 해결 능력이 더 좋아진다. (사고의 폭이 넓어지고 창조적 사고가 촉진) -아름다운 것은 신용과 신뢰를 상승시킨다. -시각적인 매력도는 작업에 소요되는 총 시간 비용을 줄이며, 사용성에 문제가 있더라도 심리적으로 더욱 관대해질 가능성이 있다. -첫인상을 결정하는 것은 1초도 안되는 찰나의 시간. 여기에는 색과 형태 등 시각적.. Human Computer Interaction HCI 개론 (김진우, 2012) - 1~2장 1장 HCI와 UX - 최적의 경험을 제공하기 위해 지켜야 할 원칙은? -> 유용성, 사용성, 감성 - HCI : 사람(개인 및 사회)과 컴퓨터(모든 디지털 기기, 서비스 및 컨텐츠)의 상호작용. 모든 일상 속 디지털 사용자 경험. - 과거에 비해 디지털 시스템 사용 대상이 대중이 되었기 때문에, 쉽고 재미있게 사용하도록 만드는 것이 중요해졌다. (전문가는 불편과 어려움을 감수하지만, 일반인은 금방 포기하기 때문) -> 대중성을 위해서는 쉽고, 재미있어야 한다. - 어떤 제품의 성공을 결정하는 것: 새로운 기술의 사용이 아님. 그 기술을 얼마나 유용하고, 편리하고, 재미있게 사용할 수 있도록 만들었는가. (아이폰의 성공 예: 터치스크린 등의 기존 기술을 활용해 사람들이 즐겁고 유용하게 활용할 수 있는 제.. 타이포그라픽 디자인 (얀 치홀트, 1935) 독일의 타이포그래피 디자이너 얀 치홀트 (Jan Tschichold)의 이론서. 편집디자인의 교과서와도 같은 목차. 목차 001. 역사적 고찰 002. 장식적 타이포그래피 003. 신 타이포그라픽의 의미와 목적 004. 활자 005. 순조판과 기계조판 006. 낱말 007. 글줄 008. 글줄에서의 강조 009. 글줄사이 띄기, 글줄길이, 무리짓기 010. 들여짜기와 글줄 끝내기 011. 활자크기, 제목, 활자 섞어쓰기 012. 작은 일 013. 공간 활용 014. 표 015. 줄 016. 색깔 017. 종이 018. 포스터 019. 풍부한 형태 020. 추상 미술 021. 타이포그라픽, 사진, 그림 022. 오늘날의 책 023. 얀 치홀트의 다른 저서 55 본문에서의 강조란, 낱말의 의미를 고려하여 이.. UX디자인 불변의 법칙 (에릭 리스, 2012) 서비스 기획자에게도, 비주얼 디자이너에게도 유용할 UX의 기본. 다만 모바일 시장이 커지기 전에 쓰인 글이어서 예시가 PC 위주의 오래된 것들이 많다. 9 우리가 좌절에 이른 절망의 문제에 부딪히고 나의 소중한 시간의 낭비를 느끼게 되는 것은 적절한 사용성 테스트 없이 출시되는 제품들 때문이다. 36 사용성은 기본적인 의미의 '쉬운 사용' 그 이상의 개념이다. 사용성의 다른 한 면은 '심리적인 요소'이다. 서비스 품질도 사용성의 문제의 일부에 들어간다. 39 소비자들이 더 많은 결정이 필요할수록 사용성의 난이도는 더 어려워진다. ... 심지어 일부 사람들은 이 편의성을 위해서라면 돈을 지불할 의향도 있을 것이다. 77 목표를 이해하고 그것에 계속 집중하라 당신 제품의 목표를 잊어버리는 것은 쉽다. 그 목.. 어포던스 (Affordance) 어포던스 - 의자를 보면 앉고 싶고, 손잡이를 보면 돌리고 싶거나 침대를 보면 눕고 싶어하는 행동들은 어포던스의 대표적인 예라고 할 수 있습니다. 이처럼 어떤 형태나 이미지가 행위를 유도하는 힘을 어포던스(affordance)라고 합니다. 어포던스 디자인 - 어떤 서비스와 시스템을 만들 때, 사용자가 디자인된 물건을 직관적으로 보기만 해도 어떻게 사용할지 짐작해 사용하게끔 하는 것이 어포던스 디자인입니다. - 어포던스 디자인은 물건을 쉽게 쓰도록 인도해주는 장치입니다. - 가장 좋은 디자인은 형태만으로도 정확히 작동 방식을 알려 줍니다. 도널드 노먼은 새로운 사용자가 어떻게 사용법을 알아가기 쉽게 할지에 대해 네 가지의 원리를 제시했습니다. - 이미지들의 선택과 허용 가능한 상호작용 양쪽에서 일반적인 사.. CSS - 3 마우스 커서 상황에 맞는 커서를 사용하면 유저가 현재 처한 상황을 인지하는데에 도움을 줄 수 있습니다. 유저의 인터렉션에 따라 끊임없이 반응하기 때문에, 단순히 재미와 흥미를 돋우는 역할로도 좋아요. cursor: alies / all-scroll / cell / col-resize / copy / crosshair / help / move / none / not-allowed / pointer / progress / text / vertical-text / wait / *-resize *-resize의 경우 *에 (n, nw, w, sw, s, se, e, ne)방향을 입력하면 된다. ex) n-resize, ne-resize 브라우저마다의 지원 여부 확인하기 마우스 속성은 유저가 사용하는 인터넷 브라우저에 따라 .. CSS - 2 테두리 속성 버튼을 만들 때 유용한 박스와 테두리 속성입니다. boder-width: 1px 테두리 두께. 네 개 값 다르게 지정 가능.(상 우 하 좌) boder-style: solid / dotted / dashed / double / groove / ridge / inset / outset / none boder-color: #00a5e5 테두리 색상. 네 개 색상 다르게 지정 가능.(상 우 하 좌) boder: 2px solid #00a5e5 두께, 스타일, 색상 순으로 적용. boder-radius: 2px 모서리 곡률. box-shadow: 2px 2px 2px #00a5e5 그림자 적용. 가로, 세로, 흐림정도, 색상 순. margin: 2px 2px 2px 2px 테두리 밖 너비 padding: 2px.. CSS - 1 글자 속성 외우기 어렵다면 기본 개념과 원리를 우선 이해한 뒤, 족보로 정리해두고 찾아보아요. body｛ font-family: 'Helvetica', serif; font-size: 16px line-height: 1.5 ｝ 기본 폰트 설정은 body에. 속성과 값은 콜론(:)으로 구분하고, 세미콜론(;)으로 마침. 중괄호(｛｝)로 시작과 끝을 지정. font-family, font-size, line-height는 항상 설정해주기. 예시 color : #00a5e5 글자 색상. font-family : '폰트명' / serif / sans-serif 서체를 지정하는 속성. 앞에서부터 차례로 우선순위를 두고 적용한다. 사용자의 컴퓨터에 폰트가 깔려있어야 보이며, serif, sans-serif로 적으면 사용자의 .. 타이포그래피 (에밀 루더, 1967) 스위스의 타이포그래피 디자이너이자 그래픽 디자이너인 에밀 루더(Emil Ruder)가 집필한 편집디자인의 기본이자 고전이라 할 수 있는 책. 20세기에 집필한 활판 인쇄 시대의 책이다 보니 인쇄와 조판 시스템을 베이스로 이야기하고 있다. Garamond나 Bodini 등 클래식한 서체들이 등장. IT 디자이너라면 당장 실무에 적용보다는 편집 디자인의 기본에 대한 교양을 쌓을 목적에서 추천. 18 인쇄가 안 된 흰 여백이 인쇄된 부분의 배경 역할만을 하던 르네상스 시대와 달리 현대의 타이포그래퍼들은 인쇄가 안 된 표면의 빈 여백을 디자인의 한 요소로 인식하고 있다. 40 한 줄에 들어 있는 글자 수는 가독성에 큰 영향을 미친다. ... 새로 시작되는 글줄은 일종의 자극제 역할을 한다. ... 글줄이 너무 .. 구글 앱아이콘 정책 (19년 4월) Google Play의 앱 등록정보용 아이콘 정책과 가이드입니다. (apk런처 아이콘은 별도의 정책을 따라야 합니다.) 최종 크기: 512px x 512px 형식: 32비트 PNG 색상 공간: sRGB 최대 파일 크기: 1,024KB 모양: 정사각형 – Google Play에서 동적으로 마스킹을 처리합니다. 반지름은 아이콘 크기의 20%로 설정됩니다. 그림자: 없음 – Google Play에서 그림자를 동적으로 처리합니다. 아래 '그림자' 섹션에서 아트워크에 그림자를 넣는 방법을 알아보세요. 더욱 자세한 구글의 앱아이콘 정책과 가이드라인을 링크에서 확인하고 제작 템플릿을 다운받으세요. https://developer.android.com/google-play/resources/icon-design-spe.. 이전 1 2 3 4 5 다음
