Thiết kế nội dung Mẹo và ví dụ bố cục chuyên sâu

Để tạo bố cục toàn diện cho web cần có kỹ năng và rất nhiều cống hiến. Các nhà thiết kế web thực hiện một công việc mà hầu hết không thể làm được và theo cách rất tinh vi. Khi các trang web phát triển, chúng tôi thấy cần phải lấp đầy không gian hơn và giữ nhiều nội dung hơn bao giờ hết. Nếu bạn đã hiểu cách thiết kế một trang web, đó là một phần thưởng lớn cho việc hiểu các phương pháp này tốt hơn. Các tính năng cốt lõi trong một trang web hiếm khi thay đổi. Tuy nhiên, với nội dung trang hơn trung bình, các yếu tố khác xuất hiện bao gồm khoảng trắng, kiểu chữ, định vị thành phần, trong số các yếu tố khác.

Chúng tôi sẽ đi vào chi tiết để đề cập đến một số mẹo chính để xây dựng bố cục chuyên sâu về nội dung. Chúng có thể bao gồm từ các ứng dụng mạng xã hội, các trang web doanh nghiệp và doanh nghiệp lớn hoặc bất kỳ thứ gì ở giữa. Điều quan trọng là hãy tự hỏi mình "Tôi đang cố gắng đạt được điều gì với thiết kế này??"Khi bạn đang thiết kế các trang vì nó sẽ giúp bạn thấy trước một triển vọng rộng lớn hơn.

Trang web tùy chỉnh

Cho dù bạn có kinh nghiệm trong thiết kế web thực tế đến đâu, thì đúng là tất cả chúng ta phải bắt đầu từ đâu đó. Thiết kế trang web tùy chỉnh nói chung là bước đầu tiên hướng tới sự nghiệp lập trình web trước khi áp dụng thông số kỹ thuật thông thường.

Tôi luôn khuyên bạn nên tạo một danh sách nhỏ các thành phần trang được coi là được cài đặt vào mẫu. Một khi tất cả những điều này được viết ra, nó trở nên dễ dàng hơn để loại bỏ những ý tưởng tồi hoặc nhặt những viên đá quý bị bỏ lỡ hoặc bị lãng quên. Điều này cũng mở đường cho kế hoạch dễ dàng để giảm căng thẳng xuống đường.

Bố cục khung dây

Đối với trang web 5 trang chung, bạn sẽ thường thấy các yếu tố tương tự được lặp lại. Logo góc trên cùng, liên kết điều hướng đầu, khu vực nội dung chính có thể được phân chia bằng một thanh bên và chức năng khác (đăng nhập, hộp tìm kiếm, v.v.).

Xem xét một điểm khởi đầu tốt để xây dựng thành bố cục trang chi tiết. Nhiều nhà thiết kế thấy hữu ích khi phác thảo các thiết kế khung dây có thể để loại trừ các lỗ hổng không quá rõ ràng. Điều này không yêu cầu bất kỳ giấy ưa thích và thậm chí có thể được thực hiện trong một máy tính xách tay cai trị xuống. Mục đích của khung dây là đưa ra ý tưởng sơ bộ về vị trí bố trí trang web sẽ hướng đến chỗ để điền vào các chi tiết sau.

Với bố cục nặng nội dung, cần xem xét nền tảng sẽ chứa bao nhiêu. Xây dựng bố cục 2-3 cột kín để lưu trữ hơn 100 trang nội dung dài, phức tạp sẽ không còn nhiều chỗ cho không gian thở. Bằng cách phác thảo và lên kế hoạch trước, bạn có thể kiểm soát lượng phòng rộng rãi cho nội dung trang. Điều này không chỉ gói gọn văn bản hoặc chặn các khu vực mà còn xử lý cả hình ảnh và video.

Không gian trắng rực rỡ

Khoảng cách trắng là có thể yếu tố quan trọng nhất được xem xét trong thiết kế bố trí chuyên sâu nội dung. Nội dung trang web quy định tất cả, nhiều hơn bất kỳ trang web thông thường. Nếu độc giả không thể hiểu nội dung vì không có chỗ để tiêu hóa lời nói của bạn, lưu lượng truy cập sẽ bị chê và khó chịu.

Đoạn văn và tiêu đề trang là một nơi tuyệt vời để bắt đầu với các tùy chỉnh. Sử dụng các thuộc tính CSS, bạn sẽ có thể thao tác các lề ngoài và đệm từng phần tử văn bản dòng khối. Chúng bao gồm tất cả các tiêu đề 1-6, đoạn văn, chuỗi khối, danh sách, văn bản được định dạng trước và một vài yếu tố nhỏ hơn.

