Suy nghĩ trước khi thiết kế một trang web

Có hơn 90% các nhà thiết kế web không được đào tạo chính quy từ các trường mỹ thuật hoặc ít khi tham dự các khoá học chuyên sâu về thiết kế. Kiến thức chủ yếu đến từ tham khảo các bài viết, thiết kế tốt và sáng tạo trên các giễn đàn, đem về xào nấu, thêm bớt cá tính cá nhân, và sau đó một sản phẩm thiết kế web nhìn đẹp đẹp ra đời.

Nhưng, Các câu hỏi vẫn luôn đeo bám mà không thể có câu trả lời: Những gì định nghĩa một thiết kế web tốt? Người thiết kế web tốt đấy chỉ là họ tài năng hơn người hay là vì lý do gì khác? Có sự logic hay phương pháp nghiên cứu khoa học đằng sau tất cả các thiết kế tốt kia? Điều gì tạo nên một thiết kế web khác biệt? Trong bài viết này, tôi đi sâu vào những điều cần suy nghĩ và chuẩn bị trước khi thiết kế một trang web. Để trả lời cho các bạn câu hỏi ở trên, tôi đã đọc và tổng hợp các bài viết liên quan từ các tạp chí thiết kế uy tín để đưa ra một cái nhìn tổng quát nhất được trình bày dưới đây.

Xác định mục đính chính của web

Trước khi bắt đầu thiết kế, tôi xác định rõ mục tiêu của web là gì? Từ đó suy nghĩ về marketing, về mục tiêu kinh doanh và về khía cạnh người dùng sản phẩm web, từ những cơ sở đó tôi xây dựng các yếu tố cần có trong web, nội dung tạo niềm tin cho khách hàng và định hướng hành động của khách hàng.

Những câu hỏi cần trả lời:
– Tôi bán cái gì?
– Đối tượng khách hàng là những ai?
– Điều gì khiến khách hàng mua sản phẩm của tôi?
– Khách hàng mua sản phẩm ấy như thế nào?

Tìm cảm hứng

Tôi thường tìm cảm hứng từ các giễn đàn chia sẻ tác phẩm thiết kế, các tạp chí thiết kế. Và sử dụng blog Tumblr để tạo kho tài liện online riêng cho mình, lưu giữ những sản phẩm thiết kế mà tôi thích dưới góc nhìn cá nhân. Dưới đây là 2 kho tài liệu của tôi, được bookmark trên Google Chrome và chia làm 2 phần web và mobile để tiện tham khảo:

Screen Shot 2016-01-21 at 9.44.51 AM

Ngoài ra tôi tìm thêm cảm hứng từ các trang như behance, pinterest, awwwards, abduzeedo, cssauthor, dribbble…

Kho tài liệu hình ảnh, font chữ, tone màu

Hình ảnh, font chữ, tone màu được sử dụng hợp lý là yếu tố quan trọng, vì nó sẽ xuyên suốt thiết kế của tôi, chỉ cần một thay đổi nhỏ yếu tố trên có thể sẽ khiến tôi thay đổi lại toàn bộ thiết kế của mình. Vì thế tôi cân nhắc rất kỹ các thành phần để sử dụng trước khi bắt tay vào thiết kế. Tôi thường tìm kiếm hình ảnh, font chữ, tone màu ở các web dưới đây.

Hình ảnh
http://zoommyapp.com/
http://www.pexels.com/
https://unsplash.com/
https://stocksnap.io/

Font chữ

Với font chữ, tôi chọn font có bộ family để có được độ tương phản thị giác mạnh khi kết hợp font line và font bold

http://www.fontsquirrel.com/
https://www.google.com/fonts

Màu sắc

https://color.adobe.com/explore/newest/
http://www.materialpalette.com/red/blue
http://codepen.io/addyosmani/full/jlvoC/
http://flatuicolors.com/
http://coolors.co/browser

Tạo sự khác biệt

Các nhà thiết kế có xu hướng tập trung vào các chi tiết thiết kế web hơn là cái nhìn tổng thể. Họ tập trung và các cạnh, điểm nhấn, font chữ… tất cả đều tốt, nhưng những điều đó thực sự tạo nên khác biệt cho thiết kế web của bạn ngay từ cái nhìn đầu tiên. Theo nguyên tắc Gestalt, những gì não bộ con người nhìn thấy đầu tiên là hình dáng tổng thể của thiết kế chứ không phải là chi tiết, bạn hãy nhìn hình ảnh ví dụ dưới đây.

gestalt_2

