Atomic Design: 웹 디자인에 대해 알고 있다고 생각했던 내용을 폭파시키다

유연성은 억제되지 않는 것과 동일하며 창의적이려면 억제되지 않아야 한다는 것이 일반적인 믿음입니다. 그러나 프로젝트, 특히 웹 디자인만큼 복잡한 프로젝트를 완료하려면 구조를 만드는 것이 실제로 더 많은 유연성을 제공할 수 있습니다. 협상할 수 없는 프레임워크 가 필요 합니다. 진정으로 자유롭게 할 수 있는 곳에서 예술적이고 창의적인 근육을 사용하면 기능적이고 사실적인 만큼 영감을 주는 디자인을 얻을 수 있습니다. Atomic 디자인은 웹 디자인에 대한 감각적이고 체계적인 접근 방식으로 여전히 프레임워크 내에서 실험할 수 있는 기회를 제공합니다.

디자인 시스템

디자이너는 더 이상 단순히 웹 페이지를 만들지 않습니다. 그들은 디자인 시스템을 만듭니다. 설계 시스템에는 다음이 포함됩니다.

• 색상
• 그리드
• 조직
• 타이포그래피
• 등.

저는 UX Planet의 Jack Strachan이 디자인 시스템을 설명하는 방식을 좋아합니다. 디자인 시스템은 다양한 접점에서 작업할 때 제품 전반에 걸쳐 일관된 경험과 시각적 언어를 번역하는 방법입니다.”

디자인 요소는 주관적일 수 있으며 순식간에 압도적이고 혼란스러워질 수 있습니다. 그것들을 분류하기 위해서는 디자인을 좀 더 체계적으로 봐야 합니다. 그것이 웹 디자이너 Brad Frost가 한 일입니다.

아토믹 디자인의 탄생

Brad가 원자 디자인을 생각해 낸 방법은 다음과 같습니다. “영감과 유사점을 찾는 과정에서 저는 계속 화학으로 돌아갔습니다. 생각은 모든 물질(고체, 액체, 기체, 단순, 복합 등)이 원자로 구성되어 있다는 것입니다. 이러한 원자 단위는 서로 결합하여 분자를 형성하고, 분자는 차례로 더 복잡한 유기체로 결합하여 궁극적으로 우리 우주의 모든 물질을 생성합니다.”

그는 인터페이스가 빌딩 블록으로 분류될 수 있는 구성 요소로 구성되어 있다고 계속 설명합니다. 가장 작은 것부터 큰 것의 순서는 다음과 같습니다.

• 원자
• 분자
• 유기체
• 템플릿
• 페이지

출처: BradFrost.com

원자 설계의 빌딩 블록

원자 설계의 주요 장점은 일관성을 촉진한다는 것입니다. 생성한 많은 요소를 쉽게 복제, 재사용 또는 확장할 수 있습니다. 그리고 그것들을 모두 추적하기 위해 디자이너는 한 곳에서 모든 요소와 스타일을 볼 수 있는 라이브러리를 구축할 수 있습니다. 사용자 정의의 여지도 있지만 구성 요소의 범위가 점점 더 복잡해지고 거대해질 때만 가능합니다. 다섯 가지 구성 요소에 대해 알아보겠습니다.

1. 원자

원자가 자연 세계에서 중요하듯이 HTML 태그는 웹 인터페이스에 대한 것입니다. 의미: 모든 웹 인터페이스는 HTML 태그 또는 기본 요소(애니메이션, 버튼, 색상 팔레트, 글꼴, 양식 레이블 등)로 시작합니다. 이러한 원자는 그 자체로는 웹 디자인에 도움이 되지 않지만 웹 인터페이스를 구축하는 데 필요합니다.

2. 분자

분자는 원자보다 복잡하지만 전체적으로 복잡하지는 않습니다. 유용하지 않은 원자를 함께 그룹화하면 더 유용한 분자가 됩니다. 검색 양식 레이블 + 입력 + 버튼(원자) = 완성된 검색 양식(분자)

3. 유기체

분자를 그룹화하면 이전보다 더 복잡한 유기체를 얻게 됩니다. 로고 + 탐색 + 검색 양식 + 소셜 미디어 아이콘(분자) = 완성된 마스트헤드(유기체)

