• Có bao nhiêu người thiết kế có khả năng thiết kế như bạn?
• Phải mất bao nhiêu thời gian thì một người có khả năng thiết kế như bạn?
• Để trở thành người có khả năng thiết kế như bạn thì có tốn kém không?
• Để đạt được khả năng thiết kế ở trình độ của bạn thì phải học những gì?
• Bạn có thể đào tạo ra được những người có khả năng thiết kế như bạn được hay không?

Cả 5 câu hỏi đều là những câu hỏi khó vì đơn giản nó không có câu trả lời – bạn sẽ chẳng thể đưa ra một câu trả lời thoả mãn ý của câu hỏi. Nhưng có lẽ, mục đích của người thầy đặt ra câu hỏi đó không phải là để đọc các câu trả lời của bạn mà là để gợi ra trong bạn những suy nghĩ về thiết kế cũng như nhìn nhận lại những gì mình đã học. Trong 5 câu hỏi đó, tôi tâm đắc nhất với câu hỏi đầu tiên vì nó thật sự gợi ra cho tôi rất nhiều suy nghĩ mà tôi sẽ viết cụ thể hơn trong bài này.

Có bao nhiêu người thiết kế có khả năng thiết kế như bạn?

Sau một hồi thử suy nghĩ để đưa ra câu trả lời, bất kỳ ai cũng sẽ dễ dàng nhận ra rằng sẽ không có câu trả lời nào đúng. Bạn không biết được có bao nhiêu người làm thiết kế – đừng nói đến việc có bao nhiêu người bằng bạn. Nhưng chính trong quá trình đó, câu hỏi khiến bạn phải tự nhìn nhận lại bản thân mình vì bạn sẽ phải xác định được chính khả năng của mình để làm cơ sở so sánh:

Bạn đã thiết kế được bao nhiêu trang web?

Có bao nhiêu người mà bạn biết làm được như vậy?

Bạn đã biết được bao nhiêu?

Đã học được gì?

Có ai biết tất cả những gì mà bạn đã biết không?

“Triết lý”(1) về thiết kế của bạn là gì? Có bao nhiêu người mà bạn biết cũng có một triết lý về thiết kế riêng như bạn?

Cái khái niệm về “khả năng” thường mang tính chủ quan và tuỳ thuộc vào góc nhìn của mỗi người. Từ góc nhìn của tôi, đó không chỉ đơn giản là kỹ thuật (Photoshop hay viết mã XHTML, CSS) mà nó còn là cách tư duy. Tôi sắp xếp ba câu hỏi trên theo một thứ tự với một ý đồ cụ thể, mà theo thú tự đó, mỗi người ở mỗi trình độ khác nhau sẽ có cách đặt câu hỏi khác nhau để xác định khả năng của mình và người khác.

Kinh nghiệm

Ở mức thấp nhất trong nhận thức về thiết kế nói riêng cũng như các lính vực khác là quan niệm cho rằng số lượng là thước đo duy nhất để đáng giá khả năng. Để so sánh và đi tìm câu trả lời, những người làm thiết kế nữa vời sẽ xác định khả năng của mình và người khác bằng cách trả lời câu hỏi – bạn đã làm được bao nhiêu? Mặc dù số lượng không không phải không có vai trò gì trong việc đánh giá khả năng, không quá khó để chỉ ra rằng một người chỉ thiết kế được một sản phẩm được thừa nhận bởi mọi người vẫn hơn một người khác thiết kế được cả chục sản phẩm nhưng cái nào cũng ná ná như cái nào và chẳng có gì nổi bật.

Kiến thức

Đại đa số những người tự cho mình là nhà thiết kế, chuyên viên thiết kế web,… sẽ cho rằng kiến thức về kỹ thuật cũng như lý thuyết thiết kế là thước đo duy nhất để đánh giá khả năng. Người biết thiết kế bằng CSS và XHTML được xem là giỏi hơn những người vẫn còn chỉ biết thiết kế bằng bảng (”table”). Người có hiểu biết và biết cách áp dụng các lý thuyết trong thiết kế (như grid-layout, thuyết sử dụng màu sắc,…) được xem là giỏi hơn những người thiết kế mà không hề có lý do đằng sau mỗi chi tiết trong thiết kế của mình.

Những nhận định đó không sai. Nhưng thử xem qua hai trường hợp ví dụ để thấy rằng nó không đủ để đánh giá khả năng của mỗi người:
Bạn biết được vài lý thuyết mà anh A không biết, trong khi anh A cũng biết một vài lý thuyết mà bạn chưa từng nghe nói đến – ai có “khả năng” hơn ai?
Hoặc như anh B ở một thời điểm biết được nhiều điều hơn cô C, nhưng anh B mất đến 3 năm để nắm lấy nó trong khi cô C chỉ cần thêm 2 tháng để học được nó – liệu có thể nói anh B có “khả năng” hơn cô C?

Ví dụ đầu tiên là minh hoạ cho thực tế là kiến thức là vô bờ, một người sẽ không thể nào biết hết. Nếu chỉ dựa vào số lượng kiến thức mà một người tiếp thu sẽ chẳng thể nào so sánh được về khả năng của họ. Còn trong ví dụ thứ 2, sẽ không ít bạn cho rằng “ừ nhỉ, cô C có khả năng hơn dù ở thời điểm hiện tại biết ít hơn anh B“. Nhưng theo tôi, ngay cả như vậy vẫn chưa thể nói là cô C có khả năng hơn anh B, bởi rất có thể anh B mất 3 năm để tự mình thu lượm những kiến thức là vì không có ai hướng dẫn, còn cô C sau khi được anh B nói về những gì mà cô chưa biết – hoặc đơn giản là may mắn đọc được một tài liệu có nói tất cả những gì anh B biết mà cô chưa biết – chỉ mất 2 tháng để tìm hiểu và sử dụng nó.

Thực tế là, tôi giống như anh B trong trường hợp trên. Không có ai hướng dẫn, tất cả những gì tôi biết là qua những lần vô tình được đọc về nó ở đâu đó (ví dụ như định luật Fitt) hoặc là qua sự phát triển của nhận thức từ quá trình thiết kế (như về lý thuyết sử dụng màu sắc – tôi chỉ đọc thêm về nó mãi về sau này, trước đó chủ yếu vẫn từ cảm nhận trực quan). Nếu ai đó mới bắt đầu học về thiết kế chưa từng nghe định luật Fitt có thể chỉ cần vài phút đọc bài viết của tôi và tìm hiểu thêm một chút là nắm được nó. Liệu ở một thời điểm tôi và bạn – một người biết và một người chưa biết định luật Fitt – có thể lấy nó để đánh giá khả năng của mỗi người?

Theo tôi, kiến thức được các công ty sử dụng như một tiêu chí để tuyển chọn, nhưng đó không phải là tiêu chí duy nhất và quan trọng nhất. Chính cách sử dụng những gì bạn đã biết mới quyết định “khả năng” của bạn. Và điều này dẫn đến quan điểm thứ 3 về đánh giá “khả năng” trong thiết kế web:

Triết lý

Theo tôi, trong thiết kế web, việc hình thành một triết lý riêng hoặc thấm nhuần triết lý đã có là thước đo quan trọng nhất để xác định khả năng của bạn. Bất kỳ người thiết kế web nào hình thành hoặc thấm nhuần một triết lý trong các thiết kế của mình sẽ được xem là có khả năng như nhau, bởi khi đó bạn đã đạt đến mức cao nhất của thiết kế. Và tôi khẳng định rằng, điều đó không đơn giản như bạn nghĩ.

Không phải cứ nói triết lý của tôi là thiên về sự đơn giản có nghĩa nó là triết lý của bạn. Ví dụ minh hoạ rõ nhất cho điều này là những ai có ý định đi về thiết kế sẽ đều nghe qua cái gọi là định luật KISS – Keep It Simple, Stupid (”Hãy giữ mọi thử đơn giản”) – nhưng đại đa số sẽ vẫn thiết kế ra những giao diện phức tạp dù rằng họ vẫn tâm niệm rằng – mọi thứ nên đơn giản! Lý do là vì – định luật KISS còn đi kèm theo nguyên lý Make it simple, not simpler (đại ý “giữ mọi thứ đơn giản đến mức không thể đơn giản hơn”). Thế nào gọi là đơn giản? Khi nào thì gọi là không thể đơn giản hơn? Không phải ai cũng có thể trả lời được câu hỏi đó.

