웹 디자이너를위한 원자 디자인 입문 / UI / UX

모듈성, 재사용 성, 과 확장 성 코딩 개념 일뿐만 아니라이를 사용하여 보다 최적화 된 설계 시스템. 원자력 디자인 에 대한 새로운 방법론이다. 효과적인 UI 구축 아래에서 위로, 화학 비유를 사용하여.

웹 페이지 컬렉션을 디자인하는 대신, 원자 디자인은 가장 간단한 UI 구성 요소로 시작됩니다. 원자 (버튼, 메뉴 항목 등)을 추가하고 4 단계를 거쳐 전체 UI를 빌드합니다. 분자, 유기체, 템플릿, 과 페이지들.

그 책

이 방법론은 디자이너 인 Brad Frost가 목표로 삼았습니다. “성공적인 UI 디자인 시스템 제작”. 원자 디자인 책으로 발표하다 온라인으로 책을 무료로 읽거나 단행본 ($ 20.00) 또는 전자 서적 ($ 10.00)으로 주문할 수 있습니다..

원자력 디자인은 사용자 인터페이스 디자인에 신선한 새로운 관점에서 접근합니다. 웹 디자인 풍경을 흔들어 라. 조금. 이 기사는 소개하다 이 방법론으로 들어가지만 그 책은 훨씬 더 많은 설명에 들어가기 때문에 읽을 수 있다면 읽을 가치가있다..

원자 설계 계층 구조

원자력 디자인은 기본적으로 정신 모형 디자이너가 웹 페이지를 재사용 가능한 구성 요소의 계층 구조. 원자 적 설계의 계층 구조는 5 단계; 각 단계는 이전 단계의 구성 요소 그룹으로 구성됩니다. 5 단계는 명확하고 논리적으로 결합됩니다. 인터페이스 설계 시스템. 그들은 다음과 같습니다 :

1. 원자들

화학과 똑같이, 원자 가장 작은 빌딩 블록 더 이상 분해 할 수 없다.. 따라서 원자는 기본 HTML 요소, 버튼, 레이블 및 입력 필드와 같은 가장 작은 단위를 제공하다. 웹 페이지의.

당연하지, 모든 HTML 요소가 원자가 아닌, 예를 들어 섹션 요소 (

, 등)은 웹 페이지의 가장 작은 단위가 아닙니다 (될 수 없습니다)..

원자는 단순히 HTML 요소가 아니라 또한 소속 스타일: 글꼴, 색상, 크기 및 기타 CSS 스타일 규칙 Brad 자신의 단어, 원자 “모든 기본 스타일을 한 눈에 보여줍니다.”.

원자 - 예제

여기에 우리 웹 사이트의 예가 있습니다. 추천 게시물의 헤드 라인은 한 종류의 원자; 그들은 동일한 HTML 및 CSS 코드 될 수있다. 쉽게 구별되는 나머지 콘텐츠와.

Hongkiat.com은 원자 설계를 염두에두고 설계되지 않았으므로 여기서 사용됩니다. 데모 목적으로.

원자력 디자인의 본질은 이 다섯 단계를 사용하여 아래에서 위로 UI를 디자인하십시오., 원자 설계 요소를 식별하지 못하게한다..

2. 분자

에이 분자 로 이루어져 원자 그룹에 의해. 분자는 원자 설계 계층에서 다음 단계를 구성합니다. 이미있는 간단한 UI 요소에 대해 생각해보십시오. 둘 이상의 HTML 요소로 구성, 사이드 바의 검색 양식 또는 추천 된 게시물과 같은.

분자로 편성 됨 목적을 부여하다 각 원자에. 더 큰 그룹 (분자)에서 원자는 지원 및 보완 서로, 그들은 반드시 함께 잘 지내다 유용한 디자인을 만들기 위해.

예를 들어, 제목 (한 원자)은 더 강조하다 (더 큰 글꼴, 더 많은 가중치 등)을 추천 게시물 블록의 작성자 이름 (다른 아톰)보다 더 크게 표시합니다. 이 방법으로 두 원자는 “의미심장 한” 에 팀으로 일하다 최상의 결과를 얻으려면.

분자 - 예

앞의 예제를 사용하면 Hongkiat의 사이드 바에서 권장 게시물의 한 블록을 분자로 볼 수 있습니다. 권장되는 포스트 분자는 다음과 같습니다. 3 개의 원자로 구성: 썸네일, 제목 및 작성자 이름 아톰.

3. 생물

