Người đăng: Unknown

vào lúc 06:57

in font

Trên L’espresso, một tạp chí lớn bậc nhất của Ý, nhà thiết kế Oliver Reichenstein có lần đã phát biểu: “Thiết kế web là một nghề quá tự do, chỉ có quá tự do thì người ta mới có thể làm ra nhiều trang web tệ kinh khủng đến như thế”. Các website của Việt Nam không nằm ngoại lệ. Nội dung là phần cốt lõi của một website, nhưng các nhà thiết kế web Việt Nam có vẻ hầu như chẳng thèm quan tâm tới trải nghiệm của người dùng khi đọc nội dung trên trang web của mình.

Cỡ chữ
Để đánh giá trải nghiệm người dùng với các thiết kế web, hãy nhìn vào phần mềm NoSquint.

NoSquint là một addon nằm trong top 80 trên gần 10.000 addon được sử dụng nhiều nhất của Firefox, được người sử dụng bầu chọn 5 sao, được chính Mozilla gán mác Nên dùng (Recommend).
Tính năng tương tự NoSquint được tích hợp thẳng (build-in) luôn vào trình duyệt Chrome. NoSquint làm chức năng tự động phóng to mọi trang web. Thành công của những phần mềm kiểu NoSquint nói lên một điều, các trang web bây giờ thiết kế rất khó đọc.

Theo nghiên cứu, mắt người sẽ thoải mái nhất khi đọc văn bản cỡ 12-14pt (point). Vì vậy nên cỡ chữ mặc định của các phần mềm soạn thảo văn bản như MS Word, OpenOffice,… đều là 12pt. VnExpress, Dân trí, Vietnamnet,… hầu hết các trang web lớn của Việt Nam cũng đều dùng font cỡ 12pt.

Nhưng các nhà thiết kế web không để ý rằng, phần mềm soạn thảo văn bản dùng để làm ra các văn bản in, và qui tắc “cỡ 12-14pt” để áp dụng cho văn bản giấy. Lúc đó đơn vị pt là một con số tuyệt đối, 72pt=1inch, tức là mắt sẽ thoải mái khi đọc chữ cỡ trong khoảng 0,423 đến 0,494cm. Còn pt trên trang web, khi hiển thị lên màn hình là một con số tương đối, nó sẽ biến đổi khác nhau tùy thuộc vào độ phân giải của màn hình. Độ phân giải màn hình càng cao thì kích cỡ thật của pt càng bé.

[IMG]

Mười năm trước, khi màn hình phổ thông là 17inch, độ phân giải 1440×900 thì kích thước “pt màn hình” xấp xỉ “pt thực” nên 12pt vẫn dễ đọc. Nhưng bây giờ, công nghệ đã có nhiều bước tiến lớn, các hãng đua nhau nâng cấp chất lượng màn hình, độ phân giải tăng vọt, hệ quả là chữ hiển thị trên website cũng bị thu nhỏ hẳn lại, nhất là với laptop, đặc biệt trong tình hình máy xách tay nhiều hơn để bàn như hiện nay. Hãy thử nhìn vào một số máy trên thị trường:

Lenovo X300 13.3inch: 12pt màn hình = 0.318cm ~ 9pt thực
Toshiba Satellite 14.4inch: 0.3cm ~ 8.5pt thực
Thinkpad T61p 15.4inch: 0.276cm ~ 7.85pt thực

Rõ ràng với chữ bé như vậy thì đọc rất mệt, rất mỏi mắt. Vậy nếu các nhà thiết kế web không muốn người đọc phải dùng phần mềm bổ trợ khi đọc website của mình thì hãy bắt kịp với công nghệ, sử dụng các phương pháp tự động thay đổi cỡ font theo độ phân giải màn hình như là RWD (Responsive Web Design) chẳng hạn, hay chí ít cũng tăng kích cỡ font văn bản lên.

Arial và Times New Roman
Trước đây, các nhà thiết kế web của Việt Nam gặp phải một vấn đề khó chịu, đó là font chữ tiếng Việt. Nếu người dùng không có font tiếng Việt cài trong máy, chữ tiếng Việt sẽ bị “vỡ”, không thể đọc được. Nên các nhà thiết kế thường chọn dùng những font có sẵn đi theo hệ điều hành, gọi là system font, như là Arial, Times New Roman, Tahoma, Verdana,… để đảm bảo máy người dùng lúc nào cũng hiển thị được tiếng Việt. Nhất là Arial và Times New Roman, hai font mặc định của Microsoft, được dùng ở khắp mọi nơi. VnExpress: Arial cho trang chủ, Times New Roman cho thân bài; Dân trí: Arial cho trang chủ, Times New Roman cho thân bài; Zing: Times New Roman; 24H: Arial,… Cứ tiếng Việt là Arial và Times New Roman.

Một lần, trên diễn đàn về font chữ, có người lên xin tư vấn thế này:

- Tôi vẫn thường dùng Arial với Times New Roman và thấy rất hài lòng, giờ tôi muốn tìm thêm vài font đẹp khác để đôi lúc thay đổi cho đỡ nhàm chán.

Câu trả lời được nhiều người đưa ra nhất là:

- Một khi Times New Roman và Arial mà cũng vừa mắt bạn thì đối với bạn, font nào cũng đẹp hết.
Có nghĩa là Arial và Times New Roman… cực xấu.

Nửa sau của thế kỉ 20, có một font đạt được thành công rất lớn đó là Helvetica, thành công đến mức có hẳn qui luật: “Nếu khó chọn, cứ dùng Helvetica”. Arial là một phiên bản copy của Helvetica, có sửa đổi để tránh bản quyền. Nhưng chính thứ “bắt chước có sáng tạo” đó đã làm mất đi những cái cân đối và hài hòa đã làm nên thành công của Helvetica, khiến người ta ví đọc văn bản Arial cảm giác không khác ngồi ăn tối trên một cái bàn cập kênh. Times New Roman được thiết kế cho báo giấy Times (của London) những năm 30 thế kỉ trước. Để tiết kiệm giấy nên Times New Roman khá hẹp, khoảng cách giữa các chữ sít nên dễ gây rối và mỏi mắt với đoạn văn bản dài. Cả hai font này đều không nên dùng.