Bạn không thể nói một triết lý nào đó là của mình nếu bạn không thể thể hiện nó trong những gì mình làm, và điều đó đòi hỏi bạn cần phải có cả 2 yếu tố trước: kiến thức và kinh nghiệm (có được qua vô số những lần bạn thiết kế). Bạn biết về một lý thuyết nào đó là một chuyện, nhưng có thể sử dụng nó như thế nào để phục vụ cho triết lý của mình đòi hỏi thời gian và quá trình ứng dụng nó. Và điều đó chính là cái gọi là “khả năng”.

Trở lại 2 ví dụ trước đó. Trong ví dụ 1, bạn và anh A mỗi người biết vài điều mà người kia không biết. Điều đó không quan trọng để đánh giá khả năng. Quan trọng là cách mà bạn và anh A áp dụng những gì mình biết cho triết lý của mình. Mặc khác, nếu anh A chỉ biết áp dụng những gì mình biết một cách riêng lẽ mà không có triết lý riêng, thì gần như chắc chắn, những thiết kế của anh A sẽ chỉ là sự chắp vá rời rạc của những gì anh ta biết. Tương tự, trong ví dụ thứ 2 về anh B và cô C, việc anh B hay cô C biết trước và mất bao nhiêu thời gian không quan trọng mà quan trọng là việc hình thành triết lý và khả năng ứng dụng những kiến thức đó cho triết lý của mình.

Nói dài dòng, chắc chắn có bạn sẽ hỏi – tôi có triết lý thiết kế của mình hay không? Mặc dù chưa thể gọi là đã “thấm nhuần”, nhưng triết lý mà tôi hướng đến trong thiết kế của tôi là màu sắc truyền đạt nội dung – không có màu nào xấu, chỉ có tổ hợp màu xấu.

Trên đây là những gì tôi học được từ 5 câu hỏi mà anh Ban đã rất tốt bụng khi chia sẽ sẽ lại với mọi người, và tôi tin rằng đây cũng là những gì mà thầy của anh Ban muốn nói đến:
Muốn có concept tốt phải có kinh nghiệm, điều đó đúng, nhưng quan trọng hơn phải có đủ kiến thức để biết sử dụng hợp lý các kinh nghiệm đó, đó mới là cái ngưỡng để phân chia đẳng cấp.

CHÚ THÍCH
(1)Chữ “triết lý” nghe có vẻ hơi nặng, nhưng đó là từ duy nhất mà tôi có thể nghĩ ra để dịch chữ “philosophy”.

Share on Facebook

Ôi bị tụt hậu rồi. Tối qua ngồi lỳ vài lam với mấy người ở cơ quan trao đổi về SEO thấy “tụi nó” dạo búa kinh quá. Thôi thì mình làm một bài SEO hài hước để “ra đường chém gió” lừa tình chơi.

Hy vọng khi ăn nhậu mình nói site này đang đứng top 1 từ khóa thiet ke website khong dau chắc tụi nó điên đảo. Lừa tình kiếm một vại bia heineken uống cũng vui ha.

Share on Facebook

• Gợi ý 1 :

Hãy sắp xếp 2 câu miêu tả của bạn và nên chú ý rằng: dòng miêu tả 1 sẽ giới thiệu một hoặc một vài “lợi ích dành cho khách hàng” và dòng thứ 2 là nội dung sản phẩm bạn muốn quảng bá.
Ví dụ :
Gia công phần mềm
Dịch vụ chất lượng và nhanh chóng,
ước tính miễn phí chi phí dự án
www.officience.com

• Gợi ý 2 :

Hãy viết hoa chữ cái đầu tiên của những chữ quan trọng. Điều này sẽ tăng thêm độ bắt mắt cho mẫu quảng cáo của bạn (hãy thực hiện cho tất cả luôn nhé: tiêu đề, dòng miêu tả 1, dòng miêu tả 2 và URL).
Ví dụ :
Gia Công Phần Mềm
Dịch Vụ Chất Lượng và Nhanh Chóng,
Ước Tính Miễn Phí Chi Phí Dự Án
www.Officience.com

• Gợi ý 3 :

Hãy tạo ra nhiều mẫu quảng cáo khác nhau trong cùng một nhóm quảng cáo và sữ dụng tuỳ chọn “optimize” (tối ưu hoá) của Google (sau một khoảng thời gian nhất định, những mẫu quảng cáo chất lượng kém sẽ ít có khả năng xuất hiện và bạn có thể dễ dàng nhận biết và lược bỏ chúng).
Ví dụ :
Gia Công Phần Mềm
Dịch Vụ Chất Lượng và Nhanh Chóng,
Ước Tính Miễn Phí Chi Phí Dự Án
www.Officience.com
Và
Gia Công Phần Mềm
Ước Tính Miễn Phí Chi Phí Dự Án
Bảo Đảm Chất Lượng và Thời Gian
www.Officience.com

• Gợi ý 4 :

Hãy diễn đạt cùng 1 ý bằng những từ ngữ, cách dung từ khác nhau. Đôi khi, không biết nguyên nhân vì đâu mà nhửng người sử dụng internet (đối tượng khách hàng tiềm năng của bạn) lại thích cách nói “Đúng thời hạn” hơn là cách nói “Nhanh Chóng”,… và điều này sẽ ảnh hưởng trực tiếp đến chỉ số CTR của mẫu quảng cáo của bạn. Tương tự như trên, đừng quên sử dụng tuỳ chọn “tối ưu hoá” cho các mẫu quảng cáo nhé.
Ví dụ :
Gia Công Phần Mềm
Dịch Vụ Chất Lượng và Nhanh Chóng,
Ước Tính Miễn Phí Chi Phí Dự Án
www.Officience.com
và
Gia Công Phần Mềm
Dịch Vụ Chất Lượng và Đúng Thời Hạn,
Ước Tính Miễn Phí Chi Phí Dự Án
www.Officience.com

• Gợi ý 5 :

Hãy diễn đạt mẫu quảng cáo của bạn với ngôn ngữ phủ hợp với đối tượng khách hàng bạn đang nhắm tới.
Ví dụ, bạn nên sử dụng ngôn ngữ chau truốt nếu bạn hướng tới nhóm đối tượng khách hàng cao cấp.

• Gợi ý 6:

Đừng do dự khi sử dụng những lời mời mọc như “khuyến mãi”, “giảm giá”, “Tải xuống miễn phí”,… nếu như bạn thực sự đang có những chương trình, dịch vụ như vậy. Ngoài ra, người tiêu dùng còn có xu hướng thích được nhận “quà tặng”…Hơn nữa, việc sử dụng những “món quà” còn giúp bạn có thể lấy thêm thông tin từ phía khách hàng: địa chỉ, độ tuổi, giới tính,… để tạo cơ sở dữ liệu (ví dụ như “tải chương trình miễn phí”)
Ví dụ :
Phần Mềm Quản Lý
Miễn Phí ! Hãy Tải Phần Mềm
Quản Lý Chi Phí của Officience
www.Officience.com

• Gợi ý 7:

Chà, nói sao nhỉ, đây không hoàn toàn là một ý tưởng, mà đúng hơn là một lời khuyên đơn giản: Hãy hạn chế đến mức có thể những lỗi không đáng có (chính tả, ngũ pháp, cú pháp) và nhất là, hãy sử dụng ngôn ngữ phù hợp bạn nhé (đừng nghĩ là không có vấn đề gì nếu bạn viết mẫu quảng cáo bằng tiếng Anh trong khi bạn đang hướng tới khách hàng người Pháp! ).

• Gợi ý 8 :

Hãy thử sử dụng cú pháp lệnh {Keyword:} trong phần tiêu đề (kết quả là Từ khoá người tiêu dung sử dụng sẽ xuất hiện trong tiêu đề và được in đậmm, tăng thêm tính hiệu quả và khả năng thu hút của mẩu quảng cáo)
Ví dụ :
{KeyWordhần Mềm Quản Lý}
Miễn Phí ! Hãy Tải Phần Mềm
Quản Lý Chi Phí của Officience
www.Officience.com

• Gợi ý 9 :

Hãy thử những mẫu quảng cáo với “www” trong URL, và cùng nội dung mà không có cụm từ nổi tiếng “word wild web” (www)… Điều này có vẻ như nhảm nhí, nhưng cũng chẳng mất mát gì nếu chúng ta thử đùa giỡn một chút…
Ví dụ :
Phần Mềm Quản Lý
Miễn Phí ! Hãy Tải Phần Mềm
Quản Lý Chi Phí của Officience
www.Officience.com
et
Phần Mềm Quản Lý
Miễn Phí ! Hãy Tải Phần Mềm
Quản Lý Chi Phí của Officience
Officience.com

• Gợi ý 10 :

