사랑하는 디자이너에게 (프론트엔드 개발자의 편지)

친애하는 디자이너,

이 편지는 수년 동안 양조되었습니다. 그 중 일부는 오랜 기간 동안 다양한 디자이너에게 연설과 서면으로 전달되었습니다.

그러나 나는 그것이 내가 작업하고 있는 현재 디자이너나 클라이언트에 연루될 수 있다는 두려움 때문에 항상 그것을 출판하는 것을 두려워했습니다. 따라서 진행하기 전에 이것은 특정한 불만 사항이 아니라 18년 간의 의견 불일치에 대한 항목별 목록임을 강조하고 싶습니다.

우리는 거의 20년 동안 함께 일해 왔으며 귀하가 나에게 보낸 각 PSD 파일에는 동일한 문제가 있습니다. 당신의 직업을 가르치려는 무례함을 용서하십시오.

나는 당신에게 그래픽이나 미학에 대해 가르칠 생각이 없습니다. 나는 타이포그래피, 가독성 또는 공백의 사용에 대해 탐구하지 않을 것입니다.

대신, 당신의 노동의 결과가 나에게 어떻게 영향을 미치는지 설명하고 싶습니다.

픽셀 완벽한 웹 페이지로 디자인을 재현하는 데 필요한 것이 무엇인지 상기시켜 드리고 싶습니다. 설계 파일이 문서화에 어떻게 사용되는지, 생성한 이미지가 확장성 및 성능의 가장 기본적인 수준까지 사용되는 기술을 결정하는 방법을 알려드리고자 합니다.

또한, 빠르고 쉽게 수행할 수 있는 작업과 전체 프로덕션을 크롤링하는 오버헤드를 생성하는 작업을 보여주고 싶습니다.

그리고 무엇보다도, 저는 여러분이 지금 만들고 있는 그림 이 상호 작용하고 반응하고 수천 명의 다른 개인과 의사 소통하고 가르치고 배워야 하는 생명체로 만들어질 것임을 상기시키고 싶습니다. 가능한 가장 쉬운 방법으로. 그것을 위해 그리고 그들을 위해.

문서화를 위한 디자인

우선 제작하고 있는 PSD 파일은 클라이언트가 승인할 이미지의 출처일 뿐만 아니라 개발자를 위한 기술 문서 이자 소스 자료 임을 상기시켜 드리고 싶습니다. 따라서 레이어와 그룹 을 깔끔하게 정리하고 이름을 지정 하십시오.

디자인에 주석을 답니다. 사용한 규칙으로 별도의 파일을 만들거나 별도의 숨겨진 레이어에 기록하십시오.

어떤 글꼴을 무엇에 사용했는지 알려주세요. 사용할 색상, 간격 및 컨텍스트를 알려주십시오. 내가 알 필요가.

또한 특정 기능에 대한 디자인이 만들어지지 않은 경우 외삽해야 할 내용을 알아야 합니다.

내가 말하려는 것은: 가능하다면 디자인하는 제품에 대한 간략한 스타일 가이드를 만드 십시오.

두 가지 모두를 위해 제목과 같은 표준 텍스트 블록을 추가할 때 그 뒤에 사각형을 추가하여 주변의 간격을 나타냅니다. 그러면 매번 일관되게 배치할 수 있습니다. 이것이 너무 많은 작업이라면 최소한 문서의 어떤 예가 canon인지 표시하십시오.

제목이 시각적으로 배치되는 단일 인스턴스에 맞도록 눈으로 보는 것을 얼마나 자주 찾았는지 말할 수는 없지만 측정할 때 각각 고유한 간격이 있음을 알 수 있습니다.

콘텐츠 블록도 마찬가지입니다. 다른 콘텐츠 블록 목록이 있는 경우 일관되게 간격을 두십시오.

콘텐츠 디자인 섹션에서 더 자세히 설명하겠지만 제목이 항상 한 줄에 있을 것이라고 가정하지 말고 해당 정보를 파일에 사용하세요.

글꼴 크기가 22px이고 줄 높이가 92px인 이러한 제목을 계속 보게 됩니다(물론 기본 페이지 제목에서 복사하여 붙여넣음). 선택한 설정은 내보낸 파일을 시각적으로 변경하지 않더라도 관련이 있습니다.

기술을 위한 디자인

여기에는 두 가지 측면이 있습니다. 할 수 있는 것과 매체 에 적합한 것 .

웹사이트 개발을 위해 기술적으로 모든 것이 가능한 지점에 빠르게 도달하고 있지만(다른 것이 없다면 여전히 캔버스를 사용하여 픽셀 단위로 그릴 수 있음) 많은 솔루션이 프로덕션 준비가 되지 않았습니다 .