Bây giờ, công nghệ đã cho phép tải font từ máy chủ, các trang web có thể hiển thị đúng font theo thiết kế mà không phụ thuộc vào font cài trên máy người dùng. Điều này đã giải phóng cho các trang web việc phụ thuộc quá nhiều vào system font. Nếu bạn quan tâm tới tính thẩm mỹ của chữ nghĩa, tới tính dễ đọc của trang web, nếu bạn không muốn trang web của mình lọt thỏm giữa một rừng các trang Arial, Times New Roman nhan nhản trên internet bây giờ thì có rất nhiều font tốt để cho bạn lựa chọn: Myriad như Apple, Lucida Grande như Facebook, Frutiger như ở sân bay Charles de Gaulle, Pháp; rồi Franklin Gothic, Gill Sans,… hay thậm chí nhiều trang web đã thiết kế font chữ riêng cho mình để đảm bảo phong cách và tính độc đáo.

Công nghệ có sẵn, font có nhiều, nếu vẫn sử dụng Arial và Times New Roman thì đó là một sự lựa chọn lười biếng và cẩu thả.

[IMG]

Khoảng trắng
Ngày xưa, khi vào Google, nhìn nguyên trang web hầu như chỉ có mỗi logo và ô tìm kiếm, còn lại là cả một khoảng trắng mênh mông, tôi nghĩ “sao phí không gian thế”. Nhưng càng ngày, tôi càng thấy đó là một trong những thiết kế xuất sắc nhất trên thế giới. Thiết kế đó khiến cho người dùng không thể phân tán sự chú ý sang bất kì việc gì khác, ngoài việc sử dụng dịch vụ của Google. Google đã áp dụng rất tốt câu: “Khoảng trắng không phải phí, khoảng trắng là để tăng tập trung vào nội dung”.

Nhưng rất tiếc, tư tưởng “phí” vẫn đang thống trị đầu óc các nhà thiết kế web Việt Nam hiện nay. Các website thi nhau nhét tranh ảnh, quảng cáo, bài vở kín mít tất cả các chỗ trống trên trang web, giống hệt đường Hà Nội lúc tan tầm, chật chội, ngột ngạt và chẳng chú tâm được vào cái gì. Khoa học đã chứng minh 98% con người trên thế giới này là “đơn nhiệm”, tức là chỉ làm tốt khi làm một lúc một việc. Nhét càng nhiều nội dung vào một chỗ chỉ càng làm người đọc chẳng tập trung được vào chỗ nào.

Họ sẽ lại nói “cần phải có nhiều quảng cáo để lấy thu nhập cho trang web”. Câu trả lời là website của họ không thể quảng cáo nhiều bằng Google, mà Google vẫn đủ không gian cho khoảng trắng. Như vậy vấn đề nằm ở trình độ và tư tưởng thiết kế chứ không phải ở “quảng cáo”.

[IMG]

Trong khi các trang web lớn trên thế giới như Yahoo, càng ngày càng tăng khoảng trắng trên trang chủ, thì các trang web của Việt Nam mỗi ngày lại nhồi thêm lắm thứ vào trong một nơi. Người ta có câu: Nội dung là trên hết (Content is King). Nếu muốn người đọc tập trung vào nội dung của website thì các nhà thiết kế web nên Tối đa hóa khoảng trắng. Hãy nhớ: Khoảng trắng là để tăng tập trung vào nội dung.

Typography
Nếu không phải là một website multimedia, thì phần chiếm nhiều không gian nhất của trang web chính là văn bản. Để làm ra một trang web tốt, người thiết kế sẽ phải để nhiều tâm trí vào việc trình bày văn bản. Từ việc chọn font đẹp, dễ đọc, phù hợp với phong cách thiết kế tổng thể, nổi bật lên nội dung, cho đến phối hợp chữ với hình ảnh, hài hòa với bố cục, màu sắc, thân thiện với người dùng.

Những điều đó là đối tượng nghiên cứu của một bộ môn có tên là Typography. Typography cung cấp các qui luật về thẩm mỹ, các qui tắc trình bày văn bản thân thiện với người đọc, và rất nhiều vấn đề thú vị khác về khoa học và nghệ thuật về chữ. Với tình trạng thẩm mỹ các trang web như hiện nay, các nhà thiết kế web Việt Nam rất nên đi học Typography.

MÊ KIM DUNG
Nguồn: Tạp chí lập trình

Người đăng: Unknown

vào lúc 03:10

in codeweb, layout

0 nhận xét

Khi bắt tay vào thiết kế web, bạn đi từ công đoạn A sang B như thế nào? Jason Cianfrone sẽ khái quát các bước tiếp cận tìm ý tưởng của riêng anh khi tiến hành thiết kế website. Chúng ta hãy cùng tìm hiểu là các đó là gì nhé.

Khi bạn dành được công việc đó, bạn sẽ đi gặp khách hàng và ghi chép lại nhiều nhất có thể những yêu cầu của họ. Và tiếp theo sẽ làm gì? Mặc dù các designer web có các bước thiết kế website riêng của mỗi người, nhưng tôi nghĩ mình nên chia sẻ phương pháp tiếp cận riêng của tôi với các bạn. Các bước này không phải là một danh sách liệt kê những gì bạn phải làm khi thiết kế, mà đơn giản chỉ là những phương pháp mà tôi thích. Nó giúp tôi rèn luyện về cảm hứng và đánh giá công việc.

Bước 1. Đánh giá, học hỏi, hiểu

Hãy xem xét các mục tiêu của thiết kế và nghĩ xem làm thế nào để bản thiết kế đạt được những mục tiêu đó.