Đừng cố gắng thay đổi mẫu quảng cáo của bạn (xoá hay chỉnh sửa nội dung) vào mỗi buổi sáng thức dậy… Thời gian để Google Adwords đánh giá đôi khi khá dài, và sẽ làm bạn biến mất tạm thời trong kết quả tìm kiếm. Và bạn cũng đừng quên rằng Điểm Chất Lượng (Quality Score- QS) là một quá trình, chứ không phải chỉ dựa trên những thời điểm nhất định, và QS cũng ảnh hưởng trực tiếp đến CTR của bạn. Nếu mẫu quảng cáo của bạn đã khá tốt, và bạn không biết cách nào để cải thiện thêm, thì tốt nhất là đừng nên xoá hay chỉnh sửa gì cả. Hãy copy lại, thay đổi 1 vài yếu tố bạn cho là thú vị. Vã hãy thật kiên nhẫn, chờ đợi 1 thời gian trước khi quyết định xoá mẫu quảng cáo nào kém chất lượng hơn.

• Gợi ý 11 :

Đừng nên quá tham lam trong nội dung mẫu quảng cáo bạn nhé. Hãy tránh sử dụng những câu nói như “Bạn sẽ không bao giờ hối tiếc”, hay là “Đừng bỏ lỡ vì bất kì lí do nào”. Đây là những mẫu quảng cáo chẳng bao giờ làm hài lòng khách hàng cả…

• Gợi ý 12 :

