Hướng Dẫn Thiết Kế Website Step By Step Cho Dân Không Chuyên!

 Với dân không chuyên có thể thiết kế website không ? Ý Tưởng , nơi cung cấp dịch vụ

Trên thế giới hiện đang tồn tại khoảng 150 website với đầy đủ chức năng và thể loại khác nhau. Do đó, bộ mặt của mỗi một website được coi như vận mệnh sống còn của chúng. Làm thế nào để website của mình vừa đầy đủ chức năng vừa đẹp “ấn tượng” với người nhìn ngay từ lần đầu tiên là điều mà bất cứ người sở hữu web nào cũng mong muốn.

Trong bài viết này, tôi sẽ hướng dẫn bạn có thể tự đưa ra cho mình một giao diện website mang đậm phong cách riêng của bản thân, phù hợp với chức năng và thu hút người nhìn cho dù bạn là người thậm chí còn chẳng hiểu  website rốt cục là cái gì ^^

Trong bài viết này, tôi sẽ đi theo 4 nội dung chính như sau:

1. Ý tưởng thiết kế

2. Nguyên lý thiết kế

3. Thiết kế trên giấy

4. Thiết kế trên máy

Website là gì?

Để đưa ra được một ý tưởng độc đáo và thỏa mãn mong muốn của bản thân người thiết kế giao diện không phải là điều đơn giản. Trước khi đưa ra bất kì ý tưởng nào cho website của mình, bạn cần phải là người hiểu rõ về website hơn ai khác.

Để bạn có thể hiểu rõ hơn, tôi sẽ mô tả website bằng 1 số hình ảnh sau:

Ý tưởng thiết kế website

Để đưa ra được ý tưởng thiết kế giao diện cho web site của mình, trước tiên bạn phải xác định loại website mình định hướng theo là gì.

Có rất nhiều loại website, tuy nhiên có thể phân ra 2 loại chính như sau:

• web cung cấp thông tin

• web cung cấp sản phẩm, dịch vụ

Xét theo mục đích sử dụng có thể chia thành:

• trang web thông tin điện tử của các công ty: cổng thông tin điện tử của Công ty TNHH MTV Vishipel

• các website cá nhân: website của hotbloger Thạch Phạm

• website dạng flash

• trang web thương mại điện tử: LAZADA là một trang web thương mại điện tử điển hình.

• các website mạng xã hội:  chắc bạn cũng không còn gì lạ lẫm với Facebook nữa rồi

• website chia sẻ hình ảnh: Pinterest là một trang web chia sẻ hình ảnh nổi tiếng trên toàn thế giới.

• website dành riêng cho thiết bị di động: 4G Speed Test là app được lập trình dành riêng cho di động dùng để kiểm tra tốc độ của mạng không dây.

• website tin tức: 24h là một trong những trang web cung cấp tin tức hàng đầu Việt Nam

• website giáo dục

CÁC MÔ HÌNH WEBSITE:

Cổng thông tin(portal):  

là một trang web xuất phát mà từ đó người sử dụng có thể dễ dàng truy xuất các trang web và các dịch vụ thông tin khác trên mạng máy tính. Bạn có thể hình dung đến Yahoo, Google, Bing,... cho dễ

Các loại cổng thông tin điện tử:

Cổng thông tin điện tử công cộng: có 2 loại chính

Cổng thông tin điện tử công cộng nói chung hoặc siêu cổng Web. Ví dụ như Yahoo, Google, Overture, Altavista, AOL, MSN, Excite,...

Đặc trưng cơ bản của cổng này là cung cấp mọi dịch vụ thông thường mà người dùng Internet có nhu cầu như: tìm kiếm, tin tức, diễn đàn, dịch vụ thư mục, các ứng dụng trực tuyến như: thư điện tử, chat, lịch cá nhân,...

Cổng thông tin công cộng hay cổng Web theo chiều dọc:

