Thiết kế website doanh nghiệp

Thiết kế website doanh nghiệp

Khi tiến hành tìm kiếm đơn vị đối tác thiết kế website, có nhiều cách để hoàn tất dự án thiết kế. Một dự án có thể được chia nhỏ ra cho từng đơn vị hoặc có thể giảm bớt công đoạn bằng cách thuê hẳn 1 đơn vị thầu trọn gói thiết kế website từ A-Z.

Thiết kế website doanh nghiệp

Những đơn vị thuê cung cấp dịch vụ thiết kế web trọn gói từ A-Z đều có những gói thiết kế chuẩn để cung cấp cho doanh nghiệp. Như vậy, bài viết này nhằm giới thiệu các tính năng của 1 gói dịch vụ thiết kế website chuẩn là bao gồm những tính năng gì, cách thức hoạt động cũng như đưa ra 1 ví dụ cụ thể thông qua gói thiết kế web chuẩn của ADC Việt Nam.

Gói Thiết kế website doanh nghiệp có 2 đặc tính:

   - Tính năng chuẩn

    - Giao diện chuẩn

   Bài viết này tập trung bàn về những tính năng chuẩn của gói thiết kế website doanh nghiệp.

Tính năng chuẩn của gói Thiết kế website doanh nghiệp:

Tính năng được gọi thế nào là chuẩn phụ thuộc vào loại hình cũng như phương thức hoạt động của 1 doanh nghiệp. Một doanh nghiệp bán hàng chủ yếu offline, chỉ cần đưa hình ảnh sản phẩm online và một doanh nghiệp bán hàng chủ yếu online qua mạng hoặc một trung tâm, trường học cần một nơi, diễn đàn để các học viên trao đổi thảo luận với nhau sẽ dẫn đến những cách thiết kế danh mục tính năng (function list) khác nhau.

Tuy nhiên, ở đây ta chỉ tập trung bàn đến gói thiết kế web chuẩn dành cho doanh nghiệp (company website) và do đó tập trung những tính năng mà một doanh nghiệp sẽ cần để giới thiệu, quảng bá hình ảnh của doanh nghiệp mình lên môi trường Internet.

Đối với website dạng này, điều quan trọng là thiết kế phải cho phép doanh nghiệp chuyển tải đầy đủ thông tin, hình ảnh của công ty mình lên website.

Chính vì thế, đâu tiên doanh nghiệp cần một trang mang tính chất giới thiệu doanh nghiệp để cung cấp đôi dòng về công ty mình.

Trang giới thiệu

Thiết kế website doanh nghiệp

Đây là trang web mang nội dung giới thiệu tổng quan về doanh nhiệp của bạn, trang này có thể bao gồm:

·        Ngành nghề, lĩnh vực hoạt động

·        Tiêu chí hoạt động, sứ mệnh của doanh nghiệp

·        Lịch sử hoạt động

·        Tin tức, thông báo của doanh nghiệp

Thêm vào đó, một trang thông tin doanh nghiệp không chỉ dừng lại ở mục đích giới thiệu thông tin về doanh nghiệp nhưng còn phải cung cấp 3 nội dung trọng yếu mang tính chất quyết định đến sự phát triển của doanh nghiệp đó là:

Thông tin liên hệ

Thật trớ trêu khi một khách hàng sau khi đã bị thuyết phục bởi lịch sử hoạt động, phương hướng tổ chức, điều hành của doanh nghiệp lại không thể tìm ra bất kỳ thông tin nào để liên lạc với doanh nghiệp ấy.

Chính vì thế, trên website của mình, doanh nghiệp nên chèn thông tin liên hệ vào website ở một nơi nào đó thật dễ tìm như thanh menu ở trên cùng (top menu), vị trí chân trang web (footer). Hơn nữa, trang liên hệ cần chứa càng nhiều thông tin để liên hệ với công ty càng tốt, không chỉ có email, điện thoại bàn, địa chỉ liên hệ nhưng nếu có thể, quý doanh nghiệp nên cung cấp 1 hoặc nhiều số HOTLINE mà khách hàng có thể trực tiếp liên hệ với đại diện của doanh nghiệp 24/24. Như thế sẽ làm tăng tính tương tác trực tiếp giữa doanh nghiệp với khách hàng.

Thông tin về dịch vụ, sản phẩm mà doanh nghiệp cung cấp

