Học

SÓIhSÓIoSÓIhanhganTổng hợp & biên soạn

BẢN QUYỀN : CÔNG TY CỔ PHẦN KỸ THUẬT & THƯƠNG MẠI GV - WWW.GVCORP.EDU.VN

iết kế website

Mục lụcPhần 1: Lý thuyết

Màu sắc trong thiết kế web

Tỷ lệ vàng trong thiết kế

Bố cục trang web

6 Quy tắc khi thiết kế web

Font chữ trong thiết kế web

NNhững điểm lưu ý khi thiết kế web

10 nguyên tắc để thiết kế web HIỆU QUẢ

UI/UX & sự khác nhau giữa UI & UX

Phần 2: thực hành

Phác thảo giấy

Từ phác thảo - layout

---------------------------------------

---------------------------------------

I. Màu sắc

Phần 1: Lý thuyết thiết kế

Khi thiết kế web, hầu hết mọi người thường quan tâm nhiều tới Thiết kế (đồ họa, logo) và nội dung

web. Nhưng màu sắc cũng là một yếu tố không kém phần quan trọng trong khi thiết kế. Màu sắc rất

quan trọng bởi chúng tác động tới cảm xúc và tâm trạng của khách truy cập cũng như sự phản ánh

hình ảnh thương hiệu và tính đồng nhất của bạn. Khi thiết kế web, hầu hết mọi người thường quan

tâm nhiều tới Thiết kế (đồ họa, logo) và nội dung web. Nhưng màu sắc cũng là một yếu tố không kém

phần quan trọng trong khi thi ết kế. Màu sắc rất quan trọng bởi chúng tác động tới cảm xúc và tâm

trạng của khách

truytruy cập cũng như sự phản ánh hình ảnh thương hiệu và tính đồng nhất của bạn. Màu sắc là sự tượng

trưng. Người ta nói rằng màu xanh lá cây mang ý nghĩa về tính đố kỵ, ghen ghét, màu xanh dương thể

hiện nỗi buồn và màu đỏ ám chỉ sự giận dữ. Màu sắc tác động tới tâm lý chúng ta. Chúng có thể kích

thích sự ngon miệng hoặc ngăn cản nó, cũng như mang sự vui vẻ, thích thú, giận dữ hoặc buồn tẻ.

Hãy xem những ý nghĩa về màu sắc dưới đây để tìm ra cách phối màu và cách sử dụng chúng.

Gam màu nóng

MMàu đỏ- là một trong những màu thu hút sự chú ý và tác động mạnh nhất. Màu đỏ tượng trưng cho

lửa và sức mạnh, tình yêu và sự đam mê; đã được chứng minh là nguyên nhân làm tăng huyết áp và

đổ mồ hôi; thể hiện sinh lực, có khả năng thúc đẩy cá nhân hành động và cũng là biểu tượng của

chiến tranh, bạo lực, máu và sự xâm lược. Song, màu hồng là phần nhẹ dịu hơn của màu đỏ lại là sự

lãng mạn, êm đềm và dịu dàng.

MMàu cam – ấm áp và sôi nổi, màu cam gắn với mùa thu, những trái bí ngô và ngày lễ Halloween. Nó

mang nhiều nét tiêu biểu của màu đỏ, nhưng kém phần nồng nhiệt hơn.Màu cam tượng trưng cho

sức khỏe và kích thích sự ngon miệng. Giống như màu vỏ trái quýt, nó cũng là biểu tượng của sức

khỏe.

Màu vàng –hình tượng của ánh nắng và sự ấm áp. Nó mang ý nghĩa về niềm hi vọng,

ánh sáng và sinh lực. Song, nó cũng là sự yếu đuối, bệnh tật hoặc nhút nhát.

Gam màu lạnhXXanh lá cây –tượng trưng cho sức khỏe, sự phát triển (thực vật) và sự giàu có (tiền). Nó là biểu tượng

của mùa xuân, sự tái sinh và khả năng sinh sản. Ngoài ra nó cũng mang ý nghĩa về tính đố kỵ và sự

thiếu kinh nghiệm.

Hãy tránh những màu nhạt: Không nên dùng màu xanh dương quá nhạt cho những đoạn text và biểu

đồ nhỏ cùng dòng kẻ mảnh.

Hãy thận trọng khi phân biệt màu: Có rất nhiều người quan tâm tới điều này, nên bạn phải cố gắng

sao cho khách truy cập có thể cảm nhận đúng ý nghĩa của thông điệp được truyền tải. Ngoài các gam

màu tối như đen, xám và những màu liền kề, thì màu cam có thể có những tác dụng làm nổi bật.

Khoảng trắng: Hãy dùng những khoảng trắng để cân bằng các màu khác trên website khiến nhìn dễ

chịu hơn.

HHãy thử nghiệm: Hãy đảm bảo bạn có thể thực hiện được một thử nghiệm đọc cho trang web của

mình. Hãy sử dụng những sắc thái khác nhau từ một màu cũng như hãy chú ý tới sự hài hòa với những

màu khác nhau.

MÀU SẮC CÓ ẢNH HƯỞNG TỚI KHÁCH TRUY CẬP KHÔNG?

Để được thế giới công nhận những màu sắc sáng tạo là phụ thuộc vào bạn, song bạn sẽ phải làm việc

tích cực đó.

MÀU SẮC VÀ CON NGƯỜI

HHãy nhớ rằng sự cảm nhận màu sắc thay đổi theo các yếu tố như: giới tính, tuổi tác hoặc nền văn hóa.

Vì vậy bạn cần nghiên cứu kỹ về thị trường để trang web của mình thu hút

mục tiêu.

MÀU SẮC THEO ĐỘ TUỔI

Sự cảm nhận màu phụ thuộc vào tuổi tác. Khi người ta ở độ tuổi nhất định thường thích các website

có màu sắc nhã nhặn và giản dị.Trong khi đó, giới trẻ lại thú vị những màu sặc sỡ và rực rỡ hơn. Bởi

vậy, hãy tạo nên sự khác biệt giữa họ bằngviệc sử dụng những màu sắc phù hợp với mỗi độ tuổi.

MMÀU SẮC THEO GIỚI TÍNH

Sự thiên vị của con người cũng phụ thuộc vào giới tính. Vậy nên, nam giới thường thích màu xanh

dương, da cam hơn màu đỏ và vàng, trong khi nữ giới lại thích màu đỏ, vàng hơn.

Màu sắc và Quốc gia

NếuNếu website của bạn chuyên vào khán giả hơn là xuất xứ quốc gia hoặc thu hút các tiềm năng từ một

nước nào đó thì bạn cũng nên nghiên cứu ý nghĩa các màu đặc trưng. Ví dụ, trong khi văn hóa phương

Tây quan niệm màu trắng là biểu tượng sự thuần khiết thì Trung Quốc, Nhật Bản và Ấn Độ lại quan

niệm đó là sự thiếu may mắn và không vui vẻ. Dù ở Nhật màu hồng rất được ưa chuộng nhưng các

