Kiến trúc Sinh thái – Khái quát lịch sử – Quá trình phát triển

Khái quát về kiến trúc sinh thái Kiến trúc sinh thái (KTST) hay còn gọi là “kiến trúc xanh”, “kiến trúc bền vững” được hiểu là kiến trúc mà trong suốt vòng đời của nó từ khi xây dựng, sử dụng cho đến khi loại bỏ đều được tiến hành theo các nguyên tắc sinh thái.

“Tôi vẽ cả ngày”

Sẽ có bao nhiêu người phản ứng khi nghe một ai đó nói họ dành cả ngày với cây bút chì trên tay. Nó thường được cho là một sự thực hành sáo rỗng, vô bổ. Những người đó được xem như đang suy nghĩ vu vơ, vô định và bận rộn với những nét vẽ nguệch ngoạc.

Ý tưởng sáng tạo cho hàng hiên đẹp suốt 4 mùa

Hàng hiên vốn là không gian nửa kín nửa mở linh hoạt, cũng là chốn cân bằng môi trường sống bên trong và ngoài ngôi nhà.

Thứ Năm, 18 tháng 4, 2013

7 Yếu Tố Cơ Bản trong Thiết Kế Blog

Trong bài này, chúng tôi sẽ đưa ra 7 yếu tố cơ bản trong thiết kế Blog, các yếu tố này sẽ có ảnh hưởng rất lớn vào sự thành công hay thất bại của Blog

   
        Cộng đồng Blog đang ngày càng được mở rộng, và chúng tôi- những người thiết kế web- hiểu rất rõ tầm quan trọng của sự phát triển Blog, vậy nên, chúng tôi luôn muốn cung cấp tới khách hàng những lợi ích mà một Blog có thể mang lại. Blog là một cách lý tưởng để liên tục cập nhật tới độc giả những phát triển mới đang được thực hiện trong doanh nghiệp của bạn và những chia sẻ quý giá mà họ có thể tìm thấy khi gắn bó với bạn.Ngược lại điều này sẽ giữ cho trang web d90 một lượng truy cập khổng lồ khi một nội dung mới được cập nhật. Và để có được một Blog như vậy, sẽ có rất nhiều yếu tố quan trọng cần phải biết trước khi thiết kế một Blog. Trong bài viết này, chúng tôi sẽ đưa ra một số yếu tố cần được ưu tiên khi thiết kế Blog.        
            Ngay trên những Blog được thiết kế tối giản nhất, các yếu tố mà chúng tôi đưa ra dưới đây cũng là những yếu tố cơ bản sẽ mang lại một điểm nhấn, một sự chú ý rất lớn đến thiết kế của bạn. Mỗi một yếu tố có thể có khả năng tạo nên một sự tác động lớn đến việc thành công hay thất bại của trang web, dù cho nội dung mới là yếu tố quyết định cuối cùng của Blog.
       
            Vì vậy, sau này, khi bạn nhận được một hợp đồng thiết kế Blog, đây chắc chắn sẽ là những yếu tố mà bạn cần xác định.
       

            Header

       
            Theo lẽ tự nhiên, đây sẽ là phần quan trọng của bất kỳ một trang web nào bởi vì nó cho phép mọi người biết được nơi họ đang truy cập trên Website. Chẳng hạn, nếu trang web của bạn được gọi là Read Write Web, bạn phải có một Header ‘Read Write Web’ lớn, rõ ràng để khách truy cập nhận biết ngay khi liếc qua trên phần đầu trang web. Header sẽ giúp khách truy cập loại bỏ bất kỳ một nhầm lẫn nào, dù cho nó không phải là một vật bảo đảm.
       
            Header sẽ luôn có một Logo, tên của trang Web hoặc công ty đằng sau nó, và có thể trong một số thiết kế Header có kèm theo Text.
       
           
       
            Header của Blog là một trong 2 yếu tố chính để ngay lập tức lôi cuốn sự tập trung và chú ý của người dùng. Vì vậy nó cần phải được thiết kế một cách nổi bật, giống như trên một tờ báo hay tạ d90 p chí. Và bởi vì bạn thường muốn Header là yếu tố đầu tiên của trang web khi khách truy cập nhìn vào, thế nên hầu hết các nhà thiết kế đều đặt Header Blog ở góc trên bên trái của trang web.
       
            Điều này không phải luôn là một sự cần thiết, nhưng sau nhiều năm, không có một định hướng biến đổi tinh tế nào, cộng đồng Online đã quen tìm kiếm tên và Logo của bạn ở vị trí đó. Ngoài ra, có một phần lớn các ngôn ngữ địa phương và text đã được thiết lập bắt đầu từ góc trên bên trái, đây thường là nơi bắt đầu để tìm kiếm thông tin.
       

            Ví dụ tham khảo

       
           
       
           
       

            Post Headlines

       
            Nếu Header là một trong 2 yếu tố chính để thu hút sự chú ý của độc giả, Post Headlines lại có một vai trò khác. Chúng ta hãy xem lại các Templete, các tờ báo in luôn sử dụng các Headline để chia tách nội dung của bài viết, có thể sử dụng Font chữ lớn hơn, in đậm hơn.
       
            Các điểm nổi bật trong suốt toàn trang sẽ hướng con mắt người đọc tìm tới những mục liên quan hoặc hấp dẫn. Tương tự như vậy, trên một Blog, các yếu tố trực quan này sẽ giúp người đọc sàng lọc thông tin khi họ Navigate qua Blog, vì vậy, bạn phải làm thế nào đó để người đọc có thể tìm kiếm ngay được các post headlines.
       
           
       
            Headline chắc chắn là một yếu tố rất khó thực hiện, vì bạn muốn chúng phải lớn và hiện ra lù lù, nhưng không được làm cho chúng trở nên luộn xộn và cảm giác như chúng đang bị dồn nén.
       
            Điều này có thể đòi hỏi phải có sự khéo léo khi thiết kế. Cần phải xác định được điều gì đáng được xem xét, Headline phải thu hút được sự chú ý,  và không phá hủy sự trơn tru của thiết kế.
       
            Một vị trí tốt để bắt đầu tìm kiếm, đó là danh sách các Font chữ Headline lớn, đậm từ DesignM.ag.
       
            Font chữ bạn chọn có thể cần điều chỉnh khoảng cách để Font chữ được sắp xếp có một cách hợp lý khi xuất hiện.
       

            Ví dụ tham khảo

       
           
       
           
       

            Navigation

       
            Một lần nữa, như với một trang web bất kỳ nào đó, Navigaiton trực quan là một yếu tố quan trọng vì mục đích và sự đúng đắn dành cho người đọc. Bây giờ, khi thiết kế, bạn không cần thiết phải đọc viết lại những gì mà trang web khác đã có, nhưng bạn sẽ thiết lập cách bạn tìm kiếm, vì vậy tính khả dụng của giao diện quan trọng này có thể tích hợp tới thiết kế Blog
       
            Trong thực tế, Navigation là một phần quan trọng trong việc biểu thị những thông tin Blog sẽ cung cấp. Việc tạo ra đường vào là bước đi lớn đầu tiên.
       
           
       
            Navigation phải là một yếu tố có thể tiếp cận dễ dàng, được đánh dấu rõ ràng, và không có nhiều hạn chế để bạn có thể thiết kế nó một cách hiệu quả và sáng tạo.
       
            Một lời khuyên dành cho việc phân bổ trên yếu tố này và để thể hiện tầm quan trọng của nó, đó là thông qua phương pháp tiếp cận đa tầng. Không chỉ có một Navigation chính được phân lớp phù hợp và thích hợp trong thiết kế Blog mà còn có thể dễ dàng có một yếu tố phụ Navigation đơn giản dựa trên Text ngay dưới Footer của Blog. Đây là một bổ sung nhanh chóng cho trang web nhằm hỗ trợ cho cả khách hàng và độc giả của trang web.
       
            Mặc dù bạn có thể thích một thanh Navigation phức tạp, hãy xem thư viện Navigation tại Noupe để có những ý tưởng mới.
       

            Ví dụ tham khảo

       
           
       
           
       

            Archives

       
            Đối với một Blog, nội dung là động lực để phát triển Blog, vì vậy, bạn phải làm thế nào đó để nội dung có thể được tiếp cận một cách dễ dàng, đặc biệt là khi di chuyển từ trang đầu tiên sang trang thứ hai của các bài viết mà đọc giả đang theo dõi.
       
            Hãy nhớ rằng một trong những mục đích chính của Blog là khích lệ độc giả, và bạn không thể thực hiện điều đó nếu một khi đang theo dõi một tài liệu, độc giả không biết tìm trang tiếp theo ở đâu. Không phải mọi thứ xuất bản trên một Blog sẽ có sức hấp dẫn mãi mãi và sự ổn định của nó được thử thách qua thời gian, nhưng ít ra bạn có thể cung cấp một số nội dung hỗ trợ thông qua Archives.
       
           
       
            Tôi đã từng viết về điều này trước kia khi nói về cách tạo phần Archive có chiều sâu và toàn diện đối với Blog của bạn.
       
            Hãy chắc rằng phần Archives có phạm vi cần thiết để chứa đựng một sự đóng góp khá lớn từ người cung cấp nội dung hay, và thiết lập thanh Bar nhỏ để người sử dụng Blog có thể thấy giá trị của nó.
       

            Ví dụ tham khảo

       
           
       
           
       

            Site Search

       
            Archive không phải là cách duy nhất để tạo sự chú ý đến nội dung trong thiết kế của bạn và khích lệ tỷ lệ người truy cập Blog thông qua nội dung của nó, mà yếu tố Site Search cũng có thể thực hiện điều đó.
       
            Site Search mang lại cho người dùng sự thoải mái và quen thuộc hơn so với việc sử dụng Navigation và Archive trong việc tìm kiếm những thông tin mà họ muốn trên trang web của bạn. Người dùng cũng có thể truy cập tới trang web thông qua một trang web khác và có thể chỉ cần duyệt một từ khóa đặc biệt. Một Site Search có thể dễ dàng giải quyết những lo lắng này.
       
           
       
            Site Search có thể được thực hiện như một cách tinh tế và kín 3640 đáo nếu bạn muốn, hoặc bạn có thể làm tạo ra những điểm sặc sỡ, đậm nét cho nó, nhưng tuy nhiên bạn chỉ cần thực hiện một Site Search là đủ. Cả khách hàng và độc giả sẽ đánh giá cao điều này.
       
            Và như đã đề cập, nếu bạn muốn một phương pháp tiếp cận tối giản nhất và không làm cho người đọc cảm thấy lạ, thì Site Search là một bổ sung rất có giá trị.
       
            Bên cạnh Site Search sẽ được thực hiện một cách dễ dàng trong một kiểu thiết kế tối giản, bạn có thể đặt nó ở bất cứ đâu và xác định vị trí của nó làm sao cho nó Blend thật tốt với Background. Và miễn là nó không làm giảm đi vẻ đẹp của thiết kế, tại sao không tạo ra một Site Search để làm cho độc giả cảm thấy dễ dàng hơn nhiều khi muốn tìm kiếm nội dung trên Blog của bạn.
       

            Ví dụ tham khảo

       
           
       
           
       

            RSS Subscribe

       
            Nội dung là yếu tố làm cho Blog phát triển, và khi thiết kế, bạn phải đảm bảo bạn sẽ cung cấp cho độc giả một cách để đăng ký tới RSS feed của trang web, mặc dù điều đó có nghĩa họ không được tiếp xúc với những thiết kế bằng tay rực rỡ của bạn.
       
            Phần thưởng dành cho thiết kế của bạn là hỗ trợ và cho phép người đọc nhận được nội dung theo cách mà họ muốn. Khi thiết kế, bạn sẽ không chịu trách nhiệm về nội dung, nhưng sự phân bổ và trình bày nội dung lại phụ thuộc vào thiết kế của bạn. Toàn bộ những cơ bản mà người đọc mong đợi là không có gì cản trở họ tiếp cận nội dung Blog.
       
           
       
            Mặc dù khi RSS Subscribe có xu hướng trở thành một yếu tố thiết kế khá nhỏ, nhưng nó vẫn thu hút được sự chú ý. Điều này có nghĩa là, kích thước không quan trọng trong thiết kế. Khi nó vẫn còn phù hợp với phần còn lại của thiết kế, thì nó không làm ảnh hưởng đến sự trơn tru và cảm nhận của thiết kế.
       
            Với rất nhiều RSS icons thú vị, có sẵn được cung cấp từ cộng đồng thiết kế, chúng ta không đề cập đến kỹ năng thiết kế của riêng bạn, việc thêm yếu tố thiết kế Blog quan trọng này sẽ là một điều cần thiết phải xem xét khi bạn bắt đầu thiết kế một Blog.
       

            Ví dụ tham khảo

       
           
       
           
       

            Post & Comment Styling

       
            Theo lẽ tự nhiên, Blogs là vừa phải có tính hấp dẫn, vừa phải có sự tương tác, và thiết kế của bạn phải làm nổi bật cả hai khía cạnh này thông qua một yếu tố rất quan trọng; phong cách.
       
            Đặc biệt, phong cách của bài post và của phần bình luận (tất nhiên khi áp dụng. Hãy tìm hiểu xem khách hàng của bạn có cho phép thiết kế phần bình luận hay không trước khi bạn chỉ ra đó là một điều hết sức hiển nhiên). Các bài post là mạch máu chảy qua blog và hãy làm sao giữ được hơi thở cho nó, chỉ cần phần bình luận là phạm vi của tim giúp bơm máu.
       
           
       
            Vì vậy, hãy chắc rằng thiết kế hiển thị các bài post tập trung chủ yếu về phong cách. Các phạm vi này là vùng trọng điểm, vì vậy, hãy chắc tầm quan trọng của chúng được phản ánh trong thiết kế. Với nét uyển chuyển và sức mạnh mà thiết kế mang lại sẽ có một tác động to lớn lên toàn bộ trang web.
       
            Nếu phần bình luận được tạo ra, bạn phải làm cho nó trở thành một phạm vi nổi bật trong thiết kế, không chỉ là một yếu tố hấp dẫn của Blog mà còn làm cho các thành viên trong cộng đồng, những người đang chỉa sẻ suy nghĩ của họ cảm thấy thoải mái. Và bạn có thể thực hiện điều này thông qua thiết kế.
       
            Và bây giờ, việc tạo phong cách cho phần bình luận có thể cung cấp mọi vai trò trong WordPress nếu có một phong cách cho phần bình luận độc đáo.
       

            Ví dụ tham khảo

       
           
       
           
   
    (Theo vnwordpress)

