내비게이션(탐색) 메뉴는 가장 많이 보고 가장 많이 클릭하는 인터페이스(UI) 중 하나다. 사용자에게 더 나은 경험을 제공하는 데 도움이 될 내비게이션 디자인의 몇 가지 원칙을 살펴 보자. 1) 배치 문제 웹은 내비게이션이 배치되는 위치(맨 위, 왼쪽 또는 바닥 글)에 대한 명확한 패턴을 개발했다. 메뉴가 이 영역 밖에 배치되면 어색하고 혼란스럽고 찾기가 어렵다. 2) 메뉴가 어디에 있는지 보여준다 사용자의 현재 위치를 명확하게 전달한다. 아래의 것과 같은 여러 단서를 사용하여 방향을 잡는 데 도움이 된다. 사용자는 자신이 어디에 있는지 궁금해 할 필요가 없다. 3) 메가 메뉴 vs. 드롭 다운 연구에 따르면 메가 메뉴는 모든 것을 한눈에 보여주고, 이미지를 활용하고, 더 나은 그룹화를 허용하고, 더 매..

Design Information/Design Resources 2020. 9. 14. 11:54

웹 디자인 트렌드 그리고 역사를 한눈에 볼 수 있는 웹 디자인 박물관이 등장했다.최근 30주년을 맞은 웹은 1989년 3월 유럽 입자 물리 연구소(CERN)의 소프트웨어 공학자인 팀 버너스 리가 하이퍼텍스트 시스템(Hypertext System)을 처음 제안했고 오늘날 웹으로 진화를 한 것이다. 첫 번째 웹 브라우저는 밀레니얼 세대에게 낯설 수도 있겠지만 월드와이드웹(WorldWideWeb)으로 불렸고 1990년에 작성되었을 때 웹을 볼 수 있는 유일한 방법이었다. 훗날 프로그램과 추상적 정보 공간 사이의 혼란을 막기 위해 넥서스로 이름이 바뀐다.웹의 역사는 1차 브라우저 전쟁을 거쳐 진화하고 기술 발전을 통해 지금 우리가 선택적으로 사용하고 있는 크롬, 사파리, 파이어폭스, IE, Edge 등등 다양성..

Design News/Design Trend 2019. 3. 21. 14:09

최근 iconeden.com에서 공유한 무려 1,450종의 무료 벡터 아이콘 세트 SmartIcons는 넥스트 프로젝트를 준비하는 웹디자이너와 개발자 그리고 일반 사용자들에게 매우 유익한 디자인 소스로 많은 도움이 될 것이다 벡터 아이콘 세트 SmartIcons는 스마트 아이콘 시스템을 구축하고 개발된 아이콘 세트로 인기 있는 아이콘 세트이다. 일반적으로 $80의 비용이 소요되지만, 서비스 메일링 리스트 확보 차원에서 구독자를 대상으로 무료로 제공하며, 주기적으로 유용한 정보를 제공한다는 계획이다. 메일링 리스트 가입 후 내려받은 SmartIcons 벡터 아이콘 세트를 살펴보면 Glyph 800종, Stroke 250종, Minimal 400종으로 구분하여 총 1,450종의 다양한 벡터 아이콘을 포함하고..

Design Information/Design Resources 2015. 4. 29. 06:51

선명하지 않음이 몽환적이면서 오묘한 매력으로 다가오는 블러 효과(Blur Effect) 배경 이미지는 현재 웹 디자인의 인기 있는 트렌드가 되고 있습니다. 디자이너가 직접 제작해 사용하기도 하지만, 다양하고 쓸만한 블러 효과 배경 이미지를 제작하는 데는 적잖은 시간과 비용이 소요됩니다. 그런 까닭에 유료 이미지 라이센스를 구매하여 사용하거나, 검색을 통해 무료 배경 이미지를 찾아서 활용하곤 합니다. Fusionplate.com에서 공유한 27종의 놀라운 무료 블러 효과 배경 이미지는 그라디언트, 계절, 모자이크, 어두운 질감, 흑백(B&W) 등 다양한 주제로 구성되어 있으며, 3000픽셀 이상의 고해상도 블러 배경 이미지 패키지를 수집해 정리한 자료입니다. 이 놀라운 무료 블러 배경이미지 패키지는 그래픽..