Trước khi bạn vội vàng ngồi ngay lên máy để thiết kế, sử dụng các phần mềm xây dựng code ưa thích của mình, bạn hãy để đầu óc của mình suy nghĩ theo đúng hướng. “Đúng hướng” theo tôi đó là suy nghĩ ngắn gọn và xem thông điệp của bản thiết kế là gì để hoàn thành các mục tiêu của bạn.

Với những ghi chép trong tay, tôi sẽ nhớ hình dung lại khi gặp khách hàng, tìm kiếm những ý chính và mục tiêu của thiết kế, và nghĩ xem làm thế nào để bản thiết kế đạt được những mục tiêu đó. Cá nhân tôi đã nhận thấy rằng công đoạn này đạt hiệu quả nhất là khi tránh xa màn hình vi tính.

Đưa ra tất cả các giải pháp có thể

Tôi đọc qua những ghi chép của mình và đánh giá những khó khăn, vạch ra những giải pháp có thể cho các mục tiêu đã đề ra. Ví dụ, nếu khách hàng yêu cầu website với cảm giác “bình yên” hoặc “thư giản”, vậy là cần phải tiến hành với màu sắc, thể loại, hình ảnh, bố cục và khoảng trắng. Nếu đối tượng mục tiêu chủ yếu của khách hàng không am hiểu về công nghệ hoặc máy tính, vậy thì chính kinh nghiệm của người dùng, chức năng và những lời kêu gọi hành động lại là những yếu tố tác động đến bản thiết kế. Tôi luôn cố gắng dành nhiều thời gian cần thiết cho công đoạn này và đánh giá càng nhiều càng tốt. Khi tôi cảm thấy hài lòng, tôi sẽ chuyển sang công đoạn tiếp theo.

Bước 2. Thiết kế Wireframe

Thiết kế Wireframe có thể được tiến hành trên máy hoặc vẽ bằng tay trên giấy.

Công đoạn tiếp theo chính là thiết kế Wireframe

Tôi thích vẽ bằng tay trên giấy bởi tôi có thể ghi chép lại những lưu ý về wireframe để sau có thể xem lại. Mặc dù vậy, đôi khi bạn sẽ cần bàn bạc với khách hàng về các wireframe trước khi tiến hành thiết kế, khi đó wireframe nên làm trên máy tính.

Các công cụ thiết kế wireframe

Tôi thường dùng Adobe Illustrator hoặc bất cứ chương trình chỉnh sửa đồ họa nào. Ngoài ra còn có một số công cụ khác như Balsamiq Mockups hoặc Mock Flow app.

Điều quan trọng bạn cần lưu ý đó là các wireframe không chỉ được vẽ cho các phiên bản trình duyệt của website. Hãy nghĩ đến liên kết chéo thiết bị trong toàn quá trình và hãy xem các yếu tố trên trang sẽ hoạt động như thế nào qua tất cả các thiết bị.

Bước 3. Tìm cảm hứng

Tìm kiếm cảm hứng ngoài màn hình vi tính.

Những ý kiến đánh giá sẽ giúp tôi hiểu rõ hơn về bản thiết kế để tiếp cận với các wireframe. Nhưng trước khi bắt tay vào thiết kế, tôi thích tìm cảm hứng từ rất nhiều nguồn.

Tôi sẽ bắt đầu với việc quan sát các website khác cũng có các mục tiêu tương tự như những gì tôi đã vạch ra. Nếu những gì các bạn thích, tôi không chỉ copy lại mà còn nghĩ cách làm sao để nó có thể được thiết kế tuyệt hơn. Tôi cũng hỏi xem khán giả nguồn của website sẽ phản ứng như thế nào với thiết kế đó?

Thiết kế phù hợp

Các designer thường có cảm hứng với việc tạo ra các tính năng hoặc yếu tố riêng trong bản thiết kế của mình, đơn giản chỉ vì họ thích chúng. Tuy nhiên, bạn đừng nên suy nghĩ về các xu hướng thiết kế hay cố tạo ra cái gì đó mà những designer khác sẽ thích. Mà nó phải có liên quan đến dự án của bạn.

Ý kiến của khách hàng cũng có thể tạo nên các cảm hứng. Ví dụ, nếu tôi đang thiết kế website cho một cửa hàng trang sức, thay vì cứ lên Google và gõ tìm “các website trang sức thiết kế đẹp nhất”, tôi sẽ tìm đến một cửa hàng trang sức nào đó, quan sát thiết kế nội thất cửa hàng và suy nghĩ về cảm giác của mình khi đi vào hoặc cách bày bán sản phẩm của cửa hàng.

Mang theo máy ảnh

Nguồn cảm hứng thường đến từ những nơi không được chờ đợi nhất. Tôi thường tìm thấy cảm hứng khi rời khỏi màn hình máy tính của mình. Thiết kế trong một thế giới thực thường đóng một vai trò vô cùng to lớn; kiến trúc, nghệ thuật, thiết kế sản phẩm, nhiếp ảnh. Ngoài ra, những hình khối, hình dạng, và màu sắc của thiên nhiên luôn cho ta những cảm hứng tuyệt vời. Và chiếc máy ảnh luôn giúp tôi ghi lại nguồn cảm hứng này.

Bước 4. Thiết kế và xây dựng

Nghỉ ngơi là một điều vô cùng cần thiết

Đến lúc này, tôi đã cảm thấy như mình đã biết rõ những gì cho bản thiết kế. Tôi đang tràn ngập cảm hứng và không thể chờ đợi thêm nữa. Tôi thích thiết kế trong âm nhạc; âm nhạc giúp tôi không bị mất tập trung bởi những tác động bên ngoài và thật chú tâm trong thế giới riêng của mình. Tôi để tất cả các ghi chép và wireframe bên cạnh và liên tục xem lại chúng.

Giải lao

