개발자를 위한 상위 10가지 프론트엔드 디자인 규칙

프론트 엔드 개발자로서 우리의 임무는 본질적으로 코드를 통해 디자인을 현실로 바꾸는 것입니다. 디자인을 이해하고 유능한 것은 디자인의 중요한 구성 요소입니다. 불행히도 프론트엔드 디자인을 진정으로 이해하는 것은 말보다 쉽습니다. 코딩과 미적 디자인에는 꽤 다른 기술이 필요합니다. 그 때문에 일부 프론트 엔드 개발자는 디자인 측면에서 마땅히 해야 할 것만큼 능숙하지 않고 결과적으로 작업에 어려움을 겪습니다.

내 목표는 프론트엔드 개발자에서 다른 개발자로 넘어가기 쉬운 몇 가지 규칙과 개념을 제공하여 디자이너가 열심히 작업한 작업을 엉망으로 만들지 않고 프로젝트의 처음부터 끝까지 진행하는 데 도움이 되는 것입니다. 괜찮은 결과로 자신의 프로젝트를 디자인할 수도 있습니다.)

물론, 이러한 규칙이 기사 하나를 읽는 데 걸리는 시간에 당신을 나쁘게에서 훌륭하게 만들지는 않겠지만, 당신의 작업에 적용한다면 큰 차이를 만들 것입니다.

그래픽 프로그램에서 작업하기

프로젝트를 완료하고 디자인 파일의 모든 미학적 변형을 유지하면서 처음부터 끝까지 진행하는 것은 정말 드뭅니다. 불행히도 디자이너는 항상 빠른 수정을 위해 달려가는 것은 아닙니다.

따라서 모든 프론트 엔드 작업에는 미적 관련 조정을 해야 하는 지점이 항상 있습니다. 확인란을 선택할 때 표시되는 확인 표시를 하거나 PSD가 놓친 페이지 레이아웃을 만들든 프론트 엔더는 종종 이러한 겉보기에 사소한 작업을 처리하게 됩니다. 당연히 완벽한 세계에서는 그렇지 않을 것이지만 아직 완벽한 세계를 찾지 못했기 때문에 유연해야 합니다.

이러한 상황에서는 항상 모형용 그래픽 프로그램을 사용해야 합니다. Photoshop, Illustrator, Fireworks, GIMP 등 어떤 도구를 선택하든 상관 없습니다. 코드에서 디자인을 시도하지 마십시오. 잠시 시간을 내어 실제 그래픽 프로그램을 실행하고 어떻게 보일지 파악한 다음 코드로 이동하여 실행하십시오. 당신은 전문 디자이너가 아닐 수도 있지만 여전히 더 나은 결과를 얻을 수 있습니다.

디자인에 맞추세요, 이기려고 하지 마세요

당신의 임무는 당신의 체크 표시가 얼마나 독특한지 감동시키는 것이 아닙니다. 당신의 임무는 그것을 디자인의 나머지 부분과 일치시키는 것입니다.

디자인 경험이 많지 않은 사람들은 겉보기에 사소한 세부 사항으로 프로젝트에 흔적을 남기고 싶은 유혹을 쉽게 받을 수 있습니다. 디자이너에게 맡겨주세요.

"내 체크 표시가 멋지게 보이나요?"라고 묻는 대신 "내 체크 표시가 디자인과 얼마나 일치합니까?"

당신의 초점은 디자인을 능가하려고 하는 것이 아니라 항상 디자인 작업에 집중해야 합니다.

타이포그래피가 모든 차이를 만듭니다

디자인의 최종 모양이 타이포그래피의 영향을 얼마나 많이 받는지 알면 놀랄 것입니다. 디자이너가 이 작업에 얼마나 많은 시간을 할애하는지 알면 놀랄 것입니다. 이것은 "픽-잇-고" 노력이 아니며 상당한 시간과 노력이 필요합니다.

실제로 타이포그래피를 선택해야 하는 상황에 이르게 된다면 상당한 시간을 투자해야 합니다. 온라인으로 가서 좋은 글꼴 조합을 조사하십시오. 몇 시간 동안 이러한 조합을 시도하고 프로젝트에 가장 적합한 타이포그래피를 얻을 수 있는지 확인하십시오.

디자인 작업을 하고 있다면 디자이너의 타이포그래피 선택을 따라야 합니다. 이것은 단순히 글꼴을 선택하는 것을 의미하지 않습니다. 줄 간격, 문자 간격 등에 주의하십시오. 디자인의 타이포그래피와 일치시키는 것이 얼마나 중요한지 간과하지 마십시오.