Những Lỗi Thường Gặp trong Thiết Kế Web

Rất nhiều Template đã không được chấp nhận trên Themeforest vì mắc phải một số sai lầm tương tự nhau: Typography (Font, chiều cao của dòng, khoảng cách các chữ, màu sắc), sự liên kết (dạng lưới – grid), và khoảng cách (padding- đệm). Trong hướng dẫn này, chúng ta sẽ xem xét kỹ hơn để tìm ra cách làm thế nào tránh được những lỗi thông thường này.        

            Typography

       
            Bạn phải hiểu được các Font chữ tác động như thế nào đến thiết kế trang và độc giả của bạn. Rất lấy làm tiếc, bạn đã bị hạn chế chỉ sử dụng một vài Font chữ cho trang web an toàn, những Font chữ này có sẵn trên hầu hết các hệ thống. Thậm chí, với danh sách nhỉ này, có thể trở thành một thách thức đối với việc quản lý chúng theo một cách chính xác với User Experience tốt nhất.
       
           
       

            Đừng kết hợp quá nhiều Font chữ

       
            Chọn một Font cho các tiêu đề, và một Font chữ khác cho phần nội dung. ĐỪNG sử dụng quá hai Font chữ khác nhau trong phần nội dung. Hãy coi đây là một nguyên tắc chung. Chẳng hạn, bạn có thể sử dụng IMPACT” cho các tiêu đề, và “ARIAL” cho phần nội dung. Hãy nhớ mỗi Font chữ được thiết kế với Baseline, x-Height, Cap – Height v.v… riêng của nó. Bạn có thể so sánh các Font chữ với Typetester. Đấy thực sự là một công cụ phát triển độc đáo và hữu dụng của người bạn thân, người Croatia Marko Dugonjic của tôi.
       

            Xấu

       
           
       

            Tốt

       
           
       

            Đừng kết hợp các Font Sans Serif với Serif

       
           
       
            Ok, bây giờ, đây không phải là một quy tắc. nhưng đối với những người mới bắt đầu trong nghề thiết kế, tôi khuyên chân thành đừng nên thực hiện như vậy. Không dễ dàng như mình nhìn thấy. Một ví dụ lý tưởng về việc 2 loại Font chữ này được kết hợp một cách chính xác, đó là Một danh sách bên ngoài.
       
           
       

            Chọn kích thước Font chữ chính xác.

       
            Chúng ta thường xác định kích thước Font chữ của chúng ta với CSS bằng cách sử dụng tỷ lệ phần trăm, Ems, hay Pixel . Tôi thường xác định kích thước Font chữ của phần nội dung là 62.5%; và tôi sử dụng Ems. Một Em tương đương với 10px khi chúng ta sử dụng nó theo phương pháp này. Khi chọn kích thước Font chữ, hãy chú ý đến sự cân bằng tổng thể trong thiết kế và tính dễ đọc của trang web. Để dễ đọc hơn, bạn có thể sử dụng kích thước 14px hoặc 1.4 Em. Một số phần của thiết kế, chẳng hạn như Tag- line hay tiêu đề, sẽ cần thiết lập một kích thước Font chữ lớn hơn như 18px hoặc thậm chí 24px.
       

            Xấu

       
           
       

            Tốt

       
           
       

            Điều chỉnh Line-height

       
            Đặc tính Line-height thiết lập khoảng cách giữa các dòng. Khi thiết kế layout trong Photoshop, tôi thường thiết lập kích thước Font chữ của tôi lên 12px và Line- height là 16px hoặc 18px. Ngoài ra, tất cả phần nội dung được thiết lập “antialias: none”- vì vậy, chúng ta xem trước một Pixel thực xem nó trông như thế nào trong cửa sổ trình duyệt.
       
           
       

            Chọn màu sắc Font chữ phù hợp

       
            Vấn đề chính cần phải xem xét ở đây là làm cho text của bạn dễ đọc trên bất kỳ một Background nào. Sự tương phản là then chốt.
       

            Xấu

       
           
       

            Tốt

       
           
       
            Vấn đề có thể xuất hiện trong việc lựa chọn bảng màu không hợp lý.
       

            Xấu

       
           
       
            Để giải quyết vấn đề này, hãy sử dụng một số công cụ trực tuyến có thể giúp bạn chọn màu sắc phù hợp: Adobe Kuler, Colorlovers v.v…
       

            Căn chỉnh

       
            Sự căn chỉnh là chỉnh sửa một Object trong mối liên hệ với Object khác, hoặc định hướng trạng thái một số object hay thiết lập các object trong mối liên hệ với các object khác. Sự căn chỉnh cung cấp framework có cấu trúc của một thiết kế. Việc căn chỉnh có thể tác động đến tâm trạng của trang cũng như tính hiệu quả khi nhận thông điệp gửi qua.
       

            Sử dụng hệ thống Grid.

       
            Sử dụng hệ thống Grid sẽ giúp bạn căn chỉnh các yếu tố trên trang web của bạn tốt hơn. Tôi khuyên bạn nên sử dụng 960 Grid System, vì nó cung cấp cả thiết kế và các Coding Template (.psd, .ai, .css, .html v.v…).
       
            Hãy chắc bạn đã xem “A Detailed Look at the 960 Framework” trên nettuts +.
       
           
       

            Hãy nhất quán

       
            Hãy nhất quán trong việc căn chỉnh của bạn. Đừng căn chỉnh một yếu tố sang bên trái, rồi một yếu tố sang bên phải; điều này chỉ sẽ làm gây nên sự nhầm lẫn. Nếu bạn căn chỉnh tất cả Text của bạn sang bên trái, sau đó căn chỉnh các tiêu đề, và các yêu tố khác cũng theo hướng đó. Khi bạn thành thạo hơn, bạn có thể phá bỏ các quy tắc này; nhưng nếu bạn muốn an toàn, hãy chỉ sử dụng một sự căn chỉnh.
       

            Xấu

       
           
       

            Tốt

       
           
       

            Không gian (đệm)

       
            Theo W3C, các thuộc tính CSS padding – đệm CSS xác định không gian giữa Border của yếu tố và nội dung của nó. Không gian, phần đệm hay không gian trắng có thể giúp bạn tạo một layout cân bằng.
       

            Không nên chen lấn các yếu tố

       
            Hãy tạo khoảng cách cho các yếu tố của bạn. Tối thiểu là 10px giữa các Box nội dung hay các yêu tố riêng biệt – như là một quy tắc chung.
       

            Xấu

       
           
       

            Tốt

       
           
       

            Đừng kéo giãn các yếu tố

       
            Ngoài ra, không nên để khoảng cách giữa các yếu tố quá xa, từ yếu tố này sang yếu tố khác- vì bạn có thể End up các lỗ hổng trong thiết kế của bạn. Layout của bạn phải trông đầy đủ và nhất quán.
       

            Xấu

       
           
       

            Tốt

       
           
       

            Nhất quán với không gian

       
            Nếu bạn chọn không gian cho tất cả các yếu tố, phần đệm là 10px thì thật lý tưởng. Nhưng đừng tạo phần đệm cua Sidebar là 10px, nội dung chính là 30px. Hơn nữa, nếu bạn sử dụng hệ thống 960 Grid, không gian giữa các yếu tố sẽ tự động thiết lập theo cách tốt nhất. Chúng ta cùng xem một số ví dụ.