Chuyên mục lưu trữ: Web layout

Học thiết kế trang web theo dạng lưới (grid): Bootstrap – p2

Hệ thống lưới của Boostrap – Bootstrap Grid System

Hệ thống lưới của Bootstrap cho phép sắp xếp tối da 12 cột theo hàng dọc trên trang.
Nếu bạn không muốn sử dụng tất cả mỗi 12 cột trên trang , bạn có thể ghép các cột lại với nhau để tạo ra các cột rộng hơn:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Hệ thống lưới Bootstrap được thiết kế để đáp ứng với nhiều loại màn hình của các thiết bị di động khác nhau ( responsive) , vì thế các cột sẽ sắp xếp tự động tùy thuộc vào kích cỡ màn hình.


Các Class của hệ thống lưới Bootstrap – Grid Classes

Bootstrap có 4 class cơ bản :

  • xs (dành cho điện thoại di động – smart phone)
  • sm (dành cho máy tính bảng – tablets)
  • md (dành cho máy tính bàn – desktops)
  • lg (dành cho máy tính bàn có màn hình lớn – larger desktops)

Các classs trên có thể kết hợp để tạo ra các layout có khả năng hiển thị linh hoạt tùy vào màn hình các loại thiết bị.

Một số quy tắc sử dụng Bootstrap Grid

  • Các hàng (row) phải nằm trong div có class .container (fixed-width : chiều ngang cố định) hay
    .container-fluid (full-width : chiều ngang đầy trang) để các cột được so hàng đúng vị trí và các padding đều nhau
  • Luôn tạo row trước khi ghép các cột lại với nhau.
  • Nội dung phải luôn được đặt trong các cột, và các cột phải được đặt trong các hàng (row)
  • Các classes như .row .col-sm-4 có thể tạo các layout lưới nhanh chóng.
  • Các khoảng cách giữa các cột có được là do padding, padding bên trái ở cột đầu tiên và padding bên phải ở cột cuối cùng bị triệt tiêu là do các cột nằm trong các hàng có class .rows
  • Các cột dọc trên trang luôn có tổng số bằng 12. Ví dụ bạn muốn có 3 cột đều nhau thì hãy tạo 3 cột với class là
    .col-sm-4

Cấu trúc cơ bản của hệ thống lưới Bootstrap

Dưới đây là cấu trúc cơ bản của hệ thống lưới Boostrap:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Đầu tiên, bạn phải tạo khung chứa (container)

<div class="container"></div>

Kế đến, bạn phải tạo một hàng

<div class="row"></div>

Sau đó, thêm số cột bạn muốn (với class theo chuẩn .col-*-*). Chú ý rằng các số của .col-*-* luôn không quá số 12 cột mỗi hàng.

Dưới đây là một số ví dụ cụ thể một số layout dạng lưới Bootstrap


Ba cột bằng đều nhau

Đây là một ví dụ của layout với 3 cột có bề ngang bằng nhau, layout này sẽ giữ nguyên 3 cột đối với màn hình máy tính bàn (deskstop) cho đến máy tính bảng (tablet), sau đó chúng sẽ tự động xếp gọn thành 1 cột theo chiều dọc ở màn hình nhỏ như màn hình điện thoại (phone)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

XEM VÍ DỤ

Hai cột không bằng đều nhau

Đây là một ví dụ của layout với 2 cột có bề ngang không bằng nhau, layout này sẽ giữ nguyên 2 cột đối với màn hình máy tính bàn (deskstop) cho đến máy tính bảng (tablet), sau đó chúng sẽ tự động xếp thành 1 cột theo chiều dọc ở màn hình nhỏ như màn hình điện thoại (phone)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Xem ví dụ

XEM BÀI TRƯỚC XEM BÀI KẾ

Học thiết kế trang web theo dạng lưới (grid): Bootstrap – p1

Hệ thống lưới (Grid systems) là gì?

Hệ thống lưới (Grid systems) là cấu trúc bao gồm hàng loạt các hàng và cột theo quy chuẩn để tạo ra các bốc cục trang web, nói một cách đơn giản đó là khung sườn, rường cột được làm sẳn để bạn có thể lắp ghép xây dựng một ngôi nhà theo ý muốn.Có rất nhiều hệ thống lưới được các nhà thiết kế web sử dụng ở phần thiết kế front -end, một trong những hệ thống lưới phổ biến nhất đó là Bootstrap.

Giới thiệu Bootstrap

Bootstrap là một dạng khung thiết kế sẵn (framework) được cung cấp miễn phí giúp các nhà thiết kế web nhanh và dễ dàng hơn.

Bootstrap bao gồm các mẫu thiết kế  HTML và CSS được thiết lập sẵn cho kiểu chữ, biểu mẫu, các nút, bảng, thanh chuyển hướng, các tiện ích như bảng nổi trên trang (modals), trình diễn hình ảnh và nhiều plugin JavaScript tùy chọn khác.  Một trong những khả năng tuyệt vời của Bootstrap đó là cung cấp cho bạn khả năng để dễ dàng tạo ra các trang web có sẵn thiết kế đáp ứng đa màn hình (responsive web design), hỗ trợ chế độ xem ưu tiên cho thiết bị di động (mobile-first).

Responsive web design là công việc thiết kế ra các trang web có khả năng tự động điều chỉnh giao diện tùy thuộc theo kích thước màn hình của thiết bị di dộng để hiển thị chế độ xem tốt nhất.