Một website được gọi là đầy đủ về mặt thông tin cần phải cho phép quản trị cập nhật, upload nội dung sản phẩm, dịch vụ của mình. Nội dung cập nhật sẽ bao gồm hình ảnh, văn bản, có thể có flash và video để làm trang web thêm sinh động.

Tuy nhiên, đến đây ta có thể đặt vấn đề liệu tính năng dịch vụ, sản phẩm này có cho phép khách truy cập mua hay đặt hàng trực tuyến (online ordering) không?
 

Hoặc đi xa hơn nữa, liệu nó có tính năng giỏ hàng (shopping cart) của 1 gian hàng trực tuyến (online store) cho phép khách hàng đặt mua 1 lúc nhiều món  hàng không.
 

Một lần nữa, câu trả lời thuộc về nhu cầu của phía doanh nghiệp mà cụ thể là định hướng bán hàng và định hướng tiếp thị sản phẩm của doanh nghiệp.

Nếu khách hàng cần phải đến tận nơi để mua hàng hoặc phải gặp trực tiếp để tư vấn về dịch vụ thì việc cho phép đặt hàng qua website có lẽ không cần thiết lắm và thay vào đó, quý doanh nghiệp có thể sử dụng tính năng liên hệ để thay thế tính năng đặt hàng online cho website.

Tuy nhiên, nếu doanh nghiệp chủ yếu bán mặt hàng, dịch vụ của mình online thì tính năng đặt hàng trực tuyến là rất quan trọng và không thể thiếu. Tuy nhiên, đa phần các doanh nghiệp VN hiện nay chỉ dừng ở hình thức bán hàng trực tiếp offline và quảng bá hình ảnh sản phẩm, dịch vụ của mình lên website chứ khá ít doanh nghiệp tổ chức mua bán giao dịch từ A-Z qua website.

Hồ sơ năng lực của doanh nghiệp

Điểm tiếp theo mà doanh nghiệp cần lưu ý chính là hồ sơ năng lực của doanh nghiệp. Hồ sơ năng lực này được thể hiện dưới nhiều dạng trên website như:

·        Danh sách dự án đã thực hiện

·        Danh sách khách hàng tiêu biểu

·        Ý kiến phản hồi của khách hàng

·        Bề dày kinh nghiệm và kỹ năng chuyên sâu của đội ngũ nhân viên

Có thể ví von hồ sơ năng lực của công ty như là bảng đánh giá sức khỏe của quý công ty, hồ sơ năng lực càng tốt thì công ty đó càng ...... "khỏe". Công ty càng thu thập và tạo dựng một hồ sơ thật tốt, thì khả năng lọt vào cặp "mắt xanh" của khách hàng càng cao.

Điều này rất quan trọng trong việc thuyết phục khách hàng sử dụng sản phẩm, dịch vụ của quý công ty. Khi danh sách, hồ sơ năng lực của công ty bạn tăng lên, quý doanh nghiệp nên tìm cho mình những khách hàng hoặc dự án thật nổi bật, đó là những dự án lớn hoặc dự án của những đối tác, khách hàng lớn, "tai to mặt bự" trong ngành để có thể gia tăng uy tín cho sản phẩm, dịch vụ của công ty mình.

Thêm vào đó, khi bạn có thể ký được những hợp đồng cung cấp dịch vụ hoặc phân phối sản phẩm lớn, cho những khách hàng quan trọng, tiêu biểu thì hãy cố gắng làm thật tốt để lấy ý kiến phản hồi từ phía khách hàng để có thể đưa lên website và làm tăng độ tin tưởng khi khách truy cập vào xem website của quý công ty.

2. Giao diện website
Điều hướng website

Khi nhắc đến tính điều hướng trong website, ta nghĩ ngay đến cách bài trí menu sao cho người sử dụng có thể dễ dàng di chuyển qua lại giữa các trang web của mình. Chính vì thế, nhà thiết kế phải hiểu tâm lý cũng như thói quen của người dùng để có thể điều hướng website cho hợp lý.

Thói quen đọc web

Thói quen khi ta đọc một webpage hay một bài báo, một trang sách thì ta luôn đọc theo thứ tự từ trái qua phải và từ trên xuống dưới. Do đó, các menu nằm ở phía trên, bên trái đều được nhìn thấy trước hết và nhà thiết kế cần lưu ý đưa những menu quan trọng hoặc thường dùng vào góc trên bên trái để visitors có thể tìm thấy một cách dễ dàng.