là cổng tập trung vào một lượng người dùng có quan tâm đặc biệt đến một lĩnh vực nhất định nào đó như hàng tiêu dùng, máy tính, bảo hiểm, ngân hàng, ...Đặc trưng của cổng ngành dọc là cung cấp các thông tin và dịch vụ cụ thể theo các yêu cầu của một ngành hoặc một lĩnh vực nào đó. Cổng thông tin điện tử doanh nghiệp:

Được thiết kế dành cho các doanh nghiệp mong muốn xây dựng được mối quan hệ chặt chẽ với cả nhân viên, khách hàng và đối tác của doanh nghiệp. Cổng thông tin này hợp nhất các quá trình, các tiến trình công việc, sự cộng tác, quản lý nội dung, sưu tập và lưu giữ dữ liệu, các ứng dụng của công ty và các giải pháp doanh nghiệp thông minh, cho phép nhân viên có thể truy cập vào nhiều loại cổng thông tin khác nhau như cổng thông tin thương mại điện tử, cổng thông tin cá nhân và cổng thông tin công cộng.

Cổng thông tin điện tử thương mại

Nó mở rộng quan hệ của doanh nghiệp tới khách hàng cũng như các đối tác và nhà cung cấp, thiết lập các chợ ảo cung cấp các dịch vụ thương mại liên quan đến cộng đồng người mua, người bán và cả người tạo thị trường trên mạng, cho phép liên kết trực tuyến người mua với người bán bằng việc cung cấp các tin kinh doanh đặc biệt và các sản phẩm liên quan cũng như các thông tin về dịch vụ.

• Cổng thông tin điện tử thương mại được chia thành 3 loại cổng thông tin như sau:

• Cổng thông tin điện tử doanh nghiệp mở rộng: mô hình B2C (business & consumer)

• Cổng thông tin điện tử chợ điện tử: VD: Lazada, Chotot, Vatgia,...

• Cổng thông tin cung cấp các dịch vụ ứng dụng (ASP portal): mô hình B2B (business & business) cho phép khách hàng thuê sản phẩm và dịch vụ. Ví dụ như ServicePort của Portera, Salesforce.com, MySap.com của SAP và oraclesmallbusiness.com của Oracle

Cổng thông tin điện tử cá nhân

Trang thông tin điện tử cá nhân là trang thông tin của riêng một cá nhân, được cá nhân đó thiết lập nhằm sử dụng các dịch vụ mạng internet để cung cấp, giới thiệu các thông tin của cá nhân đó đến với mọi người trên internet. Trang thông tin điện tử cá nhân không mang tính chất đại diện cho một tổ chức nào và cũng không cung cấp các thông tin tổng hợp. Trang thông tin điện tử cá nhân và trang thông tin điện tử nội bộ phải tuân thủ theo các quy định của nhà nước về việc đăng ký và sử dụng các tài nguyên có trên internet.

Cổng thông tin điện tử di động:

được gắn vào điện thoại di động, PDA không dây, máy nhắn tin … cho phép khách hàng cũng như nhân viên có thể lấy được các thông tin về dịch vụ, sản phẩm, giá cả; tình trạng đặt hàng, thưởng phạt, vận chuyển; những thông tin lập kế hoạch và cài đặt.

Cổng thông tin điện tử đồ dùng:

được gắn vào Tivi (WebTV), ôtô (Onstart)…Ví dụ: Website công ty Mobifone với nhiều dịch vụ cung cấp cho khách hàng

 Sàn giao dịch b2b (marketplace):

Là nơi hàng hóa và dịch vụ được mang ra trao đổi giữa một khối lượng lớn nhà cung cấp và người tiêu thụ.

Nó là giải pháp hợp tác và giao dịch giữa rất nhiều trang web khác nhau cho phép các công ty mua, bán và hợp tác hiệu quả hơn trên quy mô tòan cầu.

Phân lọai như sau:

• Sàn giao dịch cho ngành sản xuất chuỵên biêt theo chiều dọc: xoay quanh và hỗ trợ các nhu cầu của một ngành sản xuất hoặc một lĩnh vực riêng biệt.

• Sàn giao dịch cho một sản phẩm chuyên biệt theo chiều ngang: xoay quanh một vài sản phẩm chuyên biệt từ một thị trường cung cấp cho một số ngành sản xuất.

