프로그래밍 & IT/웹디자인 검색 결과

해당 글 8건

인포그래픽 기본 - 빅데이터를 시각화시키는 정보디자인

규모를 가늠할 수 없는 엄청난 양의 빅 데이터 속에서 살고 있다. 많은 양의 정보가 기하급수적으로 증가함에 따라 우리가 소화해야 할 정보도 빠르게 늘어나고 있다.과거에는 사람들과 직접 만나 소통했지만 현재는 온라인 게시판이나 SNS를 통해 의견을 교환한다. 때문에 이러한 사람들 사이의 의사소통 과정이 모두 데이터로 저장되게 된다. 이는 정리가 되지 않은 데이터이고 기존의 정보디자인에 대한 방법들로는 필요한 메시지를 효과적으로 보여주지 못하고, 불필요한 정보들을 걸러내기 쉽지 않다. 따라서 빅데이터 시대에는 데이터를 정리, 분석하여 의미를 찾고 시각화 하는 일들이 주목받게 된다. 데이터 시각화의 정점이라고 할 수 있는 인포그래픽에 대한 기본적은 것들을 공부해 보자. 인포그래픽(InfoGraphic)의 정의..
프로그래밍 & IT/웹디자인 2017. 2. 19. 02:37

호감 가는 웹 사이트 디자인하기 - 웹디자인 원칙

사용성 컨설팅 전문가인 스티브 크룩은 "웹 사이트는 예의를 지켜야 한다" 고 이야기한다.예의 있는 웹 사이트라는 것이 무엇일까? 사이트의 사용자는 일종의 호감 저장고를 가지고 있다고 한다. 그 사람의 성격이나 현재 처한 상황 등에 따라 저장소의 크기와 처음에 비축된 호감의 양은 다를 수 있지만, 모든 사용자는 특정한 웹 사이트를 방문할 때 어느정도 양의 호감을 가지고 접속한다.사이트에서 문제를 마주할 저장고에 비축된 호감의 양은 줄어들 것이다. 저장고의 호감이 바닥나면 그 사이트를 떠나버리거나, 심하면 SNS등에 비방글을 올릴 수 도 있다. 예의 없는 것들로 가득찬 웹페이지는 사용자의 호감 창고를 순식간에 바닥낼 것이다. 웹 사이트에서의 예의란 명료성과 비슷하다고 볼 수 있다.사용자가 보고 있는 것이 무..
프로그래밍 & IT/웹디자인 2017. 2. 11. 19:55

[모바일 웹 디자인] 모바일 앱 사용성

아이폰의 등장과 함께 웹 디자인의 판도가 뒤집혔다. 아이폰 이후 스마트폰이 어마어마한 속도로 확산되기 시작하며, 이제 대부분의 신흥국에까지 확산되었다. PC가 없더라도 스마트폰은 가지고 있는 세상이 온 것이다. 물론 스마트폰 이전에도 휴대전화에서 제공하는 웹 브라우저가 있긴 했따. 하지만 이는 형편 없는 수준이었으며 사용성도 최악이었다. 지금은 PC를 사용해 인터넷에 접속하는 시간보다 모바일 기기를 사용해 접속하는 시간이 훨씬 많다. 단적으로 블로그에 방문하는 사용자의 로그만 봐도 모바일 기기를 통해 방문하는 사용자가 더 많다. 그렇다면 스마트폰의 등장과 웹 사용성이 무슨 관계가 있는 것일까?스마트폰의 브라우저는 이미 PC의 크롬이나 IE만큼의 수준으로 성장했다. HTML5는 물론 대부분의 스크립트 언어..
프로그래밍 & IT/웹디자인 2017. 2. 9. 00:49

[웹디자인 원칙-04] 웹 사용성에 대한 오해와 사용성 평가의 필요성

사용성의 사전적 의미는 이렇다."사용성은 제품이나 서비스 등의 유형, 무형 상품을 사용자가 특정 목적을 달성하기 위해 어느 정도 사용하기 쉬운가를 말하는 용어이다."결국 웹 사용성이란 "사용자가 시스템을 얼마나 얼마나 편리하게 사용할 수 있는가" 에 대한 측면이라고 할 수 있다.특히 최근 웹 사용성은 붐이라고 할 만큼 급격하게 관심이 높아졌다. 화려한 페이지에 화려한 기능이면 만사 오케이었던 예전과는 많이 달라졌다.그만큼 사용성에 대한 오해도 많고 실수도 많이 일어난다. 1. 일반화의 오류 기업에서 웹 어플리케이션을 만들 때, 사용성에 대한 회의가 많아지고 있다. 사용성 회의는 주로 프로젝트 매니저, 마케팅, 개발자, 디자이너가 함께 한다.프로젝트 매니저와 마케팅 담당자, 프로그래머, 디자이너는 각자 살..
프로그래밍 & IT/웹디자인 2017. 2. 4. 19:41