Lịch sử ra đời của Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và cung cấp miễn phí theo dạng sản phẩm mã nguồn mở từ tháng 8 năm 2011 trên GitHub. Tháng 6 năm 2014. Bootstrap là dự án số 1 trên Github

Tại sao sử dụng Bootstrap?

Ưu điểm của Bootstrap:

  • Dễ dáng sử dụng: Bất kỳ ai có kiến thức cơ bản HTML và CSS có thể bắt đầu sử dụng Bootstrap
  • Responsive features: Khả năng đáp ứng đa màn hình của Bootstrap’s responsive CSS cho tất cả các thiết bị phổ biến hiện nay như điện thoại, máy tính bảng, máy để bàn …
  • Ưu tiên cho thiết bị di động: Ở phiên bản Bootstrap 3, thiết kế theo kiểu mobile-first – ưu tiên các thiết bị di động là một phần cốt lõi của hệ thống khung
  • Tương thích trình duyệt: Bootstrap luôn tương thích với đại đa số các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Làm thế nào để sử dụng Bootstrap?

Có hai cách để sử dụng Bootstrap cho trang web của bạn.

  • Tãi về Bootstrap từ getbootstrap.com
  • Kết nối Bootstrap từ một CDN

Tãi Bootstrap
Nếu bạn muốn tải Bootstrap về máy, hãy vào getbootstrap.com, và làm theo các hướng dẫn ở đó.

Kết nối Bootstrap từ một CDN

Nếu bạn không muốn tãi về, bạn có thể sử dụng phương pháp kết nối trực tiếp đến nguồn theo phương pháp CDN (Content Delivery Network).

MaxCDN hỗ trợ CDN Bootstrap’s CSS và JavaScript cũng như jQuery:

<!-- Latest compiled and minified CSS -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Khởi tạo trang web đầu tiên với Bootstrap

1. Thiết lập khai báo HTML5 doctype

Bootstrap sử dụng các phần tử HTML và thuộc tính CSS đò hỏi khai báo HTML5 doctype.

Bạn phải luôn khai báo đúng HTML5 doctype ở đầu trang, cùng với các thuộc tính ngôn ngữ lang:

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/> 
  </head>
</html>

2. Bootstrap 3 ưu tiên thiết bị di động (mobile-first)

Bootstrap 3 được thiết kế ưu tiên hiển thị trên các thiết bị di động, đó là một phần cốt lõi trong hệ thống khung sườn (core framework). Để đảm bảo thiết kế hiển thị đúng trên các thiết bị, bạn phải thêm meta viewport đúng cách:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

width=device-width cho phép trang web tương thích với chiều ngang với các thiết bị di động initial-scale=1 cho phép tình trạng xem trang ở tỉ lệ 1 (1 pixel CSS tương đương 1 pixel viewport) khi chúng được tải xuống từ trình duyệt.

3. Các khung chứa (Containers) Bootstrap yêu cầu các khung bao quanh các phần tử nội dung. Có hai loại class bạn có thể chọn:

.container class dành cho phần khung chứa có chiều ngang cố định (fixed width)
.container-fluid dành cho phần khung chứa với chiều ngang tràn hết màn hình (full width)

Chú ý: đối với khung bao sử dụng một trong hai class trên không được để lồng một khung chứa khác tương tự bên trong (nested container)

4. Hai trang mẫu bootstrap

Trang web mẫu có chiều ngang cố định (fixed width)

< !DOCTYPE html><html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

Trang web mẫu có chiều ngang tràn màn hình (full width container)

< !DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 
</div>

</body>
</html>

XEM BÀI KẾ

Tầm quan trọng của Khoảng trắng (White Space) trong thiết kế web

Khi thiết kế web, chúng ta thường xó xu hướng tập trung vào các yếu tố thông thường của công việc thiết kế như font chữ, màu sắc, hình ảnh. Tuy nhiên còn một yếu tố quan trọng thường không dễ nhận biết, đó là khoảng trắng hay khoảng trống (White Space) giữa các phần tử trong bản thiết kế. Thật không may khi hầu hết các nhà thiết kế web và đa số các khách hàng đều nghĩ rằng khoảng trắng là khoảng không gian trống vô nghĩa. Nói một cách khác, họ cho rằng khoảng không gian trống đó nên được lấp đầy để người xem có thể có cái gì đó để đọc, để nhấp chuột hoặc để mua hàng. Thật sự thì khoảng trắng đó phục vụ cho một mục đích khác quan trọng hơn nhiều. Nó thiết lập sắc độ của bản thiết kế và tác động đến khả năng sử dụng của trang web một cách đáng kể.

Khoảng trắng (White Space) là gì?

Về cơ bản, khoảng trắng là những ký tự rỗng, không hiển thị bất cứ thứ gì khi bạn gõ trên bàn phím, thí dụ như phím tab, space và phím trở về. Đây là những ký tự rỗng nhưng khoảng trắng không phải chỉ là như vậy.

Khoảng trắng trong thiết kế là khoảng không gian bao quanh các phần tử thiết kế giúp chúng nổi bật và tách biệt với các phần tử khác. Nó bao gồm khoảng trắng ở biên đối với các trang web có thiết kế bề ngang cố định (fixed width) và khoảng trắng bao quanh lề (margin) và vùng đệm (padding) của hình ảnh hoặc các khối văn bản (text block). Khoảng trắng cũng bao gồm khoảng cách giữa các dòng văn bản (leading) và khoảng cách giữa hai chữ (tracking hay kerning).

