디자인 (20) 썸네일형 리스트형 [UI/UX] Flat 하지만 세련되게 요즘 유행하고 있는 Flat 한 디자인들입니다. FLAT 1. 평평한, 편평한 2. 평평한, 평지인 3. 고른, 반반한 'Flat' 하지만 세련되게 하는 것이 참 쉽지 않은 일인데... 경험상으론 자료만 줄창 찾아서 응용하지 못하고 마는 것보다는 몇가지 적용할 만한 디자인을 찾아보고 나의 스타일을 만들어가는 것이 바람직한 듯 합니다. 최근 저의 작업도 비슷한 일이 있어 관련 디자인 소스를 찾아봅니다. [web] 깔끔한 페이퍼 컨셉 [web] 페이퍼 컨셉 http://www.wishbonedesign.com/ 요즘은 사이트가 살짝 바뀐듯 한데 여전히 깔끔한 페이퍼 컨셉이 숨어있다. 현재는 아래의 느낌 [web] 아기자기 일러스트 cheestrings [web] 아기자기 일러스트 cheestrings http://www.cheestrings.co.uk/ 주로 일러스트 느낌을 선호하는 cheestrings의 프로모션 사이트였던 것 같다. [web] 비비드컬러 saltfilms [web] 비비드컬러 saltfilms http://www.saltfilms.com.sg/ 깔끔한 벡터 일러스트에 재미있는 인터렉션과 감각적인 색감의 사이트 캡쳐되어 있는 이미지의 손으로 클릭을 하기 때문에 클릭이 조금 어렵다. [web] 그리드 시스템의 이해 [web] 그리드 시스템의 이해 기본적으로 나는 전문적인 웹 디자이너는 아니지만 it업계에서 오래 일을 하다보니 잡스러워져 가끔 웹 디자인 부탁을 받곤 한다. 그럴때마다 '각 컨테츠의 간격을 얼마나 두어야 보기 좋고 안정적인 디자인인가? ' '최대 가로 사이즈를 변환할 수 있게 할 것인가?' '고정으로 간다면 어느정도의 크기로 정해야 하는가?' 하는 문제로 고민하곤 했는데 이럴때 아주 기초적인 그리드 시스템을 사용하면 편리하다. 실제로 네이버 다음 등 대형 포탈 사이트에서는 이 그리드 시스템을 기본으로 디자인 되어 있다. 960 Grid system 960 12 컬럼 그리드 시스템 컨텐츠 영역은 940px로 좌우 10px씩의 여백, 각 컬럼은 60px, 컬럼의 간격은 20px로 설정하여 컨텐츠를 배치하는.. [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 1. 라이트 박스(Light Box) 팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라고 할 수 있습니다. 일반적인 팝업과 다른 점은, 박스를 해제하지 않고는 배경의 요소와 인터랙션 할 수 없다는 점입니다. 2. 토스트 팝업(Toast Pop-up) 마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모.. [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 1. 증분 탐색 (Incremental Search) Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고 용어가 통일되어 사용되는 추세입니다. 기본적인 의미는 '자동 완성'과 구별됩니다. 사용자가 특정 단어를 검색하기 위해 검색어를 입력할 때, 검색어를 예상해서 리스트로 제공하는 화면을 '자동 완성'이라고 한다면, 사용자가 목표 검색어를 입력하기 전에 검색어를 예상하고 제공하는 결과 화면은 '순간 검색'입니다. 주요 검색 엔진을 통해 해당 기능을 간단하게 비교해 보도록 하겠습니다. 구글의 Instant Search/Instant Previews 구글의 '순간 검색(Instant Search)'은 검색.. [UX] UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 드롭다운 리스트 (Drop-down List) 객관식 문제에서 볼 수 있는 선택지와 유사한 개념입니다. 맨 처음 진입 시에는 프로그램에서 지정한 기본값이 보여지다가 화살표 버튼을 누르면 숨어 있던 다른 항목들이 나타납니다. 이 중 특정 항목을 선택하게 되면 기본값이 사용자가 선택한 항목으로 바뀌는데, 이로써 사용자는 자신이 원하는 항목이 선택된 것임을 인지할 수 있습니다. 반면 처음부터 펼쳐진 형태는(즉 드롭다운 하지 않는 형태는) 그냥 리스트 박스라고 부릅니다. 콤보 박스 (Combo Box) 드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보!)한 형태입니다. 사용자가 직접 정보를 입력하거나 나열된 항목들 중에서 하나의 항목을 선택하여 정보를 입.. 이전 1 2 다음
