Useful Gibberish

Posts tagged ‘drawingtechniques’

Thêm một số kỹ thuật trong thiết kế web

Linkos-design

1.Spacing – khoảng cách:

Một trong những yếu tố cốt lõi của một trang web quyết định những thành phần còn lại chính là layout, mà layout thì chỉ gói gọn trong những vấn đề sau: khoảng cách, bố cục và kích thước. Trong mục này ta sẽ nói về spacing, dịch ra tiếng Việt là khoảng cách.

Nói sơ về khoảng cách: đó là cách bố trí những điểm và elements trong một website chứng tỏ sự thông minh và sự gọn gàng cũng như minh bạch của người thiết kế, chú ý đến khoảng cách của các elements sẽ gây một ảnh hưởng lớn đến khả năng cảm thụ của những người thưởng thức và có thể tạo ra những cách nhìn khác nhau mà không cần thay đổi về màu sắc hay hình dáng.

Một trong những spacing hợp lý là Good.is

Ở đây tạm không bàn về typo và image, ta sẽ bàn về spacing thôi, như trong hình (hoặc có thể trực tiếp đến site good.is mà xem) thì những khoảng cách mà site này đã dùng tạo cảm giác khá gọn gàng (giữa đoạn văn và khung viền chẳng hạn), làm cho người đọc muốn tìm một nội dung gì đó hay đọc một cái gì đó trở nên dễ dàng hơn nhiều vào không làm họ bị rối. Vậy ta nên nhớ ở đây là không nên ki bo với khoảng cách giữa texts và images với border.

Một ví dụ đẹp nữa về spacing là Digital Mash:

Spacing tốt sẽ làm cho người dùng có cảm giác rộng rãi dễ sử dụng, không có gì khó chịu hơn là click lộn link này qua link khác và thấy mọi thứ có vẻ chồng chéo lên nhau nhức cả mắt.

Để spacing tốt, trong design, ta có những techniques sau:

  • Thiết kế sử dụng grid (hệ thống lưới kẻ ô vuông): sử dụng tốt grid sẽ giúp ta hiểu tốt hơn về spacing, cũng như mọi thứ dễ dàng hơn trong việc spacing.
  • Làm lại và làm lại: Ta sẽ làm đi làm lại, cho đến khi nào mãn nhãn ta thì thôi.
  • Một khoảng trắng không phải là một chỗ lãng phí: Trên site của chúng ta có khoảng trắng, không có nghĩa là ta sẽ điền gì vào đó như môn Anh Văn. Không mà có, đó chính là giá trị của spacing.
  • Ít nhưng tinh tốt hơn là nhiều mà cùi bắp: đừng cố gắng nhét đủ mọi thừ vào site khi design, thêm nhiều khoảng trống, và chỉ để những thông tin mang tính cốt lõi.

2.Pixel perfect:

Đây cũng chúng là kỹ thuật pixel popping mà tôi đã link từ trước, có một số kỹ thuật thêm 1 line rộng 1px vào phần border của các table để làm có các table gây cảm giác “pop” ấn tượng và bắt mắt (eye-catching). Chúng ta xem một ví dụ ở đây:

Ta sẽ để ý những phần được phóng to: ở phần trên, miền xanh lá cây được thêm một line màu xanh nhạt, tương tự, vùng xám ở dưới cũng có một line màu trắng sữa ở trên. Những đường line này tạo cảm giác 3 chiều cho mắt, cũng như làm cho thiết kế “thật” hơn.

Vậy những bài học mà ta rút ra từ kỹ thuật pixel là gì (còn how to do it, đề nghị xem lại bài pixel popping)

  • Sử dụng yếu tố “tinh tế”: những chi tiết nhỏ hỗ trợ tốt cho nội dung.
  • Chú ý từng pixel một: bất kể dùng kỹ thuật gì: borders, gradient hay stroke, không phải cứ TO là tốt.
  • Before and After: luôn so sánh những kết quả mới với kết quả cũ để rút ra những tiến bộ mà ta đã áp dụng.