[웹디자인 원칙-03] 웹 네비게이션의 중요성과 디자인 방법

웹 네이게이션의 중요성 "사람들은 사용법을 스스로 알아낼 수 없는 웹 사이트는 사용하지 않는다."위 문장은 부인할 수 없는 사실이다. 모니터를 인터넷으로 구매하려고 한다고 생각해보자. 구글이나 네이버 같은 검색 엔진에 검색을 하고 링크를 따라 쇼핑몰로 이동하게 될 것이다.쇼핑몰로 오긴 했는데 도무지 사용법을 모르겠다. 상품의 상세 정보는 어떻게 볼 수 있으며, 심지어는 뭘 눌러야 구매를 할 수 있는것인지도 모르겠다. 실제 현실에서 쇼핑몰에 들어갔는데 코너를 안내하는 표지도 없고, 직원도 없으며 계산대도 없고 제품이 어딨는지도 못찾는다면 어떨까? 만약 그곳이 인근에 있는 '유일한' 쇼핑몰이라면 어떻게 해서든 찾아 내서 구매를 할지도 모른다.하지만 지금 2017년의 웹 세계에서 가까운 쇼핑몰은 수천 수만개가..
프로그래밍 & IT/웹디자인 2017. 2. 3. 02:46

웹디자인 - 색상설계(먼셀의 색상환)

웹 디자인은 시각적 요소가 가장 중요하다 보니 당연히 색 의 선택은 큰 영향을 줄 수밖에 없다.웹 디자인의 색상설계에 대해 좋은 글을 발견해 공부해 보았다. 먼셀의 20색상환이다. 10색상환도 있지만 크게 개념은 비슷하다. 빨강, 노랑, 초록, 파랑. 보라를 기본으로 20색으로 표현하였으며 각각의 색상이 주는 이미지가 다르다.이 10~20색으로 이루어진 색상환을 이용해 다양한 색상 설계를 할 수 있다. 1. 단색설계 단색설계는 기본색상 하나를 선택한 뒤, 명도를 조절하여 만든 몇 가지 색상을 사용하는 방법이다.특정 색상 자체가 기업 이미지를 상징하거나, 통일성이 필요한 경우 사용하면 효과적이다. 2. 무채색 설계 단색설계에 포함되는 개념이다. 색상환 표에 있는 색상은 아니지만 검정색 / 흰색 / 회색만을..
프로그래밍 & IT/웹디자인 2017. 1. 29. 17:55

[웹디자인 원칙] 훑어보기 좋은 디자인

1. 관례를 이용하라. -> 널리 사용되거나 표준화된 디자인 패턴을 따르라 (ex. 사용자는 로고가 보통 페이지 상단 왼쪽 모서리에 있으리라 생각한다.) !! 혁신적인 결과를 내려면 대체하고자 하는 것이 지닌 가치를 이해해야 한다.- 새로운 아이디어가 더 낫다는 것을 확신할 때 혁신하라. 관례와 달라 보인다고 다 혁신이 아니다!- 명료성이 일관성보다 더 중요하다. 2. 시각적 계층구조를 효과적으로 구성하라. - 더 중요한 부분이 더 눈에 띈다. - 논리적으로 연관된 요소가 시각적으로 연결되어 있다. - 두 요소 간 상/하위 관계가 형성되어 있다면 이를 시각적으로도 보여준다. 3. 페이지의 구역을 또렷하게 구분하라. - 사용자는 페이지의 어떤 부분이 유용할지 한눈에 매우 빠르게 결정한다. (Banner b..
프로그래밍 & IT/웹디자인 2017. 1. 29. 17:55

[웹디자인 원칙] 사용자를 고민에 빠뜨리지 마라!

웹 페이지를 "자명" 하게 만든다 ->내가 만든 사이트에 전혀 관심이 없고, 바로 어제 브라우저의 뒤로 가기 사용법을 알게된 웹 관련 지식이 전혀 없는 지인이 있을 때,그 사람이 내가 만든 홈페이지를 보고 "이게 OO이구나." 알고 할 수 있는 수준. - 내가 지금 어디에 와 있는거지?- 어디서부터 시작해야 하지?- 어디에 입력하는거지?- 이 페이지에서 무엇이 가장 중요하지?- 왜 여기에 이런 이름이 붙었지?- 이건 사이트에서 올린거야? 광고야?- 이건 클릭 가능한건가? -> 명백하게 만들기 어렵다면 최소한 설명을 추가할 필요가 없을 정도로 만들자. 사용자는 우리가 만든 페이지를 시속 95km로 달리는 차 안에서 보는 광고판에 가깝다고 인식한다. 1. 사용자는 웹 페이지를 읽지 않는다. 훑어본다. 사용자..
프로그래밍 & IT/웹디자인 2017. 1. 29. 17:52