Luôn luôn tuân thủ theo những Quy Định của Google Adowrds. Sẽ chẳng có gì đáng nói nếu hàng ngày, không có hàng ngàn mẫu quảng cáo bị “từ chối” chỉ vì những lỗi rất cơ bản và ngớ ngẩn (chi tiết tại: https://adwords.google.fr/select/guidelines.html) :
* không lạm dụng dấu chấm câu (dấu chấm than hoặc ba chấm chẳng hạn)
* không lạm dụng viết hoa (nói rõ hơn, tránh sử dụng những từ ngữ được viết HOA từ dầu đến cuối)
* không lặp lại những từ vô nghĩa (ví dụ không sử dụng « rẻ, rẻ, rẻ »)
* chính tả, ngữ pháp và cú pháp phải chính xác (không có lỗi, và sử dụng ngôn ngữ chính thống)
* hãy rõ ràng và thuyết phục (tránh những từ viết tắt hay tiếng long gâu khó hiểu và những cấu trúc câu quá phức tạp)
* hãy xác định rõ ràng mục đích và đối tượng của bạn (chỉ nói đến “outsourcing” nếu công ty của bạn chỉ làm về lĩnh vực này)
* đừng cố gắng ăn gian bằng cách tạo ra nhiều tài khoàn khác nhau với những mẫu quảng cáo giống nhay để được xuất hiện nhiều hơn (đây là một trường hợp bị coi là spam, vấn đề mà Google luôn rất nhạy cảm và muốn loại bỏ)
* quảng cáo những sản phẩm bị cấm (bán Cần sa chằng hạn,…)
* sử dụng tên những thương hiệu bản quyền mà bạn không sở hữu
* không sử dụng các phép so sánh nhất (ví dụ « tốt nhất trong»)
* không sử dụng những mẫu quảng cáo có phép so sánh (« hơn 10.000 khách hàng so với XXX », « Rẻ hơn 10€ so với XXX »)
* hướng người tiêu dung đến những trrang web thích hợp nhất với nội dung quảng cáo
* không được hiển thị các pop-up trong các trang đích (landing page)
* nút quay lại (back) phải hoạ động

Share on Facebook

• 404
  1. 404.php
  2. index.php
• Search
  1. search.php
  2. index.php
• Home
  1. home.php
  2. index.php
• Single
  1. single-{post-type}.php – Nếu post_type là videos, WordPress sẽ tìm single-videos.php.
  2. single.php
  3. index.php
• Page
  1. custom_template.php – Bạn có thể xem thêm Custom template tại đây
  2. page-{slug}.php – Nếu page slug là recent-news, thì WordPress sẽ tìm page-recent-news.php
  3. page-{id}.php – Nếu page có id là 6, thì WordPress sẽ tìm page-6.php
  4. page.php
  5. index.php
• Archive
  1. archive.php
  2. index.php
• Category
  1. category-{slug}.php – Nếu category là ntuts, thì WordPress sẽ tìm category-ntuts.php
  2. category-{id}.php – Nếu category có id là 6, thì WordPress sẽ tìm tagcategory6.php
  3. category.php
  4. archive.php
  5. index.php
• Tags
  1. tag-{slug}.php – Nếu tag slug là ntuts, thì WordPress sẽ tìm tag-ntuts.php
  2. tag-{id}.php – Nếu tag slug có id là 6, thì WordPress sẽ tìm tag-6.php
  3. tag.php
  4. archive.php
  5. index.php
• Taxonomies
  1. taxonomy-{tax}-{term}.php – Nếu taxonomy là ntuts, và slug là design thì WordPress sẽ tìm taxonomy-ntuts-design.php
  2. taxonomy-{tax}.php – Hoặc bạn chỉ cần đặt tên taxonomy-ntuts.php
  3. taxonomy.php
  4. archive.php
  5. index.php
• Author
  1. author-{nicename}.php – Nếu tên tác giả là Neo, WordPress sẽ tìm author-neo.php
  2. author-{id}.php – Nếu tác giả có id là 6, WordPress sẽ tìm author-6.php
  3. author.php
  4. archive.php
  5. index.php
• Attachment
  1. mime.php
  2. type.php
  3. mime_type.php
  4. attachment.php
  5. single.php
  6. index.php
• Date
  1. date.php
  2. archive.php
  3. index.php

Với danh sách này trong tay bạn không còn khó khăn khi xác định file template nào mà WordPress sử dụng trong từng trường hợp nữa. Bạn có thể tìm hiểu thêm tại trang chủ wordpress hoặc digwp

Share on Facebook

Sử dụng Photoshop thành thạo là một kỹ năng không thể thiếu của bất kỳ người thiết kế trong lĩnh vực nào. Bạn đã sử dụng tốt Photoshop? Hoặc bạn đang học Photoshop? Tất cả nên đọc bài viết này.

Những lưu ý dưới đây rất đơn giản đễ những người thiết kế ghi nhớ khi bắt đầu một dự án. Có những điều bạn đã biết, nhưng cũng có những điều bạn bỏ quên. Tổ chức bên ngoài.

Thu gọn file PSD của bạn.

Đừng e ngại về kích thước file quá lớn – hiện tại máy tính đã tốc độ rất mạnh. Hãy cho tất cả các thiết kế vào một file Psd duy nhất.

Nên làm

Không nên

Đặt tên file thích hợp

Đừng đặt tên file quá dài – nên dưới 15 ký tự, tránh sa vào mớ hỗn loạn với file_final, file_new_final, file_final_cuoi_cung, file_blah….blah.

Hãy đặt tên file ngắn gọn, trong một folder tên dự án, ví dụ “iDesign >02032011″. Qua ngày mới bạn lại tạo folder theo ngày đó và lưu file vào.

Đặt tất cả mọi thứ liên quan tới dự án vào 1 folder

Điều này giúp bạn bớt thời gian tìm kiếm biểu tượng, hình ảnh, font chữ liên quan tới công việc.

Đặt một thư mục có tên “Tư liệu” và copy những gì liên quan vào đó, như là folder icon, folder hình ảnh, folder web tham khảo…

Tạo thư việc cho những thiết kế tương tác.

Thiết kế web là một công việc phức tạp, ngoài việc thiết kế một trang chủ đẹp mắt, bạn còn phải tạo ra ti tỉ thứ nhỏ nhặt khác như: mẫu đăng nhập, ô tìm kiếm, popup, các loại icon…

Hãy tạo một thư viện với các mẫu dành cho dự án đó như: Login button, Search box, Comment buttton, Button, Social Button v..v…

Xem ví dụ tại đây

Tổ chức trong file

Đặt tên layer dễ hiểu

Đặt tên rõ ràng cho từng Group, từng Layer. Đừng dùng những tên mặc đinh như layer 1, layer 1 copy…

Đặt tên rõ ràng như bên trái

Sử dụng “Create a new group” của bảng Layer

Tổ chức các layer hợp lý, các layer của phần header nằm trong folder header, layer của Footer thì nằm trong Folder Footer. Nếu thích bạn có thể đặt màu cho chúng.

Một file gọn gàng, dễ hiểu giúp bạn hoặc người khác dễ dàng trong lần làm việc kế tiếp.

Sử dụng Grid

Bạn có thể gặp khó chịu khi thấy dùng những đường grid màu xanh của Photoshop, tuy nhiên nó là điều BẮT BUỘC phải dùng khi thiết kế.

Bạn có thể Download những mẫu lưới có sẵn về để có một thiết kế chuẩn mực (960, 978, 1140). Bạn cũng nên vẽ thêm các lưới ngang nữa (vì những lưới có sẵn chủ yếu căn theo hàng dọc)

Xóa đi những layer, folder không sử dụng.

Ẩn đi các lớp có thể sử dụng, nhưng bạn chắc chắn nên xóa những layer mà không bao giờ sử dụng, đừng làm những thứ nhỏ nhặt đó làm phiền bạn hoặc người sử dụng file của bạn.

Những yếu tố sử dụng chung

Hãy cho những layer sử dụng chung đứng riêng. Đừng lặp lại 1 layer giống nhau trong nhiều folder.

Làm việc với văn bản.

Làm tròn các kích thước chữ

Một nguyên tắc tối kỵ trong sử dụng chữ là bạn co kéo Text bằng công cụ Free Transform, hãy gõ kích thước tròn số cho chữ (13, 15, 21pt…)

Làm việc với Shape

Hãy vẽ lại shape mới khi cần, đừng dùng một shape đã có rồi co kéo nó. Tốt nhất là bạn vẽ bằng vector trên Illustrator sau đó copy vào Photoshop và để nó dạng Smart Object.

Sử dụng Mask cho folder

Hãy tạo Mask cho 1 folder thay vì Mask trên từng layer. Sử dụng Mask còn giúp bạn giữ file gốc không bị biến đổi.

Sử dụng SNAP

Ban đầu bạn có vẻ khó chịu khi không thể kiểm soát được vật thể khi di chuyển. Nhưng nó sẽ tiết kiệm thời gian để canh hàng từng đối tượng.

Sử dụng Color Overlay khi muốn tô màu.

Với một đối tượng đã rasterized thì tốt nhất bạn nên dùng tính năng Color Overlay trong bảng Layer option.

Xem xét Texture.

Nếu bạn sử dụng Texture cho nền, hoặc khu vực nào đó, tốt hơn là chúng là hoa văn lặp lại, sẽ nhẹ hơn khi chạy trên internet.

Để ý tới chiều cao khi sử dụng Gradient.

Khi bạn để Gradient cho hiệu ứng của mình, hãy tính tới điều xảy ra khi chiều cao nội dung thay đổi, hay người dùng tự thay đổi kích thước trình duyệt.

Thực hành thiết kế

Tạo bóng đổ thật tinh tế.

Trong nhiều trường hợp bóng đổ rất thích hợp, nhưng nhớ sử dụng nó vừa phải đừng quá nặng nề.

Nắm rõ về Stroke

Trong bảng Layer Option, nếu bạn để Inside Stroke nét của bạn sẽ có góc vuông, nếu để Outside Stroke nó sẽ làm tròn.

Trước khi Export

Đọc thử.

Tốt nhất nhờ bạn bè (khoảng 3 người) xem nó, họ sẽ phát hiện ra những lỗi ngữ pháp, hoặc một lỗi ngớ ngẩn nào đó bạn “quên mất”

So sánh wireframe

Trước khi thiết kế trên psd bạn cần phải tạo wireframe cho thiết kế của mình. Hãy kiểm tra lại wireframe so với file psd để chắc chắn rằng không có một tính năng nào đó bị bỏ quên.

Export

Tiết kiệm dung lượng cho web.

Nghe quá quen thuộc, nhưng không thể thiếu. Bạn nên chọn Save for Web & Devices (Alt + Shift + Ctrl + S) khi export file JPG hay Gif… chúng giúp giảm dung lượng file.

Chọn Progressive

Điều này có lẽ không phải ai cũng biết, đáng lẽ ra nó nên nằm trên top mới phải.

Bạn hãy chọn Progressive khi lưu ảnh JPG, điều này giúp bạn có một hình ảnh ban đầu có độ phân giải thấp, sau đó “progressive – dần dần” làm nó nét dần hơn. Nó rất hữu hiệu trên web với hình ảnh lớn.

iDesign.vn dịch. Bạn có thể xem bản đầy đủ tại trang photoshopetiquette.com

Share on Facebook

In this post, we’ve compiled a list of the top ten questions modern web designers ask, and we try to answer them from our expertise. If you have anything to add at the end, whether it be another question, or your own answer, please feel free to chime in and give us your own insight.

1. What New Technologies Should I Focus on Most?

Between HTML5, CSS3, iPad development, new development frameworks, and more, it can be difficult to know what’s important to focus on. We all know that it is essential to keep up to date with the latest technologies, but how can one focus on every new little thing? The answer is, of course, we can’t. Therefore, we must be decisive.

Image credit: Yutaka Tsutano

So what new technology should any web designer focus on right now, today? Focus on the technologies of your specific niche. If you’re a new web designer and haven’t determined what that specific niche is, then determine what you want it to be in the future, and go from there. For example, if you are a developer who already does Blackberry/iPhone apps or has a focus on mobile websites, then learning to create an iPad app/design would be most beneficial for you. If you do a lot of CSS, then learn a framework to speed up your development.

Just focus around your specialty, and learn what clients expect you to learn. Also learn what you expect yourself to learn. Above all, though, know that new technologies will always come and go, so don’t fret over learning about it all today. Feel free to be choosey about the new things you learn.

2. What Types of Things Should I Invest Money In?

An important business lesson is that only the businesses that invest in themselves really grow. This is true for web design businesses as well. A percentage of income one makes as a designer should be reinvested in order to grow the business and the individual. When working for an industry that functions primarily online, though, finding items to invest in can waste more money than desired.

So arises the question: What kinds of items are smart investments for web designers? Short answer: knowledge. The single most important thing any web designer can invest in is anything that improves their knowledge of design, business, best practices, a new trend/technology, etc. In a technology-based field, growth and knowledge are your best assets.

Image credit: Aaron Bassett

However, other smart things to invest in are:

• A good, comfortable desk set and chair (given you work in a home office). Productivity is only at its best when one is comfortable, and when one has plenty of workable space and organization.
• A good computer and software. Keep in mind that this should be relative software — stuff you’ll actually use. Keep the Adobe Suite updated as best as possible, but don’t waste money on ‘cool’ software that you think will make you more productive. Also, a fast, smart computer is a must.
• Quality resources when you need them and can afford them: stock photography, icon sets, fonts, theme frameworks, etc.

3. The Big One: Should I Go Freelance / Stick With A Firm?

Freelancing in the web design career seems to be a choice that is growing in popularity. Today, many web designers just starting out never even try out a company, and just jump into freelancing right after school. (Or even while still in school.) Sometimes it seems that many new web designers are going freelance because it’s just the thing to do these days. Yet, we find many freelancers that are miserable doing it. The truth is: it’s not for everyone.

Image credit: Robert Scoble

Understand the pros and cons of working solo. Also understand the pros and cons of working for a company. Know what you’re willing to sacrifice based on your own beliefs and future goals, and know what you want to gain professionally. Beyond knowing what your goals are, feel free to try them both out. If you haven’t worked for an agency yet, get a part-time job, or try it out for a few years full time. If you already work for a company, take a break or ask to go part-time to try out the freelance lifestyle. Check out Jacob Cass’s post on Design Agency VS Freelance Life.

4. As a Web Designer, Do I Need to Code If I Don’t Want To?

This is a tricky question to answer, because it’s another one of those questions that is best answered with – “Well, it depends…”.

Quite honestly, though, all web designers need to learn how to code. At the very least, they should know how to code XHTML/CSS and JavaScript. All web designers should also know at least a tiny bit of PHP/MySQL to get by. This is because many platforms (including the ever-so-popular WordPress) are coded in PHP, and a web designer should know enough to get around the backend of the many popular PHP-based platforms.

Image credit: Huasonic

So the short answer is yes – know how to code basically because you will likely have to deal with it someday. However, many web designers do end up outsourcing much of the coding work to web developers who prefer coding over design. That is fine of course, if your budget allows. So by all means, if you don’t like to code and can outsource it, go for it. It’s one of the many choices we’re blessed with as web designers!

Learning to code, though, can help any web designer better discuss project requirements with clients and coders, and can even help to design better-quality websites according to usability. On another note, if you ever choose to go back to a company, almost all companies will require this basic knowledge and experience. (Or if they don’t require it, it would definitely help regardless!)

5. With All The Hype, Should I Learn How to Make WordPress Themes?

WordPress is definitely not a passing trend, that’s for sure. In the web design and development fields, it’s easy to say that WordPress development can be a very profitable niche to get into. With all of its popularity, though, is it now becoming an essential thing to learn as a web designer? Are static pages officially out of style?

Image credit: Huasonic

There are plenty of niches a web designer can get into, but nearly every client will ask for a blog. Most clients know now that blogging is a great way to increase web traffic, the thing they’re most interested in after spending hundreds to thousands on a website. Furthermore, many know that WordPress specifically is as versatile as it is.

So is it now essential to know how to make WordPress themes? Not really, but it can definitely help. In the very least, focus some of your efforts on learning how to design blogs effectively, and outsource the code to WordPress if necessary. It may not be the thing all web designers like to focus on, but too many web design jobs today require a blog, and specifically a WordPress implementation of some sort. You can even sell your own custom WordPress themes.

6. What is the Most Effective Way to Market Myself in This Industry?

There is no one most effective way to market yourself as a web designer. However, it is true that there are some more effective ways than others. Some marketing methods take more time, and others are quick and to the point. Any marketing method can be a waste of time, though, if it doesn’t do much. From experience, here are some favorite marketing methods among successful freelance web designers (in order) :

• Referral Business – Once you do land those first few clients, always ask for a testimonial or referral, and follow up with them from time to time via promotional letters or emails. If you can master this, it is the single most effective marketing technique.
• Direct and Local Mail – Local business is easier to win over, and direct mail marketing is an effective tactic. Combine them, and a web designer can get a pretty good response. With a well-crafted sales letter, it can be easy to get a 1/100 chance of response. If that doesn’t seem like a lot to you, consider this: If it takes $200 to create and mail 100 sales letters, and you gain 1 paying client from it with a $1000 project, that’s a return of your investment x5. You’ll likely also create plenty of leads that could turn into clients in the future.
• Building a Reputation – Build a long-term reputation through social media, blogging, and successful client projects. It takes a while, but the process is exponential. With hard work, the clients will eventually be coming to you. When promoting yourself, don’t always worry about winning clients over directly.

Image credit: dmhoro

Overall, unless you’re really bored or desperate, avoid ineffective forms of marketing such as cold-calling, cold-emailing, and job boards. They’re usually just a waste of time and energy if you don’t have time for them.

7. What’s a Good Balance Between Spending Time on My Own Stuff vs. Client Projects?

Clients pay the bills, clients bring in new business, and clients keep your web design business going: so always put clients first. When you’re more interested in focusing on a new side project, it can be easy to get side-tracked, and then get behind. Put your clients as priority #1, and always make deadlines and provide great service. After all, clients are what your business is all about. Don’t take them for granted!

Image credit: liquidskyarts

Yet, it is important to focus on your own personal projects, your portfolio, and your blog when given the time. It’s alright, and even smart to create a set amount of time each day to work on your own things. Write a blog post a day, then use the rest of the day for client work. Or, work for an hour on a side-project at the end of the day, after you have all of your client projects taken care of.

Make client projects priority #1, personal projects priority #2, but definitely keep them both as priorities as a web designer.

8. What Are The Best Places to Find Web Design Resources?

Web design resources are everywhere on the Internet, for free and for a fee. Some designers spend far too much on premium resources, while other don’t spend nearly enough. Paid resources are definitely a good investment, as we stated above, but it isn’t necessary to pay for every little thing.

Some great places to find quality free resources are below:

• Flickr — Do a creative-commons search for textures and more on Flickr to find some pretty cool stuff around the community.
• Blogs — blogs are giving out quality freebies everyday. Use them to your advantage!
• Stock.Xchng — Probably the best resource for free stock photography.

Also find free fonts, open-source software and more to use to your advantage. However, for professionally designed logos, have a few premium fonts on hand, or have a subscription to a premium stock photography site for a client’s web design project.

9. For Web Design Projects, Should I Use a Fixed Price or Charge Hourly?

The long debate of whether to choose fixed price or hourly rates will likely never end. Professionals of all sorts debate it every day, and it can work well either way according to different professions. What’s right for a web designer, though?

Here’s our own opinion: fixed price projects. Let’s say you take on a new project, worth $x amount. If you charge hourly, you can get this amount by determining your hourly rate by the number of hours you think you’ll be working on it. Seems fair enough — until you have your client constantly behind your back time-tracking every working moment. If you don’t want to feel rushed, go by a fixed project rate. Then, all you must worry about is meeting deadlines. No time sheets, advanced time-tracking, or constant updates to reassure the client.

Image credit: Materials Aart

Also, the better you get at something, the faster you can do it, right? Wireframing takes less time, the design process takes less time, and then coding and validating the final website takes less time. If you go by an hourly rate, your overall project rate goes down the faster you complete things. In other words, the better you get, the less you get paid. Put that way, hourly rates don’t make a whole lot of sense at all.

Always track your own time so you can better quote future projects. Long-term fixed rate projects are the best option, after you learn to quote them correctly and after you’ve built a successful list of additional cost fees (such as a $50 charge per extra revisions).

10. Are Bigger Clients Necessarily Better?

Of course not. It is a quick assumption to think that a large well-paying client is better than a client with a new business and a smaller budget — not necessarily. Larger clients make for larger projects, and an entirely different sort of workflow. As creative people, we all have variations in the type of work we like to do, and variations in our own creative style. Sometimes these preferred working conditions and styles are not fit for big corporate clients and that’s alright.

Image credit: IceNineJon

Never feel pressured to take on a big client because it feels prestigious. There are hundreds of freelance web designers everyday that turn down larger clients for more personal clients with small businesses and projects that fit the wants of the designer. This is, of course, the same vice versa. Just like there are many web designers who turn down large clients, there are plenty that will redirect smaller clients and keep the big ones for themselves.

Do you get paid more for bigger clients? Again, not really. Smaller projects take a smaller budget, but also less time. Larger projects can span several months, with a larger budget. The income a web designer makes at the end of the year, though, only depends on how hard they’ve worked day to day.

Conclusion

Hopefully these short answers were enough to cover what many web designers ask each day. It can be difficult to know what trends to follow and which to leave behind to do your own thing. What’s most important is to have the knowledge to do a great job with every project, and use trial and error between your own experiences and the experiences of others. However, the only way to truly know the answers to some of the questions above is to test all the options out yourself.

As always, feel free to ask your own set of questions, or ask a question that you’d like an in-depth answer to. We’ll definitely try to get them answered in the next set of questions from web designers. Also, share your own answers based on your experiences as a web designer thus far.

Share on Facebook

Những câu hỏi liên quan tới công ty:

1. Ông/bà đang có trang web nào?

2. Mô tả về dịch vụ của ông/bà?

3. Đối thủ cạnh tranh của ông/bà? Công ty ông/bà khác biệt với họ thế nào?

4. Ba điều mà ông/bà không hài lòng với trang web hiện tại?

5. Những gì Ông/bà thích nhất trên web của mình?

6. Những trang web của đối thủ cạnh tranh nào mà ông/bà thấy thích thú?

7. Độ tuổi khách hàng của Ông/bà?

Câu hỏi liên quan tới dự án

1. Đánh dấu từ 1-10 về hiểu biết kỹ thuật mà khách hàng biết.

2. Những người sử dụng có cần điều gì đặc biệt? Có cần bản cho dành cho Mobile, nhiều ngôn ngữ, font chữ lớn để dễ đọc? .v.v

3. Hình dung trang web của ông/bà trong 5 năm từ bây giờ. Hoàn thành câu: Tôi biết website của tôi sẽ hiểu quả vì…

4. Nêu 3 điều quan trọng nhất khi thiết kế 1 website mới cho Ông/bà.

5. Nêu 3 điều không cần thiết về website mới.

6. Ông/bà có sẵn màu sắc nhận diện cho công ty không? Màu nào ông/bà không muốn sử dụng?

7. Những trang web nào gây ấn tượng với ông/bà? Xin cho tôi biết links?

8. Thời hạn hoàn thành cho dự án này?

9. Ông/bà có sẵn lòng gặp để trao đổi trực tiếp chứ?

Các câu hỏi thêm

1. Ông/bà có thể tự update website của mình được không?

2. Đây là trang web thương mại điện tử? Nó có hình thức thanh toán qua mạng không?

3. Ông/bà có cần copywriter? Nếu ông/bà sử dụng nội dung sẵn có trên web hiện tại, ông/bà cần sửa gì không?

4. Ông/bà đã có logo chứ?

5. Ông/bà có các hình ảnh để sử dụng trên web chưa? Hay điều đó tùy thuộc vào Designer?

6. Bao lâu thì Ông/bà cần update website của mình (nếu không viết code).

7. Ông/bà cần sự giúp đỡ về SEO (google, đăng ký từ khóa, Analytic setup v.v.).

8. Ông/bà đã có một tên miền (domain) và hosting để chứa webstie mới của mình? Ông/bà có thể truy cập bằng FTP chứ?

9. Ông/bà cần tính năng nào trong tương lai cho web, ví dụ Login, Forum, Blog, Rss, newsletters)?