nước Đông Âu và Ấn Độ lại cho rằng đó là màu yếu đuối. Màu tía liên tưởng tới nền văn hóa Ả Rập với

nạn mại dâm (tương tự như màu đỏ tại các nền văn hóa Châu Âu và Bắc Mỹ).

TTrên bình diện toàn cầu, nói chung nó có ý nghĩa về sự huyền bí và những niềm tin không nằm trong

sự giáo huấn của đạo Hồi, đạo Do thái và Thiên Chúa Giáo. Nếu sử dụng màu xanh cho một website

cơ quan tài chính Mỹ sẽ liên tưởng đến một thể chế làm việc với ” đồng đô la xanh đầy quyền lực”,

nhưng lại không ý nghĩa mấy cho một quốc gia sử dụng những đồng tiền (tiền giấy) có màu sắc đa

dạng.

Mặt khác, xanh dương hoàn toàn được thừa nhận là “ màu an toàn” và màu quốc tế vì có thể dùng

được cho hầu hết bất cứ loại website nào cũng như với mọi người xem, nơi chốn hay mục tiêu. Bạn

nên có sự lựa chọn về cách phối màu để tránh những vấn đề và cả chi phí cao.

Điều này có thể dẫn đến một sự thay đổi hoàn toàn về nghĩa. Nếu không được hạn chế hợp lý, ý nghĩa

sẽ bị thay đổi và các hàm ý tiêu cực sẽ giảm thiểu rất ít, (Ví dụ: Màu đỏ sẽ nổi bật hơn khi kết hợp với

màu trắng). Để được thế giới công nhận những màu sắc sáng tạo là phụ thuộc vào bạn, song bạn sẽ

phải làm việc tích cực đó.

TỶ LỆ VÀNG TRONG THIẾT KẾĐây là một tỷ lệ được áp dụng cho rất nhiều thứ chứ ko phải chỉ dành cho thiết kế web.

Lấy 1 ví dụ minh họa, Xem nào, Lấy bức ảnh “Mô na li ssa” của Lê ô na đờ vanh xi , tôi sẽ chỉ cho các bạn

thấy tỷ lệ vàng là tỷ lệ như thế nào.

TTheo quy chuẩn, tất cả những gì áp dụng đúng theo tỷ lệ này đều được gọi là chuẩn ( còn đẹp thì do

nhiều yếu tố nữa)

Vậy chúng ta áp dụng tỷ lệ vàng này vào thiết kế website như thế nào?

Bonus:

Khi đã chán làm với tỷ lệ vàng, chúng ta nên chuyển qua 1 tỷ lệ khác, cũng được sử dụng khá nhiều.

Đó là tỷ lệ 1/3

Đây là 1 tỷ lệ đẹp, không chỉ khi thiết kế website, mà thiết kế logo, hay chụp ảnh, tôi đều muốn sử

dụng nó hơn. (Cơ bản là lười vì căn 1/3 dễ hơn chia tỷ lệ vàng ̂̂ )

RRất đơn giản, khi bạn thiết kế 1 layout, bạn chia độ dài nó ra làm 3 phần bằng nhau, rồi cho sidebar 1

phần, content 2 phần, thế là ok.

Áp dụng thực tế

Là tỷ lệ cân đối nhất, với đặc điểm độc đáo là tương quan giữa thành phần nhỏ

đối với thành phần lớn cũng bằng tương quan giữa thành phần lớn đối với thành

phần tổng cộng, lớn và nhỏ– tức toàn thể và tất cả chỉ có một giá trị tương quan

duy nhất: 0,6180389 hay 61,8% .

Dễ hình dung nhất là nó có hình xoắn ốc như này:

Bố cục trang web

1 2

3 4

- Chọn nền phù hợp để có thể thu hút được sự tập trung của người xem.

- Biểu tượng phải tạo được sự chú ý ngay từ điểm số #1, thường ở đây sẽ bố trí logo.

- Có thể thay đối màu sắc hoặc hình ảnh ở cuối điểm số #2 để hướng người xem đi theo chữ Z. Trong

ví dụ là thay đổi màu sắc chữ signup.

-- Một Images slider ấn tượng ở giữa, điều này sẽ làm giúp ta tách riêng được phần đầu và phần cuối

của thiết kế, và hướng sự chú ý của người xem di chuyển từ điểm #2 sang điểm #3. Ở đây bạn nên để

những hình ảnh về cty, sản phẩm, v.v…

- Một vài dòng thông tin ngắn gọn, điều này sẽ giúp cho người xem hỉu được bạn làm gì và bạn

muốn gì ở họ. Tại điểm số #3 này, thông tin phải cực kì ngắn gọn và súc tích. Thường thì tại đây bạn sẽ

để thông tin về dịch vụ, tầm nhìn, văn hóa công ty, v.v…

- Cuối cùng là một nút lớn kêu gọi hành động ở điểm số #4.

2/2/ TẠI SAO LẠI CHỌN ZLAYOUT ?Z-layout chắc chắn không cần phải là giải pháp cuối cùng cho tất cả các trang web, nhưng nó thường

là một lựa chọn tốt cho bất kỳ dự án thiết kế bởi vì nó đã hội tụ đủ 4 của các nguyên tắc và mục đích

của một thiết kế hiệu quả:

- Xây dựng thương hiệu

- Hệ thống phân cấp

- Cấu trúc thiết kế

