Chương 3: Kết Cấu

Trang chủ » Tư vấn »Tư Vấn» Để có một website hiệu quả» Chương 3: Kết Cấu

Ngày tạo: 08/01/2015

Chương 3: Kết Cấu

Hiện nay có rất nhiều nhà thiết kế web sơ xài cho rằng xây dựng được một bố cục tiêu chuẩn 2 hoặc 3 cột, chọn một vài màu cho nó là xong một bản thiết kế. Họ không để tâm đến việc làm sao để đưa bản thiết kế của họ lên một tầm cao mới, hoặc thêm thắt một vài chi tiết tạo sự độc đáo. Có lẽ bởi vì họ không có đủ thời gian hoặc ngân sách cho thiết kế web của khách hàng thì lại không nhiều, nhưng cũng có lẽ vì họ đã làm dụng quá yếu tố “thiếu hơn là thừa” trong thiết kế website. Không nhất thiết mọi website phải đẹp, những mọi website đều có thể được thiết kế đẹp. CSS đã có nhiều tính năng giúp cho người thiết kế có thể kiểm soát được tốt về giao diện của trang web, nhưng tôi nghĩ vấn đề ở đây là nhiều người không nắm vững cách tùy chỉnh một kết cấu. Tất cả nội dung của chương này sẽ tập trung vào vấn đề này: Nâng tầm thiết kế của bạn lên một tầm cao mới với Kết Cấu.

Kết cấu là bất cứ yếu tố nào giúp cho website có một cái nhìn độc đá, một cảm giác về bề mặt của thiết kế hoặc một yếu tố nào đó. Khi đặt tay lên một bức tường gạch, một khúc gỗ hoặc một cục xà bông ướt, bạn cảm thấy như thế nào? Bạn có thể làm cho một website mang tới một cảm giác giống như những bề mặt trên không? May mắn thay, một website thì không thể cho người truy cập những cảm giác như trên, nhưng bạn có thể làm cho nó có được sự liên tưởng và gợi nhớ đến những kí ức về những vật thể thực tế bên ngoài. Trước tiên bạn cần một phương pháp để mô tả bề mặt. Bạn có thể bắt đầu nói về những mặt phẳng gồ ghề hoặc êm mượt, nhưng có những yếu tố khác giúp cho một bề mặt có được những đặc tính độc đáo. Kết cấu này có bao gồm các mô hình được lặp lại không? Liệu nó có một hình thù đặc biệt nào không? Những đường thẳng nào tạo nên hình đó? Liệu hình đó có chiều sâu không?

Những câu hỏi trên có vẻ là những câu hỏi ngẫu nhiên nhưng thực tế đó là những câu hỏi nhắm vào những yếu tố thiết yếu trong thiết kế đồ họa: Điểm ảnh, đường kẻ, hình dạng, sức nặng và độ sâu và kiểu mẫu. Nắm được những lý thuyết này không những giúp cho bạn có thể hiểu được Kết Cấu là gì mà còn có thể tạo ra được nó nữa.

Điểm ảnh

Nếu bạn làm việc trên CSS thì có lẽ bạn sẽ quen với việc sử dụng pixels làm đơn vị tính. Một pixel là một trong hàng trăm ngàn điểm sáng trên màn hình máy tính của bạn. Nếu bạn để độ phân giải là 1280x1024 thì bạn sẽ có 1,310,720 pixel trên màn hình, được sắp xếp trong một bảng gồm 1024 hàng và 1280 cột. Tất cả các pixel này kết hợp lại với nhau tạo thành một hình ảnh kĩ thuật số.

Đây là những điều hết sức cơ bản, nhưng nó sẽ được áp dụng một cách cụ thể vào điểm ảnh trong thiết kế đồ họa ở dưới đây.

Cũng như pixel là những yếu tố cơ bản của một bức ảnh kĩ thuật số thì điểm ảnh (hoặc điểm) sẽ là những yếu tố cơ bản của một bản thiết kế đồ họa, và chúng có thể được sử dụng để tạo nên bất cứ hình ảnh nào. Điểm ảnh thì không có giới hạn về kích thước hay một khuôn khổ nào cả trừ khi nó được so trong một khung hoặc một nền nhất định. Ví dụ như một điểm ảnh trên một bảng quảng cáo có thể trông như chỉ nhỏ bằng một dấu chấm nhưng nếu nhìn gần lại thì nó sẽ to bằng cả cái đầu của bạn. Khi mà các điểm ảnh kết hợp lại với nhau, chúng tạo ra các đường kẻ, hình dạng và chiều sâu như hình 3.1 dưới đây.

Hình 3.1

Khi thiết kế hình ảnh trên website, sẽ dễ dàng hơn khi bạn nhìn vào bức tranh tổng thể và đừng chú ý tới những điểm ảnh làm nên hình đó. Tuy nhiên chính những điểm ảnh lại có sức mạnh rất lớn. Hãy nhìn vào tác phẩm của Craig Robinson, trong số những thiết kế nghệ thuật tí hon thì ông đã vẽ chân dung của những ca sĩ, diễn viên, ban nhạc nổi tiếng mà ông gọi là Minipops. Bức hình 3.2 cho ta thấy được cận cảnh tác phẩm A-Team Minipop của ông, tác phẩm chi tiết đến nỗi các fan cuồng cũng sẽ chú ý thấy được rằng Hannibal còn cầm điếu xì gà cố hữu trên tay nữa.

Hình 3.2

Đường kẻ

Đường kẻ được hình thành khi có ít nhất 2 điểm ảnh được liên kết lại với nhau. Đường kẻ là một yếu tố được nhắc đến nhiều nhất trong thiết kế đồ họa, và cũng là yếu tố mang tính thể hiện nhiều nhất. Khi thiết kế một website, đa số người ta nghĩ rằng đường kẻ chỉ dành cho các đường ranh giới CSS hoặc các đường gạch chân trong liên kết nối, nhưng đường kẻ còn có thể được sử dụng trong vô vàn cách khác nữa.

Một đường kẻ khi được đặt nằm chéo sẽ tạo ra sự chuyển động và sự phấn khích. Như là một chuỗi domino đang đổ giữa chừng vậy, đường kẻ chéo mang trong mình một nguồn năng lượng tiềm ẩn. Sử dụng những đường kẻ nằm ngang làm nền sẽ cho sự thiết kế thêm thú vị nhưng sử dụng một bố cục có những đường kẻ chéo sẽ làm cho thiết kế đem lại cảm giác góc cạnh hơn, làm cho mắt người truy cập di chuyển nhiều hơn. Hãy so sánh 2 ví dụ ở hình 3.3, hình nào bắt mắt bạn hơn?

Hình 3.3

Cũng như cách mà những đường kẻ chéo tạo ra sự chuyển động thì sự đa dạng về độ dày và chiều hướng của đường kẻ tạo ra được những sự biểu lộ tâm lý và tính cách. Những đường gồ ghề với nhiều góc nhọn tạo cảm giác nguy hiểm và điên dại. Những đường cong nhẹ thì tạo ra sự thư giãn và êm ả. Những đường thẳng có những góc 90 độ thì có vẻ sắc nhọn và mang tính máy móc. Cuối cùng, những đường gồm nhiều đường cong và những góc cạnh thì giàu cảm xúc; ví dụ như nét chữ viết tay, graffiti và những bức họa.