Bạn cần phải nhớ bạn là một Graphic Designer, có nghĩa là bạn chuyên giải quyết các vấn đề rắc rối, làm cho mọi thứ rõ ràng. Bạn không thể giải quyết các vấn đề nếu không hiểu rõ nó – Hãy đặt câu hỏi.

Theo thedesigncubicle

Share on Facebook

1. Yahoo! UI Library: Rich Text Editor
The Yahoo! Rich Text Editor is a UI control that replaces a standard HTML textarea and is based on Yahoo! UI Library; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images.

Implement this editor in your web site is very simple. You have to add a simple textarea like this:

<textarea id=”editor” name=”editor” rows=”15″ cols=”70″>
</textarea>

…and copy and paste the Javascript code you can find in the related pages on Yahoo Developer Network on your page. Yahoo! provides a lot of useful and well explained examples regarding how to implement this rich text editor. I suggest to take a look at the following links:

- Simple Editor with basic buttons
- Code Editor
- Editor in a Dialog Control

The Rich Text Editor’s toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization. For example you can replace your Wordpress default editor with the Yahoo! Rich Text Editor using this plugin, integrate it into Drupal to edit content using this module or use it like editor for comments of your blog .

2. Free Rich Text Editor
Free Rich Text Editor is an extremely easy to use FREE javascript based HTML WYSIWYG editor for your website, it can easily be implemented into any existing content management system or other web application with no knowledge required in programming or javascript. Only 3 lines of code required to set up the editor. It also now outputs as XHTML compliant code!