- Kêu gọi một hành động (từ thiện, qu- Kêu gọi một hành động (từ thiện, quyên góp, đang ký, mua hàng,…)

3/ KẾT LUẬN

Điều quan trọng cần lưu ý là Z-layout không phải là mô hình bố trí duy nhất, còn có nhiều bố trí khác

tương ứng với bảng kí tự chữ cái. Z-Layout thông dụng bởi vì cách bố trí của nó đơn giản mà thỏa

mãng nhiều tiêu chí của việc thiết kế website. Nếu có thể, mình sẽ giới thiệu với các bạn về F-Layout.

Bài viết có lẽ còn nhiều sơ sót, xin mọi người góp ý để bài viết hoàn thiện hơn.

II – F layout

Đây là một trong những kiểu layout phổ biến đối với các thiết kế hiện đại ngày nay.

Thay vì hướng người xem đi theo những vị trì đã được xấp xếp sẵn như Z Layout. Thì F Layout lại đi sâu

hơn vào việc tìm hiểu một cách có khoa học các thói quen chung của người dùng và đưa ra những

mẫu thiết kế hợp lý. Trong bài này thì chúng ta sẽ tìm hiểu sâu hơn về nguyên tắc của F Layout, tại sao

nó lại hữu dụng và làm cách nào bạn có thể tạo cho riêng mình một thiết kế theo nguyên tắc F Layout.

GIỚIGIỚI THIỆU F-LAYOUT

Dựa theo các nghiên cứu khoa học, bằng cách khảo sát và quan sát người lướt web, người ta nhận

thấy rằng, người lướt web thường có xu hướng xem theo thứ tự như sau: trên cùng bên trái, sau đó

chuyển động ngang về phía bên phải, đến cuối cùng, sau đó họ sẽ chuyển hướng xuống dòng phía

dưới và cũng đọc từ trái sang phải. Cứ như thế thì họ sẽ tạo ra một mô hình theo dạng hình chữ F.

Theo như hình vẽ mẫu phía dưới thì mắt người xem sẽ đi chuyển từ vị trí số 1 > 2 > 3 > 4.

Nếu như thiết kế với F Layout thì bạn sẽ có được những lợi thế sau:

- - Nhãn hiệu, thương hiệu là những đối tượng đầu tiên được người xem chú ý đầu tiên.

- Các hình ảnh, tiêu đề, bài viết sẽ được chú ý nhiều hơn.

ĐƯA F -LAYOUT VÀO THIẾT KẾ

Bạn hãy xem một mẫu thiết kế trong 1 dự án mà mình đang thực hiện dang dỡ.

Và cách dễ hình dung nhất là nó giống như các

bạn đang đọc một quyển sách vậy, cứ đọc hết

dòng này sẽ xuống dòng kế tiếp. Đối với 1

website thì người xem họ cũng lướt qua từng

đối tượng 1 theo như trong mẫu trên. Và các đối

tượng bên trái phía trên thường sẽ là những đối

tượng quan trọng (logo, slogan, menu, bài viết).

CácCác đối tượng phía phải thì thường ít quan trọng

hơn (slide-bar, sponsor, ads,….)

Và nếu như bạn nhìn vào thiết kế trên thì bạn sẽ đi theo nguyên tắc mà mình đã nêu lên ở trên. Và khi

mình gán chữ F vào thì có thể dễ dàng thấy được tác dụng của thiết kế F Layout, khi vào web, theo

thói quen, người xem sẽ xem qua logo của bạn trước, sao đó là các liên kết (1-2). Sau đó, người xem

sẽ chuyển về đầu và chuyển sang dòng thứ hai, ở đây các bạn có thể để silder hoặc một mẫu quảng

cáo gây chú ý cho người dùng. Tiếp đó, người xem sẽ xuống dòng dưới và các đối tượng phía bên trái

(3) như thumbnail hình ảnh, title và mẫu tin ngắn gọn. Ở bên phải (4) thì là các box chứa menu,

category, ads, social,… Và những đối tượng ở phía này ít được chú ý đến.

KKhoảng các giữa các dòng trong F Layout có thể có chiều cao khác nhau, tuy nhiên các nhà thiết kế

lại thích cho thiết kế của mình mỏng lại (tức khoản các giữa các dòng ngắn lại) nhằm tăng lên tầng số

quét của người xem, tuy nhiên, thì cách này lại có thể gây ra tác hại là làm cho người xem bị choáng

với lượng thông tin dầy đặc. Nhưng chúng ta lại có thể giải quyết việc đó bằng các sau một vài dòng

thì chúng ta có thể thêm 1 break object (quảng cáo, hình ảnh vui nhôn, lạ mắt), mục đích là loại bỏ sự

nhàm chán cho người xem. Ngoài ra, các đối tượng phía bên trái, chúng ta cũng có thể thiết kế sao

cho bắt mắt, nhằm gây sự chú ý của người xem.

ƯUƯU VÀ KHUYẾT ĐIỂM

Z Layout có hiệu quả không? Câu trả lời là CÓ, nếu như các bạn để ý thì hầu như các blog hiện này

điều được thiết kế với F Layout (soihoang.com cũng thuộc F-Layout)

Và tại sao nó lại được yêu thích đến thế? Bởi vì đơn giản nó là thói quen từ nhỏ khi chúng ta đọc sách,

trái sang phải, trên xuống dưới. Nên rất dễ dàng và thoải mái cho người xem.

Một điểm tốt nhất ở F-Layout đó chính là SEO, chính các tiêu đề và nội dung ngắn gọn bài viết rất tốt

cho SEO.

Tuy nhiên, nó cũng có những nhược điểm là:

- Điều bắt buộc là nội dung nóng phải nằm ở trên.

- Người dung ko đọc chi tiết chữ, mà chỉ xem hình và tiêu đề, do đó, các hình ảnh và tiêu đề phải được

chọn lọc kĩ càng.

Chú ý: Nội dung là chủ chốt để giữ chân khách hàng, slice-bar và các đối tượng bên phải chỉ là phụ.

Ngoài F-layout & Z layout còn 1 loại nữa, nhưng ít sử dụng Sơ đồ Gutenberg

NNhưng vì tính phổ biến của nó ko cao nên tôi sẽ không đề cập sâu hơn.

6 QUY TẮC THIẾT KẾ WEB

Nghiên cứu cho thấy rằng tiêu đề được đặt bên dưới

hình ảnh chính được đọc nhiều hơn 10% so với các tiêu

đề trên. Vì vậy, nếu bỏ qua quy tắc này, bạn có khả năng

mất 10% độc giả, những người sẽ không đọc bất cứ

điều gì và chuyển sang một trang web khác hoặc trang.

Hãy suy nghĩ về nó theo cách này: nếu bạn có 10.000

người ghé thăm trang web của bạn mỗi năm, mà có thể

có nghĩa là mcó nghĩa là mất 1.000 người với sai lầm cơ bản!

Hầu hết mọi người sẽ đọc chú thích đầu tiên, bạn nên

đảm bảo rằng bạn có một chú thích bên dưới tất cả các

hình ảnh và viết thật sát với nội dung với bài viết bạn đề

cập.

Người sử dụng sẽ đọc nó đầu tiên trước khi đọc nội

dung bài viết

Hãy chắc chắn rằng những hình ảnh được gắn rõ ràng

với những gì bạn đang cung cấp, hoặc ít nhất là phù

hợp với chủ đề của trang web của bạn.

Hình ảnh nêu bật lên nội dung website hoặc gợi trí tò

mò cho người dùng khi truy cập website của bạn.

BAD GOOD

FONT CHỮ TRONG THIẾT KẾ WEB

NHỮNG ĐIỂM LƯU Ý KHI THIẾT KẾ WEB

Thiết kế với các yếu tố trang “truyền thống” không có nghĩa là trang web đó sẽ nhàm chán. Thực tế,

chúng rất hữu ích vì bạn sẽ không phải tìm ra xem chúng hoạt động như thế nào. Ví dụ, sẽ là một

cơn ác mộng nếu tất cả các website đều trình bày RSS feed khác nhau... Khả năng sử dụng và tính

thiết thực, chứ không phải thiết kế hình ảnh, quyết định sự thành công của một website. Vì khách

vào xem trang là người duy nhất nhắp chuột và quyết định mọi thứ nên thiết kế tập trung vào

người sử dụng đã trở thành một phương pháp chuẩn để thiết kế web thành công và hướng tới lợi

nhuận. Sau cùng, nếu người sử dụng không dùng tới một đặc tính nào đó, nó có thể biến mất.

Chúng Chúng tôi sẽ không đề cập đến các chi tiết thực hiện (ví dụ như nên đặt box tìm kiếm ở đâu) vì nó

đã được nói tới trong các bài viết trước; thay vào đó, chúng tôi tập trung vào các nguyên tắc,

phương pháp và kinh nghiệm để thiết kế web hiệu quả- các phương pháp mà nếu được dùng đúng

sẽ tạo ra các quyết định thiết kế tinh vi và đơn giản hóa quá trình trình bày thông tin.

Hãy chú ý

Có thể bạn có hứng thú với các bài viết liên quan đến khả năng sử dụng 10 cơn ác mộng về khả

năng sử dụng và 30 vấn đề khả năng sử dụng mà chúng tôi đã đăng trước đây,

Chúng Chúng tôi sẽ đề cập đến nhiều nguyên tắc để có thiết kế hiệu quả trong các bài viết tiếp theo. Do

vậy có thể bạn muốn đăng kí RSS feed của chúng tôi .

Bài viết nBài viết này đã được dịch sang tiếng Do Thái Hebrew . Các nguyên tắc để có một thiết kế web hiệu

quả Để sử dụng các nguyên tắc này một cách đúng đắn, trước hết chúng ta cần hiểu cách người sử

dụng tương tác với các website, cách họ nghĩ và những kiểu mẫu hành động cơ bản của người sử

dụng. Người sử dụng nghĩ như thế nào?Về cơ bản, thói quan của người sử dụng trên web không

khác so với thói quen trong một cửa hàng. Người khách đọc lướt qua một trang mới, nhìn vào phần

chữ, và nhắp chuột vào đường dẫn đầu tiên thích hợp với sở thích của họ hoặc có vẻ giống thứ mà

họ đang tìm kiếm. Thực tế, có những phần lớn của trang mà họ thậm chí không nhìn vào. Hầu hết

người sử dụng tìm người sử dụng tìm kiếm một thứ gì đó hấp dẫn (hoặc hữu ích) và có thể nhắp chuột vào; ngay khi

tìm thấy một ứng cử viên sáng giá, họ nhắp chuột. Nếu trang mới mở không đáp ứng được sự trông

đợi của họ, thì họ sẽ nhắp vào nút Back và quá trình tìm kiếm lại tiếp tục.

* Người sử dụng đánh giá cao chất lượng và sự tin cậy. Nếu một trang cung cấp cho người sử dụng

nội dung chất lượng cao, họ sẽ sẵn sàng dàn xếp phần nội dung với các mẩu quảng cáo và thiết kế

trang. Đây là lí do tại sao các trang web được thiết kế tốt với nội dung chất lượng cao đạt được khối

lượng truy cập lớn qua nhiều năm. Phần nội dung quan trọng hơn phần thiết kế hỗ trợ cho nó.

* Người sử dụng không đọc, họ lướt qua. Để phân tích một trang web, người sử dụng tìm kiếm một

vài điểm nhất định nào đó hoặc các nguồn tin cậy hướng dẫn họ trong suốt phần nội dung trang.

(*) Người sử dụng Web không kiên nhẫn và muốn có kết quả ngay tức khắc. Nguyên tắc rất đơn

giản: nếu một website không để đáp ứng mong đợi của người sử dụng, thì thiết kế sẽ không thể

làm nhiệm vụ của nó và công ty sẽ mất tiền. Load càng cao, điều hướng càng ít trực quan thì người

sử dụng sẽ càng dễ bỏ trang đó và tìm kiếm một sự thay thế khác. [JN / DWU]

(*) Người sử dụng (*) Người sử dụng không dùng những lựa chọn tối ưu. Người sử dụng không tìm con đường nhanh

nhất để tìm thông tin. Họ không lướt qua trang web theo một cách thẳng tưng mà cũng không đi

liên tiếp từ phần này sang phần khác của trang. Thay vào đó họ hi sinh, chọn lựa chọn hợp lí đầu

tiên. Ngay khi thấy một đường link trông có vẻ như có thể dẫn đến mục tiêu của họ, thì họ sẽ nhắp

chuột vào ngay tức khắc. Để tối ưu hóa rất khó và tốn nhiều thời gian. Hi sinh sẽ hiệu quả hơn.

(*) Người sử dụng làm theo cảm quan của h(*) Người sử dụng làm theo cảm quan của họ. Trong hầu hết trường hợp, người sử dụng đảo lộn

tung cả lên chứ không đọc thông tin mà nhà thiết kế cung cấp. Theo Steve Krug, nguyên nhân căn

bản là người sử dụng không quan tâm. “Nếu chúng tôi thấy một thứ gì có hay, chúng tôi sẽ dính

chặt lấy nó. Chúng tôi không quan tâm đến việc chúng tôi có hiểu được các thứ hoạt động như thế

nào không, miễn là chúng tôi có thể sử dụng chúng. Nếu khách của bạn đang hành động giống như

bạn đang thiết kế một bảng yết thị thì thiết kế chính là những bảng yết thị tuyệt vời.”

(*) Người sử dụng muốn (*) Người sử dụng muốn kiểm soát. Người sử dụng muốn được kiểm soát trình duyệt của họ và

dựa trên phần trình bày dữ liệu nhất quán trong suốt trang. Ví dụ, họ không muốn các cửa sổ mới

bỗng dưng nhảy ra và họ muốn có thể quay trở lại trang trước đó bằng nút “Back”: do đó, tốt nhất là

đừng bao giờ mở các link trong các cửa sổ trình duyệt mới.

Người sử dụng không đọc, họ lướt qua. Lưu ý cách

các phần “hot” biến mất đột ngột ở giữa các câu.

Điều này điển hình cho quá trình đọc lướt.

1. ĐỪNG BẮT NGƯỜI SỬ DỤNG PHẢI NGHĨ Theo quy luật đầu tiên của Krug về khả năng sử dụng, trang web phải rõ ràng. Khi tạo một trang,

công việc của bạn là loại bỏ các dấu chấm hỏi – người sử dụng cần đưa ra các quyết định một cách

có ý thức và cân nhắc các lí lẽ tán thành và phản đối và các lựa chọn thay thế.

Nếu điều hướng Nếu điều hướng và cấu trúc trang không trực quan, số lượng các dấu chấm hỏi tăng lên và làm cho

người sử dụng khó hiểu cách hệ thống hoạt động và không biết làm cách nào để đi từ điểm A đến

điểm B. Một cấu trúc rõ ràng điều chế các mối hình ảnh và các đường link dễ nhận thấy có thể giúp

người sử dụng đạt được mục đích của họ.

2. ĐỪNG PHÍ PHẠM LÒNG KIÊN NHẪN CỦA NGƯỜI SỬ DỤNGTTrong mọi dự án, khi bạn sẽ cung cấp cho khách vào xem một công cụ hay dịch vụ nào đó, hãy cố

để cho các yêu cầu sử dụng ở mức tối thiểu. Người sử dụng càng ít bị yêu cầu thực hiện các bước để

thử dịch vụ thì họ sẽ càng cố thử dịch vụ đó. Những khách vào xem lần đầu sẵn sàng thử nghiệm

dịch vụ chứ không sẵn sàng điền vào các web form dài dằng dặc để đăng kí một tài khoản mà có

thể họ sẽ không bao giờ dùng tới sau đó. Hãy để người sử dụng khám phá trang và tìm hiểu các

dịch vụ của bạn và đừng bắt họ chia sẻ dữ liệu cá nhân. Chỉ nên yêu cầu người sử dụng điền địa chỉ

thư điện tử để kiểm tra đặc tính.

NNhư Ryan Singer — chuyên viên thiết kế của 37Signals team — đã nói states , người sử dụng nó thể

sẽ sẵn sàng cung cấp địa chỉ thư điện tử nếu được yêu cầu sau khi họ đã thấy được các đặc tính hoạt

động, vì nhờ đó họ biết được họ sẽ nhận lại được gì.

xem một ví dụ. Beyondis.co.uk quả quyết là

“beyond channels, beyond products, beyond dis-

tribution”. Nó có nghĩa là gì? Vì người sử dụng có

khuynh hướng khám phá website dựa trên kiểu

“F”-pattern nên 3 câu này sẽ là những yếu tố đầu

tiên mà họ sẽ xem xét đến trên mỗi trang.

Mặc dù bản thân thiết kế đơn giản và trực quan

nhưng để hiểu được trang nói về cái gì thì người

ExpressionEngine sử dụng cấu trúc tương tự như

của Beyondis, nhưng tránh các dấu chấm hỏi

không cần thiết. Hơn nữa, câu slogan hoạt động

hiệu quả hơn vì người sử dụng được cung cấp các

lựa chọn để thử dịch vụ và tải phiên bản miễn phí.

Bằng cách giảm tải nhận thức, bạn có thể giúp

người sử dụng dễ dàng nắm bắt được ý tưởng

đằng sau hệ thốnđằng sau hệ thống. Một khi đã đạt được điều đó,

dùng cần phải tìm hiểu. Đây là một dấu chấm hỏi không cần thiết. Nhiệm vụ của nhà thiết kế là làm

sao cho số lượng dấu chấm hỏi gần với con số 0 nhất. Phần giải thích bằng hình ảnh được đặt ở

phía bên phải. Chỉ việc đổi giữa 2 khối cũng sẽ tăng cường khả năng sử dụng.

bạn có thể cho người sử dụng thấy hệ thống hữu ích như thế nào và họ có thể có những lợi ích gì từ

đó. Mọi người sẽ không sử dụng trang web của bạn nếu họ không thấy có lợi ích gì.

Stikkit là một ví dụ hoàn hảo về một dịch vụ thân thiện với người

sử dụng, nó hầu như không yêu cầu bất cứ thứ gì từ khách vào

xem. Nó khiến khách vào xem thấy thoải mái, đó cũng là điều bạn

muốn người sử dụng của bạn cảm thấy khi vào trang web của

mình.

Nhìn bên ngoài, có vẻ như Mite yêu cầu nhiều

hơn. Tuy nhiên, bạn có thể hoàn thành đăng kí

trong vòng chưa đến 30 giây – vì form được

thiết kế ngang nên người sử dụng không cần

phải kéo trang xuống.

Đúng như theo tư tưởng loại bỏ hết mọi rào chắn, không yêu cầu đăng kí trước. Chỉ một đăng kí sử

dụng cũng đủ để ngăn cản điều hướng sử dụng cắt giảm lưu lượng tới.

3. TẬP TRUNG VÀO SỰ QUAN TÂM CỦA NGƯỜI SỬ DỤNG VVì các trang web cung cấp cả nội dung động lẫn tĩnh nên một vài khía cạnh trong giao diện người

sử dụng có thể thu hút sự chú ý hơn những cái khác. Rõ ràng là các hình ảnh luôn bắt mắt hơn chữ-

cũng như các câu in đậm luôn thu hút hơn chữ thường. Mắt người là một thiết bị không theo đường

thẳng, không tuyến tính và người sử dụng web có thể ngay lập tức nhận ra các góc cạnh, hoa văn và

các chuyển động. Đó là lí do tại sao các mẩu quảng cáo bằng video cực kì phiền toái và gây xao lãng

Humanized.com sử dụng nguyên tắc tập trung một

cách hoàn hảo. Yếu tố duy nhất mà người sử dụng có

thể nhìn thấy một cách trực tiếp là từ “miễn phí” cực

kì hấp dẫn nhưng vẫn cung cấp được thông tin.

Những lời gợi ý tế nhị cung cấp cho người sử dụng

đủ thông tin để tìm hiểu thêm về sản phẩm “miễn

phí”.

Tập trung sự chú ý của người sử dụng vào các khu vực cụ thể của trang bằng cách sử dụng vừa phải

các yếu tố hình ảnh có thể giúp khách vào xem đi từ điểm A đến điểm B mà không cần nghĩ đến

cách thực hiện. Khách xem càng ít thắc mắc thì họ càng tin tưởng rằng họ có thể khai thác trang đó.

Nói cách khác: càng ít phải nghĩ thì trải nghiệm sử dụng càng tốt hơn.

4. ĐẠT ĐƯỢC SỰ PHƠI BÀY ĐẶC TÍNH Các thiết kế web hiện đại thường bị phê bình vì phương pháp hướng dẫn người sử dụng bằng các

bước thực hiện qua hình ảnh, các button to với các hiệu ứng hình ảnh. Nhưng từ khía canh thiết kế,

những yếu tố này thực sự không tồi. Ngược lại, những hướng dẫn này lại cực kì hiệu quả vì chúng

dẫn khách qua các phần nội dung trang một cách đơn giản và thân thiện.

Dibusoft.com kết hợp sự hấp dẫn về hình ảnh với một

cấu trúc trang rõ ràng. Trang có 9 lựa chọn điều hướng

chính có thể nhìn thấy dễ dàng. Nhưng có thể các màu

sắc hơi quá sáng.

Cho người sử dụng thấy rõ ràng các chức năng của trang là một nguyên tắc cơ bản của một thiết kế

giao diện người sử dụng thành công. Không quan trọng việc bạn làm thế nào để đạt được điều đó.

Điều quan trọng là phần nội dung phải dễ hiểu và khiến khách vào xem cảm thấy thoải mái khi

tương tác với hệ thống.

5. SỬ DỤNG CHỮ VIẾT HIỆU QUẢ Vì web khác với in, nên cần phải điều chỉnh phong cách viết cho phù hợp với sở thích của người sử

dụng và thói quen trình duyệt. Các phần viết quảng cáo sẽ không được đọc. Các ô chữ dài không có

hình ảnh hoặc từ in đậm hay in nghiêng sẽ bị bỏ qua.

Ngôn ngữ phóng đại sẽ bị lờ đi.Ngôn ngữ phóng đại sẽ bị lờ đi. Tránh những cái tên dễ thương, những cái tên marketing, tên riêng

của công ty và những cái tên kĩ thuật không thông dụng. Ví dụ, nếu muốn mô tả một dịch vụ và

muốn người sử dụng tạo tài khoản, hãy dùng từ “sign up” thay vì từ “start now!” hay “explore our

services”.

+ Sử dụng layout có thể đọc lướt (phân loại nội dung, sử dụng nhiều lớp tiêu đề, các yếu tố hình

ảnh và các danh sách được đánh mục),

+ Sử dụng ngôn ngữ khách quan và giản dị (một mẩu khuyến mại không cần phải giống như mẩu

quảng cáo, cho người sử dụng một lí do hợp lí để sử dụng dịch vụ của bạn hoặc vào trang web của

bạn)

Eleven2.com đi thẳng tới vấn đề. Không có những từ ngữ

dễ thương, không có những tuyên bố phóng đại. Chỉ là

cái mà khách vào xem đang tìm kiếm. Một lựa chọn tối

ưu để viết hiệu quả là :

+ Sử dụng các cụm từ ngắn gọn, chính xác (đi thẳng

đến vấn đề càng nhanh càng tốt),

6. Đạt tới sự đơn giản Nguyên tắc “để nó đơn giản” - “keep it simple”- (KIS) nên là mục tiêu chính của

thiết kế trang. Người sử dụng hiếm khi vào một trang để thưởng thức thiết kế; ngoài ra, trong hầu hết

trường hợp, họ đang tìm kiếm thông tin chứ không phải thiết kế. Vì vậy hãy vươn tới sự đơn giản thay

vì phức tạp.

sao một phiên bản in thân thiện với người dùng của các trang web là cực kì cần thiết để có được trải

nghiệm sử dụng tốt.

7. ĐỪNG NGẠI KHOẢNG TRẮNG Thật khó để đánh giá cao tầm quan trọng của khoảng trắng. Nó không những giúp giảm khối lượng

tiếp nhận thông tin cho người sử dụng mà còn giúp họ dễ nhận thức thông tin được trình bày trên

màn hình hơn. Khi một khách mới tiếp cận một layout thiết kế, điều đầu tiên anh ấy/ cô ấy làm là nhìn

lướt qua trang và chia phần nội dung thanh các mẩu thông tin ngắn, dễ tiếp nhận hơn.

CCác cấu trúc phức tạp sẽ khó đọc, nhìn lướt, phân tích và làm việc hơn. Nếu bạn có lựa chọn để phân

tách 2 yếu tố thiết kế tách biệt băng một đường kẻ nhìn thấy hoặc bằng một khoảng trắng, thì giải

pháp khoảng trắng sẽ tốt hơn. Cấu trúc phân bậc giúp giảm sự phức tạp (Quy luật của Simon): bạn

càng cung cấp cho người sử dụng một sự phân cấp hình ảnh tốt thì nội dung của bạn sẽ càng dễ tiếp

nhận.

8. TRUYỀN ĐẠT THÔNG TIN MỘT CÁCH HIỆU QUẢ BẰNG “NGÔN NGỮ HỮU HÌNH”” Trong bài viết về truyền đạt thông tin qua hình ảnh hiệu quả của mình, Aaron Marcus đã đưa ra 3

nguyên tắc cơ bản liên quan đến việc sử dụng “ngôn ngữ hữu hình” – phần nội dung mà người sử

dụng nhìn thấy trên màn hình.

+ Sắp xếp: cung cấp cho người sử dụng một cấu trúc rõ ràng và nhất quán. Tính nhất quán, layout

màn hình, các mối quan hệ và khả năng điều hướng là những khái niệm quan trọng nhất của tổ chức,

sắp xếp. Những nguyên tắc tương tự nên được áp dung cho tất cả các yếu tố.

Finch trình bày rõ ràng thông tin về trang, cho khách vào xem

nhiều lựa chọn mà không đưa ra các nội dung không cần thiết.

Crcbus cung cấp cho khách vào xem một thiết kế gọn gàng và đơn

giản. Bạn có thể không hiểu trang web này nói về cái gì vì nó là tiếng

Ý, tuy nhiên, bạn có thể nhận ra điều hướng, tiêu đề, phần nội dung

và phần chân trang. Chú ý cách các icon truyền tải thông tin một

cách rất rõ ràng. Khi hươ chuột qua icon, các thông tin thêm được

hiện ra. Từ phía khách vào xem mà nói, thiết kế trang tốt nhất là một

thiết kế toàn chữ, không có bất cứ quảng cáo hay các ô nội dung

thêmthêm nào và trả lời được những thắc mắc cũng như có nội dung mà

họ đang tìm kiếm. Đây là một trong những lí do tại

+ Tiết kiệm: làm tất cả với số lượng yếu tố hình ảnh và chú thích ít nhất. 4 điểm lớn cần cân nhắc là:

tính đơn giản, tính rõ ràng, tính phân biệt và nhấn mạnh. Tính đơn giản chỉ bao gồm các yếu tố quan

trọng nhất cho việc truyền tải thông tin. Tính rõ ràng: tất cả các thành phần nền được thiết kế sao cho

có ý nghĩa rõ ràng. Tính phân biệt: các đặc tính quan trọng của các yếu tố cần thiết cần phải được

phân biệt rõ ràng. Nhấn mạnh: những yếu tố quan trong nhất cần phải dễ nhận biết.

++ Truyền tải thông tin: Giao diện người sử dụng phải cân bằng được giữa tính dễ đọc, kiểu chữ, xem

nhiều cái một lúc và màu sắc hoặc kết cấu nhằm truyền đạt thông tin một cách hiệu quả. Sử dụng tối

đa 3 kiểu chữ và 3 cỡ chữ - tối đa 18 từ hoặc 50- 80 kí tự mỗi dòng chữ.

9. NHỮNG CÁI THEO LỆ THƯỜNG LÀ BẠN CỦA CHÚNG TA TThiết kế với các yếu tố trang “truyền thống” không có nghĩa là trang web đó sẽ nhàm chán. Thực tế,

chúng rất hữu ích vì bạn sẽ không phải tìm ra xem chúng hoạt động như thế nào. Ví dụ, sẽ là một cơn

ác mộng nếu tất cả các website đều trình bày RSS feed khác nhau. Với những yếu tố truyền thống, bạn

có thể có được sự tin tưởng của người sử dụng và chứng minh sự đáng tin cậy của bạn.

Tuân theo những mong đợi của người sử dụng – hiểu được họ mong đợi điều gì từ điều hướng trang,

cấu trúc text, vị trí đặt công cụ tìm kiếm… (xem bài Usability Alertbox của Nielsen để có thểm thông

tin)

Một ví dụ điển hình là việc dịch trang trong tiếng

Nhật (giả sử người sử dụng trang web của bạn

không biết tiếng Nhật, ví dụ với Babelfish ) và người

kiểm tra tính năng sử dụng của bạn có nhiệm vụ tìm

ra một thứ gì đó trong trang được viết một ngôn ngữ

khác. Nếu áp dụng tốt những yếu tố truyền thống,

người sử dụng sẽ có thể đạt tới được một mục tiêu

không quá cụ thkhông quá cụ thể, cho dù họ không hiểu chữ nào.

Kiểm tra là một quá trình lặp đi lặp lại. Điều này có nghĩa là bạn thiết kế một thứ gì đó, kiểm tra, sửa

chữa rồi lại kiểm tra. Có thể có vài vấn đề bạn không nhận ra trong lần đầu kiểm tra vì người sử dụng

còn bị chặn bởi những vấn đề khác.

KKiểm tra khả năng sử dụng luôn luôn mang lại những kết quả hữu ích. Cho dù là bạn thấy được những

vấn đề bạn gặp phải hay thấy được sự thiếu vắng của những lỗ hổng trong thiết kế thì cả hai đều hữu

ích cho dự án của bạn. • Theo quy luật của Weinberg, một chuyên viên thiết kế không nên kiểm tra mã

của chính mình. Sau khi làm việc trên một trang web trong vài tuần, bạn sẽ không thể quan sát nó từ

một khía cạnh mới mẻ hơn. Bạn biết cách tạo ra nó như thế nào và bạn cũng biết chính xác cách nó

hoạt động- bạn phải có những người kiểm tra độc lập.

Tuy nhiên, bất chấp các kỹ năng thiết lập trùng lặp, hai lĩnh vực này hoàn toàn khác nhau, nhất là

phạm vi và mục tiêu tổng thể. UI tập trung vào các yếu tố tương tác với người sử dụng về cơ bản,

các phương pháp và kỹ thuật đầu ra, đầu vào. UI tập hợp các phương pháp tiếp cận và cho phép

người sử dụng tương tác với một hệ thống. Nó không có hướng dẫn cụ thể làm thế nào người sử

dụng có thể phản ứng lại, nhớ và sử dụng hệ thống.

NNhững vấn đề như vậy làm chúng ta nghĩ đến UX. Nhưng đừng ngốc như vậy! UX chỉ là các kết quả

cuối cùng của UI. Thay vào đó, tôi thường so sánh UX như bản chất của một thương hiệu. Bản chất

của thương hiệu là trải nghiệm tổng thể của một người với một công ty hoặc tổ chức. UX là mục

Phần 2: Thực Hành

Phần này sẽ không hướng dẫn cách làm layout 1 cách cụ thể, mà chỉ hướng dẫn chung chung,

Ở phần này tôi sẽ hướng dẫn các bạn các bước để đi từ những bản phác thảo tới bản thiết kế trên Photoshop. Chứ không có các tut hướng dẫn từng tí một kiểu để vẽ được cái này bạn phải làm theo tôi như thế này như thế kia.

Hoàn toàn không. Vì cùng một kết quả ta có nhiều cách khác nhau để làm. Hơn thế nữa. Điều chủ Hơn thế nữa. Điều chủ yếu tôi muốn chia sẻ không phải là cách dẫn các bạn đâm đầu vào cái ngõ cụt: cứ làm mà chẳng hiểu mình đang làm gì, sẽ làm sao để cho nó tốt hơn. Cứ cắm đầu làm mà chẳng tư duy! TÙ VÃI CHẦY.

Tôi hướng dẫn các bạn đường đi, còn đi như nào, nhanh - chậm - tốt - không tốt là do tư duy, sự chăm chỉ của các bạn.

Theo cách tôi hướng dẫn, sẽ có bạn bỏ cuộc , sẽ có bạn trụ lại. Tôi đánh giá cao những người tự tư duy & chăm chỉ.OK! Lan man thế đủ OK! Lan man thế đủ rồi, tiếp tục thôi nào :v

Tut 1: Phác thảo giấy

Trước Phác thảo

1. Tại sao phải phác thảo giấy

Đây là một bước quan trọng trong mọi quá trình thiết kế giao diện. Nó thường được sử dụng khi bạn đi tiếp xúc với khách hàng để lấy ý tưởng thiết kế. Ngay lúc đó, bạn không thể có đủ thời gian để vẽ được 1 layout hoàn chỉnh theo ý khách hàng, hay trong lúc tiếp xúc với khách hàng, bạn không có công cụ nào để lưu lại ý tưởng của khách.

PPhác thảo giấy là một công cụ hữu ích ngay trong lúc này. Ngoài ra, nó còn giúp bạn hình dung rõ ràng bố cục của website một cách dễ dàng.

Bạn thấy thế nào???Rất trực quan phải không? Tuy phác thảo và bản thiết kế của bạn sẽ không thể hoàn toàn giống nhau 100% , và bản phác thảo cũng không thể nào đẹp & đưa ra đc hết ý tưởng của bạn, nhưng nó lại là 1 bước cơ bản & rất quan trọng để giúp bạn thiết kế.Nó định hình cho bạn biết, thiết kế của bạn sẽ bao gồm những thành phần gì, bố cục thế nào.

Còn bố trí MÀU SẮC ???Nó sẽ hình thành sau tNó sẽ hình thành sau trong quá trình bạn thiết kế chi tiết.OK? :)

