Go to the content
Show basket Hide basket
Go back to Blog
Full screen

5 nguyen tac va y tuong cua thiet lap khi tao website

Maggio 8, 2020 23:09 , by 100diemcom - 0no comments yet | No one following this article yet.
Viewed 53 times

Có nhiều cách để tiếp cận kiểu chữ Web để tạo ra kết quả hiệu quả và biểu cảm. Chúng ta hãy xem xét kỹ hơn một số nguyên tắc, quy tắc và ý tưởng để tiếp cận các quyết định về kiểu chữ Web - bạn có thể sử dụng chúng làm điểm khởi đầu để tìm hiểu cách đạt được cài đặt loại hiệu quả trên Web.

1. Tiếp Cận Các Quyết Định Kiểu Chữ Web Một Cách Có Hệ Thống
Trong thiết kế web, mọi quyết định đánh máy cần phải đồng thời thực hiện nhiều kết quả khác nhau. Mỗi tiêu đề bạn tạo phải được đặt trong văn bản dễ đọc và thân thiện với công cụ tìm kiếm, trong khi kiểu chữ phải phù hợp với hướng dẫn của thương hiệu của công ty. Hơn nữa, kiểu chữ phải phù hợp với phong cách đồ họa của trang web và đáp ứng mong đợi của người dùng về khả năng sao chép và dán văn bản. Như bạn có thể thấy, đó là một loạt các nhu cầu cho một tiêu đề để thực hiện.

Trong một số trường hợp, điều này đặt ra một vấn đề. Ví dụ, hướng dẫn về kiểu dáng và thương hiệu có thể yêu cầu từ nhà thiết kế sử dụng các kiểu chữ cụ thể không thể sử dụng trực tuyến. Vì vậy, một quyết định cần phải được đưa ra:

 

đi chệch khỏi hướng dẫn thương hiệu để duy trì sự thân thiện với công cụ tìm kiếm tối ưu hoặc
sử dụng giải pháp thay thế hình ảnh nhúng phông chữ cần thiết vào hình ảnh ( tĩnh hoặc động ) hoặc
xem xét sử dụng sIFR , một kỹ thuật nhúng phông chữ động dựa trên Flash phong phú, cho phép không chỉ nhúng phông chữ vào trình bày nội dung mà còn tương tác với chúng (gần như) như bạn làm với văn bản thuần túy.

Sifr

Trong nhiều trường hợp, vô số mục tiêu Kiểu chữ web cần phục vụ sẽ mâu thuẫn với nhau. Với mỗi khách hàng và cho mỗi dự án, bạn cần ưu tiên và xác định mục tiêu nào quan trọng hơn các mục tiêu khác. Một số khách hàng sẽ quan tâm nhiều hơn đến việc duy trì nhận diện thương hiệu và những người khác sẽ đặt sự thân thiện với công cụ tìm kiếm cao hơn.

Tất cả các quyết định typographic hoạt động trong phạm vi của vấn đề trong tầm tay. Các trang web khác nhau sẽ có nhu cầu khác nhau. Không phải lúc nào cũng có một câu trả lời cho mỗi vấn đề. Nó đòi hỏi phải xem xét cẩn thận về những điểm mạnh và điểm yếu mà mỗi giải pháp đặt ra cho các lĩnh vực khác nhau mà hiệu ứng typography web.

Là một phần của nghiên cứu và nghiên cứu của bạn xem xét cách các trang web khác xử lý các vấn đề tương tự xuất hiện trong công việc của bạn. Typography For Headlines là một tập hợp các liên kết và ảnh chụp màn hình của hơn 100 tiêu đề trên Web, mỗi tiêu đề tiếp cận vấn đề này theo một cách độc đáo và sáng tạo.

 

Loại tiêu đề

Mặc dù lựa chọn kiểu chữ cho các tiêu đề là một vấn đề phổ biến xuất hiện trong thiết kế web, nhưng sử dụng kiểu trên Web liên quan nhiều hơn đến lựa chọn phông chữ. Một cách tiếp cận có hệ thống cũng có thể được đưa đến nhiều khía cạnh khác. Chúng ta sẽ chuyển sang xem xét điều này liên quan đến hệ thống phân cấp thông tin tiếp theo.