Ngoài ra, tôi thường giải lao trong khi thiết kế và thấy rất hữu ích. Cứ chăm chăm vào cái gì đó liên tục trong suốt 8 tiếng đồng hồ sẽ chỉ khiến chúng ta suy nghĩ cứng nhắc theo một hướng mà thôi. Hãy thư giãn và nghĩ về thiết kế khi không ngồi trước màn hình vi tính, điều đó sẽ có thể giúp bạn có những sáng tạo mới. Quan trọng nhất, tôi không bao giờ quên việc mình đang thiết kế cho ai; Nghề của tôi chính là thể hiện theo cách sáng tạo những điều họ cần.

Dịch theo creativebloq.com | Ban Biên Tập RGB.vn

Người đăng: Unknown

vào lúc 18:46

in codeweb

0 nhận xét

An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.

Advertise on Tizag.com

Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't so horrible. A table element consists of three different HTML tags including the <table> tag, <tr> (table rows), and the <td> (table columns) tags.

HTML Table Code:

<table border="1">
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

Basic HTML Table Layout:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

We've adjusted the formatting of the code by adding additional spaces before some of the table elements, but this has no bearing on the rendering of the element. It simply helps keep track of each tag/element and helps us ensure we don't miss an opening or closing tag which would prevent our table element from rendering correctly. We've also added a border attribute to ensure the table cells/rows are more visible to our readers.

Content elements like HTML lists, images, and even other table elements can be placed inside each table cell. Doing so aligns the elements in a tabular fashion and provides structure.

HTML Table Code:

<table border="1">
  <tr>
    <td width="50%">
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>List Item 4</li>
        <li>List Item 5</li>
        <li>List Item 6</li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>
      <p>Avoid losing floppy disks with important school...</p>
    </td>
    <td>
      <a href="http://www.espn.com" target="_blank" rel="nofollow">
        <img src="http://www.tizag.com/pics/htmlT/ahman.gif" class="linksESPN" />
      </a>
    </td>
  </tr>
</table>

HTML Table 2:

List Item 1 List Item 2 List Item 3	List Item 4 List Item 5 List Item 6
Avoid losing floppy disks with important school...

HTML tables allow the web designer to align page content in a tabular fashion while spanning elements horizontally across the web page, rather than stacking them up one on top of another.

html - table rows & table columns

A table can contain an infinite number of table rows. Each table row is essentially a table element itself, with an opening and closing tag (<tr> </tr>). Table columns are also considered child elements of HTML tables, and like table rows, an HTML table may contain an infinite number of table data cells (<td> <tr>).

Table rows and columns are container elements that house other HTML elements such as text links, images, and lists, as we've seen in previous examples. Below, we've applied a background color to the table example in order to help distinguish the different table elements.

HTML Table Code:

<table border="1">
  <tr title="You are looking at Row 1" bgcolor="silver">
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
  </tr>
  <tr title="You are looking at Row 2" bgcolor="aqua">
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

HTML Table Code Example:

Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

html - tables: spanning multiple rows and cells

Use rowspan to span multiple rows merging together table rows and colspanto span across multiple columns.

HTML Table Rowspan Attribute:

<table border="1">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
    <td><b>Column 3</b></td>
  </tr>
  <tr>
    <td rowspan="2">Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
    <td>Row 1 Cell 3</td>
  </tr>
  <tr>
    <td>Row 2 Cell 2</td>
    <td>Row 2 Cell 3</td>
  </tr>
  <tr>
    <td colspan="3">Row 3 Cell 1</td>
  </tr>
</table>

HTML Colspan and Rowspan Attributes:

Column 1	Column 2	Column 3
Row 1 Cell 1	Row 1 Cell 2	Row 1 Cell 3
Row 1 Cell 1	Row 2 Cell 2	Row 2 Cell 3
Row 3 Cell 1

cell padding and spacing

With the cellpadding and cellspacing attributes, you will be able to adjust the spacing between table cells. Setting the cellpadding attribute determines how much space will exist between a table cell border and the elements contained within it, whereas cellspacing determines how much space will exist between each table cell. Color has been added to the table below to emphasize these attributes.

HTML Cellpadding/Cellspacing Code:

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
  </tr>
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

HTML Cellspacing and Padding:

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

And now we will change the cellpadding of the table and remove thecellspacing from the previous example. This should clearly demonstrate the difference between cellpadding and cellspacing.

HTML Code:

<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
  </tr>
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

HTML Cell Pads:

Column 1	Column 2
Row 1 Cell 1	Row 1 Cell 2
Row 2 Cell 1	Row 2 Cell 2

The value you specify for padding and spacing is interpreted by the browser as a pixel value. So a value of 10 is simply 10 pixels wide. Most HTML attributes that use numeric values for their measurements represent a pixel value.

Người đăng: Unknown

vào lúc 18:40

in codeweb

0 nhận xét

Các ký tự đặc biệt

Có một vài ký tự đặc biệt trong HTML. Ví dụ như bạn không thể hiện được dấu lớn hơn hoặc nhỏ hơn trong các đoạn văn bởi vì trình duyệt có thể hiểu nhầm chúng là ký tự của các thẻ.

Nếu bạn muốn trình duyệt hiển thị được những ký tự này, chúng ta phải chèn những code đặc biệt vào trong tài liệu thiết kế web.

Code của ký tự đặc biệt dạng như sau : &tên code hoặc &#mã ký tự

Ví dụ : Hiển thị một dấu nhỏ hơn chúng ta viết : &lt hoặc &#60

Sự thuận lợi của tên code là nó dễ nhớ hơn mã ký tự. Tuy nhiên nhiều trình duyệt vẫn chữa hỗ trợ đầy đủ tên code (trong khi trình duyệt hỗ trợ rất tốt cho mã ký tự)

Khoảng trắng(Non-breaking Space)

Ký tự đặc biệt được sử dụng nhiều nhất khi thiết kế web là khoảng trắng.

Thông thường thì HTML sẽ lượt bỏ các khoảng trắng trong đoạn văn. Nếu bạn có 10 khoảng trắng liên tiếp thì 9 cái sẽ bi lượt bỏ. Để thêm nhiều khoảng trắng liên tiếp chúng ta sử dụng :  