Ok?Cùng áp dụng vào mẫu phác thảo vừa rồi nhé.Hmm, xem nào.

Layout của chúng ta bao gồm:I. Header: trong header có - Logo - menu - SlideII. Content: (Nội dung chính của website) bao gồm: 1. Sidebar: Cột trái của nội dung website - Tin tức mới - liên hệ - thời tiết

2. Main content: Nội dung chính của website - Tin tức nổi bật - Partner ( đối tác)

III. Footer. ( Trong phác thảo tôi ko vẽ ra, nhưng cứ tưởng tượng là nó có :v) Footer bao gồm phần thông tin website, thông tin của chủ website: email, SĐT, địa chỉ ,......

XXong phần phân tích phác thảo. Giờ tới phần định hình màu sắc chủ đạo của website. Bạn muốn sử dụng màu sắc chủ đạo nào cho website??? Tôi sẽ sử dụng màu xanh, cơ bản là trời đang nóng điên đảo, dùng màu xanh cho nó dễ chịu. ok? Xanh lá đi vì mình đang làm 1 mẫu về website về nông nghiệp.

Ok ok!!!!

Bắt tay vào dựng nào. Chuẩn bị cho mình 1 cốc trà đá cho tỉnh táo giữa mùa hè nóng như thiêu này nhé. ko thì Sting hay bò húc cũng đc, đỡ buồn ngủ. hehe

