콘텐츠 레이아웃 가이드

우리가 웹에 컨텐츠를 탑재하고 싶을 때 우리가 발견 한 가장 큰 문제 중 하나는 내가받은 제안이 웹에 만족스럽게 통합되지 않는다는 것입니다. 일반적으로 문제는 적절한 구조가 없으면 디자인과 레이아웃이 일반적으로 너무 좋아 보이지 않아 만족스럽지 않은 결과를 초래한다는 것입니다.

그렇기 때문에 작업을 최대로 단순화하고 결과가 최적이라는 조건에서 내용의 레이아웃을 고려해야하는 방법에 대한 매우 기본적인 설명을 제공합니다.

이 가이드의 목적은 프로그래밍이나 웹 개발에 대한 지식이없는 사람이라면 누구나 양질의 레이아웃을 제공 할 수 있으며 결론에 도달 할 때까지 여러 대화를 통해 아이디어를 추출하는 데 너무 많은 시간을 소비 할 필요가 없다는 것입니다.

1 단계 : 템플릿

제안을“그리기”위한 템플릿을 갖기 위해, 우리가 할 일은 A4에서 Folio를 가져 와서 세로 방향으로 XNUMX 배씩 접는 것입니다.

2 단계 : 콘텐츠 차단

비디오, 이미지, 텍스트와 같은 여러 유형의 컨텐츠가 있다고 상상해보십시오. 각 내용은 사각형 또는 사각형 블록입니다. 원하는대로 템플릿의 상단에서 하단으로 블록을 맞 춥니 다. 세 가지 유형의 컨텐츠를 설명합니다.

비디오 블록

동영상은 일반적으로 YouTube 동영상 인 것으로 가정하고 다음과 같이 템플릿에 동영상을 나타냅니다.

아직까지 남아 2

이미지 블록

우리가 동의 하듯이 이미지가 가로인지 세로인지에 따라 다릅니다.

텍스트 블록

텍스트를 원하는 방식에 따라 이미지 블록과 동일합니다. 우리는 그것을 평행선으로 표현합니다.

텍스트 블록은 단락이 포함 된 텍스트 블록 일 수 있으며 텍스트 요소 목록

가로 이미지 옆에 텍스트 블록과 세로 이미지 옆에 텍스트 블록을 두 가지 예로 들어 보겠습니다.

아직까지 남아 3

제목 블록

제목은 별도의 블록으로 이동합니다. 일반적으로 전체 줄을 차지하는 길쭉한 블록입니다.

버튼 블록

사람들이 버튼을 클릭하여 웹의 다른 부분으로 가져 가거나 일부 정보 (또는 양식)가있는 창만 표시하려는 경우

다른 블록

아이디어는 비슷합니다. 블록의 작동 방식을 이해했다면 이전 블록과 유사하게 정사각형 또는 직사각형에 맞는 다른 유형의 블록을 명확하게 넣을 수 있다고 생각합니다. 예를 들어, 컨텐츠에 통합 된 양식을 넣고 자하는 경우. 일반적으로 이것이 가장 흔하지는 않지만 위에서 언급 한 유형이 아닌 새 블록을 사용하기 전에 문의하는 것이 좋습니다. 모든 사람들이 관심을 가질만한 새로운 블록 아이디어가 나올 때이 목록을 업데이트하려고합니다.

마지막으로, 위에서 언급 한 모든 유형의 블록이있는 템플릿의 예는 다음과 같습니다.

아직까지 남아 4

블록 확장

더 많은 공간이 필요하면 하단의 블록 디자인에 더 많은 페이지를 추가하기 만하면됩니다. 모든 항목을 채울 필요는 없지만 각 블록의 중간 사이에서 빈 공간을 맨 위에서 아래로 두지 않는 것이 중요합니다. 이런 식으로 페이지를 확장 할 수 있습니다.

아직까지 남아 5

3 단계 : 컨텐츠 작성

이제 블록 및 블록 유형별로 컨텐츠를 레이아웃 했으므로 해당 블록에 들어갈 컨텐츠를 작성해야합니다. 3 단계는 2 단계와 호환됩니다. 즉, 이전에 내용을 만든 다음 포함 할 내용의 양을 알고있는 레이아웃을 만들 수 있습니다. 어떤 식 으로든 다른 방식으로 수행하는 것은 분명하지 않지만 내용은 레이아웃 내에 정확하게 맞춰져야 함을 알고 있어야합니다

이전 예를 따르겠습니다. 4 이미지에서 다음 블록을 볼 수 있습니다.

  • 2 타이틀 블록
  • 4 텍스트 블록
  • 1 비디오 블록
  • 2 이미지 블록
  • 1 버튼 블록
  • 금액: 10 블록