Một điểm đáng chú ý nữa, khoảng trắng không có nghĩa là khoảng không gian phải có màu trắng. Nếu màu nền (background) của bản thiết kế là màu đen, thì khoảng trắng là màu đen. Nói một cách đơn giản, khoảng trắng là nơi trống, không bị chiếm bởi bất kỳ thành phần thiết kế nào.

Khoảng trắng ảnh hưởng đến thiết kế như thế nào?

Có hai cách để sử dụng:

Rõ ràng

Khoảng trắng ở qui mô nhỏ (như khoảng cách dòng – leading, khoảng cách chữ – kerning hay tracking) có thể tăng hoặc làm giảm sự rõ ràng của một trang web. Nếu bạn có qua nhiều nội dung cần đặt trên một khoảng không gian hạn chế, bạn có thể cần tăng khoảng trống giữa các chữ để người xem dễ đọc. Nếu bạn để ý bản in của tờ Wall Street, tờ báo thường trình bày nhiều cột và chừa lề và các vùng đệm rất ít, bù lại họ thường họ thường tăng khoảng cách giữa các dòng chữ và giữa các chữ để giúp việc đọc thoải mái hơn.

Sắc độ

Khoảng trắng ở cấp độ vĩ mô (bao quanh các chủ thể lớn nhất trên trang web) có thể tạo sự sang trọng hoặc gây cảm giác chất lượng rẻ tiền đối với một bản thiết kế. Càng nhiều khoảng trắng càng có thể tạo một bản thiết kế có phong cách sang trọng, chất lượng cao. Nếu bạn thường xem các mẫu quảng cáo trên các tạp chí phụ nữ đắt tiền, bạn sẽ thấy hầu hết các mẫu quảng cáo có không gian thoáng, chữ nhỏ và chừa khoảng trắng rộng rãi cho hình nền. Ngược lại, những mẫu quảng cáo hay được vất vào cửa nhà bạn thường đầy ắp các khối chữ to bao quanh một mớ hình ảnh lấp đầy trang và gần như rất ít khoảng trắng.

whitespace

Luôn bắt đầu với ý tưởng sắp xếp các khoảng trắng khi bắt đầu thiết kế.

Trong bản thiết kế sắp đến, thay vì nghĩ vị trí đặt một bức ảnh hoặc chừa bao nhiêu khoảng trắng cho các khối chữ, bạn nên tự nghiệm liệu có đủ khoảng trắng ở hai bên lề và vùng đệm để truyền đạt đúng sắc độ và sự rõ ràng như ý tưởng của mình. Bạn hãy học cách bố trí lề và vùng đệm xung quanh các thành phần trên bản thiết kế. Chú ý đến các khoảng trắng giữa các dòng và các chữ (typography).

Nếu bạn là người cầu toàn, hãy tạo ra hai bản thiết kế: một với nhiều khoảng trắng để mang lại cảm giác sang trọng, lịch sự và một với ít khoảng trắng theo phong cách “thị trường”. Cùng sử dụng các thành phần thiết kế như nhau, chỉ thay đổi các khoảng trắng xung quanh chúng và hãy mang cả hai bản thiết kế cho mọi người xem và bàn luận.

Nguồn: “The Importance of White Space in Web Designs” – about.webdesign.com

Hướng dẫn cơ bản wireframing trong thiết kế web

Wireframing là gì? Bạn có thể tạm hiểu nó như là cấu trúc khung sườn, một bản sơ phác kế hoạch thiết kế web. Wireframing là một bước quan trọng trong tiến trình của bất cứ công việc liên quan thiết kế giao diện nào. Nó chủ yếu cho phép bạn xác định hệ thống thông tin bản thiết kế của bạn, giúp việc lên kế hoạch dễ dàng hơn cho việc bố cục dựa theo ý đồ bạn muốn người xem xử lý thông tin như thế nào. Nếu bạn chưa sử dụng wireframing, đây là lúc bạn nên bắt đầu …

wireframes-simple

Cũng giống như bản blueprint trong thiết kế kiến trúc, bạn cần xem nó như bản phác thảo sơ đồ đen trắng hai chiều trước khi nghĩ ra cách xây một ngôi nhà thật sự. Tương tự, ở thiết kế giao diện, bạn không thể bắt đầu tạo lớp (layer) trong photoshop, hay viết các đoạn mã, mà không biết thông tin sẽ được xử lý như thế nào.

Ở cấp sâu hơn, một wireframe rất hữu ích trong quyết định cách người xem tương tác với giao diện như thế nào.Ví dụ, wireframe có thể bao gồm các trạng thái khác nhau của các nút (button) hoặc hành vi.

wireframes-menuhover

Wireframing thật sự quan trọng bởi vì nó cho phép nhà thiết kế hoạch định layout và các tương tác của giao diện mà không bị phân tâm bởi màu sắc, sự chọn lựa kiểu chữ và ngay cả nội dung. Bạn nên giải thích với khách hàng rằng, nếu người xem không thể hình dung được họ sẽ không biết đi đâu, làm gì khi xem bản wireframe đen trắng, thì bất kể bạn có thêm màu sắc gì cũng sẽ vô ích. Một nút (button) phải được hiển thị rõ ràng cho dù nó không thật sự nổi bật hoặc được tô bởi các màu sắc rực rỡ.

Bước 1: Tìm nguồn cảm hứng

Trước khi bắt đầu bước vào chi tiết hơn nữa, bạn hãy tham khảo thực tế, ví dụ như trang I ♥ wirefames. Bạn có thể lướt qua tổng thể cũng như trực quan để tìm hiểu xem các nhà thiết kế đã tiến hành bước wireframing như thế nào.