Tut 2: Từ phác thảo tới layout

Bạn download grid 960 về tại địa chỉ:http://960.gs/Sau khi download bạn giải nén rồi mở thư mục nathansmith-960-Grid-System-b0c5b98\templates\photoshop

Tại đây có 3 lựa chọn cho bạn: 960_grid_12_col,960_grid_16_col,960_grid_24_col tương ứng: 12 cột, 16 cột & 24 cộtTùy mỗi người có một lựa chọn riêng, nhưng đối với bản thân tôi thì hay làm thiết kế theo tỷ lệ 1/2 & 1/3 ( sidebar/content) nên tôi hay chọn layout 12 cột.

Dùng Rectangle Tool (U) tạo 1 hình shapekích thước 1020 x 75 để làm menu

Dùng Ellipse Tool (U) tạo 1 hình shapekích thước 90x90 để làm logo

Tiếp đó dùng Rectangle Tool (U) tạo 1 hình shapekích thước 1020 x 235 để làm Slider

Tiếp sử dụng Rectangle Tool để vẽ cho Slider &Main Content, Footer

Khi đó kích thước của sidebar : width:240 pxkích thước của main content: width: 710px

Chiều dài hiện tại là 710+240=950??Còn 10px còn lại đâu???Nó chính là khoảng trắng nằm giữa sidebar & main content.css css còn gọi khoảng trắng đó là margin:10px