Ví dụ :

Bạn có thể xem một số ví dụ về các ký tự đặc biệt ở đây : Try it yourself

Các ký tự đặc biệt thường sử dụng khi thiết kế web

Chú ý : tên code thì phân biệt chữ hoa và thường là khác nhau!

Ký tự	Diễn tả	Tên code	Mã ký tự
	Khoảng trắng
<	Nhỏ hơn	<	<
>	Lớn hơn	>	>
&	Dấu và	&	&
¢	Cent	¢	¢
£	Pound	£	£
¥	Yen	¥	¥
€	Euro	€	€
§	Section	§	§
©	copyright	©	©
®	registered trademark	®	®

Bạn có thể xem toàn bộ các ký tự đặc biệt tại HTML Entities Reference.

Người đăng: Unknown

vào lúc 21:46

in designer

0 nhận xét

Chọn lựa font chữ và kết cặp các font thế nào cho hợp lý (typography trong nghĩa hẹp của nó) có lẽ là một trong những vấn đề làm đau đầu nhiều dân đồ họa nhất bởi đó là một trong những yếu tố quyết định một thiết kế đẹp hay xấu. Để làm tốt việc này, nhà thiết kế cần có óc thẩm mỹ, kinh nghiệm, bản năng và nhiều nhiều thứ khác, phần lớn trong số đó thuộc về phạm trù năng khiếu. Tuy nhiên, một trong những thứ liên quan lại có thể dạy được, đó là các quy tắc và kỹ thuật kết cặp font được nhiều chuyên gia lấy làm kim chỉ nam. Với các quy tắc này, không chỉ anh em chuyên nghiệp, mà cả những người nghiệp dư tập tành chơi Photoshop hay thậm chí anh em văn phòng trình bày văn bản hoàn toàn có thể ứng dụng và làm cho tác phẩm của mình đẹp hơn.

Quy tắc 1: Chỉ dùng nhiều nhất 2 font, trong số ít trường hợp có thể dùng 3 font

Đây có lẽ là quy tắc phổ biến nhất giúp cải thiện hầu hết các thiết kế. Lý do giải thích cho nguyên tắc này là nếu bạn dùng nhiều hơn hai font, thiết kế của bạn thường sẽ trở nên thiếu rõ ràng, rối rắm và hỗn loạn. Trong khi nếu dùng hai font thôi, tính rõ ràng trong thiết kế của bạn sẽ giúp người đọc nắm bắt nội dung nhanh hơn và biết rõ mục nào chính mục nào phụ, hay cái nào cụ thể, cái nào tổng quan.

Cụ thể, với hai font, chúng ta nên dùng một font cho các tiêu đề chính, tiêu đề con, các đề mục nhỏ... trong khi font còn lại thường dược dùng cho phần nội dung (body), nên nhớ font body sẽ là font dùng cho phần lớn văn bản trong thiết kế của bạn.

Quy tắc 2: Hai loại font thường đi đôi cùng nhau: Serif và Sans Serif

Một trong những kỹ thuật giúp việc kết cặp font thành công đó là cho một anh serif đi cùng với một nàng sans serif. Nếu bạn không chắc “ai là ai” thì lưu ý là anh serif có “chân” (xem hình trên) trong khi nàng sans serif thì không. Ở ví dụ trên, Georgia là một font serif và Helvetica Neue thuộc loại sans serif. Sự kết đôi giữa hai cặp font này sẽ khiến bản thiết kế của bạn trở nên đẹp hơn, lý do là bởi chúng đủ khác để giúp người đọc phân biệt tiêu đè và nội dung cụ thể với nhau. Khi dùng cặp đôi này, bởi đặc điểm của loại serif giúp người đọc dễ theo dõi các đoạn block văn bản dài, serif thường phải “lao động cực nhọc” hơn (coi nó là đàn ông cho dễ nhớ!) lo đảm nhiệm phần nội dung (body). Trong khi nàng sans serif sẽ lãnh nhận các phần tiêu đề/đầu đề.

Quy tắc 3: Không nên chọn các font quá giống nhau

Một quy tắc khác nên nhớ là không nên chọn các font quá giống nhau. Đứng ở góc độ người đọc tất nhiên bạn sẽ không muốn người thiết kế/trình bày bắt bạn phải căng mắt ra để phân biệt sự khác nhau giữa hai loại font phải không? Việc đó sẽ phá vỡ tính rõ ràng và hạn chế người đọc tiếp cận nội dung trình bày do người đọc không thể lướt nhanh nắm tổng quan văn bản của toàn bộ thiết kế được.

Trong ví dụ trên, như các bạn thấy font Palatino và Times New Roman khá giống nhau, nếu nhìn từ xa các bạn sẽ khó phân biệt chúng. Trái lại, chỉ nhìn lướt qua thôi bạn đã thấy sự khác biệt rõ ràng giữa Palatino và Century Gothic ở phía phải bức hình trên.

Đối với những người đã quen với các font chữ thì tốt nhất là không nên chọn các font trong cùng một họ. Ví dụ, bạn sẽ không muốn cùng sử dụng hai font họ slab serif như Arvo và Clarendon (hình dưới, trái là Arvo, phải là Clarendon) bởi lẽ sự giống nhau trong dạng “chân” (serif) của chúng (do cùng một họ slab serif). Lời khuyên này cũng được áp dụng đối với việc chọn các font có cùng độ mảnh, độ đậm nhạt, hay là cùng kiểu chữ viết.

Quy tắc 4: Kiểm tra x-height của các font và đảm bảo chúng tương thích với nhau

X-height của font chính là độ cao giữa phần dưới và phần trên của chữ viết thường (ví dụ như chữ a, o, u, c, …) mà không tính phần kéo dài xuống dưới (như ở các chữ như p, q...) hay phần mở rộng lên trên (như ở các chữ h, k, t, d, …). Theo quy tắc này, x-height của các font bạn chọn phải tương thích với nhau, tức chúng phải không quá khác nhau về lượng và hiệu ứng tác động lên thị giác. Nhìn chung, các font có x-height tương thích phải khiến cho văn bản trở nên rõ ràng hơn.