i-heart-wireframes

Một cách khác bạn có thể sử dụng công cụ tại Wirify, một website cho phép bạn xem các website đang hoạt động ở chế độ wireframe.

wireframe-cnn

Nếu bạn chịu khó liên tục quan sát các nhà thiết kế đã áp dụng wireframe như thế nào đối với các website của họ, bạn sẽ dần hình dung ra trong đầu làm thế nào tạo wireframe cho riêng mình, nó sẽ giúp bạn hệ thống thông tin trên giao diện.

Bước 2: Thiết kế các quy trình của bạn

Thiết kế là một quy trình hệ thống và vì thế các nhà thiết kế khác nhau có cách tiếp cận wireframing và những biên dịch của nó thành hình ảnh và các đoạn mã theo nhiều cách khác nhau. Bạn phải tự tìm ra quy trình nào đã mang lại cho bạn sức mạnh và quy trình nào mà bạn cảm thấy thoải mái nhất để làm việc. Ví dụ bên dưới là một sơ đồ biểu diễn những quy trình tiêu biểu

wireframes-process
Sketch: phác thảo, Wireframe: thiết kế khung sườn, Visual: tạo hình ảnh trực quan, Code: viết mã

Ngày nay, đa số các nhà thiết kế không còn ưa chuộng các công cụ tạo ra các bản phác thảo (sketch) mà grid framework (chúng ta sẽ tìm hiểu trong một bài viết khác) mới là sự lựa chọn của họ.

Grid framework nói một cách đơn giản là hệ thống khung sườn tạo sẵn (hiểu nôm na như khung sườn của các mẫu nhà tiền chế) theo chuẩn 12 cột (12-column), 16 cột hoặc 18 cột để làm nền tảng tạo wireframe. Các hệ thống grid framework được dựng sẳn chủ yếu dựa vào CSS/HTML, nhờ thế nó sẽ giúp bạn tiết kiệm được nhiều thời gian ở giai đoạn viết mã, nhưng nó cũng đồng thời hỗ trợ các tập tin khung nền ở định dạng Photoshop, Adobe Firework, Adobe Illustrator … để giúp các nhà thiết kế tạo wireframe theo đúng chuẩn của từng grid framework cụ thể.

1140_CccGrid_Template
Một khung nền của grid framework

Website-Wireframe-by-Hand-side-side-creative
Minh họa cho cách sử dụng grid framework để tạo wireframe

Bạn có thể tham khảo một vài grid framework nổi tiếng như 960 Grid System, Boostrap, Foundation, Skeleton … bạn nên chọn một trong số framework mà bạn cảm thấy quen thuộc và dễ sử dụng nhất. Mỗi grid framework có điểm mạnh và điểm yếu khác nhau mà chúng tôi sẽ đề cập đến trong bài viết khác.

wireframes-myprocess
Minh họa tiến trình thiết kế web theo từng giai đoạn có sử dụng grid framework: Wireframe: tạo khung sườn sơ phác, HI-DEF Wireframe: Tạo khung sườn chi tiết, Visual: Tạo layout trên photoshop, Code: viết mã dựa trên grid framework và cắt photoshop layout thành HTML

Bước 3: Lựa chọn công cụ

Có rất nhiều dịch vụ và phầm mềm, thậm chí các ứng dụng web trực tuyến đưa ra các công cụ giúp các nhà thiết kế tạo sơ phác và wireframe như:

Phần mềm chuyên nghiệp:

  • balsamiq  (balsamiq.com): hỗ trợ tạo phác thảo (sketch), mẫu thử nghiệm (mock-up), balsamiq cũng cung cấp thư viện các phần tử web có thể tương tác bằng cách kéo thả
  • axure (axure.com): một trong những chương trình chuyên nghiệp để tạo phác thảo, bản mẫu  (wireframing/prototyping). Tuy nhiên phần mềm chỉ hỗ trợ cài đặt trên Window, bạn có thể dùng phần mềm Omnigraffle thay thế trên Mac.

Phần mềm trực tuyến: mockflow.com, hotgloo.com, gomockingbird.com

Như đã nói ở trên, bạn có thể chọn lựa bất cứ phần mềm nào mà bạn cảm thấy thoải mái và quen thuộc để làm việc ở giai đoạn này. Với riêng kinh nghiệm của mình, tôi khuyên bạn nên sử dụng các phần mềm quen thuộc như In Design, Corel Draw, Illustrator…

Bước 4 : thiết lập Grid

Về lý thuyết các bạn có thể tìm đọc chuyên sâu trong một số bái viết khác về grid system hay grid framework. Bạn có thể hiểu đơn giản grid là một cấu trúc được thiết kế sẵn theo dạng lưới dùng để làm nền tảng cho việc bố trí các phần tử web trên layout.

Như đã nói ở trên có một số grid framework phổ biến hiện nay như 960 Grid System, Boostrap, Foundation, Skeleton … bạn có thể tải về để làm wireframe cho thiết kế layout của mình.

Đầu tiên hãy thiết lập trang theo màn hình tiêu chuẩn 1280×900. Grid tiêu chuẩn sẽ có tối đa 1140px

New Document

Sau đó đặt mẫu grid vào trang

Adobe Illustrator CS5 (1)

Mỗi grid framework có những quy tắc định sẵn bạn phải tuân theo, nhưng nếu bạn muốn tạo layout trên grid theo thiết kế riêng của mình, bạn có thể tham khảo tại responsify.it.

Bước 5: Xác định layout với các hình hộp