OK. Thế là ta đã vẽ được khung web trên PTS rồi.Tiếp theo ta sẽ chi tiết nội dung website trên khung này.

Sang trang sau để đọc nhé :v

960px

240px 710px

Đầu tiên ta xử lý thằng logo trước. Vì thường thường chúng ta phải thiết kế layout sao cho phù hợp với logo. Tránh trường hợp layout 1 style, logo 1 style. Trông sẽ rất phản cảm.Ok chưa.

2

1

FFFFFF#eeeeee #ffffff

Logo xanh lá này nhìn mượt phết :v mình kết màu xanh mướt của nó. :D Nên sẽ dùng những màu này để thiết kế layout.P/s: mình ko thiết kế logo nên ko phân tích cái logo này làm như nào nhé ̂̂ !

Tiếp theo là thanh menu. Ta chỉnh style theo thông số sau:

Cùng xem kết quả nhé.

Thêm text : Cân chỉnh khoảng cách giữa các chữ

(*) Những cột màu hồng này là cột Grid dùng để xác định khoảng cách , ko dính líu gì tới layout Tiếp tục tới Slider

Chọn 1 ảnh có kích thước lớn, kéo vào layout đang vẽ, thêm mấy cái button tròn nữa cho giống slide

#a8a8a8 #cccccc #d7d7d7