이상적으로는 일반 레이아웃을 유지하고 다른 텍스트와 이미지로 사용자 정의하면서 웹사이트 또는 다른 웹사이트에서 유기체를 재사용할 수 있습니다. 예를 들어, 디자인하는 모든 웹사이트에서 동일한 유형의 마스트헤드를 사용하거나 제품 페이지에서 반복하는 제품별 유기체(이미지 + 제목 + 가격)를 만들 수 있습니다.

이것은 웹 인터페이스가 진정으로 독특하고 사용자 정의된 방식으로 형성되기 시작하는 때입니다. 지금까지 인터페이스는 단순한 요소 모음이었습니다. 유기체 단계에서 웹사이트는 더욱 시각적으로 변합니다.

프로세스를 클라이언트와 공유한다면 "아, 알겠습니다."라고 말하는 부분입니다. 지금은 와이어프레이밍을 시작하거나 목업을 함께 만들어 더 나아지기 전에 클라이언트가 피드백을 줄 수 있도록 할 때입니다.

4. 템플릿

유기체를 그룹화하면 템플릿이 있습니다. 이것은 실제 페이지 레이아웃이 결합되는 때입니다. 분자와 유기체에는 고유한 내부 레이아웃이 있지만 템플릿 단계는 서로 보완하고 상호 작용하는 방식을 보기 시작하는 단계입니다. 그들이 서로에 대해 배치되는 곳; 그리고 그것들이 전체적으로 어떻게 흐르는지. 템플릿은 분자와 유기체에 컨텍스트를 제공합니다. 템플릿에는 사용자 지정 콘텐츠나 원본 콘텐츠가 아닌 자리 표시자 콘텐츠가 있습니다.

출처: BradFrost.com

5. 페이지

페이지는 자리 표시자 콘텐츠를 실제 콘텐츠로 대체하여 템플릿을 한 단계 업그레이드합니다. 최종 콘텐츠는 아닐지 모르지만 최종 디자인과 콘텐츠를 더 잘 대표할 것입니다. 이 시점에서 고품질의 영구적인 콘텐츠를 추가하는 것은 웹사이트가 여전히 테스트, 검토 및 조정되어야 하기 때문에 낭비가 될 수 있습니다. 당신이 그 과정에있는 위치에 따라 달라집니다 - 즉, 당신이 확정 컨텐츠 플러그 것을 가능했다.

이것은 웹 사이트가 가장 정밀하게 조사되는 단계입니다. 귀하가 받는 리뷰와 피드백에 따라 분자, 유기체 및 템플릿을 변경해야 할 수 있습니다. 이것은 또한 디자인 변형을 테스트하기에 좋은 시간입니다.

마지막 생각들

원자 설계에 관한 것은 그것이 새로운 것이 아니라는 것입니다. 말은 그렇지만 이론은 그렇지 않습니다. 이것이 웹사이트가 오랫동안 디자인된 방식입니다. 원자적인 디자인 용어로 말하는 것이 자동으로 훌륭한 디자이너나 개발자가 되는 것은 아닙니다. 견고한 작업을 대신하는 것이 아닙니다.

방법론을 명확히 하기 위해 이런 종류의 용어를 사용할 때 이 방법에 대해 말하는 것의 한 가지 이점은 비개발자가 이해하기 더 쉽다는 것입니다. 즉, 고객에게 프로세스를 설명할 수 있습니다. 그리고 조직화된 개발자에게는 디자인을 구획화하는 방법입니다. 하나의 구성 요소 또는 작동하지 않는 요소의 작은 그룹으로 드릴다운할 수 있습니다. "이 모든 게 잘못됐어."라고 말하는 대신 나무 대신 숲을 바라보는 데 도움이 될 수 있습니다.

원자적 디자인을 통해 길을 잃지 않고 창의성을 포용할 수 있습니다. 복잡한 조정, 문제 해결, 클라이언트 요구 충족 및 궁극적으로 진행되는 웹 사이트 만들기와 같은 예술성과 기술이 가장 필요한 곳에 시간을 보낼 수 있도록 프로젝트를 더 빨리 시작할 수 있는 방식으로 기본 요소와 디자인 시스템을 랭글링합니다. 규범을 넘어서.

웹 디자인의 추진력을 유지하고 모든 웹 디자인 프로젝트에서 따라야 할 좋은 UI 디자인의 10가지 규칙을 확인하십시오.

ShadeDesign/Shutterstock.com을 통한 추천 이미지