Khi bạn đang thiết kế một website thì điều đầu tiên bạn cần nhớ đó là những đường kẻ mang lại nhiều lợi ích hơn rất nhiều so với chỉ có những đường thẳng phân chia, đường lằn và những đường vằn. Nó là nền tảng của nghệ thuật, mĩ thuật và thiết kế. Với một webiste khô cứng và mang tính kĩ thuật cao thì bạn rất dễ bị quên đi những công cụ nghệ thuật căn bản như pens và brushes. Vậy nên hãy bắt đầu vào việc tạo ra cho mình những đường thẳng có chất lượng bằng cách tự nỗ lực thiết kế cho riêng mình hoặc sử dụng những chương trình hỗ trợ như Adobe Illustrator như ở hình 3.4. Đây là phương pháp mang nghệ thuật truyền thống đến với kĩ thuật số.

Hình 3.4

Một ví dụ đáng xem về sự đa dạng đường kẻ là trang web The IdeaLists ở hình 3.5. Hãy chú ý đến sự kết hợp giữa các đường kẻ mỏng với những đường kẻ dày như đường màu đen “How it work” nằm ngang qua giữa trang, và những thanh đầy màu sắc nằm trên thanh chuyển hướng chính. Cũng nên ghi chú lại những mẫu đường kẻ zic zac ở dưới logo và xuyên xuốt cả trang web làm cho chúng thêm phần tinh nghịch. Những mẫu zic zac này được lặp đi lặp lại theo cả chiều ngang và chiều dọc tạo ra sự thống nhất và liên kết lại các bố cục màu sắc. Cuối cùng hãy chú ý đến những mũi tên nằm ngang được sử dụng một cách tinh tế ở khung nằm dưới và một nếp gấp nhỏ trên đường kẻ “How it works”.

Hình 3.5

Hình dạng

Một hình dạng được hình thành khi 2 điểm cuối của 2 đường kẻ được nối lại với nhau. Có một số hình dạng hình học mà tôi có thể cho bạn ví dụ như hình tròn, hình tam giác, và hình chữ nhật, hình mũi tên, ngôi sao, kim cương, hình ellip, hình bán nguyệt… được mô tả ở hình 3.6. Những đường cong, góc nhọn và những đường kẻ thằng chính xác trong những hình dạng hình học làm cho chúng khó có thể vẽ bằng tay, trừ khi bạn có đồ nghề như compa, thước đo góc và thước đo thẳng. Nhưng đối với máy tính thì những đường kẻ hình học này thường được định dạng trong bất cứ chương trình tạo hình ảnh nào. Cũng chính vì lí do đó làm cho các hình này được cho rằng mang tính máy móc và kĩ thuật.

Hình 3.6

Một loại hình dạng nữa đó là hình tự do. Hình tự do thường thu hút hơn là hình học, nó chứa những đường cong, góc cạnh ngẫu nhiên và những đường kẻ không liên quan như ở hình 3.6. Những hình tự do mang sự tự nhiên qua những nét vẽ và mang lại cảm giác không gò bó và thanh toát. Chúng có thể đại diện cho một dòng sản phẩm, những cử chỉ của con người hoặc những bản vẽ tự do. Hình 3.7 thể hiện sự biến đổi từ một dạng hình học sang hình tự do.

Hình 3.7

Khi bắt tay vào thiết kế web, nhiều người quên đi mất sự tồn tại của hình tự do. Ở chương 1 tôi đã giải thích khung sườn của một website thì bao gồm một đống những khung và ô. Cho dù bạn có sắp xếp chúng như thế nào đi nữa thì chúng vẫn là hình dạng hình học. Không như thiết kế in ấn cho phép chúng ta được tự do vẽ những hình dạng mà chúng ta thích, thiết kế web giới hạn ta trong khuôn khổ hình chữ nhật. Tuy nhiên một khung chứa hình chữ nhật không có nghĩa là nó phải trông giống như một hình chữ nhật. Một trong những cách thông dụng nhất mà chúng tôi sử dụng để che đi những mẫu hình chữ nhật trong HTML là cho nó một hình nền.

Bạn có thể sử dụng một hình tròn hoặc hình oval để làm hình nền, sau đó đưa các đoạn văn bản vô trong để tạo ra hiệu ứng khung hình tròn trong bố cục của bạn. Hình 3.8 là một ví dụ cho phương pháp này. Vấn đề mà ta gặp ở đây là nếu các đoạn văn bản quá dài và vượt ra ngoài vòng tròn hoặc nếu bạn quên xuống dòng khi viết văn bản thì hình sẽ không tự mở rộng ra để vừa với chữ.

Hình 3.8

Vậy nên nếu chúng ta quên không chỉnh sửa đoạn văn bản để vừa với hình nền thì cách này có thể đem lại khá nhiều rắc rối. Một lí do nữa mà cách này không được sử dụng nhiều đó là đa số các trình duyệt web cho phép người dùng có khả năng thay đổi kích thước văn bản, điều mà sẽ làm vỡ kĩ thuật bố cục này. Trên thực tế, cách tốt nhất mà chúng ta làm chỉ có thể là làm phân tâm người dùng để họ không chú ý đến sự thật là những khung là hình chữ nhật.

Góc tròn

Chúng ta không thể dự đoán được kích cỡ của khung nội dung trên tất cả màn hình của người truy cập được. Tuy nhiên có một cách mà chúng ta có thể làm được đó là thay những góc 90 độ thành những góc tròn. Từ góc nhìn thiết kế đồ họa thì những ô có góc tròn làm dịu đi bố cục, tạo nên nhiều sự tự do và mượt mà hơn. Còn nhớ khi tôi nói nếu bạn có thể làm cho một website mang lại cảm giác như một cục xà bông ướt chưa? Đúng vậy, những góc tròn chắc chắn có thể làm cho một trang cảm giác trơn tuột hơn. Hãy nhìn vào những hình hộp trên trang của Simon Collision trong hình 3.9 mà xem, những góc của mỗi ô đều được cắt bớt đi để làm cho bố cục mềm mại hơn một chút. Khung đỏ bên phía trên bên trái là hình phóng lớn của các góc tròn đó.

Hình 3.9

Vậy tại sao phải cần một khung đỏ ở dưới để phóng to góc vuông ở hình 3.9? Đây là hình phóng to các góc của trang Símon khi được hiển thị trên IE 8 và những trình duyệt web thấp hơn. Lý do là Simon đã sử dụng đặc tính border – radius của CSS3, tính năng mà chỉ được hỗ trợ trong IE9 trở lên. Sự thật là vào ngày suất bản cuốn sách này, việc làm cho tính năng border – radius của CSS3 hoạt động trên Firefox và Webkit đòi hỏi một phiên bản nhất định của tính năng này: -moz – border – radius và – webkit – border – radius. Nếu không có những bổ sung này thì CSS3 vẫn còn rất khó để làm các góc tròn. Mặc dù nó có thể không được sử dụng trong thực tế vì IE không hỗ trợ, nhưng bạn vẫn có thể sử dụng cách này nếu bạn đồng ý với việc một vài người truy cập của bạn sẽ vẫn nhìn thấy góc vuông. Trong trường hợp của Simon, mất đi những góc tròn trên IE là một vấn đề nhỏ. Ngoài ra, điểm chính thu hút các người truy cập vào trang web của ông là nhờ vào việc sử dụng tính năng Media queries. Nó là một tính năng mới của CSS3 cho phép chúng ta định dạng những điều kiện để thay đổi các kiểu website. Trong trường hợp của Simon, ông đã sử dụng tính năng này để tự động thay đổi bố cục tùy vào độ rộng của trình duyệt web trên các thiết bị khác nhau. Mặc dù bạn không thể coi nó là một bố cục khả dụng được vì nó không có tính linh hoạt, nhưng nó là một phương pháp ấn tượng và hiệu quả trong việc thích ứng với các thiết bị truy cập web khác nhau. Bây giờ hãy vào trang http://colly.com và thử thay đổi kích thước xem sao.

