10 web layout cơ bản trong thiết kế website p1

8 133 1
10 web layout cơ bản trong thiết kế website  p1

Đang tải... (xem toàn văn)

Thông tin tài liệu

10 web layout thiết kế website – p1 thietke.website/hoc-thiet-ke-web-layout/web-layout/10-web-layout-co-ban-trong-thiet-ke-website-p1 Chung Huynh Layout (bố cục, dàn trang) có hai, vừa phần việc dễ phần khó cơng việc thiết kế web Đơi khi, nhà thiết kế web sáng tạo layout tuyệt vời vòng vài phút có lúc họ vài ngày cho công việc tương tự Mỗi dự án web đòi hỏi sáng tạo độc nhất, nhiên bạn nên có cẩm nang để tìm kiếm sáng tạo lúc bế tắc 10 layout bố cục phổ biến áp dụng trường hợp bạn gặp khó khăn để đưa layout độc đáo cho dự án Ln tìm kiếm đơn giản Bố cục dàn trang công việc đôi nghệ thuật khoa học Tạo thứ có hình ảnh hấp dẫn độc đáo cần phải có đơi mắt nghệ sĩ Tuy nhiên, có số layout phổ biến có bố cục vững đáp ứng trường hợp Chúng phù hợp với quy tắc thiết kế so hàng, cấu trúc, khoảng trống, xếp to nhỏ để làm bật phần tử chính, vị trí … Các nhà thiết kế web thường đau đầu trình thiết kế bố cục trang Họ thường phải bám sát theo tiêu chí dự án phải đảm báo đưa thiết kế độc đáo tương ứng với thời gian tiền bạc khách hàng trả Tuy nhiên quan sát website có mặt internet, điều chưa hồn tồn khơng cần thiết vài trường hợp Các website đẹp thường sử dụng layout tương đối đơn giản chẳng có chút thật khác biệt Sự thật nhà thiết kế web ln muốn có layout độc đáo, phá cách, khách hàng họ muốn thứ dễ sử dụng, chuyên nghiệp Trong viết này, bạn có hội tìm hiểu 10 layout phổ biến mà bạn nhìn thấy tương tự vô số website internet Lưu ý website thiết kế theo kiểu có màu sắc, hình ảnh đồ họa font chữ riêng biệt cấu trúc theo khuôn mẫu phổ biến thiết kế Bài viết trình bày theo cách: đưa số khung sườn layout đơn giản để bạn dựa để triển khai sáng tạo riêng mình, sau cho bạn hai ví dụ website thật sử dụng cấu trúc layout Nếu bạn nhà thiết kế web, nên đánh dấu trang cẩm nang thiết kế web cần Hãy nhớ rằng, layout gợi ý bạn cần phải sửa đổi chế biến chúng Chắc chắn bạn không muốn làm giống y hệt đề nghị mà dùng để phát triển ý tưởng dựa theo dự án thực tế 1/8 1/Kiểu khối hộp Đây cách layout đơn giản trong danh sách Thực tế, bạn nghĩ thiết kế đơn giản không phù hợp theo yêu cầu bạn Nhưng trường hợp này, bạn ngạc nhiên với linh hoạt bố cục kiểu thiết kế Thiết kế ba khối hộp có tính bao gồm khối hộp theo sau khối hộp phụ bên Mỗi khối hộp bạn thay hình ảnh đồ họa, khối chữ kết hợp hai Khối hộp layout slider jQuery (auto scrolling banner), có chức trình diễn nhiều nội dung khác theo cách bạn muốn Những ô khung có sẵn phía thay logo, tên cơng ty, liên kết trang, hay hộp tìm kiếm dùng cho thơng tin nội dung khác thường thấy website địa chỉ, slogan … Layout lý tưởng với trang web cá nhân cần trình bày số hình mẫu đồ họa Mỗi hình ảnh liên kết đến ảnh lớn đến thư viện hình ảnh đồ sộ Ở phần sau viết, xem xét cách làm để biến hóa ý tưởng thành nhiều Ví dụ thực tế Bên thiết kế đẹp thực dựa kiểu layout khối hộp trang cá nhân Peter Verkuilen Như chúng tơi đề nghị trên, khối hộp sử dụng để làm hộp trình bày dự án gần Peter Khi nhấp chuột vào khối hộp, dẫn liên kết đến trang chi tiết dự án với nhiều thông tin Đơn giản, hiệu hấp dẫn Bạn thiết kế website riêng cho theo kiểu vòng giờ! 2/8 2/Hiệu ứng hình chiều Ngày nay, có nhiều hiệu ứng đẹp mắt phổ biến lập trình viên phát triển liên tục Kiểu hình chiều hiệu ứng nhà thiết kế web ưa chuộng Layout thích hợp cho trang web trưng bày sản phẩm, thư viện hình ảnh, trang cá nhân Ý tưởng layout làm bật hình ảnh, tạo ấn tượng cho người xem với hiệu ứng cuộn ảnh chiều Ví dụ thực tế Trang pixelworkshop website áp dụng thủ thuật này, website bán giao diện làm sẵn Họ dùng hiều ứng chiều để giới thiệu screenshot sản phẩm thật ấn tượng 3/8 3/Kiểu lưới nâng cao (Advanced Grid) Ngày đa số website thiết kế theo dạng lưới (grid) Thiết kế theo dạng lưới thường bị cho nhàm chán có layout tương tự Tuy nhiên, kiểu layout giúp bạn nghĩ khác Layout bao gồm phần dành cho banner ảnh hình đồ họa, phần bên chia bên nhau, bên trái sử khối nguyên, bên phải chia thành khối nhỏ Nhờ biến hóa, nên layout giữ bố cục vững có chi tiết nhỏ tránh gây nhàm chán Ví dụ thực tế Website bên ví dụ layout đẹp sử dụng kiểu lưới nâng cao, website bán trang phục trẻ em Thiết kế áp dụng linh hoạt bố trí khối với kích thước khác lưới định trước, giúp phần trình bày nội dung hợp lý Thực tế, banner header khối ghép từ ảnh: ảnh tổng thể ảnh chi tiết sản phẩm Như nói trên, bạn có layout bản, bạn thay đổi linh hoạt khối dù dựa lưới bên để có thiết kế web khác biệt 4/8 4/Kiểu sử dụng ảnh đồ họa làm trọng tâm Đơi bạn có q nội dung bị yêu cầu phải trình bày trang Đây lúc bạn cần tìm kiếm hình ảnh đại diện, biểu tượng hay hình ảnh có liên quan đến nội dung để lấp đầy chổ trống cách hợp lý Kiểu bố cục sử dụng ảnh đồ họa làm trọng tâm đảm bảo cấu trúc vững chắc, layout nhìn đơn giản, điều bạn cần làm sử dụng hình ảnh thật ấn tượng để thu hút ý người xem dù nội dung không thật đủ hút Ví dụ thực tế 5/8 Layout tương đối phổ biến, hai số website internet sử dụng kỹ thuật Bạn tùy ý xếp liên kết định dạng khối chữ theo ý đồ mà giữ cấu trúc 5/Kiểu khối hộp Kiểu khối hộp thật phần mở rộng từ kiểu khối hộp mà biết Đây cách xếp để trình bày nhiều nội dung hơn, bạn điều chỉnh layout thành khối hộp tùy theo nội dung bạn muốn trình bày, nhiều nên sử dụng khối hộp, thêm khối bên nhỏ so với khối bên Kiểu layout giống layout khối hộp, phần khối hộp lớn dụng làm banner cuộn hình ảnh cần làm bật, khối nhỏ bên thay ảnh thumbnail liên kết với trang liên quan hình ảnh thứ yếu 6/8 Ví dụ thực tế Đây hai website ví dụ áp dụng layout theo cách khác Rõ ràng hai đếu có hình ảnh bật nằm khối lớn nội dung thứ yếu nằm khối hộp nhỏ bên Điều khác biệt họ sử dụng font chữ hình ảnh hồn tồn khơng giống giúp hai có phong cách riêng biệt Từ thấy kiểu layout sử dụng cơng thức từ cấu trúc có sẵn khơng giết chết sáng tạo Khi xếp nội dung, cón nhiều việc phải làm cơng việc trang trí mỹ thuật trang web Đó lúc bạn biến hóa trang web mang dấu ấn phong cách thiết kế 7/8 Xem tiếp phần Ý kiến bạn bình luận 8/8 ... Đây cách layout đơn giản trong danh sách Thực tế, bạn nghĩ thiết kế đơn giản không phù hợp theo yêu cầu bạn Nhưng trường hợp này, bạn ngạc nhiên với linh hoạt bố cục kiểu thiết kế Thiết kế ba khối... biến hóa, nên layout giữ bố cục vững có chi tiết nhỏ tránh gây nhàm chán Ví dụ thực tế Website bên ví dụ layout đẹp sử dụng kiểu lưới nâng cao, website bán trang phục trẻ em Thiết kế áp dụng linh... Grid) Ngày đa số website thiết kế theo dạng lưới (grid) Thiết kế theo dạng lưới thường bị cho nhàm chán có layout tương tự Tuy nhiên, kiểu layout giúp bạn nghĩ khác Layout bao gồm phần dành cho

Ngày đăng: 28/11/2019, 12:51

Từ khóa liên quan

Mục lục

  • 10 web layout cơ bản trong thiết kế website – p1

    • Luôn tìm kiếm sự đơn giản

    • 1/Kiểu 3 khối hộp

      • Ví dụ thực tế

    • 2/Hiệu ứng màn hình 3 chiều

      • Ví dụ thực tế

    • 3/Kiểu lưới nâng cao (Advanced Grid)

      • Ví dụ thực tế

    • 4/Kiểu sử dụng ảnh đồ họa làm trọng tâm

      • Ví dụ thực tế

    • 5/Kiểu 5 khối hộp

      • Ví dụ thực tế

    • Ý kiến của bạn

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan