Mana의 HTML과 CSS, 그리고 웹 디자인

17 Mar, 2023

2월에 읽은 책 Mana의 러닝스쿨! 한 권으로 끝내는 HTML+CSS 웹 디자인 입문, 완성된 웹사이트로 배우는 HTML&CSS 웹 디자인

웹 사이트 제작 과정

1. 기획
   • 주목적
   • 부목적
   • 타깃 설정
2. 사이트 맵 작성
3. 와이어프레임
4. 디자인
5. 코딩
6. 공개

랜딩페이지를 만든다면...

• 이미지 전체 배경
  • 고화질 이미지가 없다면?
    • Blur
    • dots.svg 같은 것을 활용해서 점을 배경에 겹친다
• 아이콘 폰트
• 멋진 글꼴
• 미디어 쿼리
• scroll-snap를 통한 표시영역

화면 구성

• 1단 구성
  • 스마트폰 & PC 대응이 편리
  • 내용 집중에 용이
• 되도록 모바일 퍼스트

좋은 웹 디자인이란?

• 아름답게 장식하는 것이 아님
• 디자인은 전달 하기 위한 수단
• 쉬운 사용

이를 위한 방안

• 사용성 좋게
• 보기 좋게
  • 색
  • 중요하게 보이고 싶은 것
  • 레이아웃 통일감
• 결론 앞에
• 전문용어 사용말 것
• 간략정리
• 예상 가능하게
• 빠른 동작
• 일목요연하게
• Z법칙, F법칙 의식