Trong thực tế, cách dễ dàng nhất để áp dụng quy tắc trên là chồng chập hai font mà bạn chọn tại cùng một kích thước ký tự (cùng số point chữ) (xem hình), nếu x-height của chúng bằng nhau thì có thể xem là ổn. Trong hình trên, các bạn sẽ thấy cặp Georgia và Impact không phải là một đôi đẹp bởi x-height khác nhau. Trong khi đó, bên phía phải, Arvo và Helvetica Neue cho chúng ta một hiệu ứng thị giác tốt hơn, thoải mái hơn, và dễ nhìn hơn nhiều.

Quy tắc 5: Cố gắng tăng độ tương phản giữa các font

Thông thường các bạn có thể tăng độ tương phản giữa hai font bằng cách chọn một font đậm và tối (dark and heavy) sẵn trong khi font kia dạng bình thường. Khi áp dụng lên văn bản, font đậm sẽ được dùng cho phần tiêu đề và font bình thường cho phần nội dung cụ thể, đó là một cách thực hành tốt hơn cả.

Hãy sử dụng ví dụ về x-height ở trên. Impact là một font đậm trong khi Georgia là một font bình thường. Việc kết đôi chúng nếu xét theo tiêu chuẩn này thì có thể được coi là tốt (giả dụ rằng x-height của chúng giống nhau), Impact sẽ được dùng làm font tiêu đề trong khi Georgia sẽ đảm nhận phần nội dung. Trong khi nếu xét hai font bên phải, Helvetica Neue và Arvo, dù tương hợp về x-height, đáng tiếc thay chúng lại quá giống nhau về độ dày, đậm, và tối. Do vậy nếu xét chung hai tiêu chuẩn thì không có bộ đôi nào trong hai bộ này sẽ được dùng trong thiết kế chính quy.

Lời kết

Như vậy, tóm gọn lại, chúng ta có 5 quy tắc sau:

1. Nên dùng nhiều nhất hai font, trong số ít trường hợp có thể cho phép dùng 3 font.
2. Nên kết cặp font Serif và Sans Serif cùng nhau
3. Đừng chọn các font quá giống nhau về kiểu chân chữ, độ đậm nhạt, kiểu chữ viết...
4. Nên chọn các font có x-height tương thích, dễ nhất là chọn x-height bằng nhau.
5. Cố gắng tăng độ tương phản giữa các font.

Trong khi những quy tắc trên có thể giúp cải thiện việc chọn lựa font của bạn trong thiết kế thì cũng không thừa khi nhắc lại rằng quy tắc tối tổng quát nhất đó chính là làm sao cho thiết kế đạt được mức độ rõ ràng nhất định, thế là đủ. Một trong những cách kiểm tra nhanh là sao chép một đoạn văn nào đó trong bài của bạn có cả phần tiêu đề và nội dung cụ thể sau đó nhờ một người quen (nếu là dân đồ họa càng tốt) xem giúp. Sau khi họ đọc xong hãy hỏi họ những câu hỏi kiểu như “bạn có đọc chúng dễ không?”, “có phải căng mắt đọc không?”, “bạn có thể nói cho tôi biết sự khác nhau giữa hai font trong bài không”, v.v... Nhờ vậy, bạn sẽ đưa ra quyết định cuối cùng cho thiết kế của mình chính xác hơn, bởi xét cho cùng, độc giả chính là người đóng vai trò quyết định cho sự thành công của thiết kế của bạn.

Nguồn (tinhte.vn)

Người đăng: Unknown

vào lúc 21:28

in layout

0 nhận xét

Khi bạn quá tập trung vào thiết kế một icon nổi bật, bạn có thể mắc một số lỗi khá phổ biến. Bài viết này sẽ cực kỳ hữu ích cho tất cả các nhà thiết kế icon, dù mới hay đã có kinh nghiệm, tránh được 9 vấn đề thường gặp để có những icon hiệu quả nhất.

Dưới đây là 9 lỗi phổ biến trong thiết kế icon. Mong rằng bài viết này sẽ giúp ích cho các bạn có thể tạo ra những icon hoàn hảo. Đối với những nhà thiết kế icon đã có kinh nghiệm, đây sẽ là sự tổng hợp những điều mà có thể vài người chưa thật sự chú ý hay chưa áp dụng đúng. Còn đối với các nhà thiết kế mới, đây sẽ là những lời khuyên bổ ích để các bạn tránh mắc phải sai lầm và có những thiết kế icon hiệu quả hơn.

1. Chọn sai vật hay hình ảnh đại diện

Trong khi thiết kế icon, hãy chắc rằng bạn đã chọn đúng hình ảnh đại diện. Nếu chọn đúng, người dùng sẽ dễ dàng nhận ra điều mà bạn muốn thể hiện trong một icon. Icon cần dễ nhận diện, dễ hiểu, đơn giản và đúng mục đích. Vì vậy nếu bạn dùng sai hình ảnh, tất nhiên icon của bạn sẽ không hiệu quả như bạn mong muốn.

2. Sai khi cân nhắc người xem

Điều này rất quan trọng vì khi bạn thiết kế icon, bạn nên đặt mình vào vị trí của người dùng và có những sự giải thích khác nhau cho họ. Hãy nhìn vào truyền thống văn hóa, cử chỉ, biểu tượng của một quốc gia hay sở thích của đối tượng người dùng chính để chọn lựa cách thiết kế cho phù hợp và dễ nhận diện.

3. Sai khi tạo ra những bitmap icon và vector icon

Bạn có thể nghĩ rằng thiết kế và vẽ icon trên raster hay vector là đủ nhưng bạn đã sai. Bạn cũng cần vẽ lại trên bitmap bởi bạn cần làm cho icon nhỏ lại. Vector icon sẽ rất tốt khi được sử dụng với kích thước lớn.