유기체는 분자, 원자의 그룹 (그리고 때때로 다른 유기체). 웹 디자인에서 생물은 보다 복잡한 UI 구성 요소 대표하는 최종 섹션 페이지 머리글, 바닥 글 또는 세로 막대와 같은.

유기체는 다음 중 하나로 구성 될 수 있습니다. 다른 유형의 분자, 예를 들어 사이드 바는 검색 창과 다른 종류의 위젯으로 구성 될 수 있습니다. 동일한 분자가 여러 번 반복되었다., 예를 들어 서로의 밑에 관련 포스트 블록의 한 줌. 그리고,이 둘의 조합이 될 수 있습니다..

유기체 - 예

Hongkiat의 웹 사이트에서 사이드 바는 유기체 일 수 있습니다. 그것은 검색 창 (분자의 한 유형, 한 번만 표시됨) 및 여러 추천 게시물 (여러 번 표시되는 또 다른 유형의 분자).

그러나 사이드 바 유기체는 분자 (검색 창) 및 다른 생물 (몇 가지 추천 게시물이있는 권장 게시물 위젯). 원자력 디자인은 유연한 모델, 규칙은 매우 엄격하지 않으므로,이 경우 우리는 분자와 생물체로 동일한 빌딩 블록을 정의 할 수 있습니다.

4. 템플릿

원자 설계 계층의 다음 단계는 다음과 같습니다. 템플릿. 보시다시피 원자 디자인 화학 비유 사용을 중단하다.. 브래드는이 시점에서 전문 용어를 사용하지 않는다고 생각합니다. 덜 이해할 수있는 고객 및 기타 이해 관계자에게 적합하며 디자이너가 판매해야하는 두 가지 마지막 단계 (템플릿 및 페이지)입니다..

템플릿 유기체로 지어져있다. 그들은 페이지 수준 개체 그러나 최종 내용없이. 템플릿의 목적은 다음과 같습니다. 구조를 대표하다 기본 콘텐츠의.

템플릿은 어떻게 서로 다른 원자, 분자, 유기체를 표시합니다. “레이아웃의 맥락에서 함께 기능하다”. 그들은 기본적으로 페이지의 해골.

템플릿 - 예

예를 들어, 홈페이지 템플릿 자리 표시 자 이미지 및 lorem ipsum 텍스트 블록.

아래에서 원자 설계도에서 예제를 볼 수 있습니다. TimeInc 매거진의 홈페이지 템플릿입니다. 원자, 분자 및 유기체는 모두 그 자리에 있지만 개략적 인 내용으로 만.

5. 페이지

페이지 원자 디자인 계층의 마지막 단계를 나타냅니다. 페이지는 “특정 템플릿 인스턴스”. 페이지 단계에서 템플릿은 실제 콘텐츠로 채워지는 (복사, 마이크로 카피, 이미지, 비디오 등) 실제 UI에 표시되는 것처럼.

설계자는 페이지를 통해 최종 사용자 경험 ~ 같이 보일 것입니다. 디자인을 시험하다 실제 사용자와 얼마나 잘 수행하는지 측정하십시오. 유용성, 변환, 액세스 가능성 및 기타 메트릭 측면에서.

페이지 및 템플릿 변형

페이지 단계의 다른 목표는 템플릿 변형 가능한. 템플릿 변형에 대해 템플릿이 같다 그러나 인구가 많은 내용이 (약간) 다르다.. 예를 들어 다른 사용자 그룹 (예 : 방문자 대 로그인 사용자)에 다른 콘텐츠를 표시하려는 경우 또는 한 광고 제목이 다른 광고 그룹보다 훨씬 긴 경우.

템플릿 변형을 사용하는 것이 중요합니다. 일관성 있고 탄력있는 사용자 인터페이스. 작은 구성 요소 (원자, 분자, 유기체)는 다른 시나리오에서도 잘 작동한다..

예를 들어 버튼은 주위의 주변 요소. 특정 변형에서 실행 가능하지 않은 것으로 판단되면 버튼 원자를 다시 디자인해야합니다. 모든 사용 사례에 적합하다..

페이지 - 예

아래에서 이전 TimeInc 홈페이지 페이지 템플리트의 페이지 단계를 볼 수 있습니다. 달라 보이는가? 이것은 단지 하나의 템플릿 변형, 그래도. 효과적인 UI를 갖추려면 디자인 팀이 무엇이 바뀔지 모른다. 실제 사이트에서. 그런 다음 템플릿 변형 (페이지)에 대한 디자인을 테스트해야합니다..