개발자를위한 디자인 원칙 : 더 나은 웹 디자인을위한 프로세스 및 CSS 팁

모든 사람이 요리 할 수 ​​있다는 것은 기술적으로 사실입니다. 그러나 맛있는 요리를 요리하는 방법을 진정으로 아는 것과 운이 좋은 운을 시험하기 위해 냄비에 여러 재료를 던지는 것에는 차이가 있습니다. 웹 개발도 마찬가지입니다. 당신은 "성분"- background-color , .heading-1 를 이해할 수 있지만 모든 사람 이이 재료를 아름답고 사용하기 쉬운 웹 사이트로 변환하는 방법을 아는 것은 아닙니다.

HTML 및 CSS를 사용할 때마다 다른 사람들이 이해할 수 있도록 컨텐츠 양식과 구조를 제시하는 디자인입니다. 사람들은 수백 년 동안 설계 해 왔으며 오늘날의 디지털 인터페이스에도 적용되는 프로세스에서 몇 가지 원칙을 개발했습니다. 이 원칙은 텍스트 표시 방법 (조판), 콘텐츠 배열 방법 (간격) 및 개인화 된 추가 (색상)의 세 가지 주요 영역에 반영됩니다. 개발자의 관점에서 이러한 웹 디자인 "성분"을 사용하는 방법을 살펴보고 CSS 속성 및 가이드를 활용하여 웹 디자인의 추측 성분을 제거합니다.

목차

• 조판
• 간격
• 색상

조판

읽기 쉬운 웹 사이트는 우연이 아닙니다. 실제로 Taimur Abdaal 은이 주제에 대한 기사를 작성했습니다. 여기에는 타이포그래피를 다루는 개발자의 많은 조언이 포함되어 있습니다. 우리는 텍스트를보다 즐겁고 읽기 쉽게 읽을 수있는 두 가지 기본 디자인 원칙에 중점을 둘 것입니다 : 반복 및 계층 구조.

일관성과 유지 관리를 달성하기 위해 복제를 사용하십시오

소프트웨어에서 재사용 성의 중요성으로 인해 반복은 네트워크에서 상당히 자연스럽게 나타납니다. 예를 들어 CSS 클래스를 사용하면 텍스트의 특정 스타일을 정의한 다음 웹 사이트 전체에서 재사용 할 수 있습니다. 이로 인해 유사한 콘텐츠의 중복되고 일관된 텍스트 스타일이 발생하여 사용자가 웹 사이트를 탐색 할 수 있습니다.

예를 들어, 새로운 단락의 스타일을 작업하는 경우 먼저 비슷한 스타일의 기존 콘텐츠가 있는지 고려하고 동일한 CSS 클래스를 사용해보십시오. 그렇지 않은 경우 웹 사이트의 다른 곳에서 재사용 할 수있는 공통 이름으로 새 클래스를 만들 수 있습니다. .paragraph--emphasize 대신 .footer\_\_paragraph--emphasize 사용하거나. .hero\_\_site-title 대신 .heading-1 사용하는 것을 고려하십시오. 처음 몇 가지 예제는 귀하의 웹 사이트에서 사용할 수 있으며 후자는 특정 구성 요소로 제한됩니다. text- 와 같은 접두사를 추가하여 클래스가 텍스트 스타일에 특별히 사용되었음을 나타냅니다. 이 접근법은 CSS 파일의 크기와 복잡성을 줄이고 향후 글로벌 스타일을보다 쉽게 ​​업데이트 할 수 있도록합니다.

디자인에는 스타일을 실험 할 수있는 수많은 방법이 있습니다. 디자이너는 때때로 글꼴 스타일에 중독되어 약간 다른 비슷한 스타일을 만듭니다. 그러나 코드에서는 텍스트 스타일을 최소로 제한하는 것이 매우 중요합니다. 개발자는 디자이너가 유사한 스타일을 결합하여 코드의 양을 줄이고 재사용 성과 일관성을 향상시킬 것을 촉구해야합니다.