Click

Một điểm khác khá quan trọng khi điều hướng là số click chuột đến nội dung cần quan tâm. Ví dụ, một khách hàng muốn xem thông tin giới thiệu và các gói thiết kế website của ADC Việt Nam chỉ cần click 1 lần vào menu Giới thiệu hay các gói thiết kế mà không cần phải "chạy lòng vòng" để tìm thông tin.

Việc này đem lại nhiều thuận lợi cho người dùng và làm website của doanh nghiệp thêm thân thiện (user-friendly) khi mà người dùng có thể thấy ngay thông tin cần tìm chỉ qua 1 click chuột. Do đó, nhà thiết kế cần lưu ý link những thông tin quan trọng sao cho người dùng có thể truy cập chỉ qua 1 click chuột.

Bố cục của website

Bố cục của website có thể nói là muôn hình vạn trạng, tuy nhiên ta có thể phân chia website thành 5 phần chính

·        Top Extra

·        Top Menu

·        Header Banner

·        Main Content

·        Footer

·        Top Extra

Thường là những menu mang tính chất bổ sung thêm cho website và do đó không nên xem nó như một vị trí trọng yếu của website. Vị trị top ở đây có thể được canh lề TRÁI, PHẢI hoặc GIỮA tùy theo từng thiết kế nhưng nó có 1 điểm chung là thành phần đầu tiên của website.

Top Menu

Top Extra cũng có thể được thay thế bằng Top Menu khi website không cần bất kỳ menu bổ sung nào. Khi này thì Top Menu và Top Extra là một. Ngoài ra thì Top Menu được xem như là một menu chính của website, chứa các menu quan trọng nhất và cơ bản nhất mà doanh nghiệp muốn gửi gắm đến người xem, nó góp phần định nghĩa khung sườn của 1 website, cho phép người dùng có một cái nhìn tổng quát về website đó.

Header Banner

Đây là banner chính của website, một thành phần rất quan trọng thể hiện nét đặc trưng riêng của doanh nghiệp. Hình ảnh trong banner có thể đập ngay vào mắt giúp visitors nhận ra ngành nghề của doanh nghiệp là gì và nhờ đó giúp chuyển tải hình ảnh đến với người dùng một cách rõ nét hơn. Tuy nhiên, không phải lúc nào header banner cũng là phương pháp duy nhất, hữu hiệu nhất cho việc này vì ngoài banner, nhà thiết kế website hoàn toàn có thể sử dụng các phương tiện khác như hình ảnh bài viết, màu sắc website, hoa văn trên web cũng như cách dàn trang website để gột tả nét cá tính của trang web.

Main Content

Đối với 1 website động, main content là nội dung chính của website và là thành phần được thay đổi nhiều nhất khi visitors lướt web. Top Extra, Top menu, Header Banner có thể không thay đổi nhưng Main Content hầu như luôn thay đổi sau mỗi lần click chuột.

Chính vì thế, đặc tính quan trọng nhất của nó là làm sao để vừa đảm bảo chất lượng mỹ thuật của website, vừa có thể đáp ứng tính đa dạng, phong phú của nội dung.

Ví dụ: trong 1 website, nếu font chữ quá to thì tuy rất dễ đọc nhưng sẽ thô và phá vỡ cân bằng thẩm mỹ của website. Tuy nhiên, nếu font hơi nhỏ quá thì cho dù có gọn gàng, đẹp đẽ nhưng khi visitors phải đọc những bài viết dài sẽ tạo cảm giác khó khăn, nhức mắt.

Bố cục Main Content có thể chỉ là 1 khung lớn chứa tất cả nội dung trong đó hoặc nó cũng có thể được chi thành nhiều khung, được sắp sếp vào 2 hoặc 3 cột.

Cột bên trái thường chứa Left Menu chủ yếu mang tính điều hướng như danh sách sản phẩm, liên kết website, hỗ trợ trực tuyến, bản đồ, địa chỉ liên hệ, ...

·        Cột giữa chứa nội dung cần hiển thị.

·        Cột phải chứa nội dung hỗ trợ 

·        Footer

Còn được gọi là phần chân (footer) của website. Thông thường được sử dụng để hiển thị các nội dung như

·        Địa chỉ, điện thoại liên hệ