2. Sử dụng phân cấp thông tin Có nhiều hơn một cách để ** xác định quyền ưu tiên ** thông qua việc sử dụng kiểu chữ. Trước hết, kích thước loại, màu sắc, trọng lượng, trường hợp và loại được đặt bình thường hay in nghiêng sẽ cho phông chữ quan trọng hơn hoặc nhỏ hơn. Chúng tôi cũng không thể bỏ qua nơi loại được đặt trong bố cục trang web của chúng tôi. Mark Boulton có một loạt 5 phần tuyệt vời về typography gọi là Năm bước đơn giản để đánh máy tốt hơn. Trong phần 5 của loạt bài này, ông thảo luận về trọng lượng. Ông đưa ra một viễn cảnh lịch sử về cách trọng lượng hoạt động với kiểu chữ trong việc tạo ra một trật tự phân cấp. Bài viết giải thích những loại văn bản người dùng mong đợi cho các phần khác nhau của một trang. Dưới đây là sơ đồ về cách người ta chọn thứ bậc kiểu dựa trên quan điểm lịch sử. Nhấp vào hình ảnh bên dưới để đọc mô tả của Mark về nó.

Lộ trình

Người dùng sẽ phản ứng để gõ khác nhau tùy thuộc vào nơi nó được đặt trên trang. Loại được đặt trong bản sao chính sẽ có tầm quan trọng lớn hơn loại được đặt trong thanh bên, với tất cả các yếu tố khác đều bằng nhau. Loại lớn trong thanh bên vẫn sẽ gọi sự chú ý đến chính nó và có thể tự di chuyển lên theo thứ tự mổ. Người ta cần phải cân bằng cẩn thận loại trong phần chính và khu vực thanh bên dựa trên cách bạn muốn người dùng tiêu hóa thông tin bạn trình bày.

Xem xét ảnh chụp màn hình sau từ bài viết Hướng dẫn về Kiểu chữ Web bên dưới. Hình ảnh cho thấy cách đặc điểm loại hiệu ứng phân cấp. Ngoài ra, chú ý làm thế nào mạnh mẽ thanh bên nổi bật. Mặc dù nó rõ ràng tách biệt với nội dung chính, và do đó dường như ít quan trọng hơn, nhưng thật khó để không bị lôi cuốn vào tất cả các phông chữ được trình bày trên nền đen. Quyết định thiết kế này có hiệu quả vì nó khiến bạn muốn nhấp vào phông chữ.

Hieararchy

Mặc dù những phông chữ đó lớn hơn nhiều so với kiểu được đặt trong thân chính, chúng tôi không nhầm lẫn về chức năng của chúng. Chúng hoạt động như quảng cáo. Chúng tôi cố gắng chặn chúng khi chúng tôi đọc bài viết. Vì thanh bên rất bắt mắt nhưng thụ động, chúng tôi không gặp vấn đề gì khi đọc bài viết mặc dù chúng tôi nhận thức được tiềm thức về sự hiện diện của thanh bên.

Vị trí có ảnh hưởng lớn đến cách chúng ta phản ứng với loại trên Web. Các quy ước mới nổi, chẳng hạn như ít quan trọng hơn được đưa ra cho thanh bên, giúp chúng tôi tập trung vào nội dung chính và hướng dẫn chúng tôi thông qua hệ thống phân cấp trực quan của trang web. Các quy ước cũng giúp chúng tôi xử lý nội dung trong các lĩnh vực trang khác nhau.

3. Thiết Kế Cho Dòng Chảy Tối Ưu
Phân cấp cũng quan trọng trong dòng trang. Nó giúp người dùng nhận ra các yếu tố quan trọng nhất của trang khi họ cuộn xuống qua nó. Có những vấn đề chính tả khác để xem xét về dòng chảy. Khoảng cách là một phần lớn của dòng chảy. Khoảng trắng, theo dõi, dẫn đầu, thụt đầu dòng, cũng như phần đệm và lề trên các phần tử - tất cả các phần tử này tạo thành dòng chảy của trang.

Nick La đã viết một bài báo về Tương phản và Dòng chảy . Nó sử dụng trang web Web Designer Wall như một ví dụ về dòng chảy tốt. Giải thích về dòng chảy là ngắn gọn, Space Space đóng vai trò quan trọng nhất trong việc duy trì lưu lượng thiết kế của bạn. Việc sử dụng tốt không gian sẽ cho người đọc biết bắt đầu từ đâu, khi nào tạm dừng, nơi kết thúc và làm gì tiếp theo.

 

hình ảnh