계층 구조는 콘텐츠에 대한 명확한 시각적 순서를 제공합니다

계층 구조는 존재하지 않을 때만 알 수있는 것입니다. 조판에서, 계층 구조는 다양한 텍스트들 사이의 시각적 차이를 나타냅니다. 제목, 단락, 링크 및 기타 텍스트 스타일의 차이점입니다. 이 차이는 각 텍스트 유형의 텍스트 콘텐츠에 대한 다른 글꼴, 색상, 크기, 케이스 및 기타 속성을 선택하여 달성됩니다. 좋은 계층 구조는 복잡한 정보를 쉽게 이해하기 쉽고 사용자가 콘텐츠를 탐색하도록 안내합니다.

HTML 자체는 계층 구조를 제공합니다 (예 : 제목의 글꼴 크기는<h1></h1> 도착하다<h6></h6> 점차적으로 감소) 그러나 CSS는 더 큰 창의성의 문을 열어줍니다. 에 의해<h></h> 태그는 더 큰 글꼴 크기를 제공하며 제목 레벨 사이에 더 큰 차원 차이를 만들어 더 많은 계층을 형성 할 수 있습니다. 더 많은 변경 사항을 만들려면 색상, text-align 및 text-transform 속성을 변경할 수도 있습니다.

글꼴 선택에 대한 지침

=========================================================================================================================== ============================================================================================================= =========================================================================================================================== ===========================================================================================================================

============================================================================================ ==================================================================================== ============================================================================================ ==================================================================================== ============================================================================================ ==================================================================================== ============================================================================================ ====================================================================================

타이포그래피와 관련하여 가능한 한 쉽게 읽을 수 있는지 확인해야합니다. 가독성이 가장 큰 전반적인 요소는 선택한 글꼴입니다. 큰 주제입니다. 많은 요인들이 글꼴의 "가독성"을 결정합니다. 일부 글꼴은 제목 또는 짧은 줄의 텍스트를 위해 특별히 설계되었습니다. 이것을 "디스플레이"글꼴이라고하며 종종 텍스트를 위해 설계된 글꼴보다 더 개인적입니다. 독특한 장식과 기발함은 작은 크기와 큰 단락의 일부로 글꼴을 표시 할 때 읽기가 더 어렵습니다. 경험상보다 직관적 인 글꼴은 텍스트에 사용되어야하며 제목의 글꼴 만 표시해야합니다.

공급이 부족하고 읽을 수있는 글꼴이 필요한 경우 Google Fonts를 사용해보십시오. 미리보기 필드에 텍스트를 추가하고 사이트에 표시된 대략적인 크기로 크기를 조정하십시오. 그런 다음 결과를 Serif 또는 Sans Serif 글꼴로 좁히고 읽기 쉬운 글꼴을 위해 글꼴 목록을 스캔 할 수 있습니다. Roboto, Noto Sans, Merriweather 및 PT Serif는 모두 읽을 수있는 옵션입니다.

가독성 향상을위한 CSS 속성

• 메인 단락의 글꼴 크기는 선택한 글꼴에 따라 16px와 18px (1EM 및 1.25EM) 사이 여야합니다.

• 텍스트를 덜 혼잡하고 읽기 쉽게 만들기 위해 선 높이 (두 줄의 텍스트 사이의 수직 공간)를 수동으로 설정하십시오. 타이틀의 경우 line-height: 1.25 (즉, 글꼴 크기의 1.25 배)로 시작하고 단락은 최소 1.5 (1.9 이하)이며 필요에 따라 조정하십시오. 텍스트 라인이 길수록 선이 더 커야합니다. 텍스트 유연성을 유지하려면 행 높이에서 장치를 추가하지 마십시오. 단위가 없으면 설정 한 선 높이는 글꼴 크기에 비례합니다. 예를 들어, line-height: 1.5 및 font-size: 18px 라인 높이 27 픽셀을 만듭니다. 글꼴 크기를 font-size: 16px 계산 된 선 높이가 자동으로 24 픽셀로 변경됩니다.