Khi mà tôi viết ấn bản đầu tiên của cuốn sách này thì border – radius còn là một tia hi vọng duy nhất mà chúng tôi đã cố gắng thực hiện nhiều năm trời với HTML và CSS. Vì lí do đó mà tôi đã nêu ra cho bạn một vài kĩ thuật khác trong việc tạo góc tròn bằng cách sử dụng extraneous markup hoặc Javascript. Hầu hết các kĩ thuật này đã bị bỏ và nhiều giải pháp góc tròn trên Javascript được hình thành, thì tôi vẫn không khuyên các bạn theo những kĩ thuật này. Nếu trong trường hợp bạn không thể tạo ra được hiệu ứng với CSS thì tôi khuyên bạn nên bắt chước theo cách của Simon, giữ những hiệu ứng góc tròn một cách tinh tế vừa đủ; chỉ bằng cách đó thì web của bạn vẫn đẹp với những góc vuông. Nếu bạn cần thêm sự giải thích về chủ đề này thì nãy vào trang web của tôi http://dowebsitesneedtolookexactlythesameineverybrowser.com/.

Xoay chuyển

Tôi đã đề cập ở phần trước là việc những đường thẳng chéo sẽ tạo nên sự chuyển động và sự thú vị. Xoay chuyển những hình dạng và những yếu tố trong website của bạn cũng tạo ra hiệu ứng tương tự như vậy. Xoay chuyển một vật thể phá vỡ sự đơn điệu của các đường thẳng và đường ngang trong web, và cũng như góc tròn, chúng tạo nên sự to do thoải mái hơn. Nhìn vào hình 3.10 là một ví dụ cụ thể. Có rất nhiều kết cấu phong phú trong thiết kế mà tạo cho người xem trang web cảm thấy trang web như được vẽ bằng tay vậy. Sự xoay chuyển tinh tế của logo, nút “View all” dưới ngỗi ngày và các yếu tố khác của hình nền làm cho trang web có cá tính hơn. Đối với tôi, trang web này trông giống như là một tờ rơi được gắn lên tường trên đại lộ giải trí vậy. Thiết kế hoàn hảo này phù hợp với những trang web mang tính nghệ thuật.

Hình 3.10

Hiện tại thì các cách thông dụng nhất để tạo được hiệu ứng xoay chuyển là bằng cách xoay chuyển hình ảnh trên các công cụ chỉnh sửa hình ảnh trước khi đưa ảnh đó vô thiết kế. Cũng giống như góc tròn, tính năng này sẽ sớm được thêm vào CSS3. Tính năng transform của CSS3 cho chúng ta khả năng thay đổi hình dạng, kích thước và xoay chuyển được vật thể trực tiếp trên trình duyệt. Mặc dù tính năng này hiện tại vẫn còn nhiều hạn chế nhưng nó cũng là một bước tiến vượt bậc trong thiết kế web. Chỉ vì tính năng này không được hỗ trợ toàn diện không có nghĩa là bạn nên tránh sử dụng nó. Mới đây tôi đã sử dụng tính năng transform để xoay chuyển khung nội dung chính trong web 2010 Southwest Interactive festival. Tôi biết rằng hầu hết các người truy cập đều sử dụng các bản cập nhật mới nhất của các trình duyệt Firefox, Chrome, và Safari và có thể thấy được hiệu ứng này như hình 3.11. Những người còn sử dụng IE cũng sẽ thấy được một thiết kế tương tự, chỉ là khung nội dung không xoay mà thôi.

Hình 3.11

Hình dạng và bố cục

Góc tròn và xoay chuyển là 2 kĩ thuật mà bạn sử dụng để làm cho thiết kế web của mình bớt đi sự cứng nhắc và thêm vào sự mềm mại, tự do. Còn có nhiều cách nữa có thể giúp ích cho thiết kế của bạn bằng cách sử dụng sự sáng tạo trong hình dạng. Hãy nhìn vào hình 3.12, trang web Tahoe Tech Talk 2010. Người thiết kế web này đã sử dụng những hình ảnh đơn giản được chứa trong những hình dạng tự do để tạo ra bố cục như bạn thấy ở dưới. Khi lần đầu tiên thấy trang web này, thì điểm bắt mắt tôi đầu tiên đó là biểu tượng tảng đá bấp bênh của logo. Từ đây, Những đường kẻ chéo được tạo ra bởi góc nghiên của logo hướng mắt tôi tiếp đến bảng quảng cáo. Tiếp nữa, ô màu đỏ tiếp tục hướng mắt tôi xuống nền đất phía dưới nó. Phòng trường hợp tôi mà lạc mất đường, một cái kính xem cảnh lại hướng tôi về bảng quảng cáo để nhắc nhở tôi mục đích chính của trang web này. Đây quả là một thiết kế vui nhộn với nhiều chi tiết màu sắc và các yếu tố hoạt họa khác nhau.

Hình 3.12

Có thể nó không phải là yếu tố đầu tiên mà bạn để ý nhưng chính những hình dạng chứa hình ảnh ở đây mới là yếu tố then chốn trong việc hình thành nên bố cục. Một cách để thấy được sự ảnh hưởng của các hình dạnh lên thiết kế là tách biệt nó ra khỏi hình ảnh và màu sắc. Bạn có thể làm được diều này bằng cách chụp lại màn hình và dò theo các hình dạng bằng tay hoặc cũng có thể chỉnh sửa nó trong một chương trình đồ họa của bạn và xóa hết những hình ảnh và màu sắc đi. Tôi gọi nó là bài kiểm tính thực dụng của đường kẻ. Bài kiểm tra này mô tả một thiết kế có được những hình ảnh ấn tượng, có ý nghĩa nhất mà chỉ sử dụng càng ít đường kẻ càng tốt. Nếu bố cục mà bạn có được sau khi bạn đã xóa hết các màu sắc và hình ảnh vẫn đạt được sự đầy đủ, trọn vẹn thì nó đã qua được bài kiểm tra. Như bạn nhìn hình 3.13, bố cục của trang web vẫn có thể hướng mắt của bạn đi vòng quanh một cách hiệu quả mặc dù nó không hề có màu hay chữ hay hình ảnh gì cả.

Hình 3.13

Chiều sâu