누군가 WebGL 3D와 CSS 흐림 효과 및 데모 페이지 필터 마스크를 성공적으로 결합한 예를 발견했다고 해서 단일 페이지 애플리케이션에서 전체 창 시차 패널로 사용할 수 있다는 의미는 아닙니다.

그리고 정말로 최첨단을 걷고 싶다면 승인을 위해 디자인을 제출 하기 전에 개발자와 상의하십시오. 그렇지 않으면 클라이언트가 더 적은 비용으로 만족하도록 하기가 어려울 것입니다.

하지만 정말로 가장자리를 테스트하고 싶고 재미삼아 테스트하고 싶다면 개인적으로 저에게 연락하십시오. 나는 당신만큼 그런 것들을 만드는 것을 좋아합니다. 예산이 편성된 생산 프로젝트에 그 물건을 넣지 마십시오.

그런 것들을 넘어서 – 할 수 있는 것의 한계를 시험하는 것 이상으로 해야 할 일에 대해 민감하고 분별력 있게 노력 하십시오.

당신은 그래픽 아티스트가 아닙니다. 당신은 그 이상, 당신은 디자이너입니다.

특정 방식으로 보이도록 설계할 뿐만 아니라 특정 방식으로 실행 하고 통신 하고 특정 방식으로 작동 하도록 설계해야 합니다.

어디에서나 디자이너에게 친숙한 진부한 표현으로 이동합니다. 아무도 앉을 수 없다면 멋진 의자가 무슨 소용이 있습니까?

그림이 아닌 디자인 이 되려면 로딩 속도, 실행 속도 및 사용 편의성을 디자인에 통합해야 합니다.

HTML과 CSS만으로 가능한 한 많은 것을 얻으려고 노력하십시오. Photoshop에서 사용할 수 있는 멋진 기능을 사용하지 마십시오. 블렌딩을 사용하지 마십시오! 가짜 굵게 및 가짜 기울임꼴을 사용하지 마십시오.

요소를 이미지로 만들려는 경우가 아니면 가장 단순한 그림자를 제외하고는 필터를 전혀 사용하지 마십시오.

혼합 색상 채우기를 사용했기 때문에 색상을 계산하거나 선택하게 하지 마십시오. 오버레이 블렌딩을 사용하여 투명한 이미지를 위조하지 마십시오. 실제로 현장에서 투명한 이미지가 필요합니다.

Bootstrap과 같은 프론트엔드 프레임워크를 사용하는 경우 이러한 문제 중 많은 부분이 이미 해결되었으므로 작업 방식과 수정 방법을 알아보세요. 관련 없는 것을 무작정 디자인하지 마십시오.

당신의 디자인이 프레임워크가 하는 일과 일치하지 않는다면, 그것을 구현하는 것은 디자인을 구현하지 않는 것입니다. 대신 우리는 선택적으로 프레임워크를 재정의하게 되므로 디자인이 엉망이 되지 않고 처음부터 구현합니다. 작업량이 절반이 아닌 두 배로 늘어납니다.

마지막으로, 사이트에서 세 개 이상의 글꼴 또는 글꼴 변형을 사용하지 마십시오. 각각 고유한 일반 및 기울임꼴 변형이 있는 6가지 다른 가중치가 필요한 경우 더 이상 웹용으로 디자인하지 않습니다.

상호 작용을 위한 디자인

이것은 거대한 것입니다. 그리고 이 편지는 원래 이 주제만을 위해 작성되었습니다. 사용자와 기능이 상호 작용할 수 있는 모든 방법을 알고 이해해야 합니다.

가장 간단한 것부터 시작합시다: 링크.

링크에는 두 가지 상태만 있는 것이 아닙니다.

내가 받은 탐색에는 항상 링크 와 활성 링크 (현재 페이지)에 대한 디자인이 제공됩니다.

다른 경우에는 일반적으로 기본 및 호버 상태를 제공합니다.

최소한의 사용자 친화성을 원하면 기본, 호버 및 포커스 상태에 대한 고유한 디자인이 있어야 합니다( 방문 및 활성도 UX에 있으면 좋습니다). 그리고 탐색의 경우 링크와 활성 링크는 각각 위의 모든 상태를 가 집니다.

아, 그리고 상태 사이의 링크 레이아웃을 감히 변경하지 마십시오(다양한 테두리 너비, 패딩 등).

마찬가지로 버튼처럼 보이지 않으면 배경이 없는 것입니다. 기간. 인라인 텍스트 요소를 채우는 것은 엉망이며, 채워지지 않은 텍스트 배경은 절대 그렇지 않습니다.

우리는 이것을 모바일에서 사용할 것이기 때문에 별도의 상호작용 요소 사이에 충분한 공백이 있고 각 히트박스가 충분히 큰지 확인하십시오. 각 축에 최소 42px가 표준이라고 생각합니다.