Bạn có thể vẽ các hình hộp đặt theo các cột của grid. Đây là lúc bạn lên ý tưởng sắp xếp và trình bày các thông tin trên trang web làm thế nào để người xem dễ dàng truy cập nhất. Bắt đầu từ trên xuống, từ trái sang phải. Dưới đây là một ví dụ wireframe với layout sử dụng grid :

wireframe-bare (1)

Đôi lúc, dựa vào mục tiêu đối tượng của bạn và thể loại web bạn đang thiết kế, bạn có thể sáng tạo theo ý muốn nhưng luôn phải ghi nhớ giữ phân cấp hệ thống thông tin khi trình bày. Đây là một ví dụ khác:

wireframe-bare-webwise

Đây là một layout cho một web blog với các vị trí dành cho quảng cáo và các ghi chú hướng dẫn dành cho khách hàng

E-27wireframe-homepage-BARE

Bước 7: Tinh chỉnh với sắc độ xám

Sử dụng các sắc độ xám sẽ giúp bạn xác định sẽ giúp bạn xác định các trọng yếu mà không cần tô các màu sắc hoàn chỉnh. Thực tế nó sẽ giúp bạn trong quá trình thiết kế trực quan sau này

wireframe-withgreys

Bước 8: Thêm chi tiết trên wireframe

Đây là bước không bắt buộc, nhưng nếu muốn điều chỉnh chi tiết bạn nên thử qua bước này. Ở bước này, bạn có thể thêm vào các chi tiết càng nhiều càng tốt, đây vẫn chưa phải lá lúc bạn quá tập trung vào các hình ảnh, đơn giản là có thể bạn muốn đặt các đoạn chữ và lên ý tưởng sử dụng các loại kiểu chữ.

webwise-home-wireframe

Bạn cũng có thể thử thêm một số màu sắc.

Ý tưởng chung đây là giai đoạn kết hợp giữa hình ảnh/ viết mã, thêm hoặc bỏ bớt chi tiết, hoàn thiện wireframe và kết thúc giai đoạn thử nghiệm. Các hoạt động trong giai đoạn này sẽ bao gồm lắng nghe các phản hồi và điều chỉnh wireframe trên phần mềm bạn đang sử dụng.

Nếu bạn đang phải làm việc với một đội ngũ lập trình viên, bạn sẽ mong muốn hoàn tất giai đoạn này để bàn giao cho họ viết mã framework cơ bản, để bạn rãnh tay hoàn thiện wireframe ở phần xử lý hình ảnh trực quan.

Bước 9: Chuyển đổi wirefame thành hình ảnh trực quan

Như đã nói ở trên, chúng tôi khuyên bạn nên thực hiện giai đoạn này với phần mềm Illustrator bởi vì bạn sẽ dễ dàng xuất tập tin sang định dạng .psd của photoshop với các layer có thể dễ dàng sửa đổi.

Photoshop Export Options

Đây là một ví dụ wireframe được chuyển đổi thành hình ảnh trực quan, các cấu trúc khung được giữ nguyên, mặc dù layout đã được tô điểm màu sắc và hình ảnh

webwise2010

Tóm lược

Đây chỉ là một trong những quy trình tham khảo, mỗi nhà thiết kế web có thể tự thiết lập các quy trình khác nhau tùy theo công việc cụ thể và kinh nghiệm của mình. Dù thế nào đi nữa, bạn không nên bỏ qua giai đoạn dựng cấu trúc khung (wireframe), vì đây là bước quan trọng để định hình bố cục thông tin, giúp khác xem dễ dàng thao tác và truy cập thông tin trên trang web dễ dàng (user friendly), đó cũng là một tiêu chí quan trọng để một trang web được đánh giá là hoàn hảo.

Biên dịch theo “A Beginner’s Guide to Wireframing” | Winnie Lim | http://webdesign.tutsplus.com/ 

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

Tiếp theo phần 1

6/Kiểu thanh lề cố định (fixed sidebar)

layoutideas-6-1Đa số các website ngày nay đều có thanh liên kết nằm ở phía trên theo chiều ngang, một layout cũng thường phổ biến trước đây đó là có thanh lề trái cố định. Phần lề này sẽ không di chuyển khi nội dung cuộn theo chiều dọc. Đây là cách giữ cho thanh liên kết luôn hiện diện trên màn hình cho dù người xem di chuyển thanh cuộn dọc của trình duyệt. Phần nội dung bên phải có thể sử dụng layout khác tùy ý, bạn có thể có những ý tưởng để sắp xếp tùy theo nội dung cụ thể.

Ví dụ thực tế
Cả hai layout dưới đây đều nhìn khá khác biệt mặc dù cùng ý tưởng sử dụng thanh lề cố định (fixed sidebar). Layout đầu sử dụng kiểu layout 4 khối hộp cho nội dung bên phải, một biến thể của kiểu 3 khối hộp mà chúng ta được biết ở trên. Layout 2 cũng sử dụng layout out 4 khối hộp, nhưng đảo vị trí 4 khối hộp nhỏ lên trên khôi hộp lớn. Một lần nữa, bạn có thể áp dụng nhiều ý tưởng thiết kế web dựa vào các khung có sẵn mà không sợ các trang web nhìn giống nhau rập khuôn.

layoutideas-6-2layoutideas-6-3

7/Kiểu thư viện ảnh.