• Sàn giao dịch thương mại điện tử với chức năng chuyên biệt: tập trung vào một số kĩ năng chuyên biệt mà thị trường hoặc ngành sản xuất đòi hỏi.

Cửa hàng, siêu thị trực tuyến( e-store)

• Hiểu một cách đơn giản nhất chính là cửa hàng, siêu thị kinh doanh trên mạng. Đa phần là trang web của các siêu thị, cửa hàng đã kinh doanh offline và muốn phát triển thêm mảng online để tiếp cận khách hàng được tối đa.

Báo điện tử( e- newspaper)

• Là loại hình báo chí được xây dựng theo hình thức một trang web và phát hành dựa trên nền tảng Internet. Báo điện tử được tòa soạn điện tử xuất bản, còn người đọc báo dựa trên máy tính, thiết bị cá nhân như máy tính bảng, điện thoại di động trung cao cấp,... có kết nối internet.

Mạng xã hội(Social Networking Website) :

• là dịch vụ nối kết các thành viên cùng sở thích trên Internet lại với nhau với nhiều mục đích khác nhau không phân biệt không gian và thời gian. Những người tham gia vào dịch vụ mạng xã hội còn được gọi là cư dân mạng.

Danh bạ (Web Directory)

• là những trang danh bạ web, Directory sinh ra để lưu trữ các website có phân theo từng nội dung, Directory giúp người đọc dễ dàng tra cứu các website theo nhu cầu của họ.

• Directory thường được các SEOER tận dụng để tạo ra back link chất lượng bằng cách sumbit website của mình lên các danh bạ web.

Webiste việc làm

• Là những website cung cấp các dịch vụ về việc làm như Người tìm việc- Việc tìm người, là nơi doanh nghiệp tìm đến để tìm người có thể đáp ứng yêu cầu của mình vào làm việc và cũng là nơi người xin việc nộp hồ sơ ứng tuyển.

Webblog

• dùng để chỉ một tập san cá nhân trực tuyến, một quyển nhật ký dựa trên nền web hay một bản tin trực tuyến nhằm thông báo những sự kiện xảy ra hàng ngày về một vấn đề gì đó.

Website đấu giá

• là trang web cho phép người tham gia đấu giá các sản phẩm hoặc các dịch vụ thông qua Internet.

• Người sở hữu trang web không trực tiếp bán hàng của chính mình mà chỉ giúp cho các thành viên liệt kê và trưng bày sản phẩm của họ, đấu giá các sản phẩm và thanh toán chúng. Nó hoạt động giống như là một nơi họp chợ cho các thành viên hoặc các doanh nghiệp sử dụng để đấu giá các sản phẩm và dịch vụ. Website đấu giá nổi tiếng nhất hiện nay có thể kể đến ebay.

Nếu như xem đến đây bạn vẫn chưa thể tìm cho mình ý tưởng để thiết kế một bộ giao diện website đẹp, hãy tham khảo …. Ý tưởng làm cho giao diện website đẹp nhức nhối dưới đây nhé

Rapha.cc với thiết kế kim tự tháp.

Bellroy.com với thiết kế mô tả hình ảnh cụ thể.

Fitbit.com với thiết kế tối giản nhất có thể.

Firebox với thiết kế kiểu liên kết.

Martinasperl.at với thiết kế kiểu kết hợp.

Nguyên lý thiết kế website :

Ý tưởng thiết kế không phải là những ý tưởng trong đầu mà là các ý tưởng đã được phác thảo ra giấy.Sau khi kiểm duyệt ý tưởng, bạn phát triển ý tưởng đó thành tổng thể hoàn chỉnh.

• Trước hết bạn chọn bao nhiêu thành phần sẽ có trong tổng thể và đó là những thành phần nào. Các thành phần này sẽ được định vị và chọn tỷ lệ tương ứng với nhau và tương ứng với toàn bộ tổng thể. Sau đó bạn thêm các đặc điểm phụ vào.

