Đôi khi các nhà thiết kế tạo ra web site toàn bộ bằng giấy, bút chì và / hoặc một tablet PC. Và các thành phần của từng lay out  được thiết kế một cách đặc biệt như các đường link cong, các icon làm bằng tay, back ground, các điểm ghi chú, các nhãn dán và đường mờ… Tất cả những nét đặc biệt trên hỗ trợ để mang lại một “nét nhân văn” cho trang web và làm cho một trang web có thể khác biệt với hàng chục các trang tương tự khác, hơn nữa nó có thể khơi dậy trí tò mò của người dùng. Nên chú ý: Một phông chữ viết tay được cài đặt nhanh chóng có thể gây ra tổn hại nhiều hơn là hỗ trợ (ví dụ: Comic Sans).

Làm thế nào có thể có được các kết quả ấn tượng? Và khi nào phong cách vẽ tay có thể được sử dụng? Chúng ta hãy cùng xem một số ví dụ điển hình của phong cách vẽ tay trong thiết kế web hiện đại. Tất cả các ảnh ở đây có thể click vào và nó sẽ dẫn tới các trang web mà nó đã được chụp.

1. Vẽ tay như là nghệ thuật tối giản

Từ khi vẽ tay được kết hợp với sự sáng tạo, với nguồn cảm hứng và trở thành một phong cách tiêu biểu của nghệ sĩ đồ họa, các nhà thiết kế và các nhà minh họa ảnh thì nó thường được sử dụng trong các port fo lios và các phòng trưng bày.

Điều thú vị là phong cách vẽ tay thường chỉ có một yếu tố được các nhà thiết kế sử dụng để trình bày tác phẩm của họ trên trang web. Dưới đây là một số ví dụ điển hình về nghệ thuật tối giản.

Thận trong: Flash! Thiết kế  phù hợp qua từng trang của website.

Các thành phần của thanh nav i ga tion được viết bằng tay được sử dụng trong thiết kế này. Phong cách và đúng mốt. Mặc dù, kích thước phông chữ là quá nhỏ.

Mel Kadel vẽ mọi thứ — thậm chí là chính cô.

Cả phần đầu trang(top) và bên trong của trang(bottom) trên trang web của người Brazil ian này có các thành phần vẽ tay, có phong cách rất độc đáo.

Heather Sloane minh họa với Flash.

Vẽ các thành phần bổ sung tính cổ điển cho thiết kế port fo lio. Thiết kế này không phải là tối giản, nhưng nó cũng không khác biệt nhiều.

2. Phong cách này hỗ trợ nội dung

Trong một số trường hợp, các nhà thiết kế thử nghiệm với các bức vẽ tay nguệch ngoặc để hỗ trợ nội dung chính của trang web thay vì sử dụng chữ viết tay cho các thành phần thiết kế chính. Chẳng hạn, các bản phác thảo đôi khi được đặt trên back ground của trang web.Và nó hoạt động khá tốt.

Trong mẫu thiết kế dưới đây ý tưởng tương tự được sử dụng. Tuy nhiên, chỉ 20–30% của trang được dùng để trình bày nội dung. Đây không phải là điều mà người dùng mong đợi và đây chính xác là điều làm cho trang web này khác biệt. Jakob Nielsen không thích thú về cách trình bày nội dung trên trang web này.

Ngoài ra, mỗi thành phần thiết kế riêng có thể được sử dụng trong phong cách viết tay. Trong ví dụ dưới đây chỉ một RSS — but ton bên phải là vẽ tay.

3. Nội dung kết hợp phong cách

Ví dụ này sử dụng các yếu tố viết tay trên tất cả các trang web. Nó có logo, các gợi ý, các dòng và thậm chí là các bản đồ được viết bằng tay. Bản đồ vẽ tay trên trang đầu chứa các đường link đến từng phạm vi của trang web.
Đây chắc chắn là một thiết kế thú vị và sáng tạo, nhưng người dùng có thể gặp vấn đề trong việc tìm kiếm thông tin. Trong thực tế, khách truy cập cần phải thử xung quanh trang web để tìm hiểu xem những thông tin nào sẽ được trình bày.

Mẫu thiết kế này cũng có cả các thành phần vẽ tay trong trang web, ví dụ: để hiển thị các đoạn video, một bản tóm tắt của một kênh TV được sử dụng, và thậm chí có thể sử dụng các table.

Nội dung cũng được kết hợp với phong cách trong Home work House (wax crayons).

Một cửa hàng online với vô số các yếu tố vẽ tay.

Đơn giản nhưng ấn tượng. Chú ý, Flash.

4. Vẽ tay kết hợp với minh họa

Vì các hình minh họa vẽ tay đôi khi có thể không có tính trực quan hấp dẫn, thiếu sót này thường được giải quyết bằng việc sử dụng các yếu tố trực quan nổi bật. Sản phẩm cuối cùng đôi khi rất hoang dã, sinh động, đầy màu sắc — nhưng luôn luôn là phương pháp thiết kế sáng tạo.

