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

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

0 nhận xét:

html - tables

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.

0 nhận xét:

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

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.

Thiết kế website Hội An

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

0 nhận xét:

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:

0 nhận xét:

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

0 nhận xét:

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