• Giao diện là bộ phận giao tiếp giữa người sử dụng với các nội dung của website, có nhiệm vụ chính là hướng dẫn người truy cập điều khiển và sử dụng website. Nội dung của website được thể hiện trên giao diện bằng các biểu tượng, các nút và các nối kết. Để cho người sử dụng dễ tìm thông tin mà họ mong muốn, menu cần phải thể hiện cấu trúc của nội dung qua vị trí, kích thước và màu sắc của các nút.

• Các biểu tượng đặc trưng sẽ giúp người truy cập dễ dàng liên tưởng đến nội dung của nó. Để có thể dễ dàng nhận ra các nút và các nối kết, bạn nên thiết kế giao diện đơn giản, không cầu kỳ và trang trí quá nhiều làm rối mắt. Đồng thời các nút và các nối kết phải thay đổi hình dạng màu sắc khi người truy cập đưa con trỏ chuột vào hoặc kéo ra. Quan trọng nhất vẫn là tên của nút và nối kết. Đặt tên nút sao cho ngắn gọn nhưng dễ hiểu và hiểu chính xác.

• Thiết kế mẫu trình bày phần thiết kế hoàn chỉnh của từng trang với đầy đủ nội dung và cách trình bày các thành phần. Bạn cũng phải cân nhắc tính thẩm mỹ trong bước này.

Kiểm tra tính khả dụng của website: Để kiểm tra tính khả dụng, bạn phải trả lời 4 câu hỏi sau đây:

• Trang web này là trang web gì?

• Tôi có thể làm gì trong trang web này?

• Tôi sẽ làm điều đó như thế nào?

• Tại sao tôi làm điều đó ở đây?

• Một số yêu cầu cụ thể sau đây sẽ giúp bạn thực hiện dễ dàng hơn:

  • Trang chủ phải có phần giới thiệu ngắn để cho biết đây là website gì.

  • Nội dung ngắn gọn, súc tích, từ ngữ dùng chính xác, không gây nhầm lẫn.

  • Kích thước file tối thiểu

  • Các nút và kết nối dễ nhận biết

  • Font chữ và kích cỡ dễ đọc

  • Không có quá nhiều trang trí

  • Không có quá nhiều thứ mời gọi như: “Click Me”, “Free”, “Hot”,...dễ làm rối mắt người dùng.

  • Tổ chức website chặt chẽ và dễ sử dụng.

  • Sử dụng từ ngữ dễ hiểu.

  • Dễ dàng khám phá các đường link.

  • Thời gian tải về nhanh.

  • Nội dung không có hình ảnh: Nhiều người sử dụng ảnh "GIF" và JavaScripts để tạo các logo và ký tự chạy ngang màn hình hay những gì tương tự. Điều này không chỉ làm tăng thời gian tải về mà còn làm người xem xao lãng nội dung bán hàng của bạn.

  • Dễ theo dõi "quá trình bán hàng".

  • Tương thích với đa số trình duyệt web.

• Khi bạn đã hiểu rõ những việc trên, thì việc thiết kế website của bạn sẽ trở nên dễ dàng và hiệu quả hơn, giúp bạn kinh doanh đạt hiệu quả cao và thu lại được nhiều lợi nhuận.

11 lỗi thiết kế website nhiều người mắc phải nhất :

Bên cạnh những nguyên tắc thiết kế như tôi đã kể trên, trong quá trính thiết kế, bạn cần phải lưu ý thêm 11 điều khiến người sử dụng ghét bỏ website của bạn và cũng chính là 11 lỗi thiết kế website nhiều người mắc phải nhất để tránh mắc phải lỗi thiết kế này:

1. Điều hướng kém, bố cục rối rắm: đừng biến trang web của bạn thành một ma trận mà đến chính bạn nhiều  khi cũng chẳng biết truy cập một đường link mình thích phải đi theo cách nào!

2. Không tìm thấy nút mua hàng: trang web của bạn là một trang bán hàng? Vậy thì đừng quên nút mua hàng. Những người có nhu cầu mua hàng của bạn đa phần muốn kích nút mua hàng thay vì inbox hay gọi điện. Đừng để mất nhiều khách hàng tiềm năng chỉ vì những lỗi nhỏ như vậy.