Chúng ta đã nói xong về điểm ảnh, đường kẻ và các hình dạng, bây giờ là lúc để đưa chương này sang một chiều không gian khác. Những yếu tố chúng ta đã bàn ở trên chỉ tồn tại ở 2 chiều: chiều rộng và chiều dài. Nó chỉ là những hình vẽ trên mặt giấy hoặc trên màn hình mà không có chiều sâu; tuy nhiên, bời vì chúng ta đang sống trong một thế giới tồn tại cả 3 chiều, việc phải học để có thể biểu diễn được những hình ảnh bao gồm cả chiều dài, chiều rộng và chiều sâu là điều tất yếu.

Luật xa gần

Khi bạn nhìn thấy một con đường nhỏ dần và biến mất nơi cuối chân trời như bức hình Vạn Lý Trường Thành ở hình 3.14 này, ta không thực sự nghĩ rằng độ rộng của con đường thật sự bị thu hẹp lại cho tới khi biến mất. Tương tự như vậy, Khi chúng ta nhìn một cánh cửa đang mở, chúng ta nhận ra được rằng 2 đường kẻ phia trên và phía dưới của cánh cửa là song song mặc dù chúng ta thấy rằng chúng chéo xuống hướng về phía cửa mở. Chúng ta không bị lừa bởi những ảo giác này vì chúng ta đã biết được rằng ( một cách vô thức) các vật thể sẽ càng nhỏ hơn khi chúng càng xa chúng ta.

Hình 3.14

Luật tỉ lệ

Ở chương 1 tôi đã đề cập tới việc tỉ lệ là một cách tốt để tạo nên sự nhấn mạnh. Điều này hoàn toàn đúng vì chúng ta, con người, có khả năng nhận biết được các tỉ lệ của một vật thể không chỉ dựa vào kích thước mà còn dựa vào vị trí của nó trong không gian 3 chiều nữa. Cho dù con ngựa ở phía sau trong hình 3.15 về tỉ lệ thì nhỏ hơn nhiều so với con ngựa ở đằng trước, mắt chúng ta vẫn nhận ra được rằng chúng có cùng kích thước trong thực tế.

Hình 3.15

Luật ánh sáng và đổ bóng

Ánh sáng và đổ bóng là 2 hiệu ứng hình ảnh quan trọng nhất mà chúng ta sử dụng để tạo ra chiều sâu trong thiết kế sắp xếp. Cho dù sử dụng chính xác luật xa gần và luật tỉ lệ đi chăng nữa thì một sự bố trí mà không có ánh sáng và đổ bóng cũng sẽ trông thật phẳng. Ánh sáng và bóng tạo nên sự tương tác hình ảnh và giúp tạo ra được một hình ảnh 3 chiều dựa trên một hình 2 chiều. Ánh sáng và đổ bóng cũng giúp cho một vật thể 2 chiều trông giống như là một vật thể 3 chiều trong không gian vậy.

Mỗi hình tròn màu xanh ở hình 3.16 đều có cùng kích thước nhưng được thêm vào hiệu ứng ánh sáng và đổ bóng khác nhau làm cho mỗi hình có một độ sâu của riêng nó. Một hiệu ứng đổ bóng căn bản được thêm vào trong hình tròn đầu tiên. Rõ ràng đây là một hình 2 chiều nhưng hiệu ứng đổ bóng tạo một ảo giác làm cho hình tròn như được nổi lên so với một bề mặt bên dưới nó. Vòng tròn thứ 2 được thêm vào hiệu ứng linear gradient và hiệu ứng đổ bóng nghiêng về phía bên phải. Sự kết hợp ánh sáng và bóng đổ này tạo cho hình tròn thứ 2 có cảm giác như đang đổ bóng trên một mặt nằm ngang phía dưới nó. Điều hiển nhiên là cái bóng nằm gần ở phía dưới của hình hơn là phía trên tạo ra hiệu ứng chuyển động; giống như là phần phía trên của hình tròn đang đổ về phía trước hoặc đổ về phía ngược lại so với ánh mắt của người nhìn. Hiệu ứng Radial Gradient – tức là hiệu ứng Linear gradient nhưng được trải ra theo mọi hướng từ một trung điểm – đã được thêm vào hình tròn thứ 3 làm cho nó trông giống như một hình khối cầu. Phần bóng được đổ ra phù hợp với vị trí của nguồn sáng được chiếu vào tạo ra độ sâu cho hình.

Hình 3.16

Còn nhiều cách nữa để tạo ra độ sâu cho những hình tròn trên, cũng như ta có những phương pháp khác nhau trong việc làm cho website của mình có chiều sâu chỉ sử dụng 2 yếu tố ánh sáng và bóng. Lấy thanh Menu ở hình 3.17 làm ví dụ. Những chữ trong khung và những góc tròn cho ta thấy được đây là những khung có thể click vào, và khung được tô màu nền đen Products cho thấy rằng nó đang được chọn. Đây là một mẫu thanh chuyển hướng có thể được sử dụng tốt trên mọi website những không may là trông nó có vẻ hơi phẳng lì.

Hình 3.17

Nếu những nút này thực sự là hình 3 chiều thì trông chúng sẽ như thế nào? Chúng sẽ có những cạnh phẳng hay những góc tròn? Những phần trên của các nút này sẽ thẳng theo chiều dọc hay chúng sẽ cong? Sẽ trông như thế nào nếu chúng được ánh sáng chiếu vào? Tất cả những câu hỏi này sẽ được trả lời bằng cách nhìn xung quanh bạn. Trong ví dụ ở hình 3.18, tôi tưởng tượng rằng các nút này của tôi được nổi lên phía trên, vì vậy tôi thêm hiệu ứng gradient, làm cho các cạnh chìm xuống để tạo độ bóng lên cho khung chữ. Tôi muốn cho nút đang được ấn vào bị chìm xuống thay vì nổi lên, vì vậy nó mới tạo ra cảm giác được ấn. Để làm được điều này tôi tạo bóng ở phía trên của khung thay thì làm nổi nó lên. Tôi cho chữ trong khung hiệu ứng drop shadow để tạo cảm giác như các chữ này nổi lên trên bề mặt của các nút bấm.

Hình 3.18

Thêm bóng vào chữ và những hình ảnh là một cách khác nữa để tạo ra độ sâu cho bố cục của bạn. Điều này có thể được thực hiện dễ dàng bằng tính năng layer style trong photoshop. Nhưng nếu người điều hành trang web thiếu kiến thức về photoshop thì sao? Cũng giống như tính năng làm góc tròn và xoay chuyển, một lần nữa CSS3 lại ra tay ứng cứu. Tính năng box – shadow và text – shadow cho phép bạn thiết kế trang web xa hoặc gần tùy theo sức nặng của hình ảnh. Có một nguồn tốt để thử nghiệm những điều này và các tính năng khác của CSS3 là trang http://css3please.com.

Bạn không nhất thiết phải tự giới hạn mình chỉ với ánh sáng và đổ bóng. Hãy thử kết hợp luật xa gần, và hãy liên tưởng tới những vật thực tế bên ngoài khi làm việc với luật xa gần này. Hãy nhìn vào ảnh chụp màn hình của trang web Worry Free Labs ở hình 3.19, thiết kế trang chủ đơn giản và vui mắt nhưng ở đây có rất nhiều những kết cấu sáng tạo đấy nhé. Khung banner “Willkommen to Worry Free Labs!” nổi lên thành điểm trung tâm nhờ vào sự tương phản và những nếp gấp về sau ở hai đầu của banner. Nếu không có những hiệu ứng này thì nó cũng chỉ là một banner hình chữ nhật màu trắng nhàm chán như mọi banner khác. Nhờ vào những hình dạng tự do và hiệu ứng đổ bóng thực tế làm cho banner nôi lên như một hình 3 chiều.

