웹 페이지를 통해 두 가지 상품이나 서비스 이미지를 비교하거나 차이점을 강조해서 보여주고자 할 때, 일반적으로 좌.우 또는 상.하 배치를 통해 보여주거나 페이지 전환을 통해 보여주는 경우가 많다.이런 방법은 레이아웃 유지, 공간 제약, 직관성이 떨어져 효율성이 다소 떨어지는 점이 없지 않았다. 물론 다양한 방법의 diff도구들이 적용되고 있지만 보다 사용자 중심 시각적인 도구는 쉽게 접하기 어려웠다.시각적인 diff도구 TwentyTwenty는 두 이미지의 시각적인 차이를 강조하거나 효과적으로 보여주고자 할 때 유용한 방법이 될 수 있다.두 이미지의 이전과 이후를 한 화면, 특정 레이아웃에서 스와이프를 통해 직관적으로 보여준다. 두 개의 이미지를 쌓아서 동작하며, 슬라이더를 이동하면 CSS clip 속성..

Design Information/HTML5 and CSS3 2018. 5. 23. 07:41

브랜드나 서비스의 히스토리를 연도별, 월별로 한눈에 볼 수 있도록 시각화한 타임라인은 고객이나 방문자에게 쉬운 이해와 신뢰도를 높이는 데 효과적이다.최근 들어 온. 오프라인 국한하지 않고 연감(Annual)이나 웹사이트에 활용하는 사례가 많아지고 있다.특히 웹 기반 타임라인은 기업이나 단체를 비롯해 개인 포트폴리오 구성에도 활용하여 퍼스널 브랜드 가치를 높이는데 적지 않은 도움을 주고 있다.이 글을 통해 소개하는 58가지 CSS 기반 타임라인 예제들은 데모 및 코드 페이지를 통해 HTML/CSS/JS 3가지 필수 리소스를 제공하고 있어 웹에 대한 기본적인 이해도가 있는 누구든지 손쉽게 활용할 수 있다.또한, 58가지 CSS Timelines 는 구현 이미지와 더불어 가로 모드와 세로 모드를 나누어 소개하..

Design Information/Design Resources 2018. 4. 18. 19:11

팬택 스카이는 최근 시리우스, 이자르에 이어 3번째 안드로이드 스마트폰인 베가를 선보였다. 베가는 출시 전부터 기대감을 갖게 할 만큼 예비 사용자들과 얼리어답터 사이에서 나름 좋은 반응을 얻고 있었던 모델이기도 하다. 현재도 TV광고를 통해 베가의 뛰어남을 강조하듯 '신의 질투를 부르는 스마트폰'이라는 콘셉트로 카리스마 강한 정우성과 차승원을 내세워 전면적인 광고를 앞세우면서 소비자의 마음을 유혹하고 있다 팬택 스카이의 3번째 안드로이드 스마트폰 베가를 직접 만져보고 사용해 본 체험을 바탕으로 간략하게 제품의 디자인과 매력적인 요소에 대해 정리해 본다. 팬택 스카이 베가(Vega)의 디자인 우선 베가폰의 매력은 디스플레이를 고려한 좁은 베젤(Narrow Bezel)이 돋보였고 할 수 있겠다. 작은 배려일..

Digital News/Review and Column 2010. 10. 27. 16:31

어도비 Kuler는 색상의 조화 및 창조하고 공유하는 사이트입니다. Kuler 탐구팀이 연구를 통해 'Pulse'라는 새로운 기능을 업데이트 시켰습니다. 커뮤니티 펄스(Pulse) 현재 베타 기능이지만, 국가별 컬러 샘플링을 통해 색상 데이터의 상대적인 인기도를 시각화로 보여주고, 계절별 그리고 태그별로 분류하고 있어 색상적용에 큰 도움을 줍니다. 어도비 Kuler Pulse를 이용하는 방법은 kuler.adobe.com에 접속 후 자신의 Adobe ID로 로그인하면 히스토그램에 마우스를 올려 컬러 휠의 색상정보들을 볼 수 있습니다. 많은 색상 또는 적은 색상의 자세한 정보를 보려면 하단의 세분 슬라이드를 사용하면 됩니다. 명암을 비교하기 위해서는 2개의 동그라미가 겹쳐진 비교 아이콘을 사용하면 됩니다.

Digital News/Gadget and Apps 2009. 1. 12. 05:30