또한 올바른 위치에 올바른 글꼴을 사용하고 있는지 확인하십시오. 디자이너가 헤더에만 Georgia를 사용하고 본문에는 Open Sans를 사용하는 경우 본문에는 Georgia를, 헤더에는 Open Sans를 사용해서는 안 됩니다. 타이포그래피는 미학을 쉽게 만들거나 깨뜨릴 수 있습니다. 디자이너의 타이포그래피와 일치하는지 확인하는 데 충분한 시간을 할애하십시오. 알찬 시간이 될 것입니다.

프론트엔드 디자인은 터널 비전을 허용하지 않습니다

당신은 아마도 전체 디자인의 작은 부분을 만들 것입니다.

내가 진행한 예는 사용자 지정 확인란을 선택하지 않고 포함하는 디자인에 대해 확인 표시를 하는 것입니다. 만들고 있는 부분이 전체 디자인의 작은 부분이라는 것을 기억하는 것이 중요합니다. 더도 말고 덜도 말고 페이지의 체크 표시만큼 중요하게 확인하십시오. 당신의 작은 부분에 대해 터널 비전을 가지고 있어서는 안 되는 것으로 만들지 마십시오.

사실, 이것을 하기 위한 좋은 기술은 지금까지 프로그램의 스크린샷 또는 디자인 파일의 스크린샷을 찍는 것입니다. 그렇게 하면 페이지의 다른 디자인 요소에 어떤 영향을 미치는지와 해당 역할에 제대로 맞는지 실제로 확인할 수 있습니다.

관계 및 계층

디자인이 계층 구조와 함께 작동하는 방식에 특히 주의하십시오. 제목이 텍스트 본문에 얼마나 가깝습니까? 위의 텍스트에서 얼마나 멀리 떨어져 있습니까? 디자이너는 어떤 요소/제목/텍스트 본문이 관련되고 어떤 것이 관련되지 않는지 어떻게 표시합니까? 그들은 일반적으로 관련 콘텐츠를 함께 상자에 넣고, 다양한 공백을 사용하여 관계를 표시하고, 유사하거나 대조되는 색상을 사용하여 관련/비관련 콘텐츠를 표시하는 등의 방식으로 이러한 작업을 수행합니다.

디자인이 관계 및 계층 구조를 달성하는 방식을 인식하고 이러한 개념이 최종 제품(구체적으로 디자인되지 않은 콘텐츠 및/또는 동적 콘텐츠 포함)에 반영되도록 하는 것은 당신의 일입니다. 이것은 당신이 좋은 일을 하고 있는지 확인하기 위해 추가 시간을 들여야 하는 또 다른 영역(예: 타이포그래피)입니다.

공백 및 정렬에 대해 까다롭게

이것은 디자인을 개선하거나 다른 사람의 디자인을 더 잘 구현하기 위한 훌륭한 팁입니다. 디자인이 20단위, 40단위 등의 간격을 사용하는 것 같으면 모든 간격이 20단위의 배수인지 확인하십시오.

이것은 미학에 대한 눈이 없는 사람이 신속하게 상당한 개선을 할 수 있는 아주 간단한 방법입니다. 요소가 픽셀 아래로 정렬되어 있고 모든 요소의 모든 가장자리 주위의 간격이 가능한 한 균일한지 확인하십시오. 그렇게 할 수 없는 경우(예: 계층 구조를 나타내기 위해 추가 공간이 필요한 곳) 다른 곳에서 사용하는 간격의 정확한 배수로 만드십시오. , 등등.

많은 개발자가 디자인 파일의 특정 콘텐츠에 대해 이 작업을 수행하지만 콘텐츠 추가/편집 또는 동적 콘텐츠 구현과 관련하여 구현하는 내용을 진정으로 이해하지 못했기 때문에 공백이 도처에 갈 수 있습니다.

디자이너가 공백을 어떻게 사용했는지 이해하고 빌드에서 이러한 개념을 따르도록 최선을 다하세요. 그리고 예, 이것에 시간을 할애하십시오. 작업이 완료되었다고 생각되면 뒤로 돌아가서 간격을 측정하여 모든 항목을 가능한 한 많이 정렬하고 균일한 간격으로 배치 했는지 확인한 다음 다양한 콘텐츠가 포함된 코드를 사용하여 유연성 이 있는지 확인하십시오.

자신이 무엇을 하고 있는지 모른다면 덜 하라

