SKILLSHARE:첫 웹사이트를 만들고 싶은 사람들에게2

웹사이트 만들기의 구체적인 방법을 더 알아보자. 

쓰다보니 요약 내용을 다 작성하면 포스팅이 너무 길어질 것 같아서 나눠서 기록한다.

 

이전 내용이 궁금하다면 아래의 링크를 참고!

https://dowhateveryouwant1661.tistory.com/20

SKILLSHARE:첫 웹사이트를 만들고 싶은 사람들에게

 

역시 같은 선생님을 모시고 왔다.

 

웹사이트에서 제공할 내용을 최대한 다 준비하고 시작하면 효율적으로 시간과 공간을 계획할 수 있다.

 

웹페이지의 메뉴구성은 어떻게 될까?

각자 어떻게 구성하느냐에 따라 달라지겠지만, 이 강의를 기준으로 제공하면

1. home page

 :  가장 처음 접하는 화면이므로, 가장 명확한 메세지를 전달할 수 있도록 해야한다. 웹사이트에 어떤 정보들이 있는지 알 수 있도록 구성한다. 대체로 그림 + 일러스트레이션(아이콘) + 텍스트의 순서.

 

2. about me

 :  전문적이어 보이는 자신의 사진, 커리어 소개 등

 

3. services

 :  잠재적 고객에게 어떤 정보, 서비스를 제공할 것인지를 설명. 일러스트 + 텍스트 + 하단에 call to action 버튼.

 

4. contacts

 :  텍스트(안내메세지) + 양식 + 정보

 

소제목들은 큰 메뉴 안으로 들어가도록 구성한다.

 

웹사이트의 컨셉은 어떻게 잡을까?

무드보드(moodboard)를 활용한다. 특정 주제를 설명하기 위해 텍스트, 이미지, 개체 등을 결합하여 보여주는 보드를 말하는데 핀터레스트를 활용한다. 웹사이트에 주고싶은 분위기를 나타내는 그림이나 사진을 모으는 작업을 거친다.

누구나 볼 수 있는 공개보드를 사용해도 좋고, 혼자서만 볼 수 있도록 비밀보드를 활용할 수도 있다.

 

무드보드가 유용한 이유는

자기만의 스타일을 찾을 수 있고, 프로젝트에 대한 영감을 얻을 수도 있고, 자기가 고른 스타일을 상기할 수 있다.

 

무드보드 사용 시 고려할 사항은

색상, 타입, 이미지의 통일성이다. 색은 기준 색을 중심으로 다른색, 비슷한 색 등을 모아본다. 타입은 일러스트, 사진, 글 등을 포함한다.

 

웹사이트에 사용할 색은 어떻게 정할까?

무드보드에서 4-5개의 이미지를 선택한다. 이미지 툴에서 색 스포이드로 색을 뽑아낸다. 배경, 밝은배경, 링크나 버튼에 사용할 색을 지정한다. 깔끔하고 일관성있는 웹사이트를 위해서 3개까지 선택한다. 

- 용도: 배경, 링크, 버튼, 타이틀

 

폰트 고르기는 어떻게 할까?

폰트 페어링(font paring)이라고 해서 두 가지 폰트의 조합으로 균형있어 보이는 웹사이트를 만들 수 있다. 

- 타이틀, 서브타이틀용

- 문단용 

 

이렇게 사용할 두 가지는 

- 다른 폰트

- 다른 사이즈

- 다른 무게감(볼드/ 일반)

 

사용 방법은

- 서비스의 성격에 알맞은 성격에 맞게 선택한다.

- 두 폰트가 잘 어울이도록 조합한다.

- 다른 조합을 사용한다.

 

온라인에 내가 만든 웹 사이트를 어떻게 발행할 수 있을까?

1. wix 

코딩이 필요 없이 드래그 앤 드롭 방식으로 웹사이트를 만들 수 있기 때문에 사용하기 편리하고 쉽다.

2.워드프레스 
오픈소스로 다양한 템플릿 및 정보가 존재한다. 웹사이트 제작에 필요한 부분만 경제적으로 도움받을 수 있다. 배우기도 쉽고, 도움을 받기도 쉽다.

 

3. 전문적 개발자 고용 

전문적인 모양의 홈페이지를 원하는 경우 훌륭한 코딩스킬을 지닌 개발자에게 높은 비용을 지불하고 만들 수 있다.

 

 

내가 알아야 할 것  1. 내가 누군지  2. 뭘 말고 싶고 뭘 보여주고 싶은가  3. 각 섹션의 정의  4. 각 내용의 정의

 

준비해야 하는 것  1. 디자인된 메뉴 구조  2. 모든 내용 모음  3. 핀터레스트에 무드보드 만들어놓기  4. 컬러 팔레트 골라놓고  5. 폰트 페어링

 

메뉴 디자인: 메뉴 개수, 메뉴 내용, 로고 상단  본문 디자인: 메인 사진 집어넣고, 타이틀 넣어도 되고  footer디자인: 로고를 넣어도 되고, 연락처, 세부적 정보 집어넣기

팁
1. 편하게 작성할 수 있는 부분부터 시작
2. 좋아하는 그래픽 툴 고르기
3. 그래픽 툴을 활용해서 웹페이지 개수 만들고 메뉴개수에 따라 a4용지에 각각 넣을 내용 구상하고 

나머지 빈 페이지에 첫 화면 복사하고 각각의 페이지를 꾸미기(hero image+title+logo+subtitles+text)