따라서 우리는 내용을 그대로 두지 않고 이러한 블록에 완벽하게 맞고 글꼴 크기가 모두 동일하도록 내용을 조정해야합니다. 이를 위해 가능한 그만한 가치 먼저 내용을 만든 다음 차단. 그것은 이미 사람에게 많이 달려 있습니다.

4 단계 : 블록에 내용 맞추기

종이에 디자인이 그려져 있고 모든 내용 블록이 작성되었다고 가정 해 봅시다. 이제 마지막 단계는 결합하는 것입니다. 이를 위해 우리는 몇 가지 도구를 사용하여 모든 것을 결합하고 웹 디자이너에게 보내.

비디오 블록

비디오는 두 가지 방법으로 전달 될 수 있습니다.

  1. 다음과 같은 도구를 통한 MP4 비디오 형식 WeTransfer.
  2. 기본 옵션 : YouTube 3 월 채널에 업로드하고 YouTube 링크를 동영상으로 전달합니다.

레이아웃에 비디오가 하나만있는 경우 아무런 문제가 없습니다. 그러나 비디오가 여러 개인 경우에는 종이로 만든 레이아웃과 어떤 방식 으로든 비디오를 연결해야합니다.

예를 들어. 세 개의 비디오가 있다고 상상해보십시오. 레이아웃에서 첫 번째 비디오에는 1 번호, 두 번째 비디오에는 2 번호, 세 번째 비디오에는 3 번호를 그립니다. 그런 다음 모든 문서를 보낼 때 다음과 같은 내용을 입력합니다.

  • 비디오 1 : 비폭력 문구를 다루는 비디오 제목 : "비폭력의 가장 중요한 문구"
  • 비디오 2 : 제목이 "비폭력의 깃발"인 깃발의 색상을 다루는 비디오
  • 비디오 3 : 아르헨티나에서 행진 할 그룹을 다루는 비디오 : "아르헨티나 기본 팀"

각 섹션에 해당하는 비디오를 쉽게 알 수 있습니다.

이미지 블록

이 경우 모든 이미지를 IMGUR 플랫폼에 업로드해야합니다. https://imgur.com/upload

그런 다음 해당 이미지에 대한 링크를 전달하십시오. 이상적으로는 이미지를 1, 2, 3 등으로 표시된 비디오로 넣습니다. 예를 들어 남아프리카 공화국에 4 장의 사진이 있다고 가정합니다. "south africa.jpg"라는 네 가지가 동일합니다. 우리는 레이아웃에있을 지점까지 연속적인 이름을 붙이고 해당하는 종이에 숫자를 그립니다. 예 :

  • sudafrica-1.jpg
  • sudafrica-2.jpg
  • sudafrica-3.jpg
  • sudafrica-4.jpg

버튼, 제목 및 텍스트 블록

마지막으로 이러한 블록은 Word 문서 또는 Google 문서로 작성해야합니다.

형식은 매우 간단합니다. Word 문서에서 블록 유형 (제목, 단추 또는 텍스트)과 레이아웃에 해당하는 숫자를 차례로 입력합니다.

예 :

  • 제목 1 :….
  • 제목 2 :…
  • 텍스트 1 :…
  • 텍스트 2 :…
  • 버튼 1 :…
  • 버튼 2 :…

그런 다음 4 이미지의 예에 따라 어떻게 구성되는지 알 수 있도록 완전히 임의의 텍스트가있는 예제 문서를 넣었습니다.

각 섹션에 해당하는 숫자를 입력하면 레이아웃이 표시되는 방식입니다.

아직까지 남아 6

4 단계 : 모두 보내기

모든 작업을 완료하면 레이아웃 담당자에게 보내면됩니다.

단순히 걸릴 것

  1. 레이아웃이있는 용지에 스케치
  2. 내용
    • YouTube 또는 WeTransfer에 대한 비디오 링크
    • 이미지의 IMGUR 링크
    • Google 문서 또는 Word 파일의 문서에 대한 링크

공증인 중요 결승

이상적인 것은 최종적으로 페이지의 Title 1 헤더와 함께 제공되는 뛰어난 이미지를 포함하는 것입니다. 그렇기 때문에 Title 1는 항상 처음에 나타나야합니다.

헤더 이미지의 크기는 960 x 540 픽셀이어야합니다. 이 이미지는 다른 이미지처럼 IMGUR에 의해 전송 될 수 있습니다

최종 결과

마지막으로이 모든 정보를 사용하여 페이지가 설정됩니다. 이 예제를 따르고 마무리하기 위해 이전에 제기 한 모든 매개 변수를 따르는 최종 결과가있는 페이지는 다음과 같습니다.

최종 페이지