layoutideas-7-1Đa số người xem đều thích các trang thư viện ảnh (gallery), nhưng làm thế nào để có layout đẹp và đơn giản nhất? Tất cả bạn cần là một bố cục theo dạng lưới (grid) vững chắc, các thumbnail ảnh đồng dạng và một khoảng trống phía trên cho các tiêu đề và phụ đề. Thủ thuật mấu chốt là nhấn mạnh ở phần tiêu đề. Bạn có thể dùng các font chữ độc đáo hoặc sáng tạo đồ họa để tạo ra phần header ấn tượng.
Bạn có thể thay đổi dùng các hình vuông, hình tròn hoặc các hình chữ nhật có góc bo tròn để tạo ra các hình đồng dạng cho các hàng ảnh thumbnail khác lạ thay vì hình chữ nhật.

Ví dụ thực tế

Ví dụ bên dưới là một trang web của nhà thiết kế web chuyên nghiệp. Anh ta sử dụng logo của các công ty khách hàng để giới thiệu các dự án mà họ đã thực hiện. Điều này chỉ ra rằng, ngay cả khi trang web của bạn không phải thực sự là một thư viện hình ảnh, bạn vẫn có thể sử dụng nó cho các trang giới thiệu dự án, sản phẩm … thay vì chỉ liệt kê theo dòng một cách nhàm chán.

layoutideas-7-2

8/ Kiểu dùng ảnh có kích thước lớn làm trọng tâm

layoutideas-8-1Layout này khá phổ biến trong các website của cộng đồng các nhiếp ảnh gia. Ý tưởng cơ bản là sử dụng một vị trí có kích thước lớn để trình bày các hình ảnh ấn tượng nhất hoặc một ảnh thiết kế đồ họa độc đáo bên phải, kết hợp với một cột thông tin bên trái có thanh liên kết và logo cùng các nội dung khác.Bạn có thể thử nghiệm hoán đổi vị trí trái phải của 2 phần với nhau, thay thế vị trí thanh liên kết để tìm ra một layout riêng cho mình.

Ví dụ thực tế

Website của một nhiếp ảnh gia dưới đây đã biến tấu vị trí nổi bật bên phải thành một slide trình diễn ảnh theo chiều ngang. Thanh trượt ngang sẽ xuất hiện khi đặt con trỏ lên trên bức ảnh.
Cũng với layout này, bạn có thể sáng tạo ra nhiều cách khác nhau để trình bày nội dung chính bên phải hấp dẫn hơn như hộp banner cuộn, hoặc cuộn ảnh theo chiều dọc màn hình.

layoutideas-8-2

Kiểu lưới đa năng (grid system)

layoutideas-9-1Sử dụng lưới đa năng là layout phức tạp nhất trong bài viết này, nó có thể chứa tất cả nhiều loại nội dung từ văn bản, âm nhạc cho đến các clip video. Bạn có thể đặt mọi thứ vào trang mà vẫn giữ layout không rối tung lên.
Điểm then chốt của layout này nằm ở phần nữa dưới, đó là thực chất là khối hình hộp lớn chứa các những khối hộp nhỏ hơn. Hình hộp này phân chia các khoảng trống trên trang, tạo bố cục vững chắc nhưng vẫn đảm bảo tính đa dạng.

Ví dụ thực tế

Bạn sẽ có chút bối rối nếu chỉ nhìn vào bộ khung sườn ở trên mà chưa nhìn thấy một nó được áp dụng vào một website thật. Website ví dụ bên dưới sử dụng rất nhiều nội dung khác nhau từ giới thiệu các hoạt động nghệ thuật và văn hóa cho đến các dòng trạng thái Twitter, hình ảnh, danh sách …

Tuy nhiên, tất cả đều nằm trên bố cục lưới vững chắc, từng nội dung được sắp xếp ở các vị trí thích hợp. Bí quyết là nội dung nằm theo từng khối, có cái tập trung ở những khối hộp lớn, có cái được chia nhỏ ra thành những khối hộp nhỏ, tạo sự đa dạng cho bố cục, thích hợp cho nhiều loại nội dung.

layoutideas-9-3 (1)

vbrsite-10

Kiểu sử dụng ảnh nền kín trang

layoutideas-10-1Layout cuối cùng trong danh sách này lý tưởng đối với các website của nhiếp ảnh gia, sử dụng hình nền lớn phủ kín trang và chỉ hiển thị một số nội dung hạn chế.
Vì có hình nền che kín trang, nên để nội dung các đoạn chữ có thể được đọc rõ ràng, chúng phải được đặt trên một màu nền khác có độ mờ che hình nền bên dưới.
Bạn có thể thêm thanh liên kết và logo ở trên đầu trang hoặc sắp xếp chúng trên các khối hộp được chia thành từng khu vực như khung sườn mẫu này.

Ví dụ thực tế

Như đã giới thiệu, kiểu layout này chỉ thích hợp cho các trang không có nhiều nội dung. Ví dụ đây là website của nhiếp ảnh gia, các nội dung được sắp xếp gọn gàng trên các khối hộp màu tối, giúp các chữ được trình bày rõ ràng và vẫn giữ được một phần nền ấn tượng.

layoutideas-10-2

Kết luận

Có một vài điểm chúng ta cần làm rõ trước khi kết thúc bài viết này. Đầu tiên, rõ ràng chúng ta không thể có một layout nào đó có thể phù hợp trong mọi tình huống, nhưng chúng ta vẫn có thể sử dụng các khung sườn mẫu một cách khoa học đáp ứng đa số các trường hợp.
Kế đến, các layout này không phải cách để bạn thực hiện hàng loạt các website giống nhau, nó đơn giản chỉ cung cấp nền tảng cơ bản, dựa vào đó bạn có thể phát triển các ý tưởng riêng cho thiết kế của mình.
Cuối cùng, bạn đừng bao giờ áp dụng những ý tưởng từ các layout mẫu quá máy móc. Mỗi layout mẫu có thể thay đổi tùy theo yêu cầu cụ thể của từng dự án, thậm chí chúng ta có thể pha trộn, lắp ghép các layout lẫn nhau để tạo ra ý tưởng mới.

