웹 사이트 디자인 핸드 오프 개선을위한 팁

웹 사이트를 구축하는 과정에는 몇 가지 단계가 있습니다. 이를 단순화하고 표준 웹 사이트를 살펴보면 단계는 다음과 같습니다.

1. 필요 – 누군가는 어떤 이유로 든 웹 사이트를 필요로합니다.
2. 브레인 스토밍 – 일반적인 구조, 목표 등을 결정합니다.
3. 제안 – 클라이언트는 사이트를 구축 할 프리랜서 또는 대행사를 찾습니다.
4. 콘텐츠 – 기사, 이미지 등 랜딩 페이지, 사이트 맵 등에서 찾을 수있는 모든 것
5. 디자인 – 사람 / 팀이 콘텐츠를 기반으로 디자인 및 레이아웃 작업을합니다.
6. 개발 – 사람 / 팀이 설계를 기반으로 사이트의 기능적 부분을 개발합니다.

대부분의 경우 여기에서 혼합 할 수 있습니다. 수행되는 작업의 순서를 변경할 수 있으며 팀은 여전히 ​​훌륭한 결과를 생성 할 수 있습니다. 그러나 동일한 프로젝트를 다른 기관의 사람들이 함께 작업하는 경우 이는 어려울 수 있으며, 이것이 모든 것을 처리 할 수있는 만능 기관을 선택하는 주된 이유입니다.

이 기사에서는 5 단계 인 설계에서 6 단계 인 개발로 이동합니다. 여기에서 개발 속도를 늦추고 계획 과정에서 이전에 결정한 내용을 엉망으로 만들면 문제가 발생할 수 있습니다.

디자이너가 고려해야 할 사항

"디자이너는 코딩 방법을 알아야합니까?" 흔하고 매우 합리적인 질문입니다. 디자이너가이면에있는 코드를 이해하고 이상적으로는 그러한 코드를 생성 할 수 있다면 (특정 범위까지) 전체 팀이 프로젝트를 더 빨리 완료하도록 도울 수 있습니다.

다음과 같은 몇 가지 이유가 있습니다.

1 – 결국 모든 것이 브라우저에서 끝납니다.

Figma, Adobe 등에서 만든 모든 디자인이 브라우저에 표시됩니다. 모든 브라우저는 HTML / CSS로 알려진 프로그래밍 언어 유형을 사용하여 페이지를 렌더링합니다. 자바 스크립트를 사용하면 디자인을 인터랙티브하게 만들 수 있습니다.

여기서 중요한 점은 모든 디자인이 HTML / CSS에서 가능해야한다는 것입니다. 많은 재능있는 프런트 엔드 개발자는 기술이 허용하는 한 거의 모든 것을 구현할 수 있습니다. 그러나 기억하십시오. 항상 "할 수 있습니까?"가 아니라 "잘하고 유지 관리 할 수있게 만들 수 있습니까?"에 대한 것입니다.

2 – 일관성

유지 관리가 가능한 것이 성공적인 프로젝트의 비결입니다. 코드베이스가 엉망이기 때문에 기존 사이트 요소를 조정하고 새 요소를 추가하는 데 몇 시간을 소비하고 싶지 않습니다. 때로는 재사용 가능한 구성 요소가 거의 또는 전혀없는 매우 복잡한 디자인이 엉망이됩니다.

웹 디자이너 팁 :

• 구성 요소를 염두에두고 설계하십시오. 이제 대부분의 도구에서이 기능을 제공합니다 (Figma, Adobe XD, Sketch). 더 이상 짜증이 나지 않을 때까지 더 자주 사용하도록 강요하십시오.
• 요소를 잘 정렬하십시오. 유사한 섹션은 서로 같은 거리를 가져야합니다. 예를 들어 80px는 유지하기에 좋은 분리입니다. 여기에 80, 86, 92를 1/3에, 78을 사용하여 섹션을 무작위로 배치하지 마십시오. 깔끔하고 깔끔하게 유지하십시오.
• 그리드를 사용하십시오! 모든 도구는 그리드 시스템을 제공합니다. 12 기둥 그리드에 이상적입니다.
• 와이드 스크린 (1920px 이상)에 디자인을 보여주세요. 이것은 개발자가 각 섹션과 배경이 어떻게 작동하는지 파악하는 데 도움이됩니다.

3 – 사이트 무게

우리는 모두 빠른 웹 사이트를 원합니다. 음, 디자이너도 이것의 일부입니다. 이것을 고려하십시오 : 8 개의 거대한 고해상도 이미지, 4 개의 비디오 및 애니메이션 요소가있는 웹 사이트. . 제 시간에 최적화하여 행운을 빕니다. 가능하지만 이미지와 비디오를 지연로드하고, 업로드시 미디어를 최적화하고, 더 나은 이미지 파일 형식을 지원하고, 고성능을위한 스마트 애니메이션 접근 방식을 추가하려면 추가 개발 시간과 기술이 필요합니다.

개발자가 경험이 많지 않거나 속도에 대해 걱정하지 않으면 웹 사이트가 중저 수준의 스마트 폰 및 노트북에서 매우 느려질 수 있습니다.

개발자를 돕는 방법?

디자이너로서 염두에 두어야 할 목표 중 하나는 사이트의 모양과 느낌을 유지하면서 개발을 더 쉽고 빠르게 만드는 것입니다.

웹에서 쉽게 할 수있는 일을 고려해야합니다.

