웹/앱 개발 전문회사 샐리입니다.
오늘은 웹 제작의 기초작업인 와이어프레임 작업을 해볼 텐데요.
와이어프레임이란?
레이아웃을 설계하는 작업으로 ux(사용자경험디자인) / ui(사용자인터페이스)를 기획하는 것입니다.
쉽게 풀면 이미지나 일러스트 같은 요소 없이 사각형이나 선, 텍스트를 이용해서 웹페이지를 구성해보는 것입니다.
그리고 여기서 중요한 것은 얼마나 아름다워 보이냐가 아니라 콘텐츠의 구성이나 위치, 흐름 등을 미리 확인해보는 것이 중요하죠.
와이어프레임은 얼마든지 변동이 있을 있을 수 있기 때문에 디테일한 디자인보다는
심플하게 무채색으로 내용을 설계하는 것에 집중하시길 바랍니다.
와이어프레임은 어떻게 작업하나요?
가장 간단한 방법으로는 손 스케치가 있습니다.
생각의 자유도가 높고 빠른 스피드, 아이디어 공유가 가능하다는 장점이 있습니다
개인적으로 생각하고 있는 홈페이지 화면을 표현할 수 있는 정도면 충분하다고 생각합니다.
어떤 콘텐츠가 어느 위치에 어떤 식으로 들어가는지 텍스트도 적으면 좋겠죠?
기획자나 서류작업을 많이 하시는 분이라면 ppt도 좋습니다.
실제로 현업에서도 사용하고 있는 방법입니다.
찾아보니 ppt 와이어프레임을 위한 툴도 있네요. 참고하세요~~
(https://www.powermockup.com)
그 밖의 스케치 , 포토샵, 일러스트, ppt, xd 등 다양하게 표현될 수 있습니다.
각자 가장 편한 방법을 선택하면 되는데요.
저는 adobe xd로 와이어프레임 작업하는 방법을 알려드릴려고 합니다.
xd로 하는 이유는 일단 무료!!!이고 어도비 프로그램이기 때문에 한번 작업하면
일러스트 포토샵을 이용할 때 에도 좀 더 편하게 접근 가능하기 때문입니다,
또한 간단한 모션(애니메이션)까지 지원해주기 때문에 인터랙션이 중요하다면 xd를 추천드립니다.
" xd는 전문가 프로그램이라 너무 어려운거 아니야??"
라고 생각할 수도 있지만 사실 그렇지만도 않습니다.
도구 툴에서 딱 3가지만 사용해서 XD로 간단하게 와이어 프레임을 만들 예정이거든요
그럼 본격적으로 xd로 와이어프레임 작업을 하는 방법은
다음에 설명드리겠습니다!
Adobe xd설치는 여기서
https://www.adobe.com/kr/products/xd.html
xd가 처음이라면?
샐리 블로그 디자인 정보 공유 카테고리에 왕초보를 위한 xd강의도 업로드 되어있습니다.
https://blog.naver.com/sally_company/221338772801
여러분만의 홈페이지를 만들어보세요.
만약 홈페이지를 제작하는데 전문가의 도움이 필요하다면 웹/앱 개발 전문 화시 샐리가 도와드리겠습니다.
샐리 메일(stelar@sally.company) 혹은 홈페이지 문의를 통해 연락해주세요!
웹/앱 개발 전문회사 샐리입니다.
오늘은 웹 제작의 기초작업인 와이어프레임 작업을 해볼 텐데요.
와이어프레임이란?
레이아웃을 설계하는 작업으로 ux(사용자경험디자인) / ui(사용자인터페이스)를 기획하는 것입니다.
쉽게 풀면 이미지나 일러스트 같은 요소 없이 사각형이나 선, 텍스트를 이용해서 웹페이지를 구성해보는 것입니다.
그리고 여기서 중요한 것은 얼마나 아름다워 보이냐가 아니라 콘텐츠의 구성이나 위치, 흐름 등을 미리 확인해보는 것이 중요하죠.
와이어프레임은 얼마든지 변동이 있을 있을 수 있기 때문에 디테일한 디자인보다는
심플하게 무채색으로 내용을 설계하는 것에 집중하시길 바랍니다.
와이어프레임은 어떻게 작업하나요?
가장 간단한 방법으로는 손 스케치가 있습니다.
생각의 자유도가 높고 빠른 스피드, 아이디어 공유가 가능하다는 장점이 있습니다
개인적으로 생각하고 있는 홈페이지 화면을 표현할 수 있는 정도면 충분하다고 생각합니다.
어떤 콘텐츠가 어느 위치에 어떤 식으로 들어가는지 텍스트도 적으면 좋겠죠?
기획자나 서류작업을 많이 하시는 분이라면 ppt도 좋습니다.
실제로 현업에서도 사용하고 있는 방법입니다.
찾아보니 ppt 와이어프레임을 위한 툴도 있네요. 참고하세요~~
(https://www.powermockup.com)
그 밖의 스케치 , 포토샵, 일러스트, ppt, xd 등 다양하게 표현될 수 있습니다.
각자 가장 편한 방법을 선택하면 되는데요.
저는 adobe xd로 와이어프레임 작업하는 방법을 알려드릴려고 합니다.
xd로 하는 이유는 일단 무료!!!이고 어도비 프로그램이기 때문에 한번 작업하면
일러스트 포토샵을 이용할 때 에도 좀 더 편하게 접근 가능하기 때문입니다,
또한 간단한 모션(애니메이션)까지 지원해주기 때문에 인터랙션이 중요하다면 xd를 추천드립니다.
" xd는 전문가 프로그램이라 너무 어려운거 아니야??"
라고 생각할 수도 있지만 사실 그렇지만도 않습니다.
도구 툴에서 딱 3가지만 사용해서 XD로 간단하게 와이어 프레임을 만들 예정이거든요
그럼 본격적으로 xd로 와이어프레임 작업을 하는 방법은
다음에 설명드리겠습니다!
Adobe xd설치는 여기서
https://www.adobe.com/kr/products/xd.html
xd가 처음이라면?
샐리 블로그 디자인 정보 공유 카테고리에 왕초보를 위한 xd강의도 업로드 되어있습니다.
https://blog.naver.com/sally_company/221338772801
여러분만의 홈페이지를 만들어보세요.
만약 홈페이지를 제작하는데 전문가의 도움이 필요하다면 웹/앱 개발 전문 화시 샐리가 도와드리겠습니다.
샐리 메일(stelar@sally.company) 혹은 홈페이지 문의를 통해 연락해주세요!