Cuối cùng, tùy thuộc vào nhà thiết kế để tạo ra dòng chảy tốt. Tập trung vào từng yếu tố của khoảng cách và phân cấp. Sau đó xem lại cách họ làm việc cùng nhau. Nhìn kỹ hơn vào hình ảnh trên để có ý tưởng về cách các yếu tố phối hợp với nhau để tạo ra một luồng tốt.

4. Duy Trì Tính Dễ Đọc Trong Sự Hiện Diện Của Thương Hiệu
Để một trang web nổi bật, thiết kế trực quan của trang web cần phải có chất lượng cao . Trong một số trường hợp, điều này có hình thức của một thiết kế phức tạp. Với sự phổ biến ngày càng tăng của các trang web minh họa và có kết cấu nặng nề, sự cần thiết phải đảm bảo rằng kiểu chữ được lựa chọn tối ưu vẫn đặc biệt quan trọng. Hãy xem xét một vài trang web sử dụng các yếu tố thiết kế và kết cấu grunge. Chúng tôi đã xem xét các trang web này trước đây trong bài viết The Secrets Of Grunge Design , nhưng không phải theo cách này.

Trong trang web Pain is Good , thương hiệu của công ty đang thống trị trang (xem ví dụ bên dưới). Hầu hết các văn bản trên trang đã được thay thế bằng hình ảnh. Điều này cho phép nhà thiết kế tận dụng lợi thế của nhận diện thương hiệu đầy đủ.

 

hình ảnh

Khi được nhúng trong hình ảnh, phông chữ có thể được sử dụng theo nhiều cách sáng tạo. Nhà thiết kế đã nhấn mạnh mạnh vào việc thương hiệu sử dụng văn bản đơn giản có thể cản trở thành công của công cụ tìm kiếm. Ngoài ra, điều hướng hàng đầu là bất thường. Có một sự tương phản thấp trong các yếu tố điều hướng. Nó hoạt động, nhưng có thể được cải thiện.

Danh mục đầu tư của Bart-Jan Verhoef Cảnh tập trung vào văn bản hơn là các yếu tố trực quan. Có một vài yếu tố thiết kế và thương hiệu được lựa chọn cẩn thận được chuyển đổi thành hình ảnh, nhưng một tỷ lệ lớn văn bản được giữ dưới dạng văn bản web. Tâm trạng của thiết kế được tạo ra với hình ảnh nền, trong khi văn bản vẫn hoạt động. Đây là một cách để tạo ra một thiết kế grunge trong khi đáp ứng tốt nhu cầu của người dùng. Nhìn lại thiết kế này sau khi xem lại phần Văn bản đối xử như một phần Giao diện người dùng sắp ra mắt, vì nó thực hiện công việc tuyệt vời đó.

 

Verhoef

Tất nhiên, các nhà thiết kế và nghệ sĩ sẽ tiếp tục thử nghiệm các ranh giới của mức độ dễ đọc. Nơi tốt nhất cho các thử nghiệm khắc nghiệt là trong các dự án nghệ thuật cá nhân, như trang EXP Typo dưới đây. Lưu ý cách văn bản ở góc dưới bên trái là không thể đọc được vì nó vượt qua hình minh họa máy đánh chữ cũ.

 

Ty Ty

5. Coi Văn Bản Là Giao Diện Người Dùng
Văn bản trong các giao diện là vô cùng quan trọng. Trong cuốn sách Bắt thực từ 37 Tín hiệu (có sẵn miễn phí), tác giả nêu rõ cách thức mà mỗi chữ cái quan trọng. Lựa chọn từ trong giao diện người dùng có thể thực hiện hoặc phá vỡ chức năng của trang web. Làm thế nào những từ đó được trình bày là quan trọng như nhau. Các mẫu chữ không được cung cấp không cho biết người dùng nên tương tác với cái gì.

Cameron Moll đề cập đến khái niệm coi văn bản là giao diện người dùng trong bài viết của mình Chín kỹ năng tách biệt các nhà thiết kế giỏi và tuyệt vời . Có một bài thuyết trình đi kèm có tên Essential Web Skill đã được thực hiện tại Webmaster Jam ở Dallas Texas. Trong bài trình bày này, ông mô tả cách văn bản là một phần cơ bản của giao diện người dùng. Ông cũng đề cập rằng văn bản làm cho một giao diện có thể truy cập và dễ tiêu hóa hơn.

 

hình ảnh