·        Copyright website

·        Các loại giấy phép vận hành website

3. Kích thước website

Kích thước của website có 2 dạng chính là kích thước cố định (fixed layout) và kích thước lưu động (fluid layout). Ngoài ra còn có dạng bổ sung thứ 3 là kích thước co giãn (elastic layout).

Kích thước cố định là kích thước mà chiều rộng (width) của website được thiết lập theo 1 thông số cố định: Ví dụ 800px, 1000px, 960px, 1260px, v.v.v

Kích thước lưu động là kích thước được tính theo thông số tỉ lệ % thay vì thông số cố định px và do đó, chiều rộng của website co giãn theo kích thước của cửa sổ trình duyệt (browser windows)

Kích thước co giãn (elastic layout) là dạng kết hợp của 2 dạng trên

Kích thước cố định

Đối với kích thước cố định, vì chiều ngang của website được thiết lập một con số cố định nên các website này không thay đổi kích thước theo độ phân giải màn hình mà vẫn giữ nguyên một kích thước cố định. 

Ví dụ:
Đối với website có chiều rộng 800px thì máy tính có độ phân giải 800x600 sẽ thấy website hiển thị toàn màn hình, lắp đầy màn hình khi trình duyệt ở chế độ maxium.

Tuy nhiên, khi máy tính có độ phân giải cao hơn như 1024 hoặc 1280 thì website không còn hiển thị toàn màn hình nữa nhưng sẽ dư ra một khoảng trông bên hông của website.

Đối với fixed layout, kích thước chuẩn khi được sử dụng bởi 90% các thiết kế website  mới là 960px vì kích thước này phù hợp với màn hình có độ phân giải 1024 hoặc cao hơn và độ phân giải 1024 được xem là độ phân giải chuẩn của máy tính bởi hầu hết các nhà sản xuất phần cứng cũng như nhà thiết kế.

Hầu hết các nhà thiết kế thích sử dụng fixed layout hơn là fluid layout vì đối với fixed layout,  graphic designers (đồ họa viên) có thể tự do thực hiện ý tưởng của mình mà không sợ làm khó cho bộ phận lập trình. Hơn nữa, fixed layout đảm bảo kết quả cho ra là thống nhất trên mọi độ phân giải, nhà thiết kế có thể kiểm soát kết quả hiển thị với user.

Tuy nhiên, bên cạnh những ưu điểm của mình,  fixed layout  vẫn có những khuyết điểm mà ta có thể tổng hợp như sau:

Ưu điểm

Trên phương diện thiết kế, fixed layout dễ thiết kế và triển khai hơn vì nhà thiết kế web có thể kiểm soát kích thước website của minh

Chiều rộng website là cố định và giống nhau trên tất cả trình duyệt bất chấp độ phân giải màn hình. Vì thế, các thành phần HTML có chiều rộng cố định được bố cục dễ dàng hơn, nhanh hơn

Được hỗ trợ bởi nhiều trình duyệt hơn (khi không cần sử dụng thuộc tính CSS như min-width, max-width)

Ngay cả khi website được thiết kế với độ phân giải 800x600, nội dung website vẫn có thể được đọc dễ dàng ở những máy có độ phân giải cao hơn rất nhiều.

Khuyết điểm

Website với kích thước cố định có thể tạo ra nhiều khoảng trắng không cần thiết ở bên hông website khi xem ở độ phân giải lớn, tạo nên cảm giác mất cân đối, thiếu tỉ lệ hài hòa và xung khắc với một số nguyên lý thiết kế website.

Nếu thiết kế website với fixed width cao hơn độ phân giải màn hình có thể làm xuất hiện thanh cuộn ngang (horizontal scrollbar) gây khó khăn cho việc lướt web.

Một số thiết kế sử dụng kích thước cố định

Kích thước lưu động (Fluid Layout)

Đối với kích thước lưu động (fluid layout / liquid layout), các thành phần trong website có chiều rộng là tỉ lệ % thay vì đơn vị cố định px . Nhờ đó, website có thể co giãn theo độ phân giải của màn hình.

Fluid layout hay còn gọi là liquid layout sử dụng tỉ lệ % cho các thành phần HTML của nó và hạn chế tối đa việc sử dụng px. Do đó layout có thể thay đổi theo từng độ phân giải nhất định.

