웹디자인을 설계하는 세 가지 방법을 소개한다.
러프한 방법에서 정교한 방법으로 나아간다.
1. 와이어프레임 wireframing
- 저충실도
- 신속
- 제작 에너지 소모 낮음
연필과 종이 한 장을 가지고 만들어 낸다.
코드를 쓰기 전에 디자인과 내용에 대해 다른 사람들의 의견도 받고,
그걸 바탕으로 개선 발전해 나갈텐데 그때 하는 디자인 설계를 와이어프레임이라고 한다.
와이어프레임은 신속하고 대략적으로 디자인하는 것이 핵심이다.
2. 목업 Mock-up
- 고충실도
- 정교함
- 제작 에너지 소모 높음
웹사이트 디자인을 실제와 비슷하게 표현한다는 의미이다.
작동이 되는 과정을 스크린샷으로 찍어 보여주는 것처럼, 각 화면에 대한 정교한 설계가 필요하다.
미래의 웹사이트 화면을 정확히 보여주기 위해 만든다.
3. 프로토타입 prototype
실제로 어떻게 생겼는지 실제로 대강 만들어본다.
<웹디자인에 도움되는 사이트>
도움이 되는 웹사이트는 아래를 참고하면 된다.
1) 웹사이트 디자인 패턴이 수록되어 있어 인사이트를 얻을 수 있는 사이트.
업데이트가 잘 되고 있지 않은지, 조금 촌스럽기도 하다.
https://olivia-blackcherry.tistory.com/314
웹사이트 디자인 패턴, Ui-patterns
https://ui-patterns.com/ UI-Patterns.com Find inspiration and influence from years of carefully curated collections of great design. Find out what works for you and what doesn't work. Compare and inspect a multitude of implementation examples of the proble
olivia-blackcherry.tistory.com
2) 인사이트를 얻을 수 있는 최고의 사이트.
일러스트레이션, 웹디자인, 제품디자인, 브랜딩 등 현직 디자이너의 포트폴리오가 많다.
https://olivia-blackcherry.tistory.com/315
드리블, 웹디자이너 설계 유용 사이트
디자이너가 포트폴리오를 올리는 곳인데 웹디자인 뿐만 아니라, 일러스트레이션, 브랜딩, 에니메이션, 제품 디자인, 타이포그래피 등 다양한 작품들을 구경할 수 있다. https://dribbble.com/ Dribbble -
olivia-blackcherry.tistory.com
3) 직접 스케치할 수 있는 파일을 제공하는 사이트
https://olivia-blackcherry.tistory.com/316
sneakpeekit, 와이어프레임, wireframe, 무료 도안, 휴대폰, 태블릿, 브라우저
웹디자인을 위한 코드를 작성하기 전에 먼저 설계를 해야하는 데, 신속하고 대략적으로 웹 디자인을 하기 위해서 와이어프레임을 한다. 연필과 종이를 이용해 아이디어를 스케치하는 것을 와이
olivia-blackcherry.tistory.com
4) 와이어프레임을 완벽하게 할 수 있는 최고의 사이트, 하지만 유료!(30일만 무료)
Balsamiq Cloud
Fast, Approachable, Collaborative Wireframing
balsamiq.cloud
'유용한 것들 모음집 > 웹사이트' 카테고리의 다른 글
| bootsnipp, 부트스트랩 기반, 무료 웹디자인 (0) | 2022.12.11 |
|---|---|
| 아이콘, 그림 모음, 폰트어썸, 무료 아이콘 사이트 (0) | 2022.11.29 |
| sneakpeekit, 와이어프레임, wireframe, 무료 도안, 휴대폰, 태블릿, 브라우저 (0) | 2022.11.19 |
| 드리블, 웹디자이너 포트폴리오 모음, 웹디자인 유용 사이트 (0) | 2022.11.19 |
| Ui-patterns, 웹사이트 디자인 보기, 웹 패턴 보기, 웹 디자인 도움, 웹 스크린샷 (0) | 2022.11.19 |