Điều quan trọng cần lưu ý rằng các quyết định thiết kế như vậy cần được xem xét rất cẩn thận. Nó dễ dàng làm cho thiết kế hấp dẫn hơn nhưng cũng đồng thời làm cho nó mất đi tính trực quan đó. Thiết kế là khác nhau –muốn hiểu được điều này không nhất thiết phải đơn giản hóa hoặc làm phức tạp lên. Vì khả năng sử dụng và tiếp cận các vấn đề tốt như thế nào chủ yếu chỉ phụ thuộc vào các kỹ năng của nhà phát triển.

Bạn nhìn thấy gì như là một pro to type: trang web của Joe Grisham trông xác thực, được làm bằng tay và sử dụng các hình minh họa.

Thiết kế này kết hợp phong cách vẽ tay với các hình minh họa sống động(comics). Nó không được hỗ trợ để thành phong cách thiết kế Web 2.0.

Đây là một phong cách thiết kế Web 2.0 —  với các but tons bóng nhoáng, sự phản chiếu, phong cách vẽ tay sử dụng trong thanh nav i ga tion, nội dung và footer.

Phong cách vẽ tay trong quảng cáo sản phẩm Casio. Sử dụng Flash.

Một số nhà thiết kế kết hợp chặt chẽ phong cách vẽ tay với các minh họa và hợp nhất chúng thành một yếu tố thiết kế duy nhất. Đây cũng là cách để tạo ra một thiết kế mang tính nghệ thuật, bất ngờ và hấp dẫn có thể là động lực thúc đẩy khách truy cập khám phá trang web.

Phong cách vẽ tay ẩn trong các chi tiết: Spin vox sử dụng các đường cong cho hiệu ứng di chuột.

Một trang web theo phong cách cổ điển với các thành phần vẽ tay riêng biệt. thực sự, đó là một trang web của một trường đại học. Nhiều các thành phần vẽ tay có thể được tìm thấy trên trang web.

5.Các thành phần vẽ tay chuyển tải thông điệp

khía cạnh này trở nên rõ ràng trong thiết kế Web 2.0. Các thành phần vẽ tay được sử dụng để người dùng dễ dàng nhận ra ý tưởng đằng sau sản phẩm và dịch vụ được cung cấp. Điều này hoạt động khá tốt trong cả thiết kế web và in ấn, vì nó đưa ra lời giải thích về bản chất có tính chất cá nhân hơn, tình cảm và thân mật hơn. Hãy xem ví dụ dưới đây.

Đây là phong cách thiết kế Webb 2.0– trang web có thể trông như một cái gì đó được cung cấp để bổ sung cho tính trực quan hấp dẫn.

Videoegg sử dụng cách thành phần mang tính nghệ thuật cho thanh nav i ga­tion menu.

6. Mục đích sử dụng các thành phần vẽ tay

Đôi khi mục đích của người thiết kế chỉ để gây ấn tượng, gây sốc hoặc lôi kéo sự chú ý và tạo ra một ấn tượng lâu dài tới người đọc. Có một số cách để thực hiện điều này, chẳng hạn, một phong cách thiết kế khác thường, đó cũng là phong cách duy nhất để thể hiện khía cạnh nghệ thuật của thiết kế cực kỳ tốt.

Weblog “sketchy”. Nơi bạn có thể thấy ngay từ khi truy cập lần đầu tiên?

Thanh nav i ga tion menu được vẽ trên top của trang web cũng có các hiệu ứng di chuột rất hấp dẫn.

Retro sống trong trang web này.

6.Các thí nghiệm và các phương pháp tiếp cận nghệ thuật

Các nhà thiết kế là các nghệ sĩ, hoặc ít nhất là họ luôn muốn cố gắng để đạt được danh hiệu đó. Và như vậy, các nhà thiết kế có xu hướng đưa ra các quyết định thiết kế cơ bản, khám phá trí tưởng tượng và thử thách khả năng sáng tạo của khách truy cập.

Trang web sử dụng Flash– cho phép bạn khám phá nội dung.

Một port fo lio với các yếu tố viết tay.

Một giải pháp cuối cùng: Kuba Dabrowsky đánh dấu mọi thứ bằng tay.

Phong cách sơn trên đường phố. Vâng,  Yes, nó trông khá tồi. nhưng được thiết kế để thể hiện mục đích.

Kev Adam son: bạn sẽ không tìm được bất kỳ một tem plate tượng tự nào trên WordPress.

Maria Gross mann. Ảnh chụp chỉ thể hiện một phần của trang web(Flash)

Weblog với con vật cưng, các dòng cong, các thành phần vẽ tay và thanh nav i ga tion menu độc đáo.

Port fo lio được thiết kế với “trang giấy trông rất cũ”.