Thiết kế | Logo | Identity | Website | Advertising | Decor | Package Thiết kế | Logo | Identity | Website | Advertising | Decor | PackageRelated Articles
10 Ví Dụ về Thiết Kế Layout Rock Solid cho web
Layout là mảng dễ nhất và cũng là mảng khó nhất trong thiết kế web. Đôi khi, một nhà thiết kế có thể nghĩ ra một layout tuyệt vời chỉ trong vài phút nhưng có khi là cả ngày.
Mỗi dự án đều có một giải pháp duy nhất nhưng tôi đã tìm thấy một số layout hữu ích mà chúng ta có thể linh hoạt áp dụng khi gặp vấn đề. Mười layout bên dưới khá đầy đủ, thậm chí còn giúp ích rất nhiều cho các nhà thiết kế khi không tìm ra cách tốt nhất để sắp xếp các nội dung trên trang web
Hãy thật đơn giản
Sắp xếp layout vừa là nghệ thuật và cũng là khoa học. Sáng tạo ra một cái gì đó hấp dẫn và mang tính nghệ thuật. Tuy nhiên có rất nhiều hướng dẫn giúp bạn dễ dàng tạo các solid layout trong bất kỳ trường hợp nào. Những nguyên tắc ngày bao gồm việc lựa chọn, liên kết và sắp xếp, thậm chí kích thước và việc bố trí những khoảng trắng hợp lý cũng làm nổi bật trang web của bạn.
Các nhà thiết kế thường chú trọng quá nhiều vào việc bố trí các layout. Chúng ta có khuynh hướng cho rằng mọi dự án cần phải hoàn toàn độc đáo ở mọi khía cạnh để phù hợp với thời gian và tiền bạc của khách hàng. Tuy nhiên, nếu quan sát các trang web, bạn sẽ thấy điều này không hoàn toàn xảy ra trong tất cả các trường hợp. Một trang web đẹp thường có những layout đơn giản và không hoàn toàn độc nhất. Sự thật là các trang web mà chúng tôi- những người thiết kế tạo ra thật sự đặc biệt khi phá vỡ khuôn mẫu, khách hàng có thu nhập trung bình chỉ muốn một trang web có thể sử dụng được, không bị lỗi và trông chuyên nghiệp.
Trong bài viết này, chúng ta sẽ cùng xem 10 layout phổ biến mà bạn có thể tìm thấy trên rất nhiều trang web. Chú ý cách mà các trang web này thiết kế như màu sắc, hình ảnh và phông chữ là độc nhất nhưng căn bản đều dựa trên các trang cơ bản và một số nguyên tắc khi tạo một trang web. Chúng tôi sẽ nhấn mạnh cách bố trí trước để bạn có thể tưởng tượng và thiết kế, sau đó chúng tôi sẽ có một số ví dụ về cách mà các trang web bố trí các layout.
Nếu bạn là một nhà thiết kế web, hãy đánh dấu trang này để sử dụng cho công việc của mình sau này. Hãy nhớ rằng mỗi ví dụ căn bản sau đây sẽ gợi ý cho bạn cách bố trí và sửa đổi các layout. Tôi khuyến khích bạn nên sử dụng với một chút sáng tạo cho phù hợp với dự án khác nhau của bạn.
Layout 3 boxes
Đây có lẽ là cách bố trí layout đơn giản nhất. Thực tế, bạn sẽ nghĩ rằng nó quá đơn giản so với những gì bạn cần. Trong trường hợp này, bạn sẽ ngạc nhiên nếu bạn muốn sắp xếp mọi thứ một cách linh hoạt.
Layout 3 boxes có khu vực đồ họa chính ở trên và hai boxes nhỏ hơn ở bên dưới. Tất cả đều được lấp đầy với khối đồ họa, văn bản hoặc cả hai. Boxes chính trong bố trí này thường là thanh trược jQuery có khả năng giới thiệu nhiều nội dung mà bạn muốn.
Các hình phía trên có thể dùng cho logo, tên công ty, navigation, thanh tìm kiếm và một số thông tin, chức năng khác thường có trên một trang web.
Ứng dụng
Chúng ta có thể thấy bố trí 3 boxes xinh đẹp sau đây trong portfolio của Peter Verkuilen. Như gợi ý ở trên, khu vực đồ họa chính có thể xoay và hiển thị một số dự án gần đây của Peter. Click vào các boxes, bạn sẽ đến trang riêng của dự án để tìm hiểu thêm thông tin.
Đơn giản, hiệu quả và lôi cuốn. Bạn sẽ có một trang web với đầy đủ thông tin mà chỉ mất không quá một giờ đồng hồ.
3D Screenshots
Các nhà phát triển tiếp tục tạo ra các bộ sưu tập về các ứng dụng web, layout 3D screenshots sau đây hoặc một số biến thể của nó ngày càng trở nên phổ biến hơn. Ý tưởng cơ bản là một tiêu đề ở đầu trang và xem qua một số ứng dụng của bạn. Chúng thường đi kèm với các hiệu ứng, độ bóng, thiết kế background lớn hoặc thậm chí là các hoa văn phức tạp trên các screenshots, nhưng ý tưởng cốt lõi vẫn là sự đơn giản.
Tôi cũng thấy thủ thuật này được sử dụng rất nhiều cho các chủ đề. Trong trường hợp đó, nhà thiết kế sẽ bán một số layout có sẵn mà khách hàng cần, không có gì hay và hiện đại như hiệu ứng 3D!
Ứng dụng
Pixelworkshop sử dụng công kệ này không phải là một kho dự trữ các chủ đề mà thực sự để giới thiệu các chủ đề. Creenshot 3D này đưa ra một số cách sắp xếp khách nhau. Hãy xem những cách khác nhau mà các nhà thiết kế đã trình bày các hình ảnh.
Layout lưới tiên tiến
Bạn sẽ thấy rất nhiều layout trong bài viết này tuân theo một cách sắp xếp rất nghiêm ngặt. Tuy nhiên, hầu hết các phần, không đơn giản chỉ là gợi ý một trang với đầy đủ các hình ảnh thu nhỏ. Ví dụ, layout bên dưới là cách sắp xếp các hình lớn nhỏ khác nhau để tránh việc dư thừa.
Như bố trí 3 boxes, sẽ có một tiêu đề ở đầu trang. Tiếp theo là một thay đổi đơn giản cho các hình ảnh thu nhỏ. Không gian cho phép bạn có 4 hình vuông theo bề ngang, nhưng thay vào đó, chúng đã được kết thành hai khu vực riêng biệt bên phải và trái.
Như chúng tôi đã lưu ý với layout đầu tiên, các khối không nhất thiết là hình ảnh, nó có thể là các khối văn bản bên trái và hình ảnh bên phải.
Ứng dụng
Trong ví dụ tuyệt đẹp dưới đây, layout được dùng cho website quần áo trẻ em. Lưu ý rằng phía dưới liên kết, họ đã chuyển một đoạn sang phía trái của các bức ảnh với nhiều kích cỡ theo sau đoạn văn, dù cho nó không hoàn toàn phù hợp với nội dung bên phải.
Một lần nữa, bạn đã có một layout căn bản, bạn có thể thay đổi một chút như thế này mà không làm thay đổi kết cấu căn bản. Một điều thú vị mà họ đã sử dụng chính là chia thành hai khu vực rõ ràng. Tất cả chỉ là một file JPG nhưng được chia thành hai hình để có thêm nội dung.
Featured Graphic
Đôi lúc bạn sẽ không đủ chỗ cho nội dung khi có quá nhiều hình ảnh. Vậy bạn sẽ làm gì nếu muốn trình bày một biểu tượng, hình ảnh hoặc thậm chí là mộ symbol chẳng hạn như một ký hiệu? Layout bên dưới là một giải pháp đơn giản và khá phổ biến cho trường hợp này.
Dùng kiểu chữ in đậm, nhỏ và dễ đọc. Nó làm cho nó rõ ràng hơn.
Ứng dụng
Cách bố trí layout phổ biến này là gì? Hơn cả những gì bạn nghĩ! Chỉ một số nổ lực nhỏ, ngay lập tức bạn sẽ có được kỹ thuật của hai trang web này này. Lưu ý rằng bạn có nhiều lựa chọn trong cách định dạng văn bản và nơi đặt navigation. Trang web thứ hai là sự sắp xếp lại của trang web đầu tiên nhưng căn bản là cả hai trang web có layout giống nhau.
5 Boxes
Layout 5 Boxes rất đơn giản và là sự cách điệu của layout 3 boxes. Áp dụng các logic tương tự và chỉ sửa đổi để có thể chứa nhiều nội dung hơn. Có thể chuyển thành 4 boxes nếu bạn muốn. Chỉ là cách bạn nổ lực hơn trong việc thiết kế!
Rõ ràng, khi bạn thêm layout, các mục sẽ nhỏ hơn cho việc sử dụng vì vậy chỉ giới hạn ở 5 boxes.
Cũng như layout 3 boxes, loại này cũng rất linh hoạt, nghĩa là có thể sử dụng cho bất kỳ trang web nào. Ý tưởng chuyển đổi có thể là thêm vào một khối lớn, làm tròn các góc, đánh bóng hoặc thêm vào các hình nhỏ hơn. Bạn cũng có thể thêm các nút để chúng di chuyển theo chiều ngang một cách dễ dàng.
Ứng dụng
Một lần nữa chúng ta có hai ví dụ về cách bố trí này theo những cách hơi khác nhau. Quan trọng là hai trang web này có cách bố trí tương tự mặc dù họ đã cố gắng làm cho khác đi. Một trang sử dụng minh họa bằng tay, trang còn lại dùng các bức ảnh và các đường dốc. Trang đầu tiên dùng màu sắc chìm và phông script; trang thứ hai dùng màu sắc tươi và phông chữ hiện đại.
Những nổ lực trong việc bố trí các layout này sẽ không giết chết sự sáng tạo của bạn. Một khi bạn đã sắp xếp nội dung, sẽ còn rất nhiều việc khác phải làm. Đó là lý do tại sao trang web mang cá tính riêng của người thực hiện và không thật sự theo đúng đề nghị của khách hàng.
Sidebar cố định
Tất cả trang web chúng ta đã thấy đều có navigation theo chiều ngang. Một bố trí phổ biến khác là navigation theo chiều dọc bên trái của trang web. Thường thì nó được cố định và các phần còn lại của trang có thể di chuyển. Đó là lý do mà navigation có thể xuất hiện từ bất cứ phần nào của trang web.
Phần còn lại của nội dung có thể lấy từ danh sách các layout trong bài này. Lưu ý rằng thiết kế layout 3 boxes, lần này là bố trí 4 boxes. Một khi đã đọc xong bài viết này, bạn hãy nhìn lại các layout một lần nữa và nghĩ ra cách mà bạn có thể kết hợp những ý tưởng để tạo ra các layout mới.
Ứng dụng
Như ví dụ trước, hai trang bên dưới trông rất khác nhau, nhất là các layout. Tuy nhiên, nếu nhìn kỹ bạn sẽ thấy rằng chúng đều có các sidebar bên tay trái và layout 4 boxes. Trang thứ hai đơn giản chỉ là sự thay đổi vị trí các boxes nhỏ hơn lên đầu trang. Một ý tưởng tuyệt vời cho bạn khi tạo một trang web tương tự như vậy.
Headline & Gallery
Tất cả mọi người đều thích một trang gallery. Việc bố trí các layout có thể đơn giản hơn. Tất cả những gì bạn cần là hệ thống các hình ảnh và tiêu đề phù hợp. Chìa khóa chính là một tiêu đề lớn và in đậm. Hãy tự do sáng tạo và dùng các kiểu chữ scrip hoặc kiểu chữ phá cách.
Ví dụ này sử dụng các hình chữ nhật bằng nhau cho trang web, bạn có thể chỉnh sửa cho phù hợp với trang web của bạn. Vấn đề ở đây là bạn phải suy nghĩ thoáng hơn và không nhất thiết phải sử dụng hình vuông, có thể là hình chữ nhật đứng hoặc hình tròn!
Ứng dụng
Nhà phát triển bên dưới đã sử dụng thiết kế này để tạo ra gallery về logo các khách hàng mà ông ấy đã từng làm việc cùng. Lưu ý rằng ông không gợi ý rằng ông đã tạo ra các logo này, chỉ đơn giản là giới thiệu về cách khách hàng một cách trực quan. Điều này cho thấy rằng thậm chí nếu bạn không phải là một nhà thiết kế, bạn có thể không bố trí đồng đều theo kiểu gallery như vậy.
Featured Photo
Layout bên dưới cực kỳ phổ biến, đặc biệt là trong lĩnh vực nhiếp ảnh. Ý tưởng cơ bản ở đây là hiển thị một tấm hình lớn hoặc bức ảnh (hoặc bất cứ thứ gì tương tự), kèm theo là navigation dọc phía bên trái.
Navigation có thể nằm phía bên trái nhưng bạn cũng có thể đặt ở giữa hoặc bên phải.
Ứng dụng
Trang web dưới đây áp dụng cách bố trí các layout này bằng cách chuyển hình ảnh vào thanh trượt ngang. Bạn có thể thấy hình bên phải của trang. Khi di chuyển chuột, một mũi tên sẽ xuất hiện cho phép bạn trượt qua các hình tiếp theo.
Bạn có thể sử dụng bố trí này cho trang web với thanh trượt theo chiều dọc. Không gian hoàn toàn phù hợp và bạn không cần phải có một khu vực dành riêng cho navigation.
Power Grid
Power Grid là layout phức tạp nhất trong bài viết này, nhưng nó cũng là layout mang lại hiệu quả nhất mà tôi từng thấy, sử dụng để chứa tất cả các nội dung liên quan đến nhau. Từ hình ảnh đến video, bạn có thể đưa bất kỳ thứ gì vào layout mà trông vẫn rất đẹp.
Điều quan trọng chính là nửa trên của trang web Chú ý rằng đó là khu vực chứa một loạt các hình chữ nhật. Đây là nơi phân chia ranh giới trong không gian trang web của bạn và tất cả nội dung trong đó đều được định dạng theo hệ thống, không giống như layout grid như đầu bài viết.
Ứng dụng
Loại này thật sự rất khó cho bạn hình dung nếu bạn không thấy một trang thật sự. Trang đầu tiên về nghệ thuật và văn hóa. Nó có rất nhiều nội dung, chúng ta có thể thấy trang web có đầy đủ Twitter, hình ảnh, danh sách, dữ liệu và còn nhiều hơn nữa.
Tuy nhiên, tất cả đều được bố trí chặt chẽ. Cách bố trí này có thể mở rộng hơn nữa, bạn có thể thêm một số mục mà vẫn không ảnh hưởng đến tổng thể nếu bạn biết cách sắp xếp một chút.
Layout ở trên nhắc tôi thiết kế trang web cho ban nhạc rOck. Ở đây chúng ta có một trang tìm kiếm khác nhau nhưng layout thì giống nhau, đặc biệt là nửa bên dưới. Thủ thuật bố trí layout gồm một boxe lớn và sau đó là các boxes nhỏ hơn dành cho các nội dung cần thiết.
Nếu bạn vẫn cảm thấy chưa đủ, hãy tham khảo hướng dẫn đầy đủ, từng bước này.
Full Screen Photo
Layout cuối cùng trong danh sách là một ý tưởng phù hợp với các nhiếp ảnh gia nhưng sẽ phải dùng các trang có background lớn và đẹp để hiển thị một số nội dung hạn chế.
Nó thật sự khó để đọc nội dung khi để trên hình của background, vì vậy ý tưởng căn bản ở đây là tạo một thanh ngang mờ trên đầu bức hình và chứa các đường link, bản sao, logo và một số nội dung khác.
Thay vì sử dụng các thanh trượt, bạn có thể tách riêng thành từng phần. Có thể bằng cách thay đổi màu nền hoặc thêm một số đường phân cách hoặc có thể thay thế những boxes lớn thành các boxes nhỏ hơn như tôi đã làm ở trên.
Ứng dụng
Layout này có thể có những hạn chế nhưng chúng ta có thể có một cách bố trí thoáng hơn. Trang web hình ảnh này có các navigation, có phần giới thiệu bằng văn bản, các hình mới nhất với mô tả bên dưới và có các logo lớn. Không tệ cho một không gian nhỏ, nó dàn trải mọi thứ rất gọn gàng và trông không hề lộn xộn.
Kết luận
Có một số điểm tôi muốn lưu ý trước khi kết thúc bài viết. Đầu tiên, mặc dù bố trí các layout không phù hợp với tất cả các trang web nhưng có thể áp dụng trong rất nhiều trường hợp.
Tiếp theo, ý tưởng layout đã trình bày ở trên có thể được dùng giống nhau cho tất cả các website nhưng bạn có thể phát triển từ những bước căn bản để có một trang web đặc biệt và độc đáo hơn.
Cuối cùng, chìa khóa thành công là hãy luôn nhớ đến những ý tưởng này. Mỗi ý tưởng có thể giúp ích cho dự án của bạn, bạn có thể kết hợp và sáng tạo những ý tưởng mới cho riêng mình.
MP_ILD theo vnwordpress