3. Nhồi nhét quá nhiều thứ vào trang web: trang web của bạn là một trang web về thời trang thế nhưng trên tường lại toàn những bài viết liên quan đến rau sạch hay cách thiết kế website, bạn thấy có hợp lý không? Thêm một điều nữa là hãy tập trung đến nội dung, hãy viết một bài viết tận tâm thay vì 10 bài viết qua loa cho đủ số lượng!

4. Quá nhiều quảng cáo: Chẳng ai muốn truy cập website mà đâu đâu cũng là quảng cáo, bạn không muốn thì người khác cũng không muốn đúng không?

5. Quá nhiều Flash: Flash cũng đáng ghét như những quảng cáo vậy, đừng bắt người truy cập trang web của bạn phải mang một tâm trạng khó chịu khi vào trang.

6. Các form và đăng nhập thiếu hấp dẫn: các form và đăng nhập thiếu hấp dẫn khiến người truy cập không có hứng thú lướt web, điều này làm giảm sự yêu thích trang web của họ.

7. Đăng ký tài khoản mới: một trong những điều khiến người truy cập ghét nhất chính là muốn thao tác cái gì trên web cũng phải thông qua tài khoản. Sẽ thật tệ nếu họ chỉ muốn đọc tin tức hay ngắm nghĩa sản phẩm một chút và đập vào  mắt họ là việc popup đăng kí thành viên lù lù hiện ra. Bạn nên cân nhắc kĩ việc này khi thiết kế trang web của mình.

8. Các trang web xấu và rối: tất nhiên rồi ! một trang web xấu xí và rối rắm sẽ khiến những ai nhìn thấy nó “chạy mất dép” và đảm bảo không quay lại lần sau.

9. Chờ download các file từ các dịch vụ chia sẻ file: rất nhiều trang web hiện nay lợi dụng việc khách hàng download thông tin gì đó trên trang của mình và bắt họ phải download kèm theo một file ứng dụng gì đó mà họ không muốn. Bạn đừng nên “đuổi” người truy cập bằng cách này!

10. Không có chỗ cho FAQs, comment và reply từ phía khách hàng.

11. Trolls, captcha: rất nhiều website bắt người truy cập phải nhập captcha khi họ muốn thực hiện một thao tác nào đó trên trang web. Thật khó chịu!

Các bước thiết kế website 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.

• Một số lưu ý dành cho bạn khi thiết kế:

  • 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…..

Dựa vào nội dung, bạn chia trang Web làm 02 vùng:

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 : 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 Website.

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 Website.

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 Website.

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ẻ,…

Mẫu phác thảo đạt yêu cầu phải trả lời được những câu hỏi như sau:

Bạn nên thiết kế càng nhiều mẫu giao diện càng tốt. Sau khi thiết kế xong, bạn nên treo nó 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 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

Thiết kế website trên máy

Để có thể thiết kế được giao diện trên máy, trước hết bạn cần sở hữu cho mình một phần mềm thiết kế đồ họa ưng ý. Nếu bạn vẫn chưa biết nên sử dụng phần mềm nào để vẽ, hãy tham khảo bài viết sau: Tổng Hợp Những Phần Mềm Thiết kế Cần Có Cho Dân Đồ Họa

Sau khi đã sở hữu cho mình phần mềm thiết kế ưng ý, bước tiếp theo bạn cần phải làm là thiết kế  bản đơn sắc trên máy tính. 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?

Trong bài hướng dẫn này, chúng tôi sử dụng phần mềm photoshop để vẽ trên máy.

• Đầ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.

• Một số chuẩn dùng trong thiết kế đồ hoạ vi tính được định nghĩa như sau:

  • Website 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ầnthâ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 đặttê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?

• 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 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 Website. 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 Website 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 Website, 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.

Sau khi phối màu xong, bạn đã có một giao diện web demo. Bước tiếp theo là sử dụng ngôn ngữ lập trình để biến giao diện web trở thành hiện thực. Chúc bạn thành công!

 Theo: Mèo