Cũng như fixed layout, fluid layout có ưu, khuyết điểm tương đương như:

Ưu điểm

Thân thiện hơn với người dùng vì có thể tự điều chỉnh tùy từng độ phân giải

Khoảng trắng dư thừa không quá khác biệt cho dù trình duyệt và độ phân giải RẤT khác nhau. Điều này giúp tạo nên sự cân bằng tốt hơn fixed layout

Nếu được thiết kế tốt, fluid layout có thể chấm dứt tình trạng thanh cuộn ngang (horizontal scrollbar) ở máy có độ phân giải quá thấp

Khuyết điểm

Hạn chế hơn và khó khăn hơn trong việc sử dụng graphics để tô điểm cho website của mình

Giao diện có thể hiển thị tốt trên máy nhà thiết kế nhưng bị sai khi hiển thị trên máy người dùng vì nhà thiết kế khó kiểm soát bố cục sử dụng fluid layout hơn là fixed layout

Hình ảnh, video hoặc các thành phần web cần phải có chiều rộng cố định có thể gặp không ít khó khăn, trục trặc khi kết hợp với các thành phần có chiều rộng co giãn

Với những máy có độ phân giải CỰC LỚN, mặc dù website có thể tự co giãn nhưng nếu nội dung bên trong website không đủ để lắp đầy bố cục thì nó có thể tạo ra rất nhiều những khoảng trắng không cần thiết

Một số thiết kế sử dụng kích thước lưu động (fluid layout)

4. Typography trong thiết kế web

Typography là một đặc tính nâng cao của gói thiết kế web chuẩn, không phải là đặc tính thông dụng.

Typography trong nghệ thuật

Typography là nghệ thuật sử dụng các phông chữ, cỡ chữ khác nhau và những cách điệu cần thiết từ chữ cái, con số kết hợp với công cụ kỹ thuật số để tạo ra những hình ảnh có hiệu quả thẩm mỹ hoặc chuyển tải một ý nghĩa nhất định. Dưới đây là một số tác phẩm typography.

Typography trong thiết kế web

Trong lĩnh vực thiết kế website, typography ám chỉ những định dạng (format) của văn bản. Điểm khác biệt của những định dạng này so với định dạng văn bản thông thường là nó không chỉ chứa đựng nội dung thông tin nhưng còn diễn đạt nội dung mỹ thuật, giúp tô điểm cho website, làm cho thiết kế website của bạn thêm màu sắc và cá tính.

Typography cho website đã bắt đầu từ những năm đầu tiên mà www ra đời bởi Tim Berners-Lee, ngay từ những ngày của IE phiên bản 1, web typography tốt hầu như chỉ là những từ sử dụng "phép nghịch hợp" như ánh sáng tối, nhạc cổ điển mới, người chết đang sống, thực tại ảo, ...

Ngày nay, mọi thứ đã thay đổi đáng kể, các trình duyệt hiện đại không chỉ hỗ trợ hình ảnh nhưng với những hiệu ứng CSS3 / HTML5 hỗ trợ, ta có thể sử dụng typography để biến website thành những thiết kế sống động, không chỉ đơn thuần là những dòng chữ bình thường, đơn điệu.

Nên lưu ý Typography bao gồm nhiều khía cạnh, trong đó có việc phải chọn font chữ, cỡ chữ và typeface (tập hợp các font, size đi với nhau) để tạo nên nét 'cá tính' cho trang web của mình. Tuy nhiên, chỉ dừng lại ở font chữ thôi thì chưa đủ mà nó còn cần nhiều hơn thế, theo 1 “tin hành lang” thì thậm chí những con khỉ được đào tạo có thể xác định font Helvetica một cách dễ dàng (90%).

Typography không chỉ đơn thuần là font chữ nhưng là sự tổng hợp của 7 yếu tố:

·        Font (font chữ)

·        Colors - Icons (màu sắc và icons)

·        Contrast (độ tương phản)

·        Size (kích cỡ)

·        Hierarchy (cấu trúc)

·        Space (không gian)

Sau khi đã xác định những yếu tố này và những mẫu Typography thích hợp được tạo ra, chúng sẽ được gắn vào những thẻ HTML thông dụng cũng như những CSS classes chuyên biệt để webmaster (quản trị web) có thể sử dụng dễ dàng trong các web text editor (trình soạn thảo văn bản web).

Share this

Related Posts