Category Archives: thiết kế website

Wireframing là gì? Bạn có thể tạm hiểu nó như là cong ty thiet ke web cấu trúc khung sườn, một bản sơ phác kế hoạch thiết kế web. Wireframing là một bước quan trọng trong tiến trình của bất cứ công việc liên quan thiết kế giao diện nào. Nó chủ yếu cho phép bạn xác định hệ thống thông tin bản thiết kế của bạn, giúp việc lên kế hoạch dễ dàng hơn cho việc bố cục dựa theo ý đồ bạn muốn người xem xử lý thông tin như thế nào. Nếu bạn chưa sử dụng wireframing, đây là lúc bạn nên bắt đầu …

Bước 1: Tìm nguồn cảm hứng

Trước khi bắt đầu bước vào chi tiết hơn nữa, thiet ke website bạn hãy tham khảo thực tế, ví dụ như trang I ♥ wirefames. Bạn có thể lướt qua tổng thể cũng như trực quan để tìm hiểu xem các nhà thiết kế đã tiến hành bước wireframing như thế nào.

Nếu bạn chịu khó liên tục quan sát các nhà thiết kế đã áp dụng wireframe như thế nào đối với các website của họ, bạn sẽ dần hình dung ra trong đầu làm thế nào tạo wireframe cho riêng mình, nó sẽ giúp bạn hệ thống thông tin trên giao diện.

Bước 2: Thiết kế các quy trình của bạn

Thiết kế là một quy trình hệ thống và vì thế thiết kế website công ty   các nhà thiết kế khác nhau có cách tiếp cận wireframing và những biên dịch của nó thành hình ảnh và các đoạn mã theo nhiều cách khác nhau. Bạn phải tự tìm ra quy trình nào đã mang lại cho bạn sức mạnh và quy trình nào mà bạn cảm thấy thoải mái nhất để làm việc.

Ngày nay, đa số các nhà thiết kế không còn ưa chuộng các công cụ tạo ra các bản phác thảo (sketch) mà grid framework  mới là sự lựa chọn của họ.Grid framework nói một cách đơn giản là hệ thống khung sườn tạo sẵn cong ty thiet ke website theo chuẩn 12 cột (12-column), 16 cột hoặc 18 cột để làm nền tảng tạo wireframe. Các hệ thống grid framework được dựng sẳn chủ yếu dựa vào CSS/HTML

Bước 3: Lựa chọn công cụ

Phần mềm chuyên nghiệp:

balsamiq  (balsamiq.com): hỗ trợ tạo phác thảo (sketch), mẫu thử nghiệm (mock-up), balsamiq cũng cung cấp thư viện các phần tử web có thể tương tác bằng cách kéo thả.axure (axure.com): một trong những chương trình chuyên nghiệp để tạo phác thảo, bản mẫu  (wireframing/prototyping). Tuy nhiên phần mềm dich vu thiet ke web chỉ hỗ trợ cài đặt trên Window, bạn có thể dùng phần mềm Omnigraffle thay thế trên Mac.

Phần mềm trực tuyến

Như đã nói ở trên, bạn có thể chọn lựa bất cứ phần mềm nào mà bạn cảm thấy thoải mái và quen thuộc để làm việc ở giai đoạn này. Với riêng kinh nghiệm của mình, tôi khuyên bạn nên sử dụng các phần mềm quen thuộc như In Design, Corel Draw, Illustrator…

Bước 4 : thiết lập Grid

Về lý thuyết các bạn có thể tìm đọc chuyên sâu trong một số bái viết khác về grid system hay grid framework. Bạn có thể hiểu đơn giản grid là một cấu trúc được thiết kế sẵn theo dạng lưới dùng để làm nền tảng cho việc bố trí các phần tử web trên layout.Như đã nói ở trên có một số grid framework phổ biến hiện nay như 960 Grid System, Boostrap, Foundation, Skeleton … bạn có thể tải về để làm wireframe cho thiết kế layout của mình.

Điểm thuận lợi thứ nhất về mặt chi phí triển dich vu thiet ke website khai bảo dưỡng: vì khi triển khai web đáp ứng là chỉ một phiên bản duy nhất chạy nhất quán trên mọi thiết bị do đó khi phát sinh lỗi hay nâng cấp thì chúng ta chỉ chi phí một lần cho một phiên bản này . Còn nếu bạn có 2 phiên bản một là phiên bản web chạy trên desktop và một phiên bản Mobile chạy trên di động thì chi phí nâng cấp và bảo dưỡng cấp tang gấp đôi.

Điểm thuận lợi thứ hai là về SEO và quản trị nội dung: khi bạn dùng RWD thì chúng ta chỉ có duy nhất một URL và chỉ một phiên bản nên khi chúng ta làm SEO thì chí phí giảm một nữa và hiệu quả tang cao . Ngoài ra việc công ty thiết kế web cập nhật nội dung cũng được tiết kiệm rất nhiều thời gian và công sức .

Điểm thuận lợi thứ ba về thương hiệu: việc nhận diện thương hiệu sẽ được nhất quán khi chúng ta dùng RWD khi các đơn vị doanh nghiệp làm thương hiệu . Không có sự khác biệt về thiết kế giúp khách hàng người dùng dễ dàng nhận biết thương hiệu của công ty.