• 텍스트 라인에 얼마나 많은 문자가 포함되어 있는지, 목표는 45 ~ 75 자 길이 (구두점 및 공간 포함)입니다. 그렇게하면 눈과 머리 움직임을 제한하여 텍스트 라인을 추적하여 사용자 읽기 피로가 줄어 듭니다. 네트워크의 변동성으로 인해 라인의 길이를 제어하는 ​​것은 불가능하지만 max-width 값과 중단 점을 사용하여 텍스트 라인이 너무 길어지지 않도록 할 수 있습니다. 일반적으로 텍스트 라인이 짧을수록 스캔 속도가 빨라집니다. 그리고 라인 당 문자 수를 계산하는 것에 대해 너무 걱정하지 마십시오. 몇 번 끝내면 옳은 모습에 대해 느낄 것입니다.

간격

레이아웃을 본 후에는 물러서서 내용의 레이아웃 또는 간격을 확인할 수 있습니다. 운동과 근접성은 간격과 관련된 두 가지 설계 원칙입니다.

운동은 콘텐츠 프로세스에 관한 것입니다

운동은 눈이 페이지 나 페이지의 흐름을 통과하는 방법입니다. Movement를 사용하여 사용자의 시력을 안내하고, 이야기를하고, 주요 액션 항목을 가리키거나, 스크롤하도록 격려 할 수 있습니다. 이는 각 구성 요소 내에 컨텐츠를 작성한 다음 페이지 레이아웃을 형성하도록 이러한 구성 요소를 정렬하여 수행됩니다. 눈이 콘텐츠를 통과하는 방식에주의를 기울이면 페이지를 스캔 할 때 사용자가 어디에서 볼 수 있는지 알 수 있습니다.

책 (종종 매우 선형 구조가있는)과 달리 웹 사이트는 레이아웃에서 더 창의적 일 수 있습니다. 콘텐츠를 레이아웃하는 방법에 대한 목적이 있는지 확인하고 가능한 한 쉽게 콘텐츠를 통해 사용자를 안내하는 방식으로 레이아웃을 만드는 것이 중요합니다.

위의 세 가지 예를 고려하십시오. 어느 것이 가장 이해하기 쉬운가? 왼쪽의 배열은 이미지의 위치로 인해 화면에서 왼쪽으로 시야를 움직여 버튼을 찾기가 어렵습니다. 중간 옵션에서는 제목에 비해 이미지가 너무 크기 때문에 제목을 쉽게 무시할 수 있습니다. 오른쪽에서 제목은 먼저 관심을 끌고 이미지는 메인 액션 항목 인 버튼을 가리 키도록 구성됩니다.

Blank는 강력한 움직임을 만드는 데 유용한 도구이지만 너무 많이 사용하거나 너무 적게 사용하기 쉽습니다. 사용자의 눈을 안내하고 콘텐츠를 나누기 위해 어떻게 사용하는지 생각해보십시오. 올바르게 사용하면 사용자는 빈 자체를 알지 못하지만 제시하는 내용에 더 집중할 수 있습니다. 예를 들어, 공백을 사용하여 컬러 상자가 아닌 콘텐츠를 분리 할 수있어 레이아웃이 덜 혼란스러워집니다.

관계를 확립하기위한 근접성

물체가 가까워지면 관련성이있는 것으로 인식됩니다. 요소 주위의 간격을 제어함으로써 그들 사이의 관계를 암시 할 수 있습니다. 반복을 통해 일관성을 구축하고 임의 숫자를 사용하지 않도록 간격 시스템을 만들면 도움이 될 수 있습니다. 이 시스템은 기본 브라우저 글꼴 크기 (1REM 또는 16PX)를 기반으로하며 대부분의 시나리오를 다루는 다른 값을 사용합니다.