4. Dùng quá nhiều chi tiết

Sử dụng quá nhiều chi tiết trong một icon sẽ khiến nó trông rất phức tạp và khó hiểu, đặc biệt khi ở kích thước nhỏ. Giảm thiểu chi tiết là điều bạn cần nhớ trong thiết kế icon.

5. Thêm chi tiết chỉ để đẹp hơn

Đừng thêm bất cứ yếu tố gì vào icon của bạn chỉ vì tính thẩm mỹ. Bạn có thể sử dụng ánh hiệu ứng sáng hay bóng… thay vì thêm hình dạng, đường nét, đồ vật không cần thiết. Chắc chắc rằng bạn chỉ sử dụng những chi tiết quan trọng chứ không phải những chi tiết mang tính chất trang trí trong icon của mình.

6. Thiết kế giống nhau, dập khuôn

Khi một người thiết kế một gói nhiều icon, anh ấy thường thích tạo ra những thiết kế đồng bộ nhưng thường quên mất rằng chúng vẫn cần có những điểm khác biệt. Người thiết kế cần tinh tế tạo ra những icon mà người dùng hiểu chúng được tạo ra để làm gì chứ không phải tạo ra một loạt những icon “na ná” nhau. Vì vậy, để tránh sự trùng lặp mà lại có được sự đồng bộ khi thiết kế một icon set, bạn nên thống nhất các icon về những yếu tố như phong cách vẽ, bóng, độ dốc, kiểu dáng… hơn là dập khuôn chúng.

7. Dùng màu sắc quá nhạt

Một icon cần phải nổi bật đặc biệt là khi nó được sử dụng trên một màu nền. Để chắc rằng icon của bạn được chú ý đến, bạn nên sử dụng màu đậm.Tránh sử dụng màu đơn sắc hoặc kết hợp màu quá đơn điệu, hãy làm thiết kế icon của bạn tuyệt vời hơn bằng cách kết hợp màu độc đáo nhé

8. Sai về kích cỡ

Đây là một vấn đề thường gặp trong thiết kế icon bởi khi giảm tỷ lệ kích thước xuống mức nhỏ hơn, nhiều icon không giữ được chất lượng như yêu cầu. Một điều quan trọng với icon là chúng phải trông thật đẹp và chuyên nghiệp dưới bất kỳ kích thước, hình dạng hay cài đặt nào.

9. Bỏ qua bước ban đầu

Một vài nhà thiết kế ngay lập tức ngồi vào máy tính và bắt đầu thiết kế icon thay vì phác thảo trước. Điều này thật không nên bởi vì bạn sẽ có nhiều sáng tạo và suy nghĩ kỹ hơn nếu bạn bắt đầu bằng việc phác thảo ra giấy trước ý tưởng của mình. Một quyển nháp và bút chì có thể sẽ là công cụ đơn giản mà hữu ích khiến thiết kế icon của bạn trở nên tuyệt vời.

VÂN CHI - DESIGNS.VN

Người đăng: Unknown

vào lúc 20:31

in ios

0 nhận xét

Bài này được thiết kế để cung cấp cho bạn các công cụ & các thông số kỹ thuật mà bạn sẽ cần trong việc thiết kế.
[IMG]

Kích thước chuẩn của Màn hình và Icon

Độ phân giải của màn hình võng mạc là gì ? (Retina Screen)
Màn hình võng mạc iPhone là một điều đặc biệt đáng để xem. Khi xem bên màn hình mới và cũ ở bên cạnh, nó rõ ràng có sự thay đổi trong màn hình này và nó có ảnh hưởng đến việc thiết kế các ứng dụng của bạn. Xem video màn hình side-by-side và so sánh.
Bạn có thể thấy trong việc so sánh hai thiết bị có kích thước màn hình cho iPhone 4 không thay đổi từ mô hình trước đó. Tuy nhiên, cả iPhone 4 màn hình kích thước và mật độ điểm ảnh của màn hình được tăng gấp đôi, cho kích thước màn hình 640 x 960px (so với trước đây 320 x 480px kích thước) và một whopping 326 điểm ảnh trên mỗi inch (so với để 163ppi trước). Màn hình này mới ép 4 điểm ảnh có sử dụng để là một – đó là lý do tại sao những hình ảnh trông rất sắc nét và đẹp hơn!
Khi đọc về độ phân giải màn hình rất dễ dàng để nhanh chóng trở nên bối rối. Thực tế là khi xuất loại tập tin cuối cùng trên iPhone thường. Png và Xcode không xem xét giá trị dpi lưu khi vẽ hình ảnh. Nếu bạn làm theo các kích thước quy định dưới đây, bạn sẽ có trong hình dạng tốt!
[IMG]

Các thông số kỹ thuật cho thiết kế giao diện iPhone & iPad trong Photoshop

iPhone 3.0
Screen resolution: 72 ppi
Screen size: 320 x 480 px
Icon size: 57 x 57 px
File format: PNG-24 iPhone 4.0
Screen resolution: 72 ppi
Canvas size: 640 x 960 px
Icon size: 114 x 114 px
File format: PNG-24 iPad
Screen resolution: 72 ppi
Canvas size: 768 x 1024 px
Icon size: 72 x 72 px
File format: PNG-24

Graphics for the iTunes Store

Icon: 512 x 512 px (.tif, .jpg or .png, 72dpi, RGB)

iPhone Screenshots: 320 x 480 px or 640 x 860 px (.tif, .jpg or .png, 72dpi, RGB)

iPad Screenshots: 1024 x 768 px (.tif, .jpg or .png, 72dpi, RGB)

Kích thước cho màn hình tương lai

Bạn nên sử dụng các lớp hình dạng hoặc các đối tượng vector là cách tốt nhất để đối phó với sự gia tăng của các kích cỡ màn hình và hệ điều hành. Vì trong tương lai không biết có bao nhiêu smart phone or some things like that ra đời …
Vậy nên thiết kế cho 3.0 hay Retina trước ?