3. Web typo:

Tôi hay nhắc đến typo, typo ở đây không có gì cao sang, không phải nhất thiết dùng nghệ thuật chữ để làm một artwork mới là typo, typo trong site chỉ đơn giản là sắp chữ, font gì, màu font sao, font side bao nhiêu, khoảng cách giữa các hàng và cột trong một đoạn văn quyết định rất lớn đến tính bắt mắt của một site. Những kỹ thuật như vậy không chỉ giới hạn trong PS mà còn là (chủ yếu là) trong CSS.

Một chuẩn về typo

Một “chuẩn” về typo

Techniques:

  • Muốn hù người khác và muốn đuổi họ đi? Dễ ợt, dùng font khó đọc, sít sít nhau và bold hết lên là xong.
  • Quên mất spacing ở trên? Đừng nghĩ gì về master of webdesign nữa.
  • Font phù hợp ngữ cảnh không? Luôn tự hỏi câu hỏi đó, và luôn kiểm tra xem font có phù hợp với những thiết kế khác không.

4.Bố cục, sắp xếp yếu tố, hoàn tất layout:

Khi mà mọi thứ đã đẹp, nhưng trộn lung tung chúng với nhau thử xem, chả ai khen là đẹp nữa, việc bố trí tốt cũng giống như một căn phong có tổ chức; và gọn là một chuyện, dễ dùng tiện dụng là chuyện khác, chẳng ai thích vào một trang mà khung tìm kiếm giấu đâu xa lắc ở một góc nào đó của site cả (ví dụ vui thế).

Luôn tự đặt cho mình những yêu cầu sau:

  • Mình đang thiết kế cho nội dung gì?
  • Lại grid
  • Bố trí các phần tử, đặt mình là vai trò người xem coi nó ra sao, có dễ xài không, có gây nổi khùng không? XD
  • Nếu một phần tử không cần thiết, thì đừng bỏ nó vào.
  • Cân bằng chú ý: không nên có một yếu tố quá “tỏa sáng” mà làm “lu mờ” các yếu tố khác.

Còn một số kỹ thuật khác nữa, nhưng chúng ta sẽ tự phát hiện ra khi thực hành và tự tìm tòi thêm. 😉

Một người thiết kế web là gì? Và cần gì?

Tôi không phải là một người chuyên về thiết kế web, tôi chỉ thích tìm hiểu đủ thứ, nhất là code và đồ họa ( dĩ nhiên không phải BD ;)) ). Một trong những điều mà tôi thích và muốn tìm hiểu , cũng như mong muốn có một chút khả năng về việc đó, đó là việc thiết kế web.

Nếu thiết kế web hiểu theo nghĩa của một người chưa biết thì, thì tôi nghĩ là tôi phải học cho hết các ngôn ngữ lập trình cho thiết kế web, đại loại thế, và tôi cũng chẳng biết rõ thiết kế web là làm gì. Nói chung về nghề này, ở VN, cũng như ở thế giới, là một nghề kiếm đủ ăn chứ khó mà giàu được (giàu ở đây theo ý tôi là giàu về vật chất, nghĩa là muốn thì thì mua nấy mà không phải đắn đo về mặt tiền bạc), ngay cả bậc cao hơn của nó là khoa học máy tính cũng khó khăn lắm..

Nhưng thiết kế web thì sẽ được tiếp xúc với máy tính, với màu sắc, với lập trình, và có thể “lấy le” với những người con xa lạ với công nghệ, và lại, với vai trò là một người hay admire webdesigner, thì web designer làm cho người ta nể phục một phần.