보이지 않는 직사각형을 그리거나 히트박스를 표시하는 숨겨진 레이어를 그립니다. 겹치지 않고 사용자 상호 작용이 모호하지 않은지 확인하십시오.

양식 요소는 더욱 심각합니다.

내가 보는 가장 일반적인 경우는 라디오 버튼과 체크박스입니다. 스탠다드는 못생겼다! 그래서, 당신은 당신 자신을 디자인하고 나에게 확인된 상태와 확인되지 않은 상태를 주고 스스로 끝났다고 생각합니다.

그러나 확인란에 대한 전체 다차원 상태 테이블이 있으며 각 상태는 사용자에게 시각적으로 표시되어야 합니다.

다음과 같은 상태가 있습니다.

• 선택 또는 선택 취소
• 호버 여부
• 집중하든 말든
• 활성화 또는 비활성화
• 오류 여부

이들 각각은 다른 것들과 결합할 수 있습니다.

Disabled는 일부 조합(hover 및 focus는 비활성화된 경우 일반적으로 관련이 없음)을 방지하지만 전부는 아닙니다(checked-disabled-error는 확인란에 대해 완벽하게 유효하고 유익한 상태임). 따라서 우리는 16개의 활성화된 상태와 4개의 비활성화된 상태로 끝나서 총 20개 이상의 고유한 상태를 제공합니다. 예를 들어, 귀하가 일반적으로 제공하는 상태는 해당 설정에서 선택되지 않음-활성화되지 않음 및 선택되지 않음-비활성화되지 않음입니다.

다른 양식 요소는 선택 취소 상태가 아닐 수 있지만 비어 있거나 비어 있지 않을 수 있습니다(자리 표시자 텍스트 표시). 또한 오류 여부가 중립적 경고 오류 성공만큼 복잡할 수 있도록 보다 복잡한 정보 상태를 가질 수 있습니다.

그런 다음 레이블, 입력 도움말 및 오류 텍스트에 대해 명확하게 정의된 레이아웃 및 디자인과 함께 필수 또는 선택적 표시기가 있어야 합니다.

그리고 정말로 사용자 친화적인 상태를 원한다면 사용자가 데이터를 제공한 적이 없거나 데이터가 이미 저장되었거나 변경되었지만 아직 저장되지 않았음을 나타내는 원시 상태가 필요합니다.

내 말은: 상호작용을 위한 디자인은 어렵다는 것입니다. 라디오 버튼의 모양을 변경하고 싶다면 두 가지 상태로 교묘하게 변경하지 마십시오.

상호 작용을 위한 디자인의 마지막 요점: 상호 작용이 어떻게 보이는지 결정하십시오. 즉, 대화형 요소에 사용할 규칙을 결정하고 다른 요소에는 사용하지 마십시오.

아니요, 링크를 표시하기 위해 기본 브랜드 색상을 사용할 수 없습니다. 특히 동일한 솔루션을 사용하여 중요한 콘텐츠를 강조하는 경우에는 더욱 그렇습니다!

콘텐츠를 위한 디자인

립섬 콘텐츠로 채워진 각 요소의 이상적인 레이아웃은 클라이언트에게 시각적 스타일에 대한 승인을 얻기 위해 사진을 제시하기에 충분합니다. 하지만 콘텐츠 디자인은 거기서 시작도 끝나지도 않습니다.

콘텐츠 레이아웃으로 무엇을 하고 싶은지 대략적으로 파악했다면 동적 콘텐츠로 작업하고 있음을 기억하십시오. 각 콘텐츠에 대해 확인해야 하는 두 가지 경우가 있습니다.

• 양이 너무 많다면?
• 너무 적은 경우(또는 완전히 누락된 경우) 어떻게 됩니까?

제목이 엄청나게 짧거나 비정상적으로 길면 어떻게 되는지 확인하세요. 중요한 요소가 누락된 경우 콘텐츠 블록은 어떻게 표시되어야 합니까? 사진이 없다면?

페이지 섹션에 대한 콘텐츠가 없는 경우 제목, 컨테이너 및 모두와 같은 전체 섹션을 제거하거나 섹션을 유지하고 "아직 기사가 없습니다. 나중에 다시 확인하시겠습니까?"라는 줄을 따라 무언가를 표시합니다. 더 좋은 점: “이 콘텐츠가 도착하면 알림을 받으시겠습니까? 뉴스레터를 신청하세요!”

결정을 내리십시오! 그런 다음 그것들을 디자인하십시오!

외부 또는 동적 소스에서 로드된 피드 또는 콘텐츠를 디자인하는 경우 모든 오류 및 알림을 포함하는 것을 잊지 마십시오. 실제로 페이지 알림 메타 콘텐츠가 전체적으로 어떻게 보이는지 표시하도록 디자인한 다음 이러한 디자인 규칙을 고수하여 문제가 발생할 경우 사용자에게 알립니다.