저는 모든 프로젝트에서 미니멀리즘 디자인을 사용해야 한다고 생각하는 사람이 아닙니다. 하지만 디자인에 자신이 없고 추가해야 할 것이 있다면 적은 것이 더 좋습니다.

디자이너가 주요 작업을 처리했습니다. 작은 필러만 하면 됩니다. 디자인에 능숙하지 않은 경우 해당 요소가 작동하도록 할 수 있는 한 최소한의 작업을 수행하는 것이 좋습니다. 그렇게 하면 디자이너의 작업에 자신의 디자인을 더 적게 주입하고 가능한 한 영향을 최소화할 수 있습니다.

디자이너의 작업은 중앙 무대에 두고 당신의 작업은 뒷자리에 놓이게 하십시오.

시간은 우리 모두를 바보로 만든다

디자이너에 대한 비밀을 하나 말하겠습니다. 실제로 종이나 Photoshop 캔버스에 적는 것의 90%(또는 그 이상)는 그리 좋지 않습니다.

그들은 당신이 본 것보다 훨씬 더 많이 버립니다. 실제 고객은 신경 쓰지 않고 옆 칸막이에 있는 사람이 작업을 볼 수 있도록 하기 위해 디자인을 수정하고 만지작거려야 하는 경우가 많습니다. 일반적으로 빈 캔버스에서 좋은 디자인으로 한 번에 이동하지 않습니다. 그 사이에 무리 반복이 있습니다. 사람들은 그것을 이해하고 그들의 과정에서 그것을 허용할 때까지 거의 좋은 일을 하지 않습니다.

그래서 이것을 어떻게 구현합니까? 한 가지 중요한 방법은 버전 간에 시간이 걸리는 것입니다. 마음에 드는 것이 보일 때까지 작업한 다음 치워 두십시오. 몇 시간 두었다가(밤새 놓아두는 것이 더 좋습니다), 다시 열어서 살펴보십시오. 신선한 눈으로 보면 얼마나 다른지 놀라게 될 것입니다. 개선할 영역을 빠르게 선택할 수 있습니다. 그들은 너무 명확하여 처음에 어떻게 놓쳤는지 궁금해 할 것입니다.

사실, 내가 아는 더 나은 디자이너 중 한 명이 이 아이디어를 훨씬 더 발전시켰습니다. 그는 세 가지 다른 디자인을 만드는 것으로 시작했습니다. 그런 다음 그는 적어도 24시간을 기다렸다가 다시 보고 모든 것을 버리고 4분의 1부터 처음부터 시작했습니다. 다음으로, 그는 각 반복 사이에 하루를 허용할 것입니다. 어느 날 아침 그가 그것을 열고 완전히 행복했을 때만, 또는 적어도 디자이너가 완전히 행복할 수 있었던 만큼만 그는 그것을 클라이언트에게 보낼 것입니다. 이것은 그가 만드는 모든 디자인에 사용한 프로세스였으며 그에게 매우 유용했습니다.

나는 당신이 그렇게 까지 할 것이라고 기대하지 않지만 "디자인에 대한 눈"이 없는 시간이 얼마나 도움이 될 수 있는지 강조합니다. 이는 디자인 프로세스의 필수적인 부분이며 비약적으로 개선할 수 있습니다.

픽셀 문제

마지막 픽셀까지 완성된 프로그램의 원래 디자인과 일치하도록 최선을 다해야 합니다.

일부 영역에서는 완벽할 수 없습니다. 예를 들어, 문자 간격에 대한 제어가 디자이너의 제어만큼 정확하지 않을 수 있고 CSS 그림자가 Photoshop의 그림자와 정확히 일치하지 않을 수 있지만 여전히 가능한 한 가깝게 시도해야 합니다. 디자인의 여러 측면에서 픽셀 단위의 정밀도를 얻을 수 있습니다. 그렇게 하면 최종 결과에 큰 차이를 만들 수 있습니다. 여기 저기 떨어져 있는 픽셀은 별 것 아닌 것 같지만, 생각보다 많이 쌓여 전체적인 미학에 영향을 줍니다. 계속 주시하십시오.

원본 디자인을 최종 결과와 비교하는 데 도움이 되는 [도구]가 많이 있습니다. 아니면 스크린샷을 찍어 디자인 파일에 붙여넣어 각 요소를 최대한 가깝게 비교할 수 있습니다. 스크린샷을 디자인 위에 놓고 차이점을 볼 수 있도록 반투명하게 만드십시오. 그런 다음 제자리에 맞추려면 얼마나 조정해야 하는지 알 수 있습니다.