• 상자 – 모든 상자입니다. 모서리를 둥글게 만들 수 있습니다. 예, 타원 (상자에 정의 됨) 등을 만들 수 있습니다. 그러나 레이아웃과 상호 작용하는 더 복잡한 모양을 사용하면 상황이 어려워집니다.
• 정확한 위치에 애니메이션을 적용하는 것은 어렵습니다. 이미지를 클릭 한 다음 텍스트의 반대쪽으로 이동한다고 상상해보십시오. "쉬운"것 같지만 그렇지 않습니다. 이미지가 이동할 위치는 뷰포트 등에 따라 변경되는 사이트 컨테이너를 기준으로 유지되어야합니다. 그러면 이미지가 더 크면 어떻게 될까요?
• 상자 치수를 애니메이션하면 레이아웃에 영향을줍니다. 이것은 애니메이션 중에 요소가 정렬되는 방식에 대한 모든 변경을 나타냅니다. 이것은 브라우저에서 매우 무거울 수 있으며 종종 엄청난 지연을 초래합니다.

다른 내용을 고려하십시오!

2 배 텍스트로 디자인이 어떻게 보일까요? 아니면 가로 이미지 대신 세로 이미지로? 편집 팀이 무엇을 업로드 할 것인지 결코 알 수 없습니다. 종횡비 또는 이미지 가장자리와 같은 제약이 있어야합니까? 가능하다면 이것을 디자인에 보여주세요.

Zeplin과 같은 도구로 디자인 제공

Figma 또는 Adobe XD와 같은 대부분의 디자인 도구에는 개발자와 디자인을 "공유"하는 방법이 있습니다. 거기에서 프런트 엔드 팀은 레이어의 색상, 타이포그래피 설정, 간격 및 기타 시각적 속성을 검사 할 수 있으므로 디자인에 매우 가깝게 붙일 수 있습니다.

글꼴 또는 비디오와 같은 기타 자산 제공

사이트에서 특정 글꼴을 사용한 경우 개발자에게 제공하십시오. 라이선스가 있고 특정 URL을 통해 액세스 할 수있는 경우에도 공유해야합니다. 개발자가 첫날부터 올바른 글꼴로 작업하는 것이 중요합니다. 비디오가 있으면 공유하십시오! 동영상이 YouTube, Vimeo에 있습니까 아니면 자체 호스팅됩니까?

"픽셀 퍼펙트"를 추구하지 마십시오

사이트의 최종 모습을 디자인과 완벽하게 동일하게 유지한다는이 개념은 개발자 팀이 귀하를 미워하게 만들고 제 시간에 실시간으로 진행할 기회를 파괴 할 수있는 쉬운 방법입니다. 거의 모든 경우에 디자인은 완벽하지 않을 것입니다. 모든 버튼 앞에 정확히 18px 간격이 있는지 100 % 확신 할 수 없습니까? 19px가 아닙니까? 아니면 모든 타이틀이 37 픽셀이 아니라 38 픽셀이라는 것입니까? 아니면 모든 테두리가 #ddd이고 검은 색 테두리는 없지만 불투명도가 15 % 인 테두리는 없을까요?

개발자는 사이트 전체에서 일관성을 유지하기 위해 여기저기서 이와 같은 작은 실수를 반올림합니다. 동일한 규칙을 따르는 구성 요소를 빌드합니다. 특정한 경우에 명백하게 의도적 인 변경이없는 한, 요소가 전반적으로 동일 할 수없는 이유가 있어서는 안됩니다.

결국, 코딩 된 웹 사이트는 디자인의 일반적인 모양과 느낌을 따라야합니다.

디자인에 코멘트를 남겨주세요

특정 요소가 탭, 아코디언, 슬라이더 등과 같이 상호 작용하도록하려면 데스크톱, 모바일에서 작동하는 방식과 클릭 가능한 항목을 한 번만 바꿔야하는 방식을 적어 두십시오.

사용자처럼 생각

완료되면 잠시 멈추고 사이트를 사용하고 있다고 상상하십시오. 위에서 아래로 읽고, 아래로 스크롤하고, 더 많은 곳을 보려면 클릭하세요. 워크 플로에서 빠질 수있는 것이 있습니까? 사용자 상호 작용에서 변경되는 특정 요소에 대한보기가 있습니까? 그것이 사실이고 디자인이 없다면 개발자가 알아 내도록 내버려 두는 것이므로 작업에 스트레스가 가중됩니다. 기한이 촉박하면 일반 파일을 팀과 공유하고 팀원들에게 알릴 수 있습니다. 다가오는 "상태"보기가 거의 없습니다 (어떤 상태인지 언급해야 함).

반응 형보기

데스크톱에서 15 페이지를 디자인 한 다음 모바일 버전을 만드는 것은 어렵습니다. 그 위에 약간 다른 태블릿 버전을 사용하는 것은 훨씬 더 성가신 일입니다. 그렇기 때문에 일부 디자이너는 추가를 무시합니다. 그러나 이는 개발자가 코드에서이를 수행해야 함을 의미합니다. 그리고 그것 때문에 결정을 내리십시오. 복잡한 요소가 보이면 전체 사이트를 수행하지 않더라도 태블릿보기를 표시하는 것이 이상적입니다.

요약하자면

디자이너는 개발자의 삶을 악몽이나 아주 좋은 경험으로 만들 수 있습니다. 후자를 달성하기위한 핵심은 사용되는 기술, HTMl / CSS, 어떤 상호 작용 요소가 실행 가능한지 등을 더 잘 이해하는 것입니다.

개발자들과 함께 할 행운이 있고 특정 요소에 대해 걱정이되는 경우 전화를 걸어 모든 것을 살펴보세요. 까다로운 것과 쉬운 것에 대한 지침을 확실히 제공 할 것입니다.