Hình 3.19

Những ý tưởng từ những bức vẽ thực tế là chìa khóa để bạn có thể sử dụng nhuần nhuyễn những yếu tố chiều sâu trong thiết kế của mình. Thay vì sử dụng những khung màu, những đường kẻ và những hình dạng phẳng lì, hãy cố nghĩ ra một cách mà bạn có thể thêm yếu tố 3 chiều vào trong web. Hãy nhớ rằng những yếu tố nào được nổi lên cao nhất sẽ dễ dàng trở thành một trọng điểm. Ngoài ra những luật tỉ lệ và luật xa gần này sẽ không phát huy được hết tác dụng nếu không có sự tác động của ánh sáng và đổ bóng.

Khuôn mẫu

Tôi vẫn còn nhớ lần đầu tiên tôi tiếp cận với thiết kế web là khi tôi đang học lớp 10 và giáo viên đang dạy cho chúng tôi về HTML. Chúng tôi được chọn lựa cho mình hoặc là làm kiểm tra giấy hoặc là làm bài tập thực tế thiết kế một website thực sự. Nó là một sự lựa chọn dễ dàng đối với tôi. Tới cuối năm đó, tôi đã tạo ra cho mình được một vài website. Một mẫu số chung cho tất cả sự sáng tạo “ghê gớm” của tôi, phải thừa nhận rằng, đều là những hình nền lặp lại. Bạn biết tôi đang nói về thể loại gì rồi chứ: những hình nền gồm những đường gạch liên tục nhau tạo ra những hình giống như những dòng nước liên tục, những viên đá, bầu trời đầy mây, kim loại hoặc một mẫu vải.

Mặc dù những hình nền lặp lại như trong hình 3.20 rất được ưa chuộng trong thiết kế web từ những năm 90s thì nó cũng còn là một ví dụ điển hình cho khuôn mẫu. Khuôn mẫu đã từ lâu được sử dụng như một công cụ phong phú và thú vị trong mọi loại thiết kế. Đối với website, những hình nền được nối liên tiếp lặp lại với nhau này làm giảm đi dung lượng và thời gian tải cho trang. Sử dụng một hình ảnh mà có thể nối liền lại với nhau để tạo ra một hình nền sẽ làm giảm đáng kể thời gian tải cho người truy cập với 56K modems.

Hình 3.20

Chỉ vì các hình nền lặp lại trên cùng một khuôn mẫu này được sử dụng trong quá khứ không có nghĩa là bạn phải tránh nó ngày nay. Thực tế rằng nó được sử dụng nhiều hơn là bạn có thể tưởng tượng. CSS đã có những tiến bộ vượt bậc trong việc cho phép bạn kiểm soát được những hình nền này. Trước khi CSS ra đời thì chúng tôi chỉ có thể sử dụng hình nền cho phần thân và phần bảng của website mà thôi. Bây giờ với CSS những hình nền có thể được áp dụng lên hầu như tất cả các yếu tố nào bạn muốn. Bạn có thể sử dụng bất kí 1 trong 5 tính năng của CSS sau đây để đặt hình nền cho nội dung của bạn:

Backgroud – color

Đây là tính năng được dùng để tạo màu cho bất cứ thành phần nào trong website. Ví dụ nếu bạn muốn đặt màu xanh lục lam (00B2CC) cho một phần nào đó, hãy nhập đoạn mã sau:

Background-color: #00B2CC;

Khi sử dụng mã màu thập lục trong CSS, bạn cần phải thêm vào trước đó dấu #. Bạn cũng có thể để giá trị transparent ở vị trí này nếu bạn không muốn để màu trong hình nền. Transparent thực ra là giá trị mặc định cho tính năng background-color. Bạn cũng có thể sử dụng những tên màu trong HTML như Aquamarine hoặc BlancheAlmond nhưng chỉ có duy nhất 16 tên màu chính thức được sử dụng trong HTML 4.0. Vì vậy tôi khuyên bạn nên sử dụng mã màu thập lục như ở chương 2 ta đã bàn qua.

Background-image

Nếu bạn muốn chọn một hình để làm hình nền lặp lại, bạn có thể sử dụng tính năng background-image. Giá trị chuẩn của tính năng này là URL(‘filename’) hoặc none. Nếu bạn muốn chọn hình animalcracker.png vào làm hình nền thì bạn gõ lệnh sau:

Background-image: url(‘animalcracker’);

Background-repeat

Có 4 giá trị cho tính năng này: repeat, repeat-x, repeat-y và no-repeat. Giá trị mặc định là repeat với những hình sẽ được nối lại liên tiếp với nhau theo cả hai chiều ngang và dọc. Giá trị repeat-x sẽ làm cho hình được nối liên tiếp theo chiều ngang. Điều này hữu dụng trong trường hợp bạn muốn cho chạy một loạt hình theo chiều ngang nhưng lại muốn tất cả phần còn lại được tô một màu cụ thể. Tương tự cho giá trị repeat-y nhưng là theo chiều dọc. Cuối cùng là giá trị no-repeat được sử dụng khi bạn có một ảnh hình nền nhưng bạn lại không muốn nối chúng lại. Những hình sau trong 3.21 mô tả lại những giá trị này.

Hình 3.21

Background-attachment

Tính năng này cho phép bạn lựa chọn việc hình nền của bạn có di chuyển theo nội dung khi mà trang được kéo xuống phía dưới hay không. Nó có 2 giá trị là fixed và scroll. Nếu giá trị bạn chọn là fixed thì hình nền của bạn sẽ đứng yên một chỗ mặc cho khi page được kéo xuống phía dưới.

Background-position

Tính năng này cho phép bạn điều khiển được vị trí của hình nền theo 2 chiều: ngang và dọc. Những giá trị có thể đặt cho tính năng này là right, center và top cho chiều ngang và top, center, bottom cho chiều dọc. Ví dụ khi bạn muốn hình nền của bạn được đặt chính giữa theo chiều ngang và nằm phần trên của nội dung thì bạn nhập mã (background-position: center top) hoặc sử dụng theo tỉ lệ phần trăm (background-position: 50% 0%). Nếu ta muốn đặt vị trí của hình ở vị trí 300 pixel từ bên trái qua và 400 pixel từ phía trên xuống, chúng ta nhập mã (background-position: 300px 400px). Những ví dụ này có thể được xem ở hình 3.22.

Hình 3.22

Để tóm tắt lại một cách nhanh chóng tất cả các lệnh trên, các nhà phát triển CSS đã thiết kế một lệnh duy nhất như sau:

Element { background: background-color background-image background-repeat background-position background-attachment; }

Để cho các bạn thấy ví dụ, mẫu code ở dưới sẽ được hiển thị trong hình 3.23:

#hihopickles {

background-color: #FF9900;

background-image: url('animalcracker.png');

background-repeat: repeat-x;

background-position: left bottom;

background-attachment: fixed;

}
#hihopickles {