고정 너비 버튼과 고정 높이 텍스트 블록을 피하십시오. 그리고, 내가 전에 그렇게 말하지 않았다면, 그것이 항상 한 줄의 텍스트일 것이라고 생각한다면, 당신은 틀렸습니다! 이제 여러 줄로 만드는 가장 좋은 방법을 확인하십시오.

동일한 콘텐츠의 구조가 동일한지 확인합니다.

동일한 제목이 여러 위치에서 표시되는 경우 한 단어는 굵게 표시하고 다른 경우에는 다른 단어를 굵게 표시하지 마십시오!

사실, 제목 내에서 형식 구조를 완전히 피하십시오. 마찬가지로 한 곳에서 텍스트를 수동으로 나누지 말고 다른 곳에서 다르게 나누십시오. 사실, 수동으로 텍스트를 나누지 마십시오!

이러한 것들이 디자인을 더 좋게 만들 수 있지만 콘텐츠는 CMS를 통해 입력될 가능성이 가장 높으며, 콘텐츠를 입력하는 사람은 게시될 때까지 어떻게 보이는지 볼 수 없거나 수동으로 중단할 도구가 없을 수도 있습니다. 텍스트의 서식을 지정합니다.

고정 너비 텍스트 컨테이너 및 자동 줄 바꿈과 같은 최종 콘텐츠에 동일한 제한이 있는 디자인. 그렇게 촌스러워 보이면 디자인이 좋지 않은 것입니다.

반응성을 위한 디자인

이것은 최근에 많이 진행되었습니다. 적어도 모바일이 실제로 설계된 경우에는 그렇습니다. 점점 더, 우리는 부트스트랩이 그것을 알아내도록 하고 균열에 반창고를 칩니다.

그럼에도 불구하고 알아야 할 몇 가지 간단한 원칙이 있습니다.

첫째, 모바일 및 데스크톱 변형은 별도의 페이지가 아닙니다. 당신이 이것을 알고 있다는 것을 알고 있습니다. 그것들은 단순히 같은 페이지의 리플로우입니다.

간단히 말해서 왼쪽 정렬 텍스트로 작업하는 것과 같습니다. 문장을 더 작은 용기에 넣었다고 해서 단어나 문자의 순서가 바뀌는 것은 아닙니다.

또한 콘텐츠 그룹은 모든 레이아웃에서 공유되어야 합니다. 열을 추가할 때 열 나누기가 일관적인지 확인하십시오.

또한 규칙은 페이지의 다른 버전에 대해 동일한 구조를 따라야 합니다. 즉, 두 요소가 데스크탑에서 동일하게 보이더라도 모바일에서도 동일해야 합니다.

아, 그리고 시차를 원하신다면 충분히 움직일 수 있는 크기의 사진을 제공해 주세요. 당신이 클라이언트에게 보여주고 있는 파일에 맞도록 사진을 맞추거나 자르면 나는 움직일 일이 없습니다.

예외 설계

물론 예외는 항상 가능합니다. 또한 제품이 매력적이고 효과적이기 위해 필요합니다. 그러나 첫 번째 패스에 상자별로 추가하지 마십시오.

동일한 설계 문제를 계속해서 해결하고 있는 자신을 발견하면 이것은 작동하지 않을 것입니다. 특히 각 인스턴스에서 다른 솔루션을 찾는 경우에는 더욱 그렇습니다.

위의 모든 작업을 완료하면 효율적이고 안정적이며 일관된(다소 지루하더라도) 디자인을 얻을 수 있습니다. 이제 양념을 칠 시간입니다. 페이지 전체를 살펴보고 고객에게 가장 큰 효과를 줄 수 있는 머니샷을 확인하기 위해 고객과 이야기하십시오.

우리는 수년 동안 함께 일해 왔으며 고객은 항상 최종 결과에 만족했습니다.

물론 이 중 몇 가지를 놓치면 뛰어들고, 복잡한 디자인을 사용하는 것이 타당할 때 필요한 경우 JavaScript로 렌더링 로직을 작성해 보겠습니다.

필요한 경우 클라이언트에 추가 작업을 수행하고 정당화할 것입니다. 젠장, 나는 오랫동안 받은 디자인 위에 양식과 상호 작용을 디자인해왔기 때문에 이것은 문제가 되지 않을 것입니다.

이 글을 읽고 다음에 우리가 함께 작업할 때 이러한 힌트 중 일부를 염두에 두시기 바랍니다. 나는 그들이 당신의 일을 알려주고 당신이 무엇을해야할지 모를 때 지침을 제공하기를 바랍니다. 우리의 관계가 나에게 중요하고 당신을 상처 입히기 위해 쓴 것이 아니라 우리 관계를 더 좋게 만들기 위해 쓴 것임을 이해해주셨으면 합니다.

사랑으로,

프론트엔드 개발자