Clueless 클라이언트를위한 웹 디자인 산업 용어

웹 디자인 업계에서는 내부자 용어. 이것은 신규 이민자를 위해 시작하기가 어렵지 않습니다., 특히 디자인 산업에 종사하지 않는 고객, 그러나 그들의 의미를 적절하게 전달하는 것은 때로는 상당한 도전이 될 수 있습니다.

이 용어집에서 우리는 자주 사용되는 웹 디자인 용어 20 개 각각에 대한 간단한 설명을 추가하여 불확실성이있는 경우 누구든지 신속하게 살펴볼 수 있도록했습니다. 웹 디자인 용어에서 크래시 과정이 필요한 고객이있는 경우이 기사를 공유하십시오..

“생기”

웹 디자인 기법 모션을 추가하다. 화면상의 요소에 변화를 시각화하다 또는 사용자의 시선을 사로 잡다..

애니메이션은 전환보다 강력하다., 그들은 출발점과 종점 사이에 여러 다른 상태를 겪을 수 있기 때문에 더 복잡한 효과.

“빵 부스러기”

에이 내비게이션 유형 사용자에게 현재 위치 사이트에.

빵 부스러기에는 통로 홈 페이지에서 현재 페이지에 도달 할 수있는 위치, 일반적으로 홈 / 카테고리 / 페이지. 경로의 각 요소는 또한 다음과 같습니다. 클릭 할 수있는 사용자가 신속하게 사이트 계층 구조를 탐색한다.. 일반적으로 이동 경로가 표시됩니다. 각 페이지 상단에.

“어지럽게 흩어져 있는 것”

웹 디자인 실수, 잘못 설계된 페이지.

디자이너가 어지럽 혀진 페이지에 대해 이야기합니다. 너무 많은 정보를 쥐었다. 같은 페이지에서 충분한 공백을 추가하지 않고 적절하게 콘텐츠를 구성하지 않아도됩니다. 어수선한 페이지 낮은 가독성, 과 사용자 경험에 해를 끼치다.

“색 구성표”

에이 조화 색상 수집 만드는 데 사용됩니다. 인식 가능한 브랜드 정체성.

보통 같은 색 구성표는 일관되게 사용하다 브랜드 웹 사이트, 모바일 앱, 로고 및 마케팅 자료 전반에 걸쳐 색 구성표는 다음에 따라 설계 될 수 있습니다. 다른 원칙들, 단색, 유사, 보완, 삼중 및 기타 색 구성표가 있습니다..

“대조”

디자인 기술 차이점을 강조하다 역할이나 의미가 다른 요소들 사이.

사용 보색 (컬러 휠의 반대편)은 명암을 표현하는 가장 잘 알려진 방법이지만 시각적 인 차이 스타일, 타이포그래피 또는 페이지 요소의 레이아웃에서 뚜렷하게 구별 할 수있는 것은 대조 효과를 얻을 수 있습니다.

“빈 상태”

웹 사이트 또는 애플리케이션의 특정 상태 아직 어떤 내용도 아니다. 특정 페이지에 있지만 디자인 요소는 이미 그들의 자리에있다..

빈 상태와 같은 첫 번째 사용 상태는 빈 상태 페이지의 일반적인 예입니다. 그들은 특정 디자인 기술 (예 : 온 보딩 디자인)을 요구합니다. 사용자에게 알리기 페이지에 무엇이 있어야하는지에 대해 그들을 격려하다 특정 활동을 수행하기 위해.

“고정 레이아웃”

에이 레이아웃 유형 사이트 및 그 요소 같은 너비를 사용하십시오. 모든 결의안에서, 정적 값으로 정의 (일반적으로 픽셀).

웹 사이트를 구축하는 전통적인 방법. 새로운 웹 사이트에서는 레이아웃이 고정 된 사이트가 모바일 화면에서 거의 읽을 수 없기 때문에 거의 선택되지 않습니다. 모바일 사용자가 계속 액세스 할 수 있도록 많은 고정 레이아웃 사이트에서 보조 모바일 사이트.

“평면 디자인”

에이 UI 그 디자인 언어 깨끗하고 미니멀 한 스타일에 중점을 둡니다., 사용자를 돕기 위해 복잡한 질감, 패턴, 그라디언트 및 기타 멋진 효과를 제거합니다. 내용에 더 중점을 둔다..

플랫 디자인은 사용성 문제로 인해 비판을받습니다. 3 차원 성의 부재. 더욱 성숙한 플랫 2.0 디자인 언어, Google의 소재 디자인 등이 응답으로 등장했으며 평면 디자인에 약간의 역점을 더했습니다..

“유체 레이아웃”

에이 레이아웃 유형 그 상대 단위를 사용합니다. 사이트와 그 요소의 너비를 정의한다..

유체 레이아웃에 가장 자주 사용되는 상대 단위는 다음과 같습니다. 백분율, 그러나 여자 이름에스 과 rem에스 또한 사용할 수 있습니다. 유체 레이아웃 크기 조정 (늘어나고 축소) 뷰포트의 너비가 변경되면서 반응 형 레이아웃과는 달리 유체 레이아웃 미디어 쿼리를 사용하지 않습니다.. 라고도합니다. 액체 배치.

“겹”

화면의 보이는 부분의 아래쪽.

용어 “접을 수있는 부분” 방문자가 볼 수있는 웹 페이지 부분을 나타냅니다. 아무런 조치도 취하지 않고, 동안 “접히는 부분 아래” 사용자가 사용할 수있는 페이지의 나머지 부분을 나타냅니다. 사이트와의 상호 작용만으로 도달 - 일반적으로 스크롤 또는 스 와이프 (모바일).