background: #FF9900 url('animalcracker.png') repeat-x left bottom fixed;

}

Hình 3.23

Như tôi đã nói ở trên thì đôi khi để tìm ra được một website sử dụng hình nền dạng này thì rất hiếm. Để dễ dàng, hãy nhìn vào website Dave McNally’s Tileables ở hình 3.24.

Hình 3.24

Không giống như những hình cục gạch hay bánh quy hình con vật được lặp lại như ở trên – đây chỉ là những hình dạng được chọn lựa kĩ càng từ thư viện khuôn mẫu của photoshop. Kèm theo nó là những hình nền lặp lại được chọn ra trong hình 3.25.

Hình 3.25

1.Mới nhìn vào lần đầu thì thanh trên cùng trông như được kết hợp từ nhiều màu sắc lại với nhau. Nhưng thực tế chúng chỉ có 5 màu duy nhất, những màu được sử dụng làm nền và được lặp lại theo chiều ngang phía trên đầu website.

2.Được tô cho phần thân của web là một hình nền lặp lại theo cả chiều ngang và chiều dọc để tạo cho kết cấu một sự tinh tế. Nếu bạn đổi bức hình màu thành một màu duy nhất, có thể trang web trông vẫn ổn, những không được đẹp. Một bức hình 100x100 px với 16 màu này làm cho website phong phú và có chiều sâu hơn.

3.Về mặt kĩ thuật thì những mũi tên được thiết kế thành một danh sách không phải là một hình nền lặp lại; nó là một hình nền đơn được gắn lên mỗi một yếu tố riêng. Mặc dù vậy nhưng khi được đặt gần nhau chúng vẫn trông giống như một khuôn mẫu.

Xây dựng kết cấu

Lướt qua một lượt các yếu tố có liên quan đến kết cấu từ đầu chương tới giờ thì chúng ta có điểm ảnh, đường kẻ, hình dạng, độ sâu và khuôn mẫu. Mỗi yếu tố riêng biệt này tạo nên được một mức độ khác nhau cho kết cấu. Tuy nhiên khi bạn sử dụng kết hợp chúng lại với nhau thì chúng sẽ dựa vào nhau để xây dựng nên một hiệu ứng hình ảnh phức tạp. Việc kết hợp này còn tùy thuộc vào loại hiệu ứng nào bạn đang muốn tạo ra. Vậy câu hỏi được đặt ra ở đây là: Hiệu ứng kết cấu nào mà bạn đang muốn đạt được? Sau đây là một vài lựa chọn cho bạn.

Phong cách hoài cổ, phong sương và cũ kĩ (Aged, Weathered, Worn and Nostalgic Style)

Đôi khi bạn muốn nhấn mạnh tính thiên nhiên và lịch sử trong nội dung của bạn. Cho là bạn muốn tạo ra một kết cấu mang lại cảm giác như một tờ brochure bị bạc màu do thời tiết mà bạn đã thấy được trong một chuyến đi dã ngoại nhiều năm về trước. Trong trường hợp này bạn có thể sẽ nghĩ ra một website tương tự như trang Gatlinberg, Tennessee’s Brookside Resort ở hình 3.26 dưới đây.

Hình 3.26

Trang web này có những yếu tố giúp tạo nên một kết cấu mang tính phong sương độc đáo. Đó là những vùng được tô màu nước tạo nên sự sinh động màu sắc và tô điểm thêm cho phần nội dung, những hình postcards được xuất hiện phía sau khung nội dung tạo ra phong cách cổ điển và làm cho những hình dạng của web thêm phần vintage. Đường cong nằm ở dưới logo và một mẩu giấy bị cong 3 chiều “Book now” làm kéo sự chú ý của bạn ra khỏi những hình dạng hình học của web. Một cách ứng dụng thú vị nữa là các đường răng cưa 2 bên của postcard – cho dù nó là một chi tiết nhỏ - nhưng nó cũng tạo ra sự bắt mắt khi bạn nhìn sang 2 bên của trang web.

Những kiểu thiết kế cũ kĩ và phong sương này đã được sử dụng từ rất lâu rồi trong cả thiết kế in ấn và thiết kế website. Nó được nhiều người biết đến khi trở thành trào lưu thiết kế năm 2004, khi mà Cameron Moll đặt cho nó một cái tên thời thượng và dễ nhớ, That Wicked Worn Look. Hàng loạt bài viết của Cameron về chủ đề này ngay lập tức nổi lên và đã truyền cảm hứng cho nhiều nhà thiết kế web (trong đó có cả tôi) đưa phong cách thiết kế này vào trong website. Một ví dụ khác sử dụng tính nghệ thuật phong sương để tạo ra cảm giác cổ điển là trang web Team FannyPack ở hình 3.27. Thiết kế này được tạo nên cho trông giống một từ giấy báo nhàu nát cũ kĩ. Chú ý những kết cấu phong sương và góc được gấp ở phía trên khung nội dung, cũng như bố cục màu tông nâu đỏ đã làm cho phần nội dung mang tính lịch sử hơn.

Hình 3.27

Sử dụng một kết cấu như vậy không nhất thiết trang web của bạn phải là những trang web có nội dung mang tính cổ xưa, lịch sử. Trang Electric Pulp ở hình 3.28 là một ví dụ đáng xem cho một website mang phong cách phong sương nhưng lại không hoài cổ.

Hình 3.28

Tuy rằng kết cấu hình nền của trang Brookside Resort được thiết kế để trông như một tấm ván giả gỗ của những năm 70 thì kết cấu hình nền gỗ của trang Electric Pulp đơn giản chỉ để tạo nên một cảm giác rung động hài hòa và thủ công. Hình ảnh logo được xoay nghiêng nhẹ, những đánh dấu trên thanh chuyển hướng và những cái cây ở phía dưới trang trông giống như được vẽ bằng tay, và ô chữ “We Build Websites” trông như được cháy xém in xuống hình nền. Tất cả những hiệu ứng trên giúp tạo nên được một phong cách rất dễ nhận diện và phong cách này cũng được sử dụng rất nhiều ở các công ty thiết kế web.

Cho dù một vài người cảm thấy rằng phong cách cổ điển này đã lạc hậu và lỗi thời, nhưng tôi thì vẫn tin nó vẫn là một lựa chọn website tốt. Nó giống như là một chiếc quần jean với những lỗ rách ở đầu gối hay là những chồng bưu thiếp bị rách ở rìa. Chúng ta nên dành cho nó sự công nhận và tôn trọng những thứ đã tồn tại và hao mòn qua thời gian.

Tiếp theo sẽ là một phong cách hoàn toàn khác …

Gọn gàng và tinh tế (Clean and Grainy)

Vào khoảng thời gian cuối thế kỉ 20, nhiều nhà thiết kế và phát triển web đã quyết định thay đổi hoàn toàn kết cấu của website, trái ngước hoàn toàn lại với phong cách cổ điển. Nhìn chung đây là một hành động hợp lý tại thời điểm này. Suy cho cùng, nếu bạn muốn tạo được một ấn tượng doanh nghiệp chuyên nghiệp và sinh động thì việc thêm vào một đống những kết cấu màu mè sẽ làm cho bạn giống như là mặc một chiếc quần jean rách rưới và một chiếc áo thun đi phỏng vấn vậy. Nhưng điều này cũng không có nghĩa là một website cho doanh nghiệp, tập đoàn thì phải chán ngắt và phẳng lì. Hãy hình website của trang Foundation 6 ở hình 3.29.