Đối với tôi, thiết kế cho các kích thước màn hình 320 x 480px và sau đó tăng kích thước lên tới 640 x 960px là lựa chọn tốt hơn. Vì khi bạn zoom 1 đối tượng từ nhỏ sang lớn, thì mọi thành phần trong đối tượng đó không mất đi mà chỉ rõ ràng hơn và bạn phải chắc rằng mọi đối tượng trong thiết kế đều phải là file vector.

Kiểm tra thiết kế của bạn

Cách dễ nhất để kiểm tra thiết kế của bạn là “Save for Web” mỗi thiết kế màn hình thành định dạng png. Và đồng bộ với điện thoại của bạn bằng cách sử dụng iPhoto. Một khi những hình ảnh được đồng bộ hóa, bạn có thể lướt qua và mô phỏng những gì các ứng dụng thực tế sẽ như thế. Đây cũng là một cách tuyệt vời để chia sẻ mockups với khách hàng để cung cấp cho họ xem trước của ứng dụng này.
Thiết kế templates cho iPhone & iPad

iPhone Templates
iPhone GUI PSD from Teehan + Lax
iPhone GUI PSD Retina from Teehan + Lax
iPhone Stencil for OmniGraffle from Patrick Crowley
iPhone UI Vector Elements from Mercury Intermedia

iPad Templates

iPad Stencil for OmniGraffle from Information Architects
iPad GUI PSD from Teehan + Lax
iPad Vector GUI from Icon Library

Định dạng tập tin mà tôi dùng cho thiết kề đồ họa iPhone ?

Tất cả các tài sản đồ họa sẽ được sử dụng để xây dựng một ứng dụng được xuất khẩu trong Portable Network Graphics (. Png) định dạng. Về mặt kỹ thuật, iPhone có thể hiển thị các định dạng tập tin khác là tốt, nhưng các tập tin PNG được tự động tối ưu hóa bởi SDK iOS, và do đó nên là định dạng ưa thích.
Điều này áp dụng cho tất cả các yếu tố (nav btn, bars , vv) và các hình ảnh bất kỳ khác trong ứng dụng trình diễn. Ví dụ, chúng ta hãy nói rằng ứng dụng của bạn là một danh mục đầu tư cho một nhiếp ảnh gia. Các bức ảnh trưng bày cũng sẽ được xuất khẩu trong định dạng png.
Các thiết lập để xuất khẩu định dạng png trong Photoshop (File> Save for Web và thiết bị) trông như thế này:
[IMG]

Chuẩn bị file cho developer

Trước khi giao các tập tin của bạn cho một nhà phát triển, điều quan trọng để hiểu khả năng của mình liên quan đến cắt và dicing tập tin của bạn. Nếu nhà phát triển của bạn có nhiều kinh nghiệm trong việc cắt và xuất khẩu, nó có thể là một tiết kiệm thời gian rất lớn để giảm tải nhiệm vụ đó. Cá nhân, tôi thích để cắt tất cả các tập tin của tôi để đảm bảo tất cả các hình ảnh được thái lát ra đúng cách.
Khi lưu hình ảnh cuối cùng của bạn, hãy thử sử dụng quy ước đặt tên tập tin trực quan mà sẽ làm cho vị trí và tham khảo các tập tin hình ảnh chính xác dễ dàng hơn cho các nhà phát triển của bạn. Dưới đây là một số ví dụ tiền tố và hậu tố tôi sử dụng:

“btn-” for all button images
“tab-” for all tab bar images
“bkg-” for all background images
“-up” for in-active state buttons
“-down” for active state buttons
“-hover” for hover state buttons
“@2x” this is a standard suffix required for all retina display graphics

Một công cụ tôi sử dụng để giao tiếp với các nhà phát triển là một tập tin. Pdf bao gồm tất cả các màn hình cộng với ghi chú liên quan đến thiết kế. Tôi xác định các kiểu chữ, kích cỡ, khoảng cách dòng và tất cả các phong cách khác để có một tài liệu tham khảo dễ dàng mà các nhà phát triển có thể sử dụng mà không cần phải mở Photoshop. Tuy nhiên, một nguồn tài nguyên cung cấp, đặc biệt là khi tôi đang làm việc với các nhà phát triển off-site, là một hình màn ảnh (ScreenFlow và iShowU được yêu thích của tôi) của ứng dụng, đi bộ qua mọi khía cạnh của thiết kế. Điều này đặc biệt hữu ích nếu ứng dụng có chứa hình ảnh động và / hoặc các quá trình chuyển đổi tốt hơn được minh họa trong một video.

Thiết kế website Hội An

Quảng cáo

Chúng tôi là ai ?

Các nhà thiết kế web nên học typography

4 bước để thiết kế một website hoàn hảo

html - tables

HTML Table Code:

Basic HTML Table Layout:

HTML Table Code:

HTML Table 2:

html - table rows & table columns

HTML Table Code:

HTML Table Code Example:

html - tables: spanning multiple rows and cells

HTML Table Rowspan Attribute:

HTML Colspan and Rowspan Attributes:

cell padding and spacing

HTML Cellpadding/Cellspacing Code:

HTML Cellspacing and Padding:

HTML Code:

HTML Cell Pads:

Các ký tự đặc biệt trong thiết kế web

Các ký tự đặc biệt

Khoảng trắng(Non-breaking Space)

Ví dụ :

Các ký tự đặc biệt thường sử dụng khi thiết kế web

Những quy tắc vàng về kết cặp font trong thiết kế

9 điều mà các designer cần tránh khi thiết kế icon

Template chuẩn để thiết kế trên iPhone and iPad & làm thế nào để sử dụng chúng?

facebook

Quảng cáo

Labels

Popular Posts

Trang

Giới thiệu về tôi

Lưu trữ Blog

About

Link List

Nhận xét

Contact Details