랜딩: 시각적 방향
스타일은 회사의 프로필과 고객의 프로필에서 비롯되며, 순간적인 취향에서 나오지 않습니다.
철칙
2~3개의 방향성을 제시하지 않고는 어떤 구축도 하지 않습니다.
그중 하나는 반드시 Felipe가 선택해야 합니다.
모든 비주얼, 내부든 외부든, frontend-design을 거쳐야 합니다.
첫 번째 작업: node check-gate.js --cliente <이름> --antes-de direcao-visual; 01과 inventario-assets.md 전체를 읽으십시오; node check-assets.js --root <클라이언트> --fase direcao-visual. 대화 메모리를 사용하지 마십시오.
게이트 함수
- 두 프로필의 축을 도출합니다(
references/perfis-e-estilos.md). - 필수 서브 스킬: 각 방향마다 frontend-design:frontend-design을 사용하십시오.
- 각 방향은 다음을 포함합니다: 이름, 한 문장으로 된 아이디어, 타이포그래피(디스플레이 및 본문, 자체 호스팅), 16진수 색상 팔레트, 섹션 구조, 히어로, ID별 에셋(
A-nnn) 및 부족한 부분, 리스크. - 각 팔레트에 대해
pares-contraste.json을 작성하고node check-contrast.js --css <css> --pairs <쌍>을 실행하십시오; 승인되지 않은 팔레트는 제시하지 마십시오. - 하나를 추천하고, 추천을 두 프로필에 연결하십시오.
- Felipe의 선택을 기다리십시오.
direcao-visual.md(frontmatter,escolhida)를 작성하고 승인을 받으십시오.
새로운 랜딩 페이지: 목업 없이, 페이지를 직접 구축하십시오(작업량이 동일합니다). 기존 페이지에 추가하는 경우: 먼저 목업을 제작하십시오; 승인 후에는 구축된 항목을 목업과 하나씩 대조하십시오. 구축 중 정당한 개선은 허용되며 피드백 기록에 반영됩니다.
시각적 검토 (게시 게이트 전)
일관된 계층 구조 및 타이포그래피 · 375px 및 1280px, 창 캡처(fullPage 아님), 천천히 스크롤한 후 · 대비(check-contrast) · 포커스, 호버, 오류, 빈 상태 및 로딩 상태 · 일관된 간격, 컴포넌트 및 색상 · 비즈니스에 적합한 CTA · 구현된 페이지, 목업이 아님 · check-page.
레드 플래그: 중지
- "가장 좋다고 생각하는" 스타일을 선택하여 구축
- 내부 화면에 일반 CSS 사용("그냥 그 화면만을 위한 것이니까")
- 단 하나의 방향만 제시
- ID 없이 에셋을 언급하거나 경로를 임의로 생성
| 합리화 | 현실 |
|---|---|
| "내부는 디자인이 필요 없어" | 클라이언트가 매일 사용하는 화면은 브랜드의 일부입니다 |
| "Felipe가 '가장 좋다고 생각하는 대로 해'라고 했어" | 이는 추천의 위임이지 선택의 위임이 아닙니다 |
| "하나의 방향이 더 빠르다" | 2~3개와 추천이 텍스트로 논의하는 것보다 더 빨랐습니다 |
| "내가 필요한 사진은 분명 존재할 거야" | 필요 사항을 기록하십시오; 파일을 절대 추정하지 마십시오 |