Nếu bạn muốn thu hút sự chú ý của độc giả, điều quan trọng là áp dụng khoảng cách bên dưới các thành phần văn bản chính. Đoạn văn và tiêu đề nhỏ hơn hoạt động tốt nhất với lề dưới 15px-25px. Đối với các thành phần trang lớn hơn như h1 hoặc h2, hãy xem xét 35px + (điều này cũng sẽ phụ thuộc vào kích thước phông chữ của bạn). Khoảng cách giữa các phần tử dọc rất quan trọng để cuộn và quét "trong nháy mắt". Tuy nhiên chiều cao giữa các dòng là một thuộc tính CSS quan trọng khác có ảnh hưởng đến khoảng cách giữa các dòng trong thành phần văn bản. Đoạn văn nên có giá trị chiều cao dòng lớn hơn nhiều so với kích thước phông chữ của chúng để có nhiều phần đệm thêm giữa các dòng.

Xem xét các kiểu động

Ngoài khoảng cách, kiểu chữ kỹ thuật số nên được thao tác theo cách để làm cho nó nhảy ra khỏi trang. Với hàng trăm triệu trang web trên thế giới hiện nay, việc thấy cùng một loại phông chữ ở khắp mọi nơi.

Nếu bạn đang thiết kế bố cục cho một trang web nặng về nội dung, kết quả sẽ trông giống như một mẫu nhạt nhẽo khác vào cuối. Có rất nhiều thuộc tính để chơi xung quanh cho các kiểu chữ tiên tiến. Bóng văn bản, khoảng cách ít hơn / nhiều chữ cái, nền tảng nền tảng, biểu tượng Danh sách là vô tận.

Thực sự bạn là nhà thiết kế và từ cuối cùng của bạn là luật. Thiết kế bố cục không thể so sánh với một làn đường duy nhất không có vòng quay. Trong quá trình bạn có thể quay lại và thay đổi kiểu, thao tác các phần tử mới hoặc bỏ hoàn toàn một khái niệm. Xem xét một số mẹo CSS hữu ích khác và chơi xung quanh để xem cái nào phù hợp nhất!

Sử dụng thực đơn thả xuống

Với rất nhiều nội dung, không chắc tất cả các liên kết của bạn sẽ phù hợp trên một trang. Có nhiều tùy chọn về cách xử lý quá tải trang. Đặt các liên kết bổ sung trong các khối thanh bên hoặc được khâu vào các cột trong phần chân trang là hai tùy chọn có mục đích.

Sự lựa chọn thuận tiện và thuận tiện nhất là tạo sơ đồ điều hướng thả xuống với các danh mục đầu và các danh mục phụ. Ngoài ra còn có nhiều tập lệnh mã nguồn mở cung cấp các danh mục phụ nếu bạn có các chủ đề cực kỳ chi tiết.

Có thể chiến lược nhanh nhất và ít gây nản lòng nhất là bắt đầu với khung JavaScript. Một số phổ biến nhất bao gồm jQuery, MooTools hoặc có thể là Nguyên mẫu. Tất cả các thư viện này cung cấp tài liệu và nhiều người có sẵn các kịch bản trình đơn thả xuống miễn phí.

Kế hoạch xem nội dung

Trong thực tế, việc tạo ra một khu vực cơ thể đơn giản để chứa tất cả nội dung mà trang web trung bình của bạn chứa sẽ khó khăn hơn nhiều. Với việc thay đổi các tiêu chuẩn trình duyệt và hỗ trợ di động bán kém chất lượng, không có gì lạ khi chúng ta thấy các trang web chuyên sâu về nội dung như vậy bị bắn hạ. Nhạy cảm với từng kiểu trang web được hiển thị. Một số sẽ chứa nhiều hình ảnh, một số khác có thể chứa đồ họa hoặc video chính hoặc không có đồ họa nào cả. Sau khi bạn hoàn thành mã hóa bố cục cuối cùng, hãy tạo nhiều trang HTML để chứa các chế độ xem khác nhau.

Tất cả sẽ có cùng một đánh dấu nội bộ ngoại trừ nội dung bên trong khu vực nội dung chính. Mỗi lượt xem trang riêng lẻ có thể được thao tác và cung cấp cái nhìn sâu sắc về một sản phẩm hoàn chỉnh. Chuyển cái này lên để chứa tất cả các chế độ xem chính mà bạn nghĩ sẽ cần với mỗi trang. Các ví dụ khác về các yếu tố trang có thể bao gồm hộp bình luận, video hoặc phòng trưng bày được nhúng hoặc liên kết trang chia.

Lập kế hoạch chiến lược triệt để

Trong thực tế, nó không hoàn toàn khó khăn để tạo ra một bố cục web cường quốc. Nhiều nhà thiết kế bị cuốn vào những chi tiết nhỏ như cách trồng các phần tử khối hoặc siêu liên kết màu. Các chi tiết này rất quan trọng khi chúng gửi qua một thông điệp thương hiệu, thậm chí từ các yếu tố nhỏ hơn, thông điệp sẽ đi kèm với toàn bộ trang. Tinh thần lập kế hoạch các giai đoạn của thiết kế của bạn để tìm ra cách tiếp cận tốt nhất cho từng trở ngại. Nếu bạn đang làm việc với một khách hàng, sẽ tốt hơn nếu thảo luận về loại nội dung nào sẽ được lấp đầy các trang trước. Điều này cho bạn cơ hội để lên kế hoạch trước và lên chiến lược cho cách tiếp cận tốt nhất cho bố cục chung.