• 0.25REM (4PX)
• 0.5rem (8px)
• 1rem (16px)
• 2REM (32px)
• 4rem (64px)

SASS 또는 CSS 변수를 사용하여 프로젝트 전체에서 이러한 값을 일관되게 유지할 수 있습니다. 시스템은 다음과 같이 보일지 모르지만 이름을 짓는 것이 어렵 기 때문에 편안하게 느끼는 것을 사용합니다.

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

색상은 성격을 전달하고 관심을 끌습니다

색상은 웹 사이트의 성격에 큰 영향을 미칩니다. 제대로 사용하면 페이지가 활력과 감정으로 가득 차게됩니다. 부적절하게 사용하면 내용에서 방해가되지 않거나 악화되지 않습니다. 색상은 대부분의 디자인 원칙과 밀접한 관련이 있습니다. 사용자의 시선을 안내하여 움직임을 만드는 데 사용될 수 있으며 가장 중요한 작업 항목에주의를 기울여 강조하는 데 사용될 수 있습니다.

색상 선택에 대한 지침

색상을 사용하면 어디서부터 시작 해야할지 알기가 어려울 수 있습니다. 도움을주기 위해 4 단계 프로세스를 사용하여 색상 선택을 안내하고 웹 사이트의 팔레트를 구축 할 수 있습니다.

1 단계 : 감정을 이해하십시오

색상을 선택하기 전에 웹 사이트와 브랜드의 어조 또는 태도를 이해해야합니다. 콘텐츠를 확인하고 전달하려는 내용을 결정하십시오. 재미 있고, 유익하고, 복고풍, 시끄럽고, 우울합니까? 일반적으로 웹 사이트의 톤을 여러 형용사로 요약 할 수 있습니다. 예를 들어, 애플은 미니멀하고 아름답지만 북쪽 얼굴을 모험적이고 견고한 것으로 요약 할 수 있습니다.

2 단계 : 메인 색상을 찾으십시오

당신의 감정을 기억하고 그것을 나타내는 색상을 상상하려고 노력하십시오. 색상의 채도 (색상의 강도)와 밝기 (색상의 흰색 또는 검은 색의 근접성)부터 시작하십시오. 기분이 낙관적이거나 화려한 경우 (더 가벼운) 색상이 최고 일 수 있습니다. 감정이 심각하거나 암시 적이라면 어두운 (포화되지 않은) 색상이 더 좋습니다.

다음으로 색조를 선택하십시오. Hue는 대부분의 사람들이 색상으로 생각하는 것을 말합니다. 컬러 휠의 회전에서 어디에 떨어 집니까? 색상의 색조는 가장 큰 의미를줍니다. 사람들은 색조를 특정 아이디어와 연관시키는 경향이 있습니다. 예를 들어, 빨간색은 종종 힘이나 위험과 관련이 있으며 녹색은 돈이나 자연과 관련이 있습니다. 리더십을 따를 필요는 없지만 사용하는 색상을 이해하기 위해 유사한 사이트 나 브랜드를 확인하는 것이 도움이 될 수 있습니다. 시도하는 것을 두려워하지 마십시오!

3 단계 : 보조 색상을 추가하십시오

때로는 2 ~ 3 개의 주요 색상이 필요하지만 이것은 필요하지 않습니다. 다른 색상 브랜드를 생각해보십시오. 일부는 단일 색상을 사용하고 다른 일부는 기본 색상과 하나 또는 두 개의 보조 색상을 가지고 있습니다. 코카콜라는 독특한 붉은 색을 사용합니다. IKEA는 주로 노란색으로 파란색입니다. 조수는 파란색과 노란색으로 주황색입니다. 웹 사이트의 분위기에 따라 여러 가지 색상이 필요할 수 있습니다. Adobe Color 또는 Coolors와 같은 도구를 사용하여 주 색상을 추가 한 다음 보완 색상 또는 단색과 같은 다양한 색상 관계를 시도하여 잘 작동하는지 신속하게 확인하십시오.

4 단계 : 색상 팔레트를 확장하십시오

