컨텐츠 집중 레이아웃 설계 팁 및 예
웹을위한 포괄적 인 레이아웃을 작성하려면 기술과 많은 헌신이 필요합니다. 웹 디자이너는 할 수없는 일을 매우 정교한 방식으로 수행합니다.. 웹 페이지가 발전함에 따라 이전보다 더 많은 공간을 확보하고 더 많은 콘텐츠를 보유 할 필요성을 느꼈습니다.. 이미 웹 사이트를 디자인하는 방법을 이미 알고 있다면 이러한 방법을 더 잘 이해하는 데 큰 보너스가됩니다. 웹 사이트의 핵심 기능은 거의 변경되지 않습니다. 그러나 평균 이상의 페이지 내용으로 여백, 타이포그래피, 요소 배치 등의 다른 요인들이 작용합니다.
콘텐츠 집약적 인 레이아웃을 구축하기위한 몇 가지 주요 팁에 대해 자세히 설명하겠습니다. 소셜 네트워킹 앱, 대기업 및 기업 웹 사이트 또는 그 사이의 모든 것에서 다양합니다. 자신에게 물어 보는 것이 중요합니다.이 디자인으로 무엇을 달성하려고 하는가??"당신이 더 넓은 장래성을 예견하는 데 도움이 될 때 페이지를 디자인 할 때.
사용자 정의 웹 페이지
실용적인 웹 디자인 경험이 있더라도, 우리 모두가 어딘가에서 시작해야한다는 것은 사실입니다. 맞춤형 웹 페이지 디자인은 일반적으로 기존 사양을 적용하기 전에 웹 프로그래밍 경력을 쌓기위한 첫 걸음입니다..
필자는 템플릿에 설치된 것으로 간주되는 페이지 요소의 작은 목록을 만드는 것이 좋습니다. 이 모든 것이 적어지면 나쁜 아이디어를 제거하거나 놓치거나 잊어 버린 보석을 집어 들기가 쉬워집니다. 이것은 도로 아래로 스트레스를 덜어주는 쉬운 계획을위한 길을 열어줍니다..
레이아웃 와이어 프레임
일반적인 5 페이지 웹 사이트의 경우 반복되는 동일한 요소가 자주 표시됩니다. 상단 모서리 로고, 헤드 탐색 링크, 사이드 바 및 기타 기능 (로그인, 검색 상자 등)으로 분할 될 수있는 주요 콘텐츠 영역.
상세한 페이지 레이아웃을 만들기위한 좋은 출발점을 고려하십시오. 많은 디자이너들이 그리 명확하지 않은 결함을 배제하기 위해 가능한 와이어 프레임 디자인을 스케치하는 것이 도움이된다고 생각합니다. 이것은 멋진 용지가 필요하지 않으며 룰 다운 된 노트북에서 수행 할 수도 있습니다. 와이어 프레임의 목적은 나중에 사이트 레이아웃을 세부 사항을 채울 수있는 공간으로 가져 가야한다는 대략적인 아이디어를 제공하는 것입니다.
무거운 레이아웃의 레이아웃에서는 플랫폼에 얼마나 많은 양의 레이아웃이 포함되는지 고려해야합니다. 100 개 이상의 페이지가 길고 복잡한 콘텐츠를 호스팅하도록 닫힌 2-3 열 레이아웃을 작성해도 공간을 호흡 할 여지는 거의 없습니다. 미리 스케치하고 계획함으로써 페이지 내용에 대한 넓은 공간의 양을 제어 할 수 있습니다. 이것은 텍스트 또는 블록 영역을 캡슐화하는 것이 아니라 이미지 및 비디오를 처리하는 것입니다..
찬란한 공백
흰색 간격이 가능합니다. 가장 중요한 요소 콘텐츠 집약적 레이아웃 설계에서 고려해야 할 사항. 웹 사이트 콘텐츠는 규칙적인 웹 사이트보다 규칙적입니다. 소통 할 공간이 없기 때문에 독자가 내용을 이해할 수 없으면 교통량이 적어 불만 스러울 것입니다.
단락 및 페이지 머리글은 사용자 지정을 시작하기에 좋은 곳입니다. CSS 속성을 사용하면 외부 여백을 조작하고 각 블록 행 텍스트 요소를 패딩 할 수 있어야합니다. 여기에는 모든 1-6 절, 단락, 인용구, 목록, 미리 서식이 지정된 텍스트 및 몇 가지 작은 요소가 포함됩니다.
독자의주의를 끌려면 주요 텍스트 요소 아래에 간격을 두는 것이 중요합니다. 단락과 작은 머리글은 15px-25px의 아래쪽 여백을 사용하는 것이 가장 효과적입니다. h1 또는 h2와 같은 더 큰 페이지 요소의 경우 35px +를 고려하십시오 (글꼴 크기에 따라 다릅니다). 수직 요소 사이의 공간은 스크롤링 및 "한 눈에"검색에 중요합니다. 하나 선 높이 텍스트 요소의 줄 사이의 간격에 영향을주는 또 다른 중요한 CSS 속성입니다. 단락은 글꼴 크기에 비해 훨씬 큰 줄 높이 값을 가져야하므로 줄 사이에 충분한 여백이 있습니다..
동적 스타일 고려
간격과는 별도로, 디지털 타이포그래피 페이지에서 뛰어 내리는 방법으로 조정해야합니다. 오늘날 전 세계에있는 수억 개의 웹 사이트에서 모든 글꼴 유형을 볼 수 있습니다..
콘텐츠가 많은 웹 사이트의 레이아웃을 디자인하는 경우 결과는 결국 다른 평범한 템플릿처럼 보입니다. 진부한 타이포그래피 스타일을 가지고 놀 수있는 많은 특성이 있습니다. 텍스트 그림자, 덜 / 더 많은 문자 간격, 배경 플랫폼, 아이콘 ... 목록은 끝이 없습니다..
진정으로 당신은 디자이너이고 마지막 말은 법입니다. 회선을 설계하지 않고 단일 차선 고속도로와 비교할 수 없습니다. 이 과정에서 돌아가서 스타일을 변경하고, 새로운 요소를 조작하거나 개념을 완전히 폐기 할 수 있습니다. 다른 유용한 CSS 팁을 고려하고 가장 적합한 것을보기 위해 놀아 라.!
드롭 다운 메뉴 활용
너무 많은 콘텐츠로 모든 링크가 단일 페이지에 적합하지는 않습니다. 과부하 페이지를 처리하는 방법에 대한 많은 옵션이 있습니다. 사이드 바 블록에 여분의 링크를 배치하거나 사이트 바닥 글의 열에 바느질하는 것은 두 가지 유용한 옵션입니다.
가장 편리하고 편리한 선택은 머리 범주와 하위 범주가있는 드롭 다운 탐색 체계를 만드는 것입니다. 강하게 세부적인 주제가있는 경우 하위 하위 카테고리를 제공하는 많은 오픈 소스 스크립트가 있습니다..
JavaScript 프레임 워크로 시작하는 것이 가장 쉽고 빠르지 않을 수도 있습니다. 가장 인기있는 것은 jQuery, MooTools 또는 Prototype입니다. 이 라이브러리는 모두 설명서를 제공하며 많은 곳에서 무료 드롭 다운 메뉴 스크립트를 사용할 수 있습니다..
콘텐츠 뷰 계획
실제로는 평균 웹 사이트에 포함 된 모든 콘텐츠를 수용 할 수있는 단순한 본문 영역을 만드는 것이 훨씬 어렵습니다. 브라우저 표준이 바뀌고 반 (semi-shoddy) 모바일 지원이 이루어지면서 이러한 컨텐츠 집약적 인 웹 사이트가 중단되는 것은 당연한 일입니다. 표시되는 웹 페이지의 각 스타일에 민감합니다. 일부는 여러 이미지를 포함하고 다른 이미지는 기본 그래픽 또는 비디오를 포함하거나 전혀 그래픽을 포함하지 않을 수 있습니다. 최종 레이아웃 코딩을 완료 한 후에 여러 HTML 페이지를 만들어 여러보기를 유지합니다..
이것들은 모두 메인 컨텐츠 영역 안의 내용을 제외하고는 모두 동일한 내부 마크 업을가집니다. 각 개별 페이지 뷰는 조작 할 수 있으며 완성 된 제품에 대한 통찰력을 제공합니다. 각 페이지마다 필요할 것으로 생각되는 주요보기를 모두 포함하도록 전환하십시오. 페이지 요소의 다른 예에는 설명 상자, 비디오 또는 포함 된 갤러리 또는 분할 페이지 링크가 포함될 수 있습니다.
계획을 철저히 계획하십시오.
실제로 강력한 웹 레이아웃을 만드는 것이 어렵지 않습니다. 많은 디자이너들이 블록 요소를 설치하거나 하이퍼 링크를 색칠하는 것과 같은 작은 세부 사항에 매료됩니다. 이러한 세부 정보는 메시지가 전체 페이지와 함께 표시되어야하는 작은 요소에서도 브랜딩 메시지를 통해 전달할 때 중요합니다. 정신적으로 디자인의 단계를 계획하여 각 장애물에 대한 최상의 접근 방법을 파악합니다. 클라이언트와 함께 작업하는 경우 어떤 유형의 컨텐츠가 사전에 페이지를 채울 지 논의하는 것이 좋습니다. 이를 통해 사전 계획을 수립하고 일반적인 레이아웃에 가장 적합한 방법을 전략 수립 할 수 있습니다.
특히 드롤 (droll) 주제가 모바일 디자인입니다. 이 새로운 시장은 스마트 폰뿐만 아니라 강력한 태블릿 PC에서 엄청난 확장을 목격하고 있습니다.. 즉, 사용자가 모바일 화면에서 레이아웃에 액세스하고 있음을 의미합니다. 콘텐츠가 넘치지 않아야하며 깔끔하게 표시되어야합니다..
7 헤비 컨텐트 웹 사이트의 예
다음은 인기있는 콘텐츠가 많은 웹 사이트의 몇 가지 스크린 샷입니다. 이들은 주로 물리 및 디지털 시장에서 잘 알려진 브랜드입니다. 자신의 프로젝트에서 영감을 얻으려면 아래 아이디어를 확인하십시오. 또한 댓글 섹션에서 다른 콘텐츠의 무거운 웹 레이아웃을 자유롭게 공유하십시오..
식자 과장
Clicker는 TV 및 영화 애호가를위한 새로운 소셜 네트워킹 응용 프로그램입니다. 새 계정을 등록하고 시즌 및 에피소드 목록별로 보관 된 좋아하는 클래식 TV 프로그램을 찾을 수 있습니다. 적은 정보와 더 많은 비디오 컨텐츠로 IMDB와 사이트를 비교할 수 있습니다.!
웹 디자인의 미래
Web Design 2011의 미래는 올 봄에 런던에서 시작될 것입니다. 더 많은 정보와 텍스트 기반 레이아웃 디자인의 훌륭한 예를 보려면 홈 페이지를 확인하십시오. 모든 세부 사항은 진실로 공유되며 연사, 일정, 워크샵, 스폰서 등을 제공합니다..
Lord Likely
이 코믹한 레이아웃에서 주인공 Likely는 "만화 화"되어 그림으로 꿰어졌습니다. 이 사이트는 새로운 콘텐츠, 광고, 피드 링크 및 아카이브를 제공하는 3 개의 열로 나뉩니다. 디자인 자체는 매우 복고적이며 그림 디자인을 영리하게 생각합니다..
마이크로 소프트
대부분의 기술 애호가는 Microsoft에 익숙합니다. 실제로 컴퓨터가 무엇인지 이해하는 대부분의 사람들은 Microsoft와 Bill Gates에 대한 간략한 설명을 제공 할 수 있습니다. 그들의 홈페이지에는 수십 개의 소프트웨어 패키지, 뉴스 업데이트, 보도 자료 및 개발자 정보가 들어 있습니다. 페이지 아래쪽에 약간의 방법으로 동적 콘텐츠 전환 기능이있는 수직 탭 메뉴를 볼 수 있습니다..
검색 엔진 랜드
검색 엔진 랜드는 검색 엔진 및 인터넷 마케팅에 중점을 둔 인기있는 웹 잡지입니다. 그들은 놀라운 품질의 게시물로 자주 업데이트하고 매일 수십만 명의 사람들을 사이트로 유도합니다. 기본 페이지는 각 콘텐츠 모듈 및 광고를 보유하는 데 사용되는 3 개의 열로 나뉩니다..
백악관
미국 백악관 디자인은 매우 깨끗하고 전문적으로 보입니다. 대통령의 일정 및 기타 중요한 정치 행사에 관한 많은 정보가 있습니다. 페이지 룸을 완화하기위한 한 가지 트릭은 페이지 머리글쪽으로 작은 내용 슬라이더가 추가 된 것입니다. 방문자가 페이지에 착륙 할 때 3-4 개의 큰 뉴스 헤드 라인을 표시하는 데 적합합니다..
야후 포털
많은 콘텐츠 웹 사이트가 야후! 꼭대기쪽으로 기울어 져야합니다. 야후! 웹 메일, 뉴스, 비디오 및 웹 검색을 포함하여 고객에게 수백 가지의 서비스를 제공합니다. Y! 사이드 바에서 템플릿을 비교하는 방법을 확인하는 포털 링크.
결론
이것들은 구체적인 내용을 요구하는 레이아웃을 만드는 요점과 단계의 일부에 지나지 않습니다. 대형 콘텐츠 저장소가있는 웹 페이지는 SEO 사료를 보유하고 실제 가치가없는 것으로 간주되는 경우가 많습니다. 디자인은 사용자가 각 웹 사이트에서 가져 오는 첫 인상이므로 모든 것입니다. 콘텐츠가 많으면 혼란과 일반화로 인해 재앙이 될 수 있습니다. 연습을 중단하지 말고 몇 가지 프로젝트를 통해 콘텐츠 집약적 인 레이아웃을 계획하는 숙련도를 습득하십시오..