The only lines of code you have to add are the following:

<form action=”" method=”post”>
<!– Include the Free Rich Text Editor Runtime –>
<script src=”/freerte/js/richtext.js” type=”text/javascript”></script>
<!– Include the Free Rich Text Editor Variables Page –>
<script src=”/freerte/js/config.js” type=”text/javascript”></script>
<!– Initialise the editor –>
</form>

Simple no? The result is very nice and looks like the Microsoft Word interface. I suggest you to try it if you are looking for an affordable and quick to implement solution for a rich text editor with a lot of useuful features. You can download it here.

3. TinyMCE
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems.

Is very simple to integrate in your website only with a few lines of code. Add this code into the tag <head> of your page:

<script type=”text/javascript” src=”tiny_mce/tiny_mce.js”></script>

…and initialize the editor using the code you can find here, clicking on the tab View Source. Than add a simple text area in your page like this:

<textarea id=”content” style=”width:100%”>
</textarea>

That’s all! It’s ready to run on your page.

4. FCKeditor
FCKeditor is a very nice HTML text editor brings to the web much of the power of desktop editors like MS Word. It’s lightweight and doesn’t require any kind of installation on the client computer. The interface is clean and

It’s very simple to implement using this code:

<form action=”" method=”post”>
<script type=”text/javascript”>
var sBasePath = document.location.href.substring(0, document.location.href.lastIndexOf(‘_samples’)) ;
var oFCKeditor = new FCKeditor( ‘FCKeditor1′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 250;
oFCKeditor.Create();
</script>
</form>

5. Xinha
Xinha is a powerful WYSIWYG HTML editor component that works in Mozilla based browsers as well as in MS Internet Explorer.

Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor. Its liberal, BSD licence makes it an ideal candidate for integration into any kind of project.

Do you have any suggestion about this topic? Add your comment or suggest a link, thanks!

Share on Facebook

Choose an URL address for the mobile version of your site
First step is choosing an URL address for the mobile version of your site. You have some options, for example, you can create a folder (mobile) in the root of your site so your mobile version will be publishet at this URL: http://www.yoursite.com/mobile.

…or if you can add custom sub domains to your domain, you can use an url like this http://m.yoursite.com or http://mobile.yoursite.com which links to the folder mobile which will contain all files of your mobile site version.

Redirect script for mobile devices
The second step is creating a redirect script for mobile devices. It’s not necessary, but it’s useful to redirect automatically all traffic coming from mobile devices to the mobile version of your site. For more info about this topic take a look at the following links:

Redirect a mobile/PDA to a “lite homepage”
Redirecting visitors who visit a standard webpage to a mobile version

…and in particular if you are a PHP, ASP programmer take a look here:

Device detection using PHP
Device detection using ASP

If you know other interesting links, please add a comment

Simple page structure mobile-friendly
What is the better layout style for your mobile site version? I suggest you to use a typical one-column layout which is very popular for this kind of sites and make them more usable and readable for mobile users. YouTube, Facebook, Twitter , for example, use this layout one-column for their mobile versions:

Using this layout is a good practice but not a rule. In fact, if you surf the web using a mobile version of Internet Explorer, on Windows Mobile based devices, you can choose some layout options which the browser uses to “arrange” the content of the page to the device screen width (independently from the original page layout):

- Default, narrows content width to reduce horizontal scrolls
- One Column, forces all content to fit in a single column
- Desktop makes no change to the content (the site looks exactly how if you used a desktop version of IE)

But in general, the result can be bad if your site layout is too complex. To avoid this problem, you can think to spend a little bit of your time to design an optimized mobile version of your site using a more device-friendly one-coloumn layout how I illustrated in the following sections.

A proposal for your mobile site
If you have a blog, your mobile devices-friendly layout for your site can be something like this:

…with the following elements: header, body and footer. Header contains the site logo, body contains your post (or a summary) and footer contains other info about your site.

HTML and CSS basic code
You can use Dreamweaver or your preferred editor to develop the code. HTML code is very simple and can be something like this:

<!– ———— –>
<!– Page Header –>
<div id=”header”>

<a href=”index.html”><img src=”logo.png” border=”0″ /></a>

</div>

<!– ———— –>
<!– Page Body –>
<div id=”page-body”>
<!– Your post here –>

<h1><a href=”post1.html”>Title of your post</a></h1>
<p>A summary of your post</p>
<p class=”tag”>

<a href=”tag1″>tag1</a>,
<a href=”tag2″>tag2</a>,
<a href=”tag3″>tag3</a>

</p>
<!– Your post here –>
<!– Your post here –>
<!– … –>

</div>

<!– ———— –>
<!– Page Footer –>
<div id=”footer”>

<a href=”index.html”>Home</a> |
<a href=”mailto:youremail@yoursite.com”>Contact me</a>

</div>

…and CSS code could be something like:

/* — Reset default style — */
body, h1, p{border:0; margin:0; padding:0;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px;}

/* ———— */
/* HEADER */
#header{
padding:6px;
background:#444444;
}
/* PAGE BODY */
#page-body{padding:10px;}
h1{font-size:14px; font-weight:bold;}
h1 a:link, a:visited{color:#0033CC;}
.tag{font-size:12px; margin-bottom:20px;}
.tag a:link, .tag a:visited{color:#999999;}

/* FOOTER */
#footer{
padding:6px;
border-top:solid 1px #DEDEDE;
color:#999999;
font-size:11px;
}
#footer a:link, #footer a:visited{
color:#666666;
}

The result is something like this:

…naturally this is only a very basic proposal which you have to modify adding images, your logo, changing colors, font-family and add some lines of PHP, Coldfusion, ASP or other code to display dinamically all your post. For example with some lines of CSS code you can obtain a result like this:

You can also add a search field in the header of the page to help your readers to find quickly what they are looking for in your site. I also suggest to be simple and don’t add useless element such as social network buttons (such as delicious tagometer or digg) or other widgets which use javascript. This is only a mobile version of your site and it have to be simple, usable and readable. Nothing else!

Issue with fonts using devices with Windows Mobile
If you use a mobile device with Windows Mobile, you don’t have installed by default fonts like Arial, Verdana, Georgia… So to display correctly a web page you have to copy into your device some of the most used fonts in web design. Click on Explorer and copy from your PC (or also from your MAC) these fonts into the folder Windows > Fonts in your mobile device:

- Arial
- Verdana
- Georgia
- Trebouchet MS
- Times New Roman

Share on Facebook

Web là một kênh media mới, một kênh kinh doanh mới nhưng trong bài viết này iGURU Việt Nam chỉ đề cập khía cạnh kỹ thuật của thiết kế giao diện Web. Khi thiết kế Web như một media mới, quy trình thiết kế sẽ khác nhiều.

Bài viết của iGURU được đăng dưới dạng bản quyền Creative Commons Some Rights Reserved, theo Attribution-NoDerivs 2.5.

Quy trình phát triển GUI cho Web site.