이제 좁아지고 주요 색상을 찾았으므로 이제 프로젝트의 다양성과 제약 조건을 제공하는 팔레트로 범위를 확장 할 때입니다. 톤과 그림자가 여기서 속임수입니다. 그늘은 메인 색상을 흰색과 혼합하여 만들어지며 검은 색과 혼합하여 그늘이 만들어집니다. Sass Color 함수를 사용하여 잘 조직 된 시스템을 신속하게 만들 수 있습니다.

 <code>$main-color: #9AE799; $main-color-lightest: lighten($main-color, 20%); $main-color-lighter: lighten($main-color, 15%); $main-color-light: lighten($main-color, 10%); $main-color-dark: darken($main-color, 40%); $main-color-darker: darken($main-color, 50%); $main-color-darkest: darken($main-color, 60%);</code>

팔레트를 완성하려면 흰색과 검은 색과 같은 여러 색상이 필요합니다. 메인 색상의 어둡고 거의 검은 색 음영으로 "풍부한 검은 색"을 만들어 내고 스펙트럼의 다른 쪽 끝에서 메인 색상으로 채색 된 몇 개의 가벼운 회색을 선택하십시오. 흰색과 검은 색을 채색하면 페이지에 성격이 더 높아지고 일관된 모양과 느낌을 줄 수 있습니다.

마지막으로, 대화식 제품을 다루는 경우 성공, 경고 및 오류 상태를 위해 색상을 추가해야합니다. 일반적으로 녹색, 노란색 및 빨간색은 이것들에 적합하지만 팔레트에 더 잘 맞도록 색조를 조정하는 방법을 고려하십시오. 예를 들어, 기분이 친숙하고 기본 색상이 녹색 인 경우 빨간색을 덜 부정적으로 느끼기 위해 잘못된 상태 색상의 채도를 낮추어야 할 수도 있습니다.

기본 색상, 기본 오류 색상 및 잘못된 색상과 혼합하려는 기본 색상의 비율을 제공하여 mix Sass Color 함수를 사용하여이를 수행 할 수 있습니다. desaturate 기능을 추가하면 색상의 톤을 줄이는 데 도움이됩니다.

 <code>$success: mix($base-color, desaturate(green, 50%), 50%); $warning: mix($base-color, desaturate(yellow, 30%), 5%); $error: mix($base-color, desaturate(red, 50%), 20%);</code>

네트워크와 관련하여 : 대비에 특별한주의를 기울여야하는 색상 원칙이 있습니다. 이것이 우리가 다음에 소개 할 것입니다.

차이

채도, 밝기 및 두 색의 색조의 차이 인 색상 대비는 시력이 낮거나 색맹이 낮은 사람들이 네트워크에 액세스 할 수 있도록하는 중요한 설계 원칙입니다. 텍스트와 웹 사이트의 배경 사이에 충분한 대비가 있는지 확인하면 모든 사용자가 정상적인 비전을 가진 모든 사용자가 액세스 할 수있게 해줍니다. 접근성을 볼 때는 W3C의 WCAG (Web Content Accessibility Guide)에 제공된 색상 대비 안내서를 따르십시오. 크롬 개발 도구의 체크 패널을 포함 하여이 지침을 따르는 데 도움이되는 여러 도구가 있습니다.

이제이 원칙들을 실천해야 할 때입니다! 이러한 프로세스 및 CSS 팁을 사용하여 디자인의 추측 요소를 제거하고 더 나은 솔루션을 만들 수 있습니다. 당신이 친숙한 것으로 시작하십시오. 결국 여기에 언급 된 디자인 원칙은 당신에게 두 번째 자연이됩니다.

더 실용적인 팁을 찾고 있다면 Adam Wathan과 Steve Schoger는 좋아하는 팁에 대한 기사를 썼습니다.

위 내용은 개발자를위한 디자인 원칙 : 더 나은 웹 디자인을위한 프로세스 및 CSS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!