Design101 : 강력한 정렬 활용
오늘 우리는 디자인에서 가장 기본적인 원칙 중 하나 인 정렬을 살펴볼 것입니다. 이 기만적으로 단순한 주제는 실제로 매우 복잡하며 오늘날 디자이너들 중에서 가장 눈에 띄지 않는 기술 중 하나입니다.
특정 정렬을 사용하는 방법과시기를 강하게 이해하면 즉시 더 나은 디자이너가되고 나머지 경력 기간 동안 생성 한 모든 것을위한 기본 구성 요소로 남게됩니다.
Envato Elements 살펴보기
정렬 소개
많은 사람들에게 정렬에 대한 논의는 임의의 운동처럼 들릴 수 있습니다. 이러한 기본 설계 이론은 반드시 자신의 삶에서 어떤 것도 설계하지 않은 개인에게만 해당되며 이러한 커뮤니티를 자주 방문하는 전문 커뮤니티에는 적합하지 않습니다. 권리?
나는 시각적 정렬에 대한 확실한 이해가 모든 유형의 디자인에있어 탁월한 기초라고 언급함으로써 그러한 토론이 초보자를위한 것이라고 주장 할 것이다. 일단 파악한 후에는 디자이너로 만드는 모든 단일 레이아웃에 사용할 지식이 있습니다.
그러나 이러한 개념이 디자이너로서 우리가 수행하는 핵심 요소라는 생각에도 불구하고 오늘날의 웹에서 볼 수있는 대부분의 열악한 디자인의 원천은 정렬입니다.
자체 교육을받은 디자이너는 정렬을 사용하는 방법을 직관적으로 파악할 수 있지만이를 명시 적으로 알지 못하면 실패 할 수 있습니다.
안감
정렬의 필수 아이디어는 사물을 정리하는 것입니다. 완전히 다른 주제 인 유기 디자인 이외의 페이지에 배치하는 모든 요소에는 위치에 대한 논리적 사고 과정이 수반되어야합니다.
다시 말하지만, 이것이 기본적인 것입니까? 모두 이미이 작업을 수행하고 있습니다. 잘못된. 최근 CSS 갤러리에 제출 된 다음 사이트를 고려하십시오. 나는 이것을 의미있는 실례가 아닌 교육 도구로 사용합니다. 디자이너는 막 시작한 멋진 사람입니다. 그는 매일 자신의 기술을 향상시키고 배우고 싶어합니다.
이 예는 매우 일반적이며 갤러리 제출에서 매일 볼 수있는 종류입니다. 여기의 미학적 가치는 나쁘지 않습니다. 밝은 색상과 흥미로운 질감이 당신의 시선을 사로 잡습니다. 그러나 여기에서의 정렬은 실제로 마크를 놓쳤습니다.
많은 사람들이 여기서 문제를 발견하기가 어려울 수 있습니다. 이러한 이유로 항상 기본 모양을 검사하기 위해 디자인을 단순화하는 것이 좋습니다. 내가 디자인에 대해 쓴 여러 기사 에서이 작업을 수행하는 것을 볼 수 있으며 자신의 디자인 중 일부에서 시도해야합니다.
이제 그래픽 개체가 단순화 된 상태로 표시되므로 개체가 차지하는 공간의 양을 더 잘 분석하고 정렬 문제를 해결할 수 있습니다.
갑자기 페이지의 요소가 흩어져있는 것처럼 보입니다. 하단의 기본 콘텐츠 영역이 왼쪽 상단의 교수형 배너 또는 오른쪽 상단의 흩어진 요소와 일치하지 않습니다. 또한 Facebook 로고는 작게 보이고 그 자체로 잘릴 수 없으며 헤드 라인은 내비게이션 가장자리에서 비틀 거리며 콘텐츠 가장자리에서 비틀 거리게됩니다.
이 디자인은 우리가 느끼는 순간 꽤 괜찮은 느낌이 들었지만 이제는 많은 구조 조정을 사용할 수 있음을 알았습니다. 여기에는 정렬과 음수 공간이라는 두 가지 주요 사항이 있습니다.
이러한 개념은 서로 밀접하게 연결되어 있습니다. 부정적인 공간을 다루는 것은 틈새에 초점을 맞추고 기본 대칭을 적용하는 것과 관련이 있습니다. 부정적인 공간에 관한 올바른 행동 과정에 대한 자세한 내용은 6 개의 개정판에서 부정적인 공간에 대한 안내서를 읽으십시오.
이 기사에서는 복잡한 레이아웃에서 익숙한 기본 정렬을 사용하는 방법에 대해 중점적으로 살펴 보겠습니다.
중심 정렬
중심 레이아웃은 디자이너를 제외한 지구상의 모든 사람을위한 선택 방법입니다. 어떤 이유로 페이지의 항목을 가운데에 맞추는 것은 당신이해야 할 일처럼 보입니다. 분명히 디자이너의 주요 업무는 단순히 아이템을 중심에 두는 것입니다!
몇 년 전에 개발자에게 코딩하기 위해 만든 디자인을 전달할 때이 문제가 발생했습니다. 그가 나에게 완성 된 버전을 보여 주었을 때, 모든 것이 왼쪽 정렬에서 중앙 정렬로 이동되었습니다! 그는 모든 것을“정렬하게 보이도록”중심 정렬을 항상 선호한다고 간단히 설명했다.
실제로는 모든 항목을 중심에 두는 것이 가장 약한 정렬 선택입니다.
따라야 할 가장자리가 없으므로 전체 레이아웃을 취하고 특정 내용을 흡수하기 위해 눈이 더 많은 작업을해야합니다.
사용시기
중심 정렬을 항상 피해야한다고 말하는 것은 아닙니다. 나는이 사이트의 데모에서 그것들을 사용했다. 열쇠는 언제 사용하는지 아는 것입니다.
중앙 정렬에 가장 적합한 시나리오는 페이지가 거의 없을 때입니다. 레이아웃이 복잡할수록 중앙 정렬 작업이 줄어 듭니다. 주어진 페이지가 많이 진행되지 않으면 중앙 정렬이 강력한 설명을 할 수 있습니다.
왼쪽 정렬
왼쪽 정렬은 논란의 여지가 있지만 견고하며, 대부분의 작업에서 기본 정렬이되어야합니다.
우리는 왼쪽 정렬 방식으로 구성된 콘텐츠를 보는 데 익숙합니다. 책이나 신문을 열면 왼쪽 정렬이 많이 있습니다. 정크 메일의 광고를 다시 살펴보면 왼쪽 정렬이 많이 나타납니다. Facebook, Google 검색 결과, Twitter 스트림 및 기타 모든 주요 웹 사이트에서 볼 수 있습니다.
왼쪽 정렬은 세계 또는 적어도 왼쪽에서 오른쪽으로 읽는 사회를 지배합니다. 모든 것에 대한 왼쪽 정렬에 전적으로 의존해서는 안되며 안전한 경로라는 것을 알면됩니다.
사용시기
모든 종류의 상황에서 사용하지만 특히 텍스트가 많은 경우에 사용하십시오. 지금 읽고있는 페이지를 살펴보십시오. 이것이 중심 정렬이라면 악몽 일 것입니다.
특히 웹에서 무언가를 왼쪽 정렬한다고해서 중앙에 놓을 수는 없습니다. 예를 들어 HTML div에는 종종 왼쪽에 정렬 된 여러 단락과 이미지가 포함되지만 CSS를 사용하여 페이지 중앙에 배치됩니다.
오른쪽 맞춤
올바른 정렬은 아마도 가장 드 probably니다. 왼쪽에서 오른쪽으로 읽었으므로 무언가가 오른쪽 가장자리에 달라 붙는 것이 이상하다고 느낍니다.
그러나 디자인, 특히 인쇄에서 철저하게 사용할 수있는 완벽하게 강력한 정렬입니다 (온라인에서 훨씬 더 예기치 않은 경향이 있음).
사용시기
항상 그런 것은 아니지만 올바른 정렬 방식으로 독창성을 느낄 수 있습니다. 눈에 띄고 다른 느낌이 필요한 것을 디자인하는 경우 올바른 정렬이 시작하기에 좋은 장소입니다.
웹에서 맞춤 정렬
우리가 남긴 정렬은 분명히 정당화됩니다. 이것은 전체 사이트를 개념적 요소로 묶을 때 강력하게 작동합니다.
웹을 설계 할 때 흥미로운 점은 종종 여러 가지 정렬이 필요하다는 것입니다. 디자이너가 정렬을 혼합하지 말라고 제안한 것을 들었을 수도 있지만이 조언은 실제 환경에서는 작동하지 않습니다.
대신 페이지 요소뿐만 아니라 페이지 요소 전체를 결정해야합니다. 사이트 정렬을 전체적으로 보는 예를보고이 토론을 시작한 다음 개별 항목 정렬에 대해 논의하는 방법에 주목하십시오.
페이지의 텍스트와 이미지에 대한 정렬을 설정 한 후에는 페이지의 모든 내용을 정렬하여 정렬하는 경우가 종종 있습니다. 울퉁불퉁 한 가장자리를 가질 수는 있지만 모든 것을 정당화하면 원래 예에서 부족했던 마무리 깔끔한 터치가 추가 될 수 있습니다.
위 사이트에서 왼쪽 정렬이 강하지 만 오른쪽의 모든 항목이 일렬로 정렬되어 응집력있는 타당한 모양을 만드는 방법에 주목하십시오. 작은 로그인 버튼은 브라우저 아이콘과 정렬되며 달력 아이콘의 오른쪽과 정렬됩니다.
깨끗하고 전문적인 디자인입니다. 모든 프로젝트에 적합하지는 않지만 디자이너가 프로젝트에 도달하려고하지만 실패하는 경우가 종종 있으며 가능한 원인 중 일부를 해결하고 싶었습니다.
이것이 그리드 시스템이 인기있는 이유 중 하나입니다. 그리드에 모든 것을 던지면 정렬이 튼튼하고 따르기 쉽습니다.
결론
요약하면 가능하면 눈이 정보의 흐름을 쉽게 따르도록하는 강력한 정렬을 사용하십시오. 중앙 정렬은 허용되지만 페이지의 내용이 증가함에 따라 올바르게 구현하기가 더 어려워집니다.
정렬은 개체의 전체 배열뿐만 아니라 페이지의 특정 항목을 나타냅니다. 모든 디자인에 소요되는 시간은 모든 요소가 페이지의 모든 요소와 올바르게 정렬되도록합니다. 이것은 디자인의 모든 가장자리를 따라 세로 및 가로로 적용됩니다.
