[디자인][part.1 정보설계]
==스토리보드==
-구성-
1. 표지:프로젝트의 기본 정보를 담는다
2. 개정 이력: 문서 변경 사항과 수정 내용을 기록
3. 화면 설계: 페이지의 레이아웃, 메뉴 구성 위치, 콘텐츠 배치 등 전체 화면 구성을 보여줌
4. 서비스 흐름도: 사이트 내의 정보와 서비스 흐름을 시각적으로 나타냄
-스토리보드의 서비스 흐름도-
1단계: 표지와 사이트 구조도 작성
- 표지를 작성한뒤, 사이트 구조도를 만듦
- 구조도는 의뢰자의 요청, 제작자의 아이디어, 벤치마킹 결과, 최신 인터넷트렌드 등을 종합적으로 고려해 작성
- 사이트 구조도 작성 방법:
페이지에 포함될 모든 내용을 나열
콘텐츠 특성에 따라 그룹화 하고, 이를 트리구조로 연결하여 완성
2단계: 사이트 맵 작성
- 사이트맵은 스토리보드의 목차 역할을 하며, 웹 사이트 제작의 기초가 됨.
- 기획된 모든 페이지를 포함하여 전체 사이트 흐름을 나타냄.
==웹사이트 정보 구조==
(P. 5)
1. 정보 내비게이션 구조
2. 정보 체계와 구조화
-특징이 명확한 정보: 자음순, 날짜순, 지리적 위치 순
-특징이 불명확한 정보: 주제별, 기능별,연령별
3. 정보 계층 구조
-좁고 깊은 구조: 사용자가 접근하기 어려움
-넓고 얇은 구조: 정보가 복잡하고 빈약하게 보임
-적절한 구조: 폭은 최소 5개~ 최대 9개 메뉴로 구성, 깊이는 최대 5단계로 제한
(p. 6 그림 참고)
-웹사이트 레이아웃 구조-
- 헤더
- 내비게이션
- 바디(핵심)
- 어사이드
- 푸터(footer)
- 광고
==웹 디자인의 정보 체계화==
- 구체적 사실
-설명 없이도 이해할 수 있는 정보 - 개념
-대상을 쉽게 이해할 수 있도록 정의한 정보 - 절차
-순차적으로 진행되는 과정에 대한 정보 - 과정
-특정 주제나 원리를 설명하는 정보
==반응형 설계==
- 뎁스 구분 체계 정립
-정보를 구성할 때 깊이 있는 구조를 명확히 설정 - 정보 콘텐츠 네이밍 구성
-사용자가 쉽게 이해할 수 있도록 정보에 적합한 이름을 붙임 - 유기적 그룹화
-유사한 정보끼리 연결하여 사용자가 효율적으로 탐색할 수 있도록 설계 - 정보 접근성 강화
-탐색 시간을 최소화하고, 직관적인 정보 접근 방식을 제공
==네비게이션==
: 사용자가 원하는 정보를 빠르고 정확하게 찾고, 이동할 수 있도록 돕는 모든 것을 포함
-주요 요소-
1. 검색 기능
2. 사용자의 위치 정보
3. 내비게이션 막대
4. 풀 다운 메뉴
5. 내용 목록과 인덱스
6. 사이트 맵
=레이블링=
: 웹 페이지 정보 체계에 이름을 붙이는 작업
목적:사용자에게 혼동을 주지 않도록 정보의 구조와 위치를 명확히 알리는 것
=와이어 프레임=
-정보설계 내비게이션 시스템, 인터페이스 구성 요소 등을 간단한 선(Wire)로 표현한 스케치
-사용목적
1. 대략적인 화면 구조 파악
2. 페이지 간 연결 구조 확인
3. 작성 방식
(~P. 9)
==페이지 레이아웃==
-인터페이스 구성 요소와 콘텐츠가 한 페이지 안에서 조화를 이루도록 배치하는 작업
-페이지 레이아웃 구성단계
1. 메인페이지에서 기능별 영역의 구성
2. 페이지 간 계층적 내비게이션 구성
3. 도식화된 계층도 구성
[part. 2 디자인 가이드 구성]
==디자인 리서치==(p.25)
1. 디자인에 투입되는 리서치: 전통적, 역사적, 심미적인 디자인과 예술에 대한 연구 활동
2. 디자인을 통한 리서치: 프로젝트 중심의 소재 및 개발 활동
3. 디자인을 위한 리서치: 앞서 연구된 활동의 가치를 증명하는 활동
==비주얼 콘셉트==
-정보전달형
-서비스 제공형
-커뮤니티형
(p.26 그림참고)
웹과 모바일 환경에서의 트렌드
-책은 참고
-다크모드(깃허브, 넷플릭스 등등)
-뉴모피즘(입체적, 현대적 느낌)
Dribble Neumorphism: https://dribbble.com/search/neumorphism
-인터렉티브 3D 그래픽 및 애니메이션
https://threejs.org/
Awwwards: https://www.awwwards.com
-마이크로 인터렉션
Stripe: https://stripe.com
Dropbox: https://www.dropbox.com
-미니멀리즘과 대담한 타이포그래피
Apple: https://www.apple.com
Medium: https://medium.com
(p.28~)
==반응형 웹 페이지 트렌드==
트렌드에 따른 컨셉 개발
-AI 딥 러닝 기반 맞춤형 콘텐츠: 빅 데이터와 AI를 활용한 개인화된 콘텐츠
-감정적 요소의 컨셉: 이모지 등을 활용하여 감정을 전달하는 디자인(인스타그램,chat gpt 등등..)
-레이아웃: 미디어 콘텐츠의 성격과 양에 따라 다양한 레이아웃 구성
-비주얼: 그래픽, 컬러, 은유, 동적 효과 등을 통해 컨텐츠의 성격과 주제 직관적으로 표현
==레이아웃==
-정보설계: 정보의 분류, 위계, 체계 등을 고려하여 콘텐츠 구조를 설계
-그리드 시스템: 명확한 그리드를 활용해 일관성 있는 레이아웃을 구축
-일관성과 다양성: 모든 페이지에 동일한 그리드를 적용해 일관성을 유지하되, 약간의 변화와 다양성도 주어 단조롭지 않게 디자인
-
그리드 시스템을 활용한 레이아웃
-가로선을 Row 세로선을 Column , 이 들이 만나는 지점을 Module
(p.31 그림 참고) -
웹 사이트 레이아웃
-정보 구조 재배치: 컨텐츠 양에 따라 내비게이션 위치 등을 조정
-960 그리드 시스템: 폭 960px을 기준으로 12개의 컬럼을 사용하여 다양한 해상도에서 안정적인 레이아웃을 구현 -
두뇌를 지배하는 레이아웃 디자인
-시선 추적 패턴 : F, Z
(p.34 그림 참고)
==반응형 웹사이트 레이아웃==
-유동형 패턴(Mostly Fluid): 중대형 화면에서는 여백 조정, 작은 화면에서는 컨텐츠를 수직 배치
-컬럼 드롭(Column Drop): 화면 폭이 좁아지면 컬럼을 수직으로 쌓는 방식
-레이아웃 시프터 패턴(Layout Shifter): 화면 크기마다 완전히 다른 레이아웃으로 변화
-미세조정 패턴(Tiny Tweaks): 단일 컬럼 기반의 단순한 패턴으로, 폭 변화에 따른 큰 레이아웃 변화 없음
-오프캔버스 패턴(Off-Canvas): 작은 화면에서는 페이지 컴포넌트를 화면 밖으로 밀어내고, 필요 시 슬라이딩 형태로 노출
==적응형 웹디자인==
-유동형 테이블(Fulid Table): 작은 화면에서도 가독성을 유지하며 정보를 표현
-크로스 탭 그리드(Crosstab Grid): 세로 해상도가 큰 기기에서 행과 열을 전환하여 최적화된 표시
-점진적 컬럼 숨김 그리드(Progressive Hide Grid) : 해상도가 낮아질 때 중요도가 낮은 칼럼을 숨김
-반응형 스크롤 그리드(Responsive Scroll Grid) : 중요 컬럼은 고정, 나머지 컬럼은 가로 스크롤 적용
-아코디언 탭(Accordion Tab) : 모바일 터치 환경에서 컨텐츠를 아코디언 방식으로 펼치고 접기
(대부분 쓰임)