Hình ảnh trên là một ví dụ anh sử dụng văn bản đang được sử dụng làm giao diện người dùng . Ở bên trái, bạn sẽ tìm thấy một văn bản chưa được định dạng. Ở bên phải, bạn sẽ tìm thấy văn bản được cung cấp một chức năng trong giao diện người dùng. Lưu ý cách màu sắc và trọng lượng của văn bản khác nhau. Có một khoảng cách rộng rãi giữa các đoạn và trong các dòng. Liên kết được thực hiện để nổi bật và dễ dàng để xác định. Để xem bản gốc của ảnh này trước và sau ảnh, bạn sẽ cần tải xuống bản trình bày từ trang của Cameron.

Tài Nguyên Kiểu Chữ Web Khác
Điểm đến quan trọng hơn cả hành trình
Đây là một bài viết cổ điển về kiểu chữ web trên Web kỹ thuật số. Nó nhắc nhở chúng ta về sự cần thiết phải giúp người dùng điều hướng qua các trang web bằng cách sử dụng kiểu chữ được chọn tốt, vừa phù hợp với phương tiện, vừa có cơ sở trong cách hiểu lịch sử về cách sử dụng loại. Nó cung cấp rất nhiều lời khuyên đánh máy thực tế, trong khi than phiền "các nhà thiết kế hack" và các khoa thiết kế Đại học thiếu chương trình giảng dạy kiểu chữ "cổ điển".

 

hình ảnh

Loại cài đặt trên web thành lưới cơ sở
Bài viết này xem xét các vấn đề với việc sắp xếp các yếu tố vào lưới cơ sở với CSS và cung cấp giải pháp. Giải pháp là một nỗ lực để sử dụng một kỹ thuật lưới dựa trên in phổ biến và áp dụng nó cho web. "Chúng tôi cfiguren áp dụng các nguyên tắc tỷ lệ và cân bằng tương tự cho loại trong các cột đó bằng cách mượn một kỹ thuật khác từ anh em in của chúng tôi: lưới đường cơ sở." Giải pháp này giúp kiểm soát dòng chảy của trang.


Soạn theo nhịp điệu dọc
Bài viết này xem xét một giải pháp để đạt được nhịp điệu thẳng đứng trên thiết kế trang web. "Trên trang web, nhịp dọc - khoảng cách và cách sắp xếp văn bản khi người đọc xuống trang - được đóng góp bởi ba yếu tố: kích thước phông chữ, chiều cao dòng và lề hoặc phần đệm. Tất cả các yếu tố này phải được tính toán cẩn thận để nhịp điệu được duy trì. "

Động lực học 24 cách

Thiết kế web là 95% typography
Đây là một bài viết đam mê về typography web. Nó đưa ra một số tuyên bố táo bạo về tầm quan trọng của kiểu chữ web và tạo ra một cuộc tranh luận sôi nổi. Bài viết tiếp theo cho bài viết này là 95% typography? Phản ứng , trong đó tác giả xem xét các vấn đề được đưa ra trong cuộc tranh luận.

https://taowebsite.com.vn/

hình ảnh

9 nguyên tắc thiết yếu để thiết kế web tốt
Thiết kế web có thể khó khăn Làm thế nào để kết hợp khả năng sử dụng với sự gắn kết trực quan, thiết kế hiệu quả và hiệu suất kỹ thuật tuyệt vời? Collis Ta'eed khám phá 9 nguyên tắc thiết yếu để thiết kế web tốt. Trong số các nguyên tắc ưu tiên, khoảng cách, điều hướng, khả năng sử dụng, liên kết, rõ ràng và nhất quán được thảo luận.

hình ảnh

Typetester
Trang web này cho phép bạn so sánh các phông chữ trang web thường có sẵn.

Typtester

Phần Kết Luận
Cả hai yếu tố thương hiệu và yếu tố thiết kế sáng tạo nên nâng cao trải nghiệm người dùng và không ngăn chặn điều đó. Typography web tốt cải thiện trải nghiệm người dùng . Nó cải thiện giao tiếp, lưu lượng và tương tác. Xem xét cách các thương hiệu, kiểu chữ và các yếu tố thiết kế của bạn kết hợp với nhau để tạo thành một giao diện cho người dùng của bạn di chuyển qua.

 

 


0no comments yet

    Post a comment

    The fields are mandatory.

    If you are a registered user, you can login and be automatically recognized.

    Cancel

    100diemcom

    0 friends

    None