1

100

Phần logo/menu/slide đã xong.Giờ tới phần content & sidebar. Bạn mở lại phần phác thảo

SIDEBAR trước nhé:

Bạn thấy sao? rất đơn giản phải ko. Không cần phải quá cầu kỳ nhưng cũng ko hề đơn điệu như các thiết kế cũ (tư tưởng cũ của VN)

Bạn có 1 tiêu đề cho widget tin tức ( News): Chữ màu trắng, nền là 1 hình shape chữ nhật đổ màu Gradient.

Tương tự với contact & Main content & Footer

Thực sự mà nói là cái layout tôi muốn giới thiệu với các bạn ở dưới đây siêu đơngiản. làm chỉ mất ~ 20p thôi. Nhưng theo tôi thấy thì nó ko hề nhàm chán.Vẫn thể hiện đc cái hiện đại, vẫn đáp ứng đc tính thẩm mỹ.

Tút tát lại giao diện 1 chút nhé. Thiết kế giao diện web không hề nhàm chán & cũng ko quá khó.Chỉ cần bạn đam mê. Ok?

Ngoài lềĐọc xong hơn 30 trang hướng dẫn & thực hành có bạn nào thắc mắc cái đứa biên soạn cuốn ebook

này là đứa nào mà tỏ ra có vẻ am hiểu về web hơn mình ko??