배치하는 것이 좋습니다. 브랜딩 요소 (예 : 로고), 사이트 내 탐색, 과 유혹하는 콘텐츠 사용자가 사이트의 목적을 빨리 이해하고 나머지 콘텐츠에 관심을 갖도록하기 위해 스크롤없이 볼 수있는 부분 위에.

“우아한 퇴화”

웹 디자인 전략 모든 고급 기능을 포함합니다. 사이트에 기본적으로 설치 한 다음 나중에 구형 브라우저, 성능이 떨어지는 장치 또는 더 낮은 대역폭에서 작동하지 않는 사항을 제거하거나 단순화합니다.

초점 외관에 더 많은 것 콘텐츠보다 모바일 시대에서 점진적 향상은 새로운 사이트의 주요 웹 디자인 전략이되었으며, 우아한 퇴화는 주로 이전 사이트 또는 기존 사이트.

“영웅 이미지”

특대 사이즈 이미지 배너 배치 된 접을 수있는 부분.

영웅 이미지는 일반적으로 사이트 콘텐츠와 관련된 고품질의 이미지입니다. 그 (것)들의 위에, 전형적으로 a가있다 짧은 (한두 줄) 텍스트 사용자에게 메시지를 전달하는 클릭 유도 문안 버튼 쇼핑이나 사이트 가입과 같은 특정 행동을 취할 것을 요구하는.

“방문 페이지”

원래 페이지가 온라인 방문자가 사이트에 입장합니다.. 최근에이 용어는 오히려 특정 사업 목적.

예를 들어, 웹 사용자가 배너 광고를 따르는 경우 해당 제품을 구매할 수있는 방문 페이지에 자주 방문합니다. 방문 페이지 단일 초점 및 클릭 유도 문안 (call-to-action) 더 높은 전환율에 도달하는 경향이있다.

“게으른로드 중”

이미지와 기타 정적 콘텐츠 (예 : 동영상)를로드 직전에로드하는 기술 사용자에게 보이기.

웹 사이트가 지연로드를 사용하는 경우 스크롤없이 볼 수있는 부분의 이미지 만 먼저로드되고, 나머지는 사용자가 페이지를 스크롤 할 때로드됩니다. 반응 형 및 모바일 디자인에서 자주 사용됨 자원을 절약하다. 예를 들어, Google AMP는 모바일 사이트의 속도를 게으른 정적 리소스로드 기본적으로.

“미디어 쿼리”

CSS 기능으로 반응 형 웹 디자인 설계자가 서로 다른 크기의 장치에 대한 다양한 디자인 (너비 및 / 또는 높이), 방향 (가로 또는 세로) 및 용지 유형 (인쇄, 화면 등).

일반적으로 반응 형 사이트 별도의 레이아웃이있다. 데스크톱, 태블릿 및 모바일 화면의 경우 중단 점 그들 사이에 미디어 쿼리로 정의 CSS에 추가됨.

“점진적 향상”

먼저 웹 디자인 전략 기본 요소 만 추가합니다. 브라우저, 대역폭 및 장치에서 작동하는 사이트로 이동합니다. 고급 프런트 엔드 기능 (스타일 및 상호 작용)은 다음과 같습니다. 레이어에로드 나중에.

주로 점진적 향상 내용에 집중하다, 사이트의 검색 결과가 얻기 쉬운 따라서 모든 사용자에게 모바일 시대의 웹 사이트를 구축하는 주된 방법입니다 (우아한 퇴화와 반대되는 방식).

“반응 형 디자인”

웹 사이트를 만드는 웹 디자인 방식 치수에 맞추다 다양한 기기 유형 (모바일, 태블릿, 데스크톱이 대부분) 다른 레이아웃 및 다른 스타일 (예 : 인쇄술, 이미지 크기).

반응 형 디자인은 다음과 같은 다양한 기법을 사용합니다. 상대 단위, 유연한 그리드, 과 미디어 쿼리 모든 사용자에게 유용하고 읽기 쉽고 액세스 가능한 콘텐츠를 제공하기 위해 대부분의 현대 웹 사이트는 반응 형 디자인을 사용합니다..

“역학”

UI 디자인 언어 친숙의 원리, 디자인 요소 생성에 중점을 둡니다. 실제와 비슷한.

예를 들어, 다음과 같은 효과를 사용하여 실제 단추처럼 보이는 단추 경사 및 엠 보스, 그림자, 그라디언트 및 기타 드롭. 편평한 디자인이 지배적이되기 전에, skeuomorphism는 많은 년간 주요한 웹 디자인 동향이었다.

“전이”

웹 디자인 기술 간단한 변화 시각화 화면상의 요소 부드럽게 변경 시작과 끝 상태 사이.

전환 - 애니메이션과 달리 - 중간 상태가 아니며 시작과 끝 지점, 그러므로 그들은을 위해 사용되어야한다. 미묘한 변화, 시각화와 같은 마우스 오버 상태.

“여백”

그만큼 빈 공간 인접한 디자인 요소 사이. 라고도합니다. 음의 공간.

공백은 사용자를 돕습니다. 내용을 다듬다, 시각적으로 콘텐츠 계층 구조를 나타냅니다.. 공백은 반드시 흰색은 아니지만 사이트의 배경색을 사용합니다. 충분한 여백이 없다면 어수선한 페이지.