Thiết kế Giao diện dành cho Người sử dụng là một công việc trong quy trình phát triển một Web site. Tại Việt Nam, nhiều doanh nghiệp vừa và nhỏ không quan tâm chất lượng phần mềm, dịch vụ sau bán hàng mà thường quan tâm đến giao diện Web có đẹp hay không. Tuy nhiên đây lại là hạn chế của hầu hết các doanh nghiệp thiết kế Web. Trong phạm vi cho phép, chúng tôi xin trình bày các bước xây dựng Giao diện Web cho người sử dụng, nhằm giúp các bạn đạt hiệu quả thiết kế giao diện cao hơn.

Bài viết này không có tham vọng chỉ ra Marketing với Web như thế nào, nhưng việc hiểu về quy trình làm Web giúp các Marketer có phương pháp phối hợp tốt hơn qua đó phối hợp với nhà cung cấp dịch vụ Web của công ty, sản phẩm, dịch vụ đạt hiệu quả cao hơn.

Bài viết không đi sâu vào nghệ thuật thiết kế Web, bài viết chỉ ra các bước nên làm với một dự án thiết kế giao diện Web.
Quy trình được dựa trên Chuẩn IWP phiên bản 1.0 của IGURU. Bài viết có sử dụng 02 giao diện của Website bán hàng trực tuyến, Web site tin tức do iGURU thiết kế

Quy trình bao gồm các bước sau:
Bước 1: Xác định yêu cầu của khách hàng.
Bước 2: Phác thảo ý tưởng trên giấy
Bước 3: Đánh giá mẫu phác thảo
Bước 4: Thiết kế đồ hoạ bản đơn sắc
Bước 5: Phối màu cho giao diện Web
Bước 6: Xây dựng tài liệu về chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện.
Bước 8: Test giao diện trên các trình duyệt
Bước 9: Chuyển mã nguồn tới bộ phận phát triển Web

Bước 1: Xác định yêu cầu của khách hàng.
Mục tiêu của giai đoạn này là xác định chính xác yêu cầu hoặc tư vấn cho khách hàng. Yêu cầu là một điều kiện hoặc khả năng mà hệ thống phải tuân theo hoặc có. .

Nhiều khi khách hàng cũng không biết họ cần gì, nên khi xác định yêu cầu bạn nên xây dựng trước một biểu mẫu câu hỏi để lấy yêu cầu của khách hàng. Yêu cầu phải đạt những tiêu chí sau:

• Yêu cầu phải bao quát giao diện, chức năng, cấu trúc nội dung, đối tượng xem Web site.
• Trao đổi thông tin dựa trên các yêu cầu đã xác định trước khi tiếp cận khách hàng. Bạn phải nghiên cứu về yêu cầu chung của khách hàng trước khi tiếp cận.
• Xây dựng bảng câu hỏi logic để chuyển đổi sang phân tích yêu cầu nghiệp vụ, yêu cầu hệ thống đơn giản, dễ dàng.
• Đặt độ ưu tiên, lọc và theo dõi các yêu cầu.
• Đánh giá khách quan các chức năng và hiệu năng.

Mẹo: để có thể hoàn thành Web nhanh chóng và chính xác nên đặt những câu hỏi:

• Sau 3 năm nữa Web site sẽ phục vụ mục đích gì?
• Hãy liệt kê các tính năng mà bạn nghĩ ra được và đặt theo thứ hạng: Bắt buộc, Mong muốn và Tuỳ chọn.
• Bạn cho biết 03 Web site bạn ưa thích nhất, trong đó những điểm nào làm bạn thích và những điểm nào bạn chưa thích?

Bước 2: Phác thảo ý tưởng trên giấy
Mục tiêu của bước này là định hình bố cục của trang Web.

Nào giờ là lúc bạn thể hiện hoa tay của mình, để linh hoạt trong việc phác ý tưởng, bạn nên sử dụng bảng vẽ, bút chì, thước kẻ và tẩy. Dựa vào kinh nghiệm thành công của bạn, bạn thấy những tiêu chuẩn nào nên có, ví dụ các tiêu chuẩn sau của IWP 1.0:

• Banner không quá 1/3 màn hình thực của người sử dụng (màn hình thực là màn hình của trình duyệt có thể xem được trang Web, đã bỏ đi các thanh tool bar của trình duyệt Web).
• Sitebar không lớn quá 25% chiều rộng trang Web.
• ….

Bạn cũng nên xây dựng chuẩn bố cục dựa trên nội dung đối với toàn bộ Web site. Web site là tập hợp của những trang Web, mỗi trang Web tập hợp các nội dung có mối liên quan hoặc không giữa các trang Web. Dựa vào nội dung, bạn chia trang Web làm 02 vùng:

• Vùng template (theo chuẩn IWP)
• Vùng hiệu chỉnh.

Vùng template là vùng không hiệu chỉnh hoặc hiệu chỉnh rất ít xuyên suốt các trang Web của Web site.
Vùng hiệu chỉnh là vùng có thay đổi nội dung trong hầu hết các trang Web của Web site.
Bạn nên cân nhắc trước khi xác định vùng nào là vùng template hoặc vùng hiệu chỉnh, vì việc này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chung của giao diện Web site.

Bạn cũng nên quy chuẩn các đối tượng trong bố cục để dễ trình bày, quản lý, theo dõi. Ví dụ: Ảnh là hình chữ nhật có đánh dấu x; chữ là đường kẻ,…
Nếu đây là một dự án phức tạp bạn nên tham khảo quy trình RUP và kết hợp với quy trình này để ra một giải pháp quản lý dự án phù hợp hơn.

Ví dụ:

Bước 3: Đánh giá mẫu phác thảo
Mục đích của bước này là đánh giá mẫu phác nào phù hợp với yêu cầu, mong muốn của khách hàng. Để tìm hiểu sâu hơn về thiết kế Web và Thương hiệu bạn xem các bài viết khác tại iGURU Blog.

Bạn nên có tối thiểu 03 mẫu phác trên giấy, sau đó bạn treo lên tường và mời những người khác cùng xem và đánh giá. Mẫu phác thảo đạt những yêu cầu phải trả lời được những câu hỏi như sau:

• Họ thích mẫu nào?
• Mẫu thiết kế có đáp ứng các yêu cầu của khách hàng không?
• Tìm thông tin, chức năng có dễ không?
• Đứng xem, bạn có thấy bố cục có rời rạc không? Có thẩm mỹ không?

Nếu câu trả lời không đạt yêu cầu trên bạn nên ngồi lại và vẽ tiếp, điều này sẽ giúp bạn giảm chi phí nhiều nếu bạn sử dụng máy tính để thiết kế. Sau khi chọn được một mẫu chúng ta chuyển sang bước 4.

Bước 4: Thiết kế đồ hoạ bản đơn sắc
Mục tiêu của bước này là đánh giá bản phác trên giấy khi chuyển sang Đồ hoạ vi tính bố cục có phù hợp với yêu cầu và mong muốn của khách hàng hay không.

Sau khi phác thảo xong, bạn sử dụng công cụ đồ hoạ máy tính để thiết kế mẫu giao diện Web. Đầu tiên chúng ta cần xem bố cục trên Máy tính có hợp lý không, chính vì vậy chúng ta chưa phối màu cho các mảng màu, đường kẻ, chữ cho trang Web, tất cả các bạn để thang màu xám để bước tiếp theo phối màu dễ dàng hơn. Nếu bạn phối màu trong giai đoạn này bạn sẽ phải đối mặt với hai rủi ro: Sai bố cục và sai phối màu. Tuyệt đối không để màu trắng và đen với những vùng muốn phối màu khác hai mầu trên.

Nếu bạn sử dụng công cụ đồ hoạ, chúng tôi đề xuất sử dụng Photoshop CS2 để áp dụng các chuẩn thiết kế giao diện dễ dàng hơn. Ví dụ đặt tên, sắp xếp folder, phân cấp folder, áp màu cho layer,…

Với iGURU, một số chuẩn dùng trong thiết kế đồ hoạ vi tính được định nghĩa như sau:

• Web site chia ra 3 phân vùng chính với tên viết hoa bằng tiếng Anh: TOP, MIDDLE, BOTTOM. Ba phân vùng này tương ứng với phần trên cùng, phần thân và chân trang Web.
• Trong các phân vùng, để phân biệt các vùng khác nhau thì được đặt tên tương tự nhưng có dấu chấm “.” trước tên. Ví dụ: .TOP, .MIDDLE, .BOTTOM, .LEFT, .RIGHT
• Hình ảnh và Chữ được phân bố vào 02 thư mục riêng: IMG và TXT
• …