Nguồn tham khảo: 10 Rock Solid Website Layout Examples | Designshack.net

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

Layout (bố cục, dàn trang) luôn có cả hai, vừa là phần việc dễ nhất và cũng là phần khó nhất trong công việc thiết kế web. Đôi khi, nhà thiết kế web có thể sáng tạo ra một layout tuyệt vời chỉ trong vòng vài phút và có lúc họ mất vài ngày cũng cho một công việc tương tự.

Mỗi dự án web luôn đòi hỏi một sự sáng tạo độc nhất, tuy nhiên bạn cũng nên có một cuốn cẩm nang để có thể tìm kiếm sự sáng tạo trong lúc bế tắc. 10 layout dưới đây là những bố cục phổ biến nhất có thể áp dụng trong trường hợp bạn đang gặp khó khăn để đưa ra một layout độc đáo cho dự án của mình.

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

Bố cục dàn trang là một công việc luôn đi đôi giữa nghệ thuật và khoa học. Tạo ra một thứ gì đó có hình ảnh hấp dẫn và độc đáo cần phải có một đôi mắt của một nghệ sĩ. Tuy nhiên, có một số layout phổ biến có bố cục vững chắc có thể đáp ứng trong mọi trường hợp. Chúng phù hợp với những quy tắc thiết kế cơ bản như sự so hàng, cấu trúc, khoảng trống, sự sắp xếp to nhỏ để làm nổi bật những phần tử chính, vị trí …

Các nhà thiết kế web thường đau đầu trong quá trình thiết kế bố cục trang. Họ thường phải luôn bám sát theo tiêu chí dự án nhưng vẫn phải đảm báo đưa ra một thiết kế độc đáo tương ứng với thời gian và tiền bạc khách hàng đã trả. Tuy nhiên nếu quan sát các website đang có mặt trên internet, điều này chưa chắc hoàn toàn đúng và không cần thiết trong một vài trường hợp. Các website đẹp thường sử dụng những layout tương đối đơn giản và chẳng có một chút gì thật sự khác biệt. Sự thật là các nhà thiết kế web luôn muốn có một layout độc đáo, phá cách, nhưng khách hàng của họ thì chỉ muốn thứ gì đó dễ sử dụng, sạch sẽ và chuyên nghiệp.

Trong bài viết này, bạn sẽ có cơ hội tìm hiểu 10 layout rất phổ biến mà bạn có thể nhìn thấy tương tự ở vô số các website trên internet. Lưu ý rằng các website này được thiết kế theo kiểu có màu sắc, hình ảnh đồ họa và font chữ riêng biệt nhưng cấu trúc vẫn theo một khuôn mẫu phổ biến của các thiết kế cơ bản. Bài viết sẽ trình bày theo cách: đầu tiên đưa ra một số khung sườn layout đơn giản để bạn có thể dựa trên đó để triển khai các sáng tạo của riêng mình, sau đó sẽ cho bạn một hoặc hai ví dụ những website thật đang sử dụng cấu trúc layout này.

Nếu bạn là một nhà thiết kế web, thì nên đánh dấu trang này như một cẩm nang thiết kế web khi cần. Hãy nhớ rằng, những layout này chỉ là sự gợi ý và bạn cần phải sửa đổi và chế biến chúng. Chắc chắn rằng bạn sẽ không muốn làm giống y hệt như những đề nghị ở đây mà chỉ dùng nó để phát triển các ý tưởng dựa theo dự án thực tế của mình.

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

layoutideas-1-1Đây là cách layout đơn giản nhất trong trong danh sách. Thực tế, bạn luôn nghĩ rằng thiết kế đơn giản sẽ không bao giờ phù hợp theo yêu cầu của bạn. Nhưng trong trường hợp này, bạn sẽ ngạc nhiên với sự linh hoạt trong bố cục của kiểu thiết kế này.

Thiết kế ba khối hộp có tính năng bao gồm một khối hộp chính theo sau đó là 2 khối hộp phụ bên dưới. Mỗi khối hộp bạn có thể thay thế bằng hình ảnh đồ họa, khối chữ hoặc kết hợp cả hai. Khối hộp chính trong layout này là một slider jQuery (auto scrolling banner), có chức năng trình diễn nhiều nội dung khác nhau theo cách bạn muốn.
Những ô khung có sẵn phía trên có thể thay thế bằng logo, tên công ty, liên kết các trang, hay hộp tìm kiếm hoặc có thể dùng cho các thông tin và nội dung khác thường thấy ở các website như địa chỉ, slogan …
Layout này lý tưởng với các trang web cá nhân hoặc cần trình bày một số hình mẫu đồ họa. Mỗi hình ảnh có thể liên kết đến một ảnh lớn hơn hoặc đến một thư viện các hình ảnh đồ sộ hơn. Ở phần sau của bài viết, chúng ta sẽ xem xét cách làm thế nào để biến hóa ý tưởng này thành nhiều hơn nữa.

Ví dụ thực tế