hehe. Chắc là có, nhưng thú thật là Cái kiến thức về web nó mông lung lắm, Trước giờ mình đi tìm

những cái gọi là quy chuẩn thiết kế web mà cũng đỏ hoe con mắt luôn, mà tóm lại là ko có quy chuẩn

nào tuyệt đối cả.

VVì người ta đánh giá giao diện web qua mức độ thẩm mỹ. Mỗi người cảm nhận một cách khác nhau,

người thấy đẹp người thấy không. Quy cho cùng quy chuẩn cũng chỉ đánh giá qua cách bạn thể hiện

Font chữ, màu sắc, khoảng cách các thành phần Header, Content, Footer, các thành phần con của

Content .... Và cách bạn sắp xếp nội dung thế nào cho tiện lợi & đầy đủ thông tin website.

Quan điểm của tôi là thế. Sẽ có người cho rằng tôi thế nọ thế kia, nhưng mặc kệ.

ttôi làm cuốn này để hướng dẫn những người chưa biết gì/ mới bắt đầu học thiết kế website, gây dựng

sự hứng thú , đam mê thiết kế trong họ chứ không bắt họ phải làm đúng các bước, Phải vẽ cái này ra

sao cái kia thế nào. Ok chưa. cứ vui vẻ thoải mái trao đổi thôi.

Và thằng tôi là ai?Tôi : Nguyễn Tiến Dũng

Nick name: Sói ( sói hoang)

Tuổi: 1988

wweb: soihoang.com ( Tới thời điểm này thì chưa hoàn thành vì bận =.=! )

skype: soihoangdesign

Tình trạng bản thân: Độc thân. ế rầu =.=

Nơi sinh: Thanh Hóa rau má (̂.̂) Rau má anh hùng đấy - không đùa đâu. :p

Học hành: Tốt nghiệp ngành xây dựng rồi, nhưng ko muốn theo nghề bán mặt ngoài công trường

nên quyết định học tiếp thiết kế (vừa vì lý do ít phải di chuyển, vừa vì đam mê thiết kế )

HHiện đang làm việc tại Hà Nội, Công việc chính hiện tại là thiết kế UI/UX App cho Smartphone. ngoài

ra tôi còn tham gia làm một số công việc khác như phân tích hệ thống kết nối giữa app - web - phần

mềm quản lý cho gara ô tô, tổ chức giáo dục. Thỉnh thoảng bí tiền lại đi dạy thiết kế kiếm sống qua

ngày >:) . Và công việc vui nhất là quản lý thiết kế mảng game trẻ em (html5). Cũng tham công tiếc

việc lắm :))

Yêu thích thiết kế, cứ cái gì nó liên quan tới bản thân và có chữ thiết kế là yêu hết, nào là nội thất

(ước mong có nhiều xiền để tự thiết kế cho bản thân 1 căn phòng như ý muốn), website, app, typo (

cái này mình cực gà, siêu gà luôn nhưng vẫn yêu :P )

Thần tượng trong ngành công nghệ thông tin nói chung: Demon Warlock (mình kết lối dẫn bài của

lão này :v mặc dù mình chẳng học đc gì nhiều - vì mình có học code đâu) - Steve Jobs (Sự dị trong tính

cách cũng như tầm nhìn của ổng) - Jonathan Ive (Giám đốc thiết kế của Apple - Cha đẻ của những

thiết kế tinh xảo : Iphone, Ipad....)

Ngoài xuất bản Ebook này, mình còn có in hướng dẫn thiết kế web ra sách & kèm theo 1 cuốn phác

thảo website.

Bạn trẻ nào cần thì ới mình, mình chỉ lấy giá in thôi. Chứ ko thương mại hay buôn bán mấy cái này.

Chia sẻ là chính để cùng phChia sẻ là chính để cùng phát triển thôi.

Còn thương mại thì mình nhận đào tạo thiết kế web ( PTS - CSS/HTML / PHP) -> PR siêu khủng =))

Tạm thế thôi nhở. lan man hơi bị nhiều rồi :v Làm việc tiếp thôi.

P/s: Ra mắt ngày 12/6/2013. Kỷ niệm 1 năm ngày đặc biệt. Nhưng đặc biệt thế nào thì ko nói đâu :(

Chào mọi người nhá