Sunday, 4. May 2008, 04:57:44
thiết kế web, web design, Designchapel
Một Web site tốt là một Web site đạt độ hài hoà cả yếu tố thẩm mỹ và tính tiện dụng. Tuy nhiên việc phối hợp hài hoà lại không phải là chuẩn trong thiết kế. Trên thế giới rất nhiều site nổi tiếng chỉ thực hiện tốt hoặc yếu tố thẩm mỹ hoặc tính tiện dụng nhưng vẫn có thương hiệu số tốt.
Em xin giới thiệu với các bác một Site chỉ tập trung vào yếu tố thẩm mỹ, không quan tâm người sử dụng dùng có dễ dàng hay không. Điều này dẫn đến người sử dụng chỉ vào Web site lần đầu tiên và có thể không bao giờ tiếp tục vào, dù cho vậy đây vẫn là một Web site rất đẹp với những tác phẩm đồ hoạ tuyệt vời
.
Website được trình bày y hệt như hình dưới đây. Chiều cao của trang Web theo đo đạc của em thì dài khoảng 1 mét, đồng thời định hướng xem profile thì bố trí hơi stupid.
Mời các bác cùng chiêm ngưỡng "tác phẩm" Website Designchapel
Read more...
Saturday, 3. May 2008, 16:13:35
thiết kế web, web design
Lang thang trên net, tình cờ Sally tìm được công cụ màu sắc rất thú vị, ngay lập tức tớ phải cập nhật lên Blog để chia sẻ với các bạn
Công cụ hướng dẫn về màu sắc, độ tương phản và kích cỡ. Để xem được cái này các bạn phải cài Adobe Flash Player đó nha; để xem nội dung thì phải nhấn vào các nút fisheye.
Nếu đọc không hiểu thì cứ tự nhiên hỏi Sally nhé. Sally dạo này hơi bị lên tay đó nha, ấy thế mà bác John vẫn cứ mắng là chỉ giỏi ăn thôi
Read more...
Wednesday, 30. April 2008, 07:00:51
web developement, web site, web design, quy trình
...
Quy trình thiết kế GUI cho Web site dựa trên quy trình IWP 1.1 của iGURU Việt Nam.
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.
Xem Creative Commons tại
http://my.opera.com/iguru/blog/2008/03/09/ban-quyen-creative-commonsRead more...
Wednesday, 23. January 2008, 10:41:50
pr, ecommerce, emarketing, brand
...
Tại đây tổng hợp các sách điện tử do iGURU tự biên soạn hoặc sưu tập. Nếu các bạn có sách hay và muốn chia sẻ với cộng đồng trực tuyến, xin vui lòng gửi thư cho iGURU, chúng tôi sẽ cập nhật vào danh sách dưới đây.
Các bạn cũng có thể xem các cuốn sách chuyên sâu về Internet tại
http://www.iguru.vn/forumRead more...
Friday, 23. November 2007, 13:55:53
web design
Tất cả các thành tố của thanh định hướng đều có một câu chuyện về nó. Thanh định hướng gửi tới người khai thác thông tin các thông điệp: công ty sẽ như thế nào, người sử dụng sẽ ra sao và sẽ xảy ra điều gì với người sử dụng. Người dùng đọc thanh định hướng như cách họ đọc một thực đơn, nó hướng kinh nghiệm sử dụng Web site của người khai thác vào Web site của bạn.
Trong bài trước chúng ta nói về mục đích của thanh định hướng trong bài này chúng ta nói về nguyên tắc của Thanh định hướng.
Có ba điều quan trọng nhất trong thanh định hướng đó là địa điểm, địa điểm và địa điểm. Trong bài viết tôi sẽ đi sâu vào luận điểm này để làm sáng tỏ 03 kiểu địa điểm.
Kiểu địa điểm thứ nhất là nơi hiển thị của thanh định hướng trong trang.
Thanh định hướng chính luôn nằm trang trọng tại vị trí nổi bật nhất của trang Web với hình ảnh nổi bật và đặt gần trên cùng của trang Web. Chính vì vậy bạn luôn có thể phát hiện ra chúng mỗi khi muốn di chuyển tới một nội dung khác. Các đối tượng thứ cấp có thể hiển thị bên dưới thanh định hướng chính, bên tay trái hoặc gần thanh định hướng chính với cấp độ nổi bật thấp hơn. Các thanh định hướng bổ sung khác có thể nằm bất cứ nơi nào trên trang Web, tuy nhiên không nổi bật bằng hai cấp độ chính và thứ cấp. Tuỳ từng vị trí mà thanh định hướng có mức độ gây ảnh hưởng tới khả năng hiểu mối quan hệ giữa địa điểm và sự quan trọng của các vùng liên quan của người khai thác.
Kiểu địa điểm thứ hai là vùng của site nơi mà người sử dụng có thể truy cập từ thanh định hướng.
Một số danh mục của thanh định hướng hiện ra cố định trong mọi trang của site, trong khi một số danh mục hiển thị theo ngữ cảnh, có nghĩa chỉ hiển thị trong một số ngữ cảnh, dựa trên nhu cầu riêng của người sử dụng tại một số vùng của site. Trong một số trường hợp, thành tố ngữ cảnh dựa trên kiến thức về người sử dụng của chúng ta, ví dụ một số người dùng có thể tuỳ biến sự hiển thị của các thành tố tạo nên thanh định hướng.
Kiểu địa điểm thứ ba là những nơi trên site mà thanh định hướng trỏ đến.
Nơi các thành tố hướng đến cũng quan trọng như vị trí đặt thanh định hướng, một số thanh định hướng cho phép người khai thác truy cập toàn bộ Web site, không khi một số thanh định hướng chỉ cho phép di chuyển tới một số trang.
Khi kết hợp ba kiểu địa điểm này với nhau, chúng ta có một cái nhìn chính xác về hoạt động của thanh định hướng. Hầu hết các thanh định hướng chính đều cần đáp ứng các nguyên tắc sau: nơi đặt phải nổi bật, có khả năng truy cập đồng bộ từ nhiều trang và trỏ đến toàn bộ các trang trong web site. Các thanh định hướng thứ cấp tối thiểu cần đáp ứng việc hiện ra theo ngữ cảnh và giới hạn việc truy cập. Sự đa dạng của các thanh định hướng cung cấp cho người dùng một cuốn từ điển phong phú để kết nối tới nội dung trong site.
Vậy còn web site của bạn, câu chuyện của thanh định hướng như thế nào?
Sally
Friday, 23. November 2007, 13:23:12
web design
Nguyên tắc thiết kế Thanh định hướng (Navigation)
Nguyên tắc này không chỉ áp dụng cho những cá nhân làm thiết kế Web, nó bao hàm giải pháp cho người sử dụng Web site tìm kiếm thông tin dễ dàng hơn, sử dụng đơn giản hơn, đặc biệt với các trang Thương mại điện tử việc áp dụng Nguyên tắc thiết kế này giúp Khách hàng tìm kiếm mặt hàng nhanh chóng và dễ dàng.
1. Cho tôi biết tôi đang ở đâu mọi lúc
Thật khó khăn khi khi người sử dụng vào một web với khối lượng thông tin khổng lồ được chia ra nhiều hạng mục khác nhau mà không có thông báo họ đang đứng ở đâu.
Việc thông báo cũng nên được phân cấp theo cấu trúc nội dung của web site. Ví dụ:
Bạn nên đính kèm liên kết vào từng cấp độ trong mục định hướng. Điều này giúp người đọc chuyển giữa các mục của nội dung đơn giản hơn.
Với các nút Tab bạn nên có sự thay đổi về màu sắc, chữ, hiệu ứng,... đối với Tab đại diện cho một mục nào đó bạn đang truy cập.
Ví dụ: thanh định hướng của Apple, giao diện mới
2. Phân biệt siêu liên kết với nội dung một cách rõ ràng
Tách rời định hướng khỏi nội dung bao gồm các kỹ thuật nhóm, kiểu thiết kế, cách về mặt vật lý.
Khi siêu liên kết nằm trong nội dung bạn nên sử dụng kiểu thiết kế khác biệt. Theo quy ước màu xanh da trời đậm, có gạch chân áp dụng với tính năng di con trỏ qua liên kết,
Đây không phải kết quả nghiên cứu khoa học mà là thói quen sử dụng của các thiết kế viên đã có từ hàng chục năm nay và tới giờ trở thành quy ước. Bạn nên giữ màu liên kết là xanh da trời trên nền xám hoặc trắng, nó có độ tương phản cao và dấu hiệu an toàn, giúp người đọc dễ tìm kiếm hơn.
Ví dụ: www.yahoo.com.vn, siêu liên kết đã được tuỳ biến theo tiêu chuẩn của Yahoo. Trên trình duyệt Firefox 2.0.0.4 siêu liên kết chưa hoạt động là màu xanh dương, in đậm
3. Giúp người xem biết có thể đi tới đâu từ đây
Có nhiều kỹ thuật giúp người đọc có thể tính toán, xác định việc di chuyển đến nội dung họ cần nhanh nhất, tại đây tôi đề xuất 3 kỹ thuật cơ bản:
Cấu trúc cấp bậc như mục 1
Cấu trúc ngang bậc chẳng hạn như hình sau:
Kết hợp cả 2 cấu trúc, ví dụ như trang của Apple (giao diện cũ) hoặc iGURU
4. Giúp người xem biết họ đã đi qua đâu
Với siêu liên kết, HTML đã làm việc rất tốt. Màu sắc của visited link và active link có sự khác biệt rõ rệt về màu sắc. Nếu người thiết kế thay đổi màu sắc của siêu liên kết đã xem và chưa xem thì phải sử dụng 2 màu sắc khác biệt nhau, tuy nhiên phải phù hợp với thiết kế chung của hệ thống.
Với Yahoo, người xem biết họ đã đi qua link nào khi link đó chuyển sang màu xanh dương nhạt
5. Giúp người xem biết họ làm gì để đi tới đâu
Sau khi bạn thiết kế xong ý tưởng thanh định hướng cũng là lúc bạn tính đến việc làm thế nào để người sử dụng biết tới đâu để tìm thanh định hướng.
Mắt người có thói quen nhìn từ trái --> phải, từ trên xuống dưới, ưu tiên quan sát vùng kế cận hơn di chuyển ra xa (Xem bài tính thu hút của các vùng Web, cùng tác giả). Chính vì vậy việc bố trí thanh định hướng ở đâu ảnh hưởng rất nhiều đến thời gian khách tìm kiếm nội dung.
Ví dụ: Định hướng chính (top menu/top navigation/primary nav) thường nằm trên cùng trang Web, định hướng thứ cấp (main menu/ sidebar/ secondary nav) thường nằm bên tay trái trang Web.
Định hướng tìm các trang khác theo số thứ tự, thường nằm chân trang, ngay dưới bài viết cuối cùng.
6. Giúp người xem biết nhấn vào đâu thì được gì
Mục tiêu của một liên kết phải rõ ràng. Ví dụ liên kết phải nói cho khách biết.
* Họ sẽ được gì
* Nơi nào họ sẽ đến
* Điều gì sẽ xảy ra khi họ nhấn vào
Điều này có thể sử dụng cấu trúc nội dung, cách viết siêu liên kết, màu sắc, hiệu ứng,... để thể hiện cho người đọc biết.
******
Trong bài tiếp theo tôi sẽ trình bày về chủ đề: Thanh định hướng nên đặt tại đâu.
Sally
(0%)
WIDGETIZE