Các hình trên, hình ảnh đầu tiên bạn nhìn thấy là bức tranh chân dung, rồi sau đó bạn mới để ý đến các chi tiết cấu thành hình ảnh chân dung đó. Ban đầu, bạn tiếp cận với cái nhìn tổng thể, sau đó mới quan tâm các chi tiết, không ngoại lệ khi bạn nhìn một trang web.

Có một hoàn cảnh mà các nhà thiết kế web gặp phải thường xuyên. Sau quá trình bạn nỗ lực, trau chuốt tỷ mỉ tạo ra một thiết kế web và gửi cho khách hàng. Cái bạn nhận lại từ khách hàng chỉ là cảm giác không có gì quá đặc biệt, hoặc là thiết kế của bạn tương tự một thiết kế nào đó… Quan điểm của khách hàng không thay đổi khi bạn đã sửa đi sửa lại nhiều lần, và bạn tự hỏi tại sao?

Được rồi, chúng ta hãy nhìn vào bức hình dưới đây trên góc nhìn tổng thể.

gestalt_7

gestalt_6

Tất cả khi đưa về đen trắng đều rất quen thuộc như đã nhìn thấy ở đâu đó, bạn cũng có góc nhìn này sau khi xem bức ảnh trên, và khách hàng của bạn cũng vậy.


BÀI VIẾT CỦA HOANG BIN, DỰA TRÊN KIẾN THỨC VÀ HÌNH ẢNH TỔNG HỢP TỪ PEARSONIFIED, SMASHINGMAGAZINE.

banner-hoang-bean

13 Comments Add yours

  1. gretats says:

    anh ơi password để vào trang http://mobiledesign-hoangbindesign.tumblr.com/ là gì vậy ạ?

    Like

    1. Hoang Bin says:

      À, lỗi khi anh biên tập bài viết, a sửa lại rồi. Thanks em nhé ^^

      Liked by 1 person

      1. baohd says:

        nó vẫn yêu cầu pass anh ơi ^^

        Like

      2. Hoang Bin says:

        Anh vừa fix lại rồi, em xem được bình thường chưa

        Like

  2. baohd says:

    dạ chưa nha anh.. 2 cái link tumblr thì cái web vào bình thường, cái mobile vẫn đòi pass anh ạ

    Like

    1. Hoang Bin says:

      Đểu nhỉ, để anh nghiên cứu vụ này. Thanks em nhé.

      Liked by 1 person

  3. zbz says:

    Haizz… Giá như đọc được bài này của anh sớm hơn T.T. Và biết đến portfolio của anh sớm hơn dzai ah =.=”
    From zang bất ziệt : )

    Like

    1. Hoang Bin says:

      Haha, lâu quá không gặp em, rồi bất thình lình xuất hiện =)). Chuyện gì đã làm em tiếc nuối đến thế? kể anh xem nào.

      Like

  4. zbz says:

    à ~ em đang chạy project renew toàn bộ website của công ty em, thay đổi toàn bọ layout, chỉ giữ host thôi. Lúc đầu em định là design 1 cái theo ý, nhưng mà designers em quen lại ko chuyên về mảng này. Nên để save time thì em đã đi mua 1 cái temp có sẵn, tất nhiên là muốn chọn cái ưng ý thì cũng phải lên concept, layout phù hợp với content rồi, blah blah. Sau đó thì cũng đã pick được 1 bạn theme và purchase rùi. Tuy nhiên là trong quá trình làm nó vãn phát sinh vài vấn đề mà khi làm nó mới lòi ra. Và temp có sẵ thì code cũng đc built-in hết rồi, nên bây giờ muốn sửa sang cái gì cũng là impossible, mặc dù aware được vde này, nhưng mà…. ㅠ.ㅠ. Sau khi chấp nhận thực tại, thì bây giờ em vẫn đang hơi struggling với bạn í , quào quào ~ *kể lể*

    Like

    1. Hoang Bin says:

      Haha, vấn đề của em là đặc điểm chung của dùng theme rồi :)) :)). Web em go live chưa, cho anh cái link vào xem chơi :))

      Like

  5. zbz says:

    Cười như sát muối vào tim =))
    chưa ah : ), phần content e vẫn đang work-out, Đợt này lubu qué nên là quay cuồng. Cho a tham khảo cái Live Preview của bạn này trước nhé.
    Hay hnao dành cho em ít time tư vấn 1 buổi đi ~ cần lắm 1 chuyên gia ㅠ.ㅠ

    Like

    1. Hoang Bin says:

      Cho anh xem cái live preview trước đê. Rồi hôm nào cafe anh review project cho :))

      Like

  6. zbz says:

    à ~ go live rồi, nhưng giấu ko cho xem =.=’

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s