Thiết kế web, thì rõ ràng và quá dễ hiểu, là thiết kế một trang web, nghĩa là lo từ bố cục tới màu sắc tới cách bố trí link của một website sao cho nó hài hòa và bắt mắt người dùng, cũng như diễn đạt tốt nội dung của một website… Định nghĩa đơn giản vậy thôi, và theo kinh nghiệm của bản thân tôi thì định nghĩa nên càng đơn giản càng tốt. (:

Webdesigner (WD) cần gì?

Một tư tưởng tốt, một khả năng sáng tạo và một tư tưởng không lệch lạc, đó là thứ mà chúng ta nên trau dồi. Thiết kế một trang web “có vẻ web” là một chuyện, mà thổi hồn vào nó là một chuyện..khác. WD phải biết hòa hợp tốt nội dung và hình ảnh, sự sắp xếp và bố cục, cũng như biết nắm bắt cái ý nghĩa của nội dung mà chuyển hóa nó thành cái thần của sự thiết kế. Nói chung thì cái này xuất phát từ sự đam mê, một chút năng khiếu, và cuối cùng quan trọng nhất là tinh thần học hỏi và rèn luyện.

Khả năng sử dụng phần mềm đồ họa.

Photoshop  là phần mềm bắt buộc phải biết, tôi biết PS chút ít nên tôi tự tin nói vậy, ngay cả những thằng chuyên về lập trình mà tôi biết, thì mỗi lần thiết kế một trang web, tụi nó đều thuê một người bên ngoài team để làm việc gọi là thiết kế layout cho site, rồi trên cái nền layout đó mới phát triển code rồi v.v.. và v.v…

Khả năng sử dụng PS thì có nhiều hướng, nhưng trong thiết kế web thì kỹ năng quan trọng nhất là sử dụng nó để tạo nút bấm, thanh navigation, header, pha màu, typo.. kỹ năng về bố cục cũng rất quan trọng, đào sâu vào thì có thêm những kỹ năng quan trọng khác (như là pixel popping, mà tôi đã đăng ở bài viết trước).

Viết mã lệnh.

Trước tôi cứ tưởng thiết kế web thì không liên quan gì đến mã lệnh, sau này mới biết, không phải không liên quan, mà là nó là cái lõi của nghề thiết kế web. Như tôi đọc ở một trang web nào đó, thì một trang web gồm có 3 thành phần (lớp) là:

  • Nội dung (HTML)
  • Trình bày (CSS)
  • Ứng xử (Javascript)

Vậy, sơ sơ thì ta phải biết 3 ngôn ngữ lập trình web rồi, việc master không phải là dễ, nhưng cứ nhảy vào làm rồi thì sẽ sáng mắt ra, kinh nghiệm và kỹ năng sẽ ngày càng nhiều, lúc đó sự sáng tạo và vận dụng đa dạng phong phú sẽ trong tầm tay, không có gì phải đáng lo ngại, miễn là chịu khó.

Ngoài ra, biết thêm nhiều thì càng tốt, tôi có biết một số tựa sách thấy ghi là thiết kế web với ASP, với PHP, rồi ngôn ngữ J#.. những thứ ấy tôi không biết, nhưng không quan trọng, không biết cũng không sao, nói cho cùng thì nội bộ dân thiết kế web biết, mấy cái đó người ngoài chẳng cần quan tâm làm gì, dạng như dân thiết kế web tự dựng lên một căn phòng rồi vui chơi trong đấy theo cách riêng của họ, mình thì ở ngoài này chơi theo cách khác.

Ở một bài viết khác, tôi sẽ minh họa cho các bạn một trình tự cụ thể của nghề thiết kế web, còn bài viết này, xin dừng lại ở đây.

PS: vì tôi chỉ đọc và thích, nên có một số chỗ tôi không biết tường tận nên nếu sai mong được góp ý và bỏ qua.

Color Overlay

Color on black means nothing.

Color overlay on cloud very means.

linkos

Creative logo design – good inspiration

Những logo dưới đây đạt đồ hoàn mỹ cao về ý tưởng, màu sắc và bố cục, xem để có cảm hứng : p

(more…)

IT tech template

Thử mới biết. khó gặm ác.
See it here.
A thumbnail.

Tag Cloud