Một chủ đề đặc biệt chọc cười khác là thiết kế di động. Thị trường mới này đang chứng kiến ​​sự mở rộng to lớn không chỉ ở điện thoại thông minh mà cả máy tính bảng mạnh mẽ. Điều này có nghĩa là người dùng có thể đang truy cập vào bố cục của bạn từ màn hình di động - đảm bảo nội dung không tràn ra và được trình bày gọn gàng.

7 Ví dụ về các trang web nội dung nặng

Dưới đây là một vài ví dụ ảnh chụp màn hình từ các trang web nặng nội dung phổ biến. Đây hầu hết là các thương hiệu nổi tiếng cả trên thị trường vật lý và kỹ thuật số. Kiểm tra một số ý tưởng dưới đây để tìm thấy một số nguồn cảm hứng trong các dự án của riêng bạn. Cũng cảm thấy thoải mái để chia sẻ nội dung web nặng khác trong phần bình luận.

Nhấp chuột

Clicker là một ứng dụng mạng xã hội mới dành cho những người yêu thích TV và phim ảnh. Bạn có thể đăng ký một tài khoản mới và tìm thấy một số chương trình truyền hình cổ điển yêu thích của bạn, được lưu trữ theo mùa và danh sách tập. Bạn có thể so sánh trang web với IMDB với ít thông tin hơn và nhiều nội dung video hơn!

Tương lai của thiết kế web

Tương lai của Thiết kế Web 2011 sẽ ra mắt mọi thứ tại London vào mùa xuân tới. Kiểm tra trang chủ để biết thêm thông tin và một ví dụ tuyệt vời về thiết kế bố cục dựa trên văn bản. Tất cả các chi tiết được chia sẻ thực sự và cung cấp loa, lịch trình, hội thảo, nhà tài trợ, và nhiều hơn nữa.

Chúa có khả năng

Trong bố cục hài hước này, nhân vật chính Lord Lossible đã được "hoạt hình hóa" và đục lỗ thành một minh họa. Trang web được chia thành 3 cột với mỗi nội dung thể thao mới, quảng cáo, liên kết nguồn cấp dữ liệu và tài liệu lưu trữ. Bản thân thiết kế rất retro và thông minh trong các thiết kế minh họa.

Microsoft

Hầu hết những người đam mê công nghệ đều quen thuộc với Microsoft. Trên thực tế, hầu hết những người hiểu máy tính là gì có thể cung cấp cho bạn ngay cả một mô tả ngắn gọn về Microsoft và Bill Gates. Trang chủ của họ chứa nội dung cho hàng tá gói phần mềm, cập nhật tin tức, thông cáo báo chí và thông tin nhà phát triển. Một chút cách xuống trang bạn có thể thấy một menu tab dọc với chuyển đổi nội dung động.

Công cụ tìm kiếm đất

Search Engine Land là một tạp chí web nổi tiếng tập trung vào Công cụ tìm kiếm và tiếp thị trên Internet. Họ thường xuyên cập nhật với các bài đăng chất lượng tuyệt vời và thu hút hàng trăm ngàn người vào trang web của họ mỗi ngày. Trang chính chia thành 3 cột được sử dụng để giữ từng mô-đun nội dung và quảng cáo.

Nhà trắng

Thiết kế Nhà Trắng Hoa Kỳ trông rất sạch sẽ và chuyên nghiệp. Có rất nhiều thông tin liên quan đến lịch trình của tổng thống và các sự kiện chính trị quan trọng khác. Một mẹo để giảm bớt phòng trang là thêm một thanh trượt nội dung nhỏ về phía tiêu đề trang. Điều này thật tuyệt khi hiển thị 3-4 tiêu đề tin tức lớn ngay khi khách truy cập của bạn hạ cánh trên trang.

Cổng thông tin Yahoo

Theo như các trang web nội dung lớn đi Yahoo! phải là xu hướng về đỉnh. Yahoo! cung cấp hàng trăm dịch vụ cho khách hàng của họ bao gồm webmail, tin tức, video và thậm chí là tìm kiếm trên web. Kiểm tra một số Y! cổng thông tin liên kết từ thanh bên để xem mẫu của họ so sánh như thế nào.

Phần kết luận

Đây chỉ là một số trong những điểm chính và các bước để xây dựng một bố cục yêu cầu nội dung cụ thể. Các trang web có kho chứa nội dung lớn thường được coi là một gánh nặng giữ thức ăn SEO và không có giá trị thực sự. Thiết kế là tất cả mọi thứ vì đó là ấn tượng đầu tiên mà người dùng nhận được từ mỗi trang web. Với khối lượng nội dung lớn, điều này có thể trở thành một thảm họa với sự lộn xộn và quá mức khái quát. Không bao giờ ngừng thực hành và chỉ với một vài dự án, bạn sẽ thành thạo trong việc hình dung bố cục chuyên sâu về nội dung.