피드백 받기

"디자인에 대한 눈"을 얻기는 어렵습니다. 혼자서 하기는 더욱 어렵습니다. 개선할 수 있는 방법을 실제로 보려면 다른 사람의 의견을 구해야 합니다.

나는 당신이 이웃을 붙잡고 조언을 구하라고 제안하는 것이 아닙니다. 내 말은 당신이 실제 디자이너와 상의하고 그들이 당신의 작업을 비판하고 제안을 제공하도록 해야 한다는 것을 의미합니다.

그렇게 하려면 약간의 용기가 필요하지만 결국 단기적으로는 프로젝트를 개선하고 장기적으로 기술 수준을 향상시키기 위해 할 수 있는 가장 강력한 일 중 하나입니다.

미세 조정해야 하는 모든 것이 간단한 체크 표시만 있어도 기꺼이 도와줄 사람이 많이 있습니다. 디자이너 친구든 온라인 포럼이든 자격을 갖춘 사람들을 찾고 피드백을 받으십시오.

시간이 많이 걸리는 것처럼 들릴 수 있고 당신과 당신의 디자이너 사이에 마찰을 일으킬 수 있지만, 큰 틀에서는 그만한 가치가 있습니다. 훌륭한 프론트엔드 개발자는 디자이너가 듣고 싶어 하지 않는 내용일지라도 디자이너의 소중한 의견에 의존합니다.

따라서 디자이너와 건설적인 관계를 구축하고 유지하는 것이 중요합니다. 당신은 모두 같은 배를 타고 있으므로 최상의 결과를 얻으려면 모든 단계에서 협업하고 의사 소통해야 합니다. 디자이너와 유대감을 형성하는 데 투자하는 것은 모든 사람이 더 나은 작업을 수행하고 모든 것을 제시간에 실행하는 데 도움이 되기 때문에 그만한 가치가 있습니다.

결론

요약하자면 다음은 프론트엔드 개발자를 위한 간단한 디자인 팁 목록입니다.

• 그래픽 프로그램에서 디자인합니다. 코드로 디자인하지 마세요. 아주 작은 것이라도 말이죠.
• 디자인을 일치시킵니다. 원래 디자인을 의식하고 개선하려고 하지 말고 그냥 맞추세요.
• 타이포그래피는 거대합니다. 그것이 올바른지 확인하는 데 보내는 시간은 그 중요성을 반영해야 합니다.
• 터널 비전을 피하십시오. 추가한 항목이 필요한 만큼만 눈에 띄는지 확인하십시오. 설계했다고 해서 더 중요한 것은 아닙니다.
• 관계 및 계층 구조: 적절하게 구현할 수 있도록 디자인에서 작동 방식 을 이해합니다.
• 공백과 정렬이 중요합니다. 픽셀에 맞게 정확하게 만들고 추가하는 모든 항목에 균일하게 만듭니다.
• 자신의 기술에 자신이 없다면 가능한 한 최소한의 스타일로 추가하십시오.
• 수정 사이에 시간을 내십시오. 나중에 다시 와서 신선한 눈으로 디자인 작업을 확인하십시오.
• 가능한 한 픽셀 완벽한 구현이 중요합니다.
• 용기를 내십시오. 당신의 작품을 비평할 경험 많은 디자이너를 구하세요.

모든 프론트엔드 개발자가 환상적인 디자이너가 되는 것은 아니지만 모든 프론트엔드 개발자는 최소한 디자인 측면에서 유능 해야 합니다.

진행 상황을 식별하고 최종 제품에 디자인을 적절하게 적용하려면 디자인 개념에 대해 충분히 이해해야 합니다. 때로는 철저한 디자이너가 있다면(그리고 픽셀 단위로 복사할 수 있을 만큼 디테일 지향적인 경우) 맹목적인 복사를 피할 수 있습니다.

그러나 대규모 프로젝트를 다양한 콘텐츠 변형에서 빛나게 하려면 디자이너의 머리를 통해 진행되는 작업에 대한 약간의 이해가 필요합니다. 디자인이 어떻게 생겼는지 보기만 하는 것이 아니라 디자인이 왜 그렇게 보이는지 알아야 하며, 그렇게 하면 작업에 영향을 미칠 기술 및 미적 한계를 염두에 둘 수 있습니다.

따라서 프론트 엔드 개발자라도 정기적인 자기 개선의 일부에는 항상 디자인에 대해 더 많이 배우는 것이 포함되어야 합니다.