Điểm thứ tư về tính tiện ích: Sự thống nhất về thiết kế làm cho người dùng không bỡ ngỡ và sử dụng quen thuộc dễ dàng và việc điều hướng trang cũng hiệu quả không làm cho người dùng bất tiện , duy trì sự trãi nhiệm và thiết kế website  giữ chân khách hàng lâu hơn trên web cũng công ty.

Những Thách Thức

Thách thức thứ nhất về Thời gian: việc triển khai thiết kế web đáp ứng cũng tốn nhiều thời gian công sức hơn web thường về mặt kỹ thuật và thiết kế. Do việc làm bố cục , định dạng hiện thị cho nhiều thiết bị di động khác nhau mà hiện trên thị trường có nhiều chủng loại.

Thứ hai là làm giảm thông điệp truyền tải có ý nghĩa: việc lược dữ liệu , giảm kích thước hình ảnh và nén dữ liệu cũng làm mất đi các thong tin ý nghĩa muốn thể hiện và truyền bá đến người dùng. Do đó cần một đòi hỏi thiet ke website chuyen nghiep tính thẫm mỹ tinh tế của người thiết kế thứ thiệt là sắp xếp và Css lại sao cho nội dung được hiện thị đẹp nhất trên mọi thiết bị.

Thách thức tiếp theo là Thanh Menu Điều Hướng (Navigation bar): Thanh điều hướng là yếu tố quan trọng tạo sự thẫm mỹ và chuyển trang hợp lý giúp giữ chân khách hàng và tang độ tiện nghi cho người dùng. Nếu một thanh điều hướng có nhiều lớp và khá phức tạp trên desktop và nó sẽ đem lại nhiều phiền tối khi xem web trên thiết bị di động khi chúng ta không biết cách giải quyết chúng.

Tóm lại chúng ta cần cân nhắc và đong đếm điểm tốt hơn :

Không có gì là hoàn hảo tuyệt đối , có ưu thì phải có khuyết , điều quan trọng là chúng ta áp dụng phương pháp nào gần đến hoàn chỉnh , thiet ke web tức là điểm ưu nhiều hơn điểm khuyết và ít lỗi nhất thì chúng ta dùng . thiết kế web đáp ứng cũng vậy , chúng ta cần kiểm tra và điều chỉnh thiết kế trên nhiều thiết bị càng tốt để sự hiển thị của thiết kế này được tối ưu và phát huy vai trò và tính hiệu quả của nó.

Responsive Web Design là thiết kế web chuyên nghiệp xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.

Responsive Web có rất nhiều lợi ích. Đầu tiên có thể kể đến Responsive Web làm giảm tỷ lệ thoát nhờ tính đa dạng về giao diện trên cùng 01 thiết bị như chế độ dọc màn hình hoặc khi xoay ngang màn hình. Nếu bạn sở hữu một website có một chỗ đứng khá cao trên kết quả tìm kiếm SEFPs, nhưng website này hoạt động không hiểu quả trên các thiết bị di động, gây phiền toái cho khách truy cập, công ty thiết kế web không làm họ hài lòng thì tỷ lệ thoát sẽ được Google xem tỷ lệ thoát này là một dấu hiệu cho thấy website này không hữu ích với người dùng, dẫn đến sự sụt giảm xếp hạng.

Một Responsive Web sẽ biểu diễn nội dung một bài viết cũng lấy dữ liệu như trên phiên bản PC tuy nhiên cách hiển thị và bố trí là khác nhau, có thể thân thiện với người dùng hơn, họ có thể đọc vào lưu trữ cũng như dễ dàng tìm thấy mọi thông tin hữu ích nhanh chóng hơn. Điều này làm cho họ ở lại website lâu hơn, có thể hứng thú và sẽ quay lại sau này. Trong trường hợp này, tỷ lệ thoát sẽ giảm xuống, ngoài ra có thể sẽ tăng thời gian truy cập.

Đối với website đa giao diện, thiết kế website  người làm SEO sẽ gặp khó khăn đầu tiên là phải xây dựng thêm bố cục website, đồng nghĩa với việc xây thêm một website nữa cho thiết bị di động. Không phải tất cả các yếu tố đều phù hợp với data của giao diện phiên bản PC. Chắc cũng vì lẽ này mà các website có từ 2 giao diện trở lên thường không có xếp hạng tốt trên Google. Responsive Web giúp bạn bảo toàn được số lượng backlink hiện có, nghĩa là bạn đang SEO trên một website duy nhất bao gồm cả PC và mobile. Các liên kết của bạn đều sẽ được trỏ thiet ke web cong ty đến một url duy nhất của Responsive Web, điều này tạo thứ hạng tốt trong SEFPs.

Hơn nữa, khi bạn sử dụng Responsive Web, khi chia sẻ thông tin lên các mạng xã hội hay public lên bất kỳ nơi đâu, bạn cũng chỉ cần dùng 1 url duy nhất. Ngay cả khi bạn ngừng cung cấp 1 thông tin nào đó thì các thiết bị di động khác ngoài PC sẽ không thể xem được các url này.Như đã nói ở trên, thiết kế web công ty Responsive Web dùng để bố cục lại giao diện trang web cho tương thích với nhiều loại kích cỡ màn hình khác nhau. Do đó sẽ tạo được hiệu ứng tốt trên trải nghiệm của người dùng.