Bên dưới là một thiết kế đẹp được thực hiện dựa trên kiểu layout 3 khối hộp của trang cá nhân Peter Verkuilen. Như chúng tôi đã từng đề nghị ở trên, khối hộp chính được sử dụng để làm hộp trình bày các dự án gần nhất của Peter. Khi nhấp chuột vào khối hộp, nó sẽ dẫn liên kết đến trang chi tiết dự án với nhiều thông tin hơn.
Đơn giản, hiệu quả và hấp dẫn. Bạn có thể thiết kế website riêng cho mình theo kiểu này chỉ trong vòng một giờ!

layoutideas-1-2

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

layoutideas-2-1Ngày nay, có rất nhiều hiệu ứng đẹp mắt phổ biến được các lập trình viên phát triển liên tục. Kiểu các màn hình 3 chiều như dưới đây là một trong những hiệu ứng được các nhà thiết kế web ưa chuộng.
Layout này thích hợp cho các trang web trưng bày sản phẩm, thư viện hình ảnh, hoặc trang cá nhân. Ý tưởng của layout này là làm nổi bật những hình ảnh, tạo ấn tượng cho người xem với hiệu ứng cuộn ảnh 3 chiều

Ví dụ thực tế

Trang pixelworkshop là một trong những website áp dụng thủ thuật này, đây là website bán giao diện làm sẵn. Họ đã dùng hiều ứng 3 chiều để giới thiệu các screenshot sản phẩm của mình thật sự ấn tượng

layoutideas-2-2

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

layoutideas-3-1Ngày nay đa số các website được thiết kế theo dạng lưới (grid). Thiết kế theo dạng lưới thường bị cho là nhàm chán vì có layout tương tự nhau. Tuy nhiên, kiểu layout dưới đây sẽ giúp bạn nghĩ khác. Layout này bao gồm một phần chính dành cho banner ảnh hoặc hình đồ họa, ở phần bên dưới nó chia ra 2 bên đều nhau, nhưng bên trái sử một khối nguyên, còn bên phải chia thành những khối nhỏ. Nhờ sự biến hóa, nên layout vẫn giữ được bố cục vững chắc và có những chi tiết nhỏ tránh gây nhàm chán.

Ví dụ thực tế

Website bên dưới là một ví dụ layout đẹp sử dụng kiểu lưới nâng cao, đây là một website bán trang phục trẻ em. Thiết kế này áp dụng linh hoạt bố trí các khối với kích thước khác nhau trên nền lưới đã được định trước, giúp phần trình bày nội dung rất hợp lý. Thực tế, banner ở header tuy là một khối nhưng được ghép từ 2 ảnh: ảnh tổng thể và ảnh chi tiết sản phẩm.
Như đã nói ở trên, khi bạn có một layout cơ bản, bạn có thể thay đổi linh hoạt các khối dù vẫn dựa trên nền lưới bên dưới để có một thiết kế web khác biệt.

layoutideas-3-2

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

layoutideas-4-1Đôi khi bạn có quá ít nội dung nhưng bị yêu cầu phải trình bày trên một trang. Đây là lúc bạn cần tìm kiếm một hình ảnh đại diện, một biểu tượng hay những hình ảnh có liên quan đến nội dung để lấp đầy chổ trống một cách hợp lý.
Kiểu bố cục sử dụng ảnh đồ họa làm trọng tâm sẽ đảm bảo cấu trúc vững chắc, layout nhìn sạch sẽ và đơn giản, điều bạn cần làm là sử dụng một hình ảnh thật ấn tượng để thu hút sự chú ý người xem dù nội dung không thật sự đủ cuốn hút.

Ví dụ thực tế

Layout này tương đối khá phổ biến, dưới đây là hai trong số website trên internet sử dụng kỹ thuật này. Bạn có thể tùy ý sắp xếp thanh liên kết hoặc định dạng các khối chữ theo ý đồ của mình mà vẫn giữ được cơ bản cấu trúc này.

layoutideas-4-2

layoutideas-4-3

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

layoutideas-5-1Kiểu 5 khối hộp thật sự chỉ là phần mở rộng từ kiểu 3 khối hộp mà chúng ta đã biết. Đây là cách sắp xếp để có thể trình bày được nhiều nội dung hơn, bạn cũng có thể điều chỉnh layout thành 4 khối hộp tùy theo nội dung bạn muốn trình bày, nhưng nhiều nhất cũng nên sử dụng 5 khối hộp, vì thêm nữa các khối bên dưới sẽ rất nhỏ so với khối bên trên.
Kiểu layout này cũng giống như layout 3 khối hộp, phần khối hộp lớn sẽ được dụng làm banner cuộn các hình ảnh cần làm nổi bật, các khối nhỏ bên dưới có thể thay thế bằng các ảnh thumbnail liên kết với các trang liên quan hoặc các hình ảnh thứ yếu.

Ví dụ thực tế

Đây là hai website ví dụ đang áp dụng layout này theo các cách khác nhau. Rõ ràng cả hai đếu có hình ảnh nổi bật nằm ở khối lớn ở trên và các nội dung thứ yếu nằm ở 4 khối hộp nhỏ bên dưới. Điều khác biệt là họ sử dụng các font chữ và hình ảnh hoàn toàn không giống nhau giúp cả hai có phong cách riêng biệt.
Từ đó chúng ta 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ự sáng tạo. Khi đã sắp xếp được nội dung, thì vẫn cón nhiều việc phải làm trong công việc trang trí mỹ thuật trang web. Đó cũng là lúc bạn biến hóa trang web mang dấu ấn phong cách thiết kế của mình

layoutideas-5-3 layoutideas-5-2

Xem tiếp phần 2