Hình 3.29

Ở đây chẳng thể thấy được một màu xanh dương nhàm chán hoặc những bức hình được đóng khung tẻ nhạt, thay vào đó là một thiết kế chuyên nghiệp và tinh vi, tỉ mỉ với một bố cục màu sắc bổ sung và một kết cấu hài hòa. Hãy coi những đường cong trên banner F6, một hình nền xanh dương được để hiệu ứng radial gradient và hiệu ứng đổ bóng cho những ảnh chụp giữa trang. Tất cả những yếu tố này được đặt trong một hình nền gồm 3 khối màu. Kếu cấu được sử dụng ở đây đơn giản chỉ là một khuân mẫu hình lặp lại của những chấm nhỏ. Nếu bạn nhìn xung quan bạn thì bạn sẽ nhận ra được là hầu hết tất cả các bề mặt điều trông giống như một kết cấu tinh tế. Việc thêm vào những hiệu ứng này giúp làm cho bề mặt website sinh động hơn.

Kết cấu website tinh tế này hiện đang là một xu hướng mới và sẽ được sử dụng trong nhiều năm tới nữa trong tương lai. Một trang web khác cũng sử dụng kết cấu phổ biến này dựa trên nghệ thuật của sự đơn giản là trang New Adventures in Web Design ở hình 3.30.

Hình 3.30

Ở đầu chương tôi đã nói rằng những dạng hình học là tiêu chuẩn của website nhưng nó làm cho webstie có cảm giác khô cứng và kĩ thuật quá nhiều. Trang web trên được thiết kế bởi Simon Collison đã sử dụng tốt những hình dạng truyền thống này. Những tỉ lệ hết sức chính xác này có thể sẽ mang lại cảm giác lạnh lùng và máy móc nếu không được thêm vào hiệu ứng gradient, một màu nền ấm áp và một kết cấu tinh tế. Những yếu tố kết cấu bổ sung này khiến cho trang web dễ đi vào lòng người và nổi bật hơn.

Phong cách sổ tay thủ công (Handcrafted Scrapbook)

Một phản ứng thú vị nữa – nói đúng hơn là một biến thể - của phong cách cổ điển là những thiết kế này trông giống như được lấy ra từ những cuốn nhật kí cá nhân hoặc một cuốn sổ tay hơn là một trang web. Một ví dụ thú vị là trang London’s social sports club go Mammoth ở hình 3.31.

Hình 3.31

Trang web này chắc chắn là rơi vào nhóm những trang web màu mè rồi, nhưng những điều chỉnh nhỏ giúp cho nó trông thủ công hơn. Đầu tiên là hầu hết những khung hình chữ nhật trên page đều được xoay chuyển hoặc bị cắt bớt đi một cách không đều. Những thiếu sót có chủ đích này làm cho các khung trông như được cắt thủ công bẳng một cây kéo vậy. Tương tự như vậy ở những hình các vận động viên trong khung nội dung chính, mỗi hình được crop lên nổi bật khỏi hình nền và có một viền trắng xung quanh làm cho chúng trông như cắt và dán một cách vội vàng. Đây quả thực là một thiết kế đẹp với một trang có mục tiêu làm cho các môn thể thao giải trí được thể hiện một cách thú vị và đơn giản.

Một ví dụ tuyệt đẹp khác của phong cách này là trang Marie Catrib’s restaurant ở hình 3.32. Thay vì sử dụng hiệu ứng hình cắt – dán để tạo ra nghệ thuật thủ công thì trang web lại sử dụng kết cấu giống như những tờ giấy, những hình ảnh lớn và những chữ dưới dạng viết tay như là những yếu tố trang trí. Kết quả ta thấy được là một trang web của sự tự do, tinh nghịch nhưng cũng làm trỗi dậy sự thèm ăn của người truy cập.

Hình 3.32

Phong cách hoạt họa (Whimsical Cartoon Style)

Trang web của Marie Catrib là sự cân bằng giữa yếu tố sáng tạo tinh nghịch và những hình vẽ thủ công tinh vi. Nhưng nếu bạn muốn nhiều hơn nữa thì sao? Hãy sử dụng những hình ảnh đơn giản, những màu sắc sinh động và tập trung vào hình ảnh nhiều hơn là nội dung sẽ giúp bạn tạo được một thiết kế mang tính trẻ thơ – thiết kế mà tôi gọi là phong cách hoạt họa.

Nếu nhóm đối tượng người truy cập mà bạn đang nhắm đến là trẻ em thì phong cách này là một lựa chọn hoàn hảo. Một ví dụ cho phong cách này là trang web Disney’s Club Penguin ở hình 3.33. Nếu mà tính tương tác và những hình ảnh hoạt họa này không thu hút được sự chú ý của trẻ con thì những hình ảnh vui nhộn và những màu sắc bắt mắt này sẽ làm được. Một điểm nữa cần chú ý là các góc tròn được sử dụng xuyên suốt trang web làm cho các khung này hài hòa với những phần còn lại của trang.

Hình 3.33

Một ví dụ đáng xem nữa trong những thiết kế mang phong cách hoạt họa là trang Pop Cap Games ở hình 3.34. Tựa game nổi tiếng nhất của Pop Cap là loạt game Plants vs. Zombie, vì nó được làm nổi bật lên trên trang chủ của web với những nhân vật chính trong game. Thông thường thì việc làm nhiễu loạn một thiết kế web bằng cách sử dụng nhiều hình ảnh bắt mắt như trong ví dụ này sẽ tạo ra một sự xao lãng rất lớn cho phần nội dung. Nhưng cho dù công việc chính của bạn là phải bán được game đi chăng nữa thì việc tạo ra được sự sao lãng thú vị này là tất cả những gì bạn cần. Trong trường hợp cụ thể này, những cái cây bên trái và các con zombies bên phải đang lườm nhau giúp tạo ra sự di chuyển qua lại cho ánh mắt người truy cập. Nếu gặp may mắn thì khi chuyển mắt qua lại như vậy, người truy cập sẽ đọc được một chút phần nội dung trước khi họ quay trở lại chơi game của họ.

Hình 3.34

Phong cách tối giản (Minimal Texture)

Bây giờ, khi mà tôi đã bỏ ra hẳn một chương này để giải thích và thuyết phục bạn nên đưa kết cấu vào thiết kế, thì tôi cảm thấy như bị ép buộc khi phải cho bạn biết rằng đôi khi kết cấu là không cần thiết. Cũng như khi không tô màu ra để tạo ra những hiệu ứng đặc biệt, thì việc bỏ ra những kết cấu có thể là cách tốt nhất để tạo ra tính chất và đặc trưng website của bạn.

Hãy xem ví dụ web John Gruder’s Daring Fireball ở hình 3.35 làm ví dụ. Bạn sẽ thấy được ở đây không hề có những hiệu ứng gradient, những góc tròn, một kết cấu tinh tế … thậm chí là không có bất cứ khung nào nữa.

Hình 3.35