Sau khi căn chỉnh bố cục và thiết kế xong, bạn nên in ra và lại treo lên tường mời mọi người đến đánh giá giống như bước 3. Đánh giá hiện giờ cần phải trả lời những câu hỏi như sau:

• Tìm thông tin, chức năng có dễ không? Không dễ vì sao? Do độ tương phản, kích cỡ, …?
• Trình bày thông tin quan trọng có dễ tìm với giới hạn của màn hình thực hay không?
• Giao diện có dễ đọc, dễ sử dụng với người dùng mục tiêu hay không?
• Giao diện có thể hiện ra tính cách riêng hay không?
• ….

Ví dụ:

Bước 5: Phối màu cho giao diện Web
Khi bản đơn sắc đạt yêu cầu, bạn chuyển sang phối màu cho giao diện Web. Khi phối màu cho giao diện bạn nên tuân thủ các phương pháp chẳng hạn như sau:

• Dựa vào màu sắc yêu cầu từ bảng câu hỏi để đưa ra phương pháp phối màu cho Web site. Có 1 màu chủ đạo, 1 màu thứ cấp và các màu chỏi để tăng phần sinh động cho Web.
• Với màu nền là màu pha gam xám sẽ có kiểu phối màu riêng. Ví dụ phần nội dung sẽ có màu đỏ, vàng chanh, vàng, cam, xám, da trời,… tuỳ thuộc vào mục đích của Web site.
• Với text nên tối đa 3 màu, 3 font, 3 cỡ chữ, 3 kiểu chữ, 3 kiểu trace, kerning.
• …

Mẹo: Giai đoạn phối màu rất dễ bị ảnh hưởng bởi màu sắc của ảnh ( ví dụ banner).
Đây là điểm có lợi nhưng cũng là điểm có hại cho thiết kế giao diện Web site. Nhiều người ban đầu chọn ảnh cuốn hút và truyền đạt chính xác thông điệp của Web site và giờ họ chèn vào để lấy cảm hứng thiết kế từ ảnh. Một số người không có kiến thức về media hoặc không có đánh giá đúng mức hiệu quả của ảnh đem lại cho Web site, họ chọn những tấm ảnh không đúng thông điệp, từ đó họ thiết kế nhầm mầu sắc do ảnh hưởng từ ảnh.

Ví dụ:

Bước 6: Xây dựng chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Mục đích của giai đoạn này giúp Web site dễ bảo trì, giảm mã, nội dung hiển thị tốt hơn với tỉ lệ mã thấp, linh động trong định nghĩa kiểu. Và quan trọng hơn, nó giúp cả quy trình sản xuất, triển khai, bảo trì ít rủi ro hơn.

Các chuẩn bao gồm:

• Định nghĩa vùng của site, trang Web, các vùng trong một thẻ DIV
• Chuẩn đặt tên cho nhãn CSS, ảnh
• Chuẩn đặt tên cho các thư mục chứa các thành phần của trang Web
• Chuẩn đặt tên cho tệp tin CSS, HTM, JS, XML

Ví dụ trong một thẻ DIV chúng ta định nghĩa như sau:

• TL: Top-Left: Chỉ vị trí trên cùng, bên trái
• TC: Top-Center: Chỉ vị trí trên cùng chính giữa
• TR: Top-Right: Chỉ vị trí trên cùng, bên phải
• ML: Middle-Left: Chỉ vị trí làm việc bên trái
• MR: Middle-Right: Chỉ vị trí làm việc bên phải
• BL: Bottom-Left: Chỉ vị trí dưới cùng, bên trái
• BC: Bottom-Center: Chỉ vị trí dưới cùng chính giữa
• BR: Bottom-Right: Chỉ vị trí dưới cùng, bên phải

Mẹo: người thực hiện bước 1 5 phải có tư duy về HTML, CSS và lập trình để từ đó đưa ra một giải pháp GUI tận dụng được điểm mạnh của các công nghệ ứng dụng vào phát triển Web. Ở mức độ cao cấp hơn, những người này phải có kiến thức sâu rộng về Thương hiệu, Media, Marketing, Bán hàng, Chăm sóc khách hàng, từ đó cô đọng quy trình hoạt động trên thành những vòng lặp có thể kiểm soát từ đó áp dụng vào thiết kế giao diện.

Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện
Mục đích của giai đoạn này là thiết kế Web bằng HTML, CSS ( Flash, JS, AJAX, … nếu có)

Chúng ta chuyển tải giao diện đồ hoạ sang trang Web.

• Nếu bạn chỉ sắp xếp bố cục, kết cấu của trang Web thì nên dùng HTML. Bạn có thể sử dụng chương trình Adobe ImageReady CS2 để cắt ảnh ra thành trang Web.
• Nếu bạn muốn dàn trang, định kiểu cho các kết cấu của trang Web, bạn nên sử dụng CSS và bước 6 rất có ích với bạn.

Công việc của một người thiết kế Web lúc này giống như một người lập trình nhiều hơn là một nhân viên thiết kế. Anh ta chỉ cần hiểu rõ cách biểu diễn phông chữ, màu sắc, canh lề, các loại đường, nét, chiều cao, độ rộng, ảnh nền các loại, ảnh, xác định vị trí cho các khối… sao cho giống các bản thiết kế đồ hoạ nhất.

Mẹo: người thực hiện thực hiện bước này phải hiểu thấu đáo về HTML, CSS, JS nếu không giao diện sẽ hiển thị không như bản vẽ đồ hoạ vi tính trên nhiều trình duyệt khác nhau.

Bước 8: Kiểm thử giao diện trên các trình duyệt
Mục tiêu của giai đoạn này là kiểm soát việc hiển thị chính xác trang Web như giao diện đồ hoạ của bước 5 trên các trình duyệt Web khác nhau.

Tối thiểu chúng ta phải kiểm soát việc hiển thị đúng như giao diện thiết kế trên các trình duyệt:

• Microsoft Internet Explorer các phiên bản 5, 6, 7 và thời gian tới là 8
• Firefox 1.5+
• Safiri
• Opera
• Netscape
• Mozilla

Mỗi Web site đều nhắm đến một số phân khúc khách hàng, có một định vị và thị trường mục tiêu. Rất ít Web site có thể phục vụ tốt toàn bộ các trình duyệt Web, nên bạn cần nghiên cứu người dùng cuối mục tiêu của mình dùng trình duyệt Web nào và thiết kế sao cho hiển thị tốt trên các trình duyệt đó.
Nghe đến đây chắc hẳn bạn sẽ vò đầu bứt tai sao mà phức tạp thế! Bạn yên tâm, với kinh nghiệm của iGURU Việt Nam, một người chưa biết về CSS chỉ cần học với chuyên gia 4 giờ/ ngày trong vòng 1 tuần là có thể sử dụng thành thạo CSS.

Mẹo: người thực hiện bước này nên tìm các đoạn mã hack CSS để ứng dụng vào việc thiết kế trang Web cho nhiều trình duyệt. Tải sách tại: http://iguru.vn/forum/forumdisplay.php?f=33
Người thực hiện việc thiết kế CSS cũng nên theo dõi người truy nhập vào Web ( ví dụ từ Google Analytics), từ đó tổng hợp số liệu sử dụng trình duyệt Web của họ để có thể liên tục cập nhật mã CSS cho trang Web, giúp trang Web hiển thị tốt theo xu hướng sử dụng trình duyệt của người dùng cuối.

Bước 9: Chuyển mã tới bộ phận lập trình
Mục tiêu của giai đoạn này là chuyển các trang Web hiển thị tốt trên các trình duyệt chính cùng với các thành tố của trang Web tới bộ phận lập trình.

Phải chắc chắn bộ phận lập trình cũng hiểu được yêu cầu bắt buộc của giao diện và chuẩn thiết kế của bước 6. Thông thường các yêu cầu và chuẩn này được quản lý dự án hoặc trưởng nhóm thông báo trước để các bộ phận không hiểu nhầm nhau.

Các yêu cầu bắt buộc và chuẩn thiết kế không chỉ được chuyển tới bộ phận lập trình mà còn chuyển tới bộ phận kiểm thử ( test) để họ có thể xây dựng các kịch bản kiểm thử, thông qua đó họ kiểm tra được chất lượng của dự án. Nếu có phát sinh lỗi, họ sẽ thông báo lại bộ phận thiết kế và lập trình để sửa lỗi.

Tham khảo:

• Quy trình IWP 1.1 của iGURU Việt Nam
• Mẫu giao diện do iGURU Việt Nam thiết kế cho thị trường quốc tế và Việt Nam
• Blog iGURU Việt Nam

Share on Facebook