본문 바로가기

UI패턴5

UI 디자인 : 웹페이지와 홀수의 법칙 ? - 컨텐츠 목록 홀수의 법칙이란, 정보를 표기할 때, 1, 3, 5 개의 패턴을 주로 보여주는 방식을 이야기합니다. 반복되는 컨텐츠를 보여줘야할 때. 2나 4처럼 짝수를 피해야한다는 이야기인데요. 이 키워드는 기존 랜딩페이지 디자인 실무 팁에서 다뤘던 내용 중 일부입니다. 기존에는 랜딩페이지를 위주로 살펴봤다면. 이번에는 여러 컨텐츠를 동시에 보여줘야하는. 반복패턴 케이스를 찾아 이 법칙이 실제로 맞는지. 검증해보도록 하겠습니다. 1. 유튜브 (Youtube)의 사례 인지과부하라는 말이 있습니다. 말이 좀 어렵게 느껴지실 수도 있는데. 너무 많은 정보가 한번에 들어와서, 판단을 내리기가 어려워지는 상태를 말합니다. 그 대표적인 사례가 PC웹 유튜브 화면입니다. 분명 많은 정보를 보여주곤 있는데, 정보를 체크하고 읽고, .. 2021. 2. 8.
UI 디자인 : 웹페이지와 홀수의 법칙? - 랜딩 페이지 홀수의 법칙이란, 정보를 표기할 때, 1, 3, 5 개의 패턴을 주로 보여주는 방식을 이야기합니다. 반복되는 컨텐츠를 보여줘야할 때. 2나 4처럼 짝수를 피해야한다는 이야기인데요. 이 키워드는 기존 랜딩페이지 디자인 실무 팁에서 다뤘던 내용 중 일부입니다. 이번 시간에는 이 키워드가 실제로 다른 서비스에서 얼마나 검증될 수 있는지. 이 부분을 집중적으로 찾아보겠습니다. 1. 스케치 (Sketch) 랜딩페이지의 사례 스케치는 UI 디자인에서 자주 사용되는 디자인 소프트웨어입니다. 스케치에서 주로 사용하는 방식은 3개의 커다란 그리드를 잡고. 이 부분을 나눠서 3개로 사용하거나, 1:2로 사용하거나. 1개를 넓게 쓰는 방식으로. 매우 단순한 방식을 사용하고있습니다. 스케치 랜딩페이지의 경우, 일부 컨텐츠를 .. 2021. 2. 8.
UI 패턴 핵심정리 : 지도 서비스 안녕하세요, 리플러스입니다. 오늘은 기존에 정리했던 - UI 디자이너라면 꼭 알아야할 9가지 서비스 카테고리 중에서, 지도 서비스에 대해 이야기를 해보겠습니다. 1. 지도 서비스란? 지도 서비스는 GPS를 기반으로 한 주변 지도 정보를 보여주는 기본적인 서비스입니다. 한국에서는 네이버와 카카오, 구글과 애플맵이 이야기되지만, 실제로 사용할 수 있는 건 네이버와 카카오맵 뿐입니다. 구글과 애플의 경우, 해외 기업이기 때문에 국내법상 국내 지도 데이터를 함부로 사용할 수 없게 되어있습니다. 그래서 국내에서는 카카오와 네이버같은 국내 기업의 지도만 사용할 수 있습니다. 2. 지도 서비스의 핵심은 키워드 검색 지도 서비스는 대부분 내 주변에 있는 무언가를 찾거나. 특정한 목적지로 이동하는 방식을 찾을 때 주로 .. 2021. 1. 21.
UI 패턴 핵심정리 : 메일 서비스 안녕하세요, 리플러스입니다. 오늘은 기존에 정리했던 - UI 디자이너라면 꼭 알아야할 9가지 서비스 카테고리 중에서, 메일 서비스에 대해 이야기를 해보겠습니다. 1. 메일 서비스란? 메일은 정해진 메일 주소로 텍스트와 이미지, URL주소 등을 함께 보낼 수 있는 서비스입니다. 우리는 메일 서비스가 '전자 우편' 정도로 생각하지만. HTML (하이퍼 텍스트 마크업 언어) 뭉치로 된 문서를 보내는 것입니다. 그래서 CSS로 편집해, 기본 메일 규격과 다르게 내용을 꾸밀수도 있죠. 또한 기존에 살펴보았던 텍스트 에디터 개념까지 담고있어. 한층 복잡해집니다. 2. HTML이란? 기존에 에디터에 대해서 알아볼 때. 마크다운 문법에 대해서도 이야기했었지만. HTML은 마크다운 문법과 비슷하게, 사용자 편집화면과 결.. 2021. 1. 20.
UI 패턴 핵심정리 : 텍스트 에디터 안녕하세요, 리플러스입니다. 오늘은 기존에 정리했던 - UI 디자이너라면 꼭 알아야할 9가지 서비스 카테고리 중에서, 첫번째인 텍스트 에디터에 대해 좀 더 깊게 이야기를 해보겠습니다. 1. 텍스트 에디터란? 텍스트 에디터는 텍스트를 입력하고, 꾸며주는 역할을 합니다. 텍스트의 크기나 색상, 폰트, 이미지를 첨부하거나. 개별 텍스트를 URL로 처리해주는 등. 여러 기능을 갖고있습니다. 동일한 내용을 입력하더라도 이것을 다시 보기좋게 꾸미는 과정을. 웹디자이너가 아니라도 손쉽게 처리할 수 있도록 도와주는 역할을 합니다. 텍스트 에디터에 대해 이야기하려면.크게 두가지를 이해해야하는데. 첫번째는 Wysiwyg. 두번째가 마크다운 문법입니다. 2. Wysiwyg (위지윅) 이란? (What You See Is W.. 2020. 12. 1.
728x90