Trong khi một vài người nói rằng trang web trên là nhàm chán nhưng tôi lại cho rằng John đơn giản chỉ là loại bỏ đi những sự xao lãng không cần thiết trên trang web của mình. Đây là một bố cục đơn được tối giản một cách tối đa nhằm phục vụ cho một mục đích duy nhất: chuyển tải nội dung. Nội dung chính của websie này là về công nghệ và các tin tức về Apple nên nó hoàn toàn có thể chấp nhận được với một kết cấu nhiều kĩ thuật và hình ảnh. Nhưng ngược lại, John chỉ muốn bạn tập trung vào những bài viết của mình cho nên việc loại bỏ đi kết cấu đảm bảo được điều đó.

Việc giảm thiểu sử dung kết cấu trong thiết kế không có nghĩa là bạn phải lột bỏ hết như trang của Daring FireBall ở trên. Cón nhiều ví dụ khác cho dạng bố cục tối giản này chứng tỏ rằng nó không chỉ đơn thuần là văn bản không. Trang web thiết kế chuyên nghiệp Mark Boulton ở hình 3.36 là một ví dụ tuyệt đẹp cho một thiết kế tối giản.

Hình 3.36

Trung điểm của trang này chính là cái tiêu đề quá cỡ giới thiệu những dự án gần đây mà Mark đã thực hiện. Nó như một bìa của một cuốn tập chí vậy, logo, thanh chuyển hướng và những mô tả nội dung đều được nằm phía trên ở tiêu đề này. Phong cách này được tiếp tục với phần còn lại của website khi những khung nội dung được chia làm thành những cột đều nhau. Nó là một thiết kế website hoàn hảo dựa trên đường kẻ ô.

Tạo lập một kết cấu cho riêng bạn

Như đã được mô tả trong những website mà tôi đã đưa ra ở trên, kết cấu mang lại sức ảnh hưởng rất lớn lên cách người truy cập đánh giá trang web của bạn. Việc nắm bắt được những xu hướng thiết kế web hiện tại là một điều cần thiết để bạn có thể tạo ra được những thiết kế hiệu quả và bắt kịp thời đại. Thêm vào đó, việc có những kiến thức về những mẫu thiết kế trong quá khứ cũng giúp bạn tạo nên được phong cách riêng và duy nhất của mình.

Một trong những nguồn tài nguyên hữu dụng nhất cho thiết kế web có thể được tìm thấy trong khu vực sách lịch sử của bất kì tiệm sách hoặc thư viện nào gần nhà bạn. Việc làm quen với những kiểu mẫu kiến trúc thời phục hưng, đi sâu vào phong trào chủ nghĩa thực tế (và hiểu được nó có tác động như thế nào đến sự phá cách trong kết cấu vẽ tranh của các họa sĩ như Van Gogh và Cezanne), và học cách làm sao để các nhà thiết kế thời trang hình thành nên được một dòng chảy xu hướng thời trang như ngày nay … sẽ giúp bạn rất nhiều. Những kiến thức về lịch sử thiết kế đồ họa sẽ mở rộng visual toolbox của bạn và cho bạn sự sáng tạo để có thể phát triển nên một phong cách của riêng mình, đồng thời có được sự đa dạng về nghệ thuật làm hài lòng bất cứ yêu cầu nào của khách hàng.

Xuy cho cùng thì khách hàng vẫn là người quyết định những hình ảnh nào, mục tiêu nào cho website của mình và điều này là yếu tố quyết định trong việc chọn ra được một kết cấu của bạn. Nhân tiện nói về khách hàng thì bây giờ là lúc mà chúng ta quay lại để xem quá trình tái thiết kế website Southern Savers tới đâu rồi nhé.

Ứng dụng thực tế: Clipping and Saving

Cũng theo đà tiến triển của quá trình thiết kế trang Southern Savers, Jenny ngày càng tổ chức nhiều hơn các hội thảo về phiếu giảm giá xuyên xuốt miền nam nước Mĩ và sự nổi tiếng về trang web của cô cũng ngày một tăng. Southern Savers đang dần trở thành một cái tên cho các nhà nội trợ mặc dù nó chỉ là một trang wordpress nhàm chán và không có thương hiệu riêng. Trong thời gian này, Jenny còn được một vài tờ báo và tạp chí địa phương phỏng vấn, điều này lại càng làm tăng thêm số lượng người truy cập vào trang web của cô. Rõ ràng là website này cần tiếp tục phát triển hơn nữa.

Hình 3.37

Từ cuối chương 2 thì đội thiết kế Squared Eye đã có những bước tiến đáng kể. Dự án đã có được một bản khung sườn thiết kế được chấp nhận, và nhờ vào phương pháp moodboard của Andrew mà đội đã biết được Jenny thích màu gì trên website của mình. Trước khi thực sự bắt tay vào thiết kế web, Andrew trước tiên phải thực hiện cho xong công việc xây dựng thương hiệu của mình đã.

Hình 3.38

Phương án 1: Playful

Với phương án này, Andrew đã vẽ tên công ty với một kiểu chữ tùy chỉnh và nối liền bên dưới là một dòng tagline được viết bằng tay. Những đường thẳng được nối lại từ những dấu chấm giống hình một cơn gió làm cho phông chữ vui mắt hơn. Khi thiết kế phương án này, anh đã nghĩ ra một ý tưởng là thêm một con sóc vào hình, một con vật mà lúc nào cũng đi thu nhặt và dự trữ thức ăn để dành, một yếu tố then chốt tương tự như việc sử dụng phiếu giảm giá vậy.

Phương án 2: General store

Ở bản thiết kế này, phông chữ trên logo được thiết kế giống như một bảng hiệu được tô bằng tay. Andrew đã thêm vào một bông hoa mộc lan như một dấu hiện logo. Bằng việc kết hợp các yếu tố quen thuộc này lại giúp tạo ra sự cân bằng thương hiệu so với các thương hiệu đang có. Những hình ảnh “bách hóa” phía dưới còn hỗ trợ cho việc truyền tải thông điệp, như một cửa hàng bách hóa, rằng Southern Savers là một của hiệu mà bạn có thể có được những giá cả tốt nhất.

Phương án 3: Classic southern living

Phương án này là sự kết hợp giữa font chữ script và một đường kẻ chân mỏng ở dưới. Ở dưới là những con số mang phong cách cổ điển, một cây kim chỉ hướng gió, và một cái ruy băng màu xanh dương là những thứ làm cho trang web Southern Savers gợi nhớ đến những điều truyền thống và đáng tin cậy của Miền nam.
Kết quả là Jenny thích mỗi hình một chút. Cô không thích logo ở phương án 1 nhưng cô thực sự thích ý tưởng về con sóc. Cô cũng thích bông hoa mộc lan trong phương án 2 và cũng thích logo ở phương án 3. Kết quả cuối cùng là sự kết hợp hoàn hảo giữa cả 3 phương án như bạn thấy ở hình 3.39. Ta thấy được hình nền gỗ màu xanh tinh tế đằng sau logo và hình bông hoa mộc lan nhẹ nhàng như được tô bằng tay. Những yếu tố này tạo nên sự cảm nhận về chiều sâu và đặc trưng của thương hiệu Southern Savers. Đây cũng là chìa khóa trong việc thiết kế website tiếp theo của Matthew Smith.