Design Information/Design Resources 2015. 4. 27. 10:43

웹 서핑을 하다보면 가끔씩 접할 수 있는 크리에이티브 작가나 디자이너의 포트폴리오 사이트의 예술적 감성이 돋보이는 백그라운드나 랜딩 페이지 이미지를 이제는 누구나 쉽고 간단하게 입맛대로 만들 수 있다. 이 글에서 공유하는 ISO, Art Scene Generator 무료 버전은 고품질의 89가지 구성요소와 6개의 백그라운드 그리고 3개 완성된 PSD 장면 포함하고 있어 여러분들이 조금은 쉽게 꾸밀 수 있고 새로운 창작 영감을 얻을 수 있도록 배려하고 있다. ISO, Art Scene Generator 무료 버전은 Mockup Zone 팀에서 제공하는 아름답고 하이퀄리티의 무료 디자인 리소스이다. 사용자는 개별 요소와 추가 백그라운드 이미지를 활용하여 Isometric 스타일의 화려한 백그라운드 장면을 만..

Design Information/Design Resources 2015. 4. 7. 19:05

Lorem Ipsum. 웹 서핑을 하다보면, 그래픽 디자인이나 타이포그래피 그리고 웹 템플릿 등을 통해 흔히 만나볼 수 있다. 하지만 그 의미나 용도에 대해 이해하고 있는 사람이 생각보다 많지 않다. 로렘 입숨(Lorem Ipsum) 혹은 줄여서 립숨(Lipsum) 이라 불리는 용어는 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소를 시각적으로 보여 주고자 할 때 사용하는 표준 채우기 텍스트이다. 간단하게 설명하자면 최종 결과물에 실제적인 문장 내용이 채워지기 전에 프로젝트 모형이 어떤 형태로 보여지는지 시각적으로 보여주기 위한 채움글로 주로 이용된다. 이러한 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 ‘Lorem Ipsum’은 공간만 차..

Design Information/Design Resources 2015. 3. 4. 18:43

스케일러블 벡터 그래픽, 또는 SVG(Scalable Vector Graphic)는 이미지의 왜곡이나 손상 없이 다양한 해상도와 픽셀 밀도에 대응이 가능할 뿐만 아니라, 애니메이션과 미디어쿼리 지원 등의 유용한 정보를 포함하고 있는 이미지 포맷입니다. 이 글에서는 SVG를 언제, 어떻게 생성하고 이용할 지와 제작의 워크플로우에 대해서 알아보도록 하겠습니다.본론에 들어가기에 앞서, 두 가지 질문 드리도록 하겠습니다.디자인하는 방법을 알고 계신가요?HTML과 CSS를 작성하는 방법을 알고 계신가요?두 질문에 대답이 모두 ‘NO’라면, ‘YES’라는 대답을 할 수 있는 누군가를 찾아서 함께 읽으시면 서로에게 큰 도움이 될 것입니다. SVG는 무엇일까요?(What is SVG?) 위키피디아에서 스케일러블 벡터 ..

Design News/Design Trend 2014. 1. 7. 15:57

많은 사람의 시각에 비춰보면, 일본은 고요한 불교 정원(젠가든), 평화로운 신전, 그리고 기품있는 다도의 땅입니다. 전통적이면서 현대적인 일본식 건축양식과 책 그리고 잡지들은 세계 디자이너들의 부러움을 사기에 부족함이 없습니다.하지만 사실 아직 몇몇 이유로 이러한 지배력 중 아무것도, 디지털 제품, 특히 대부분 1998년 정도부터 시작된 것으로 보이는 웹사이트에는 스며들고 있지 못하고 있습니다. 웹 브라우저로 여러분이 만날 수 있는 일본의 대부분 유명한 몇 가지 사이트들을 둘러보세요.(구(Goo), 라쿠텐(Rakuten), 요미우리(Yomiuri), 니코니코(NicoNico), 오케이웨이브(OKwave), 앳코스메(@cosme)그리고 등등) 빽빽하고 꽉 끼인 듯한 텍스트작고 저화질의 이미지셀 수 있는 것..

Design News/Design Trend 2014. 1. 2. 15:52