Thiết kế Website by Đăng Dương

HELLO WORD ! Hello world!

Tại sao mình lại kể với các bạn những điều này? Mình đã nghiệm ra rằng, mặc dù tất cả các dự án có những thiết kế, mục tiêu, yêu cầu khác nhau nhưng chúng hầu như đều có 1 điểm chung đó là có cùng 1 quy trình thiết kế như nhau.

Quy trình thiết kế ban đầu của mình:

Như vậy là sai. Nó khiến mình mất rất nhiều năng lượng và bản thiết kế cuối cùng thường không liên quan cũng như không có một phong cách riêng. Từ đó mình hiểu ra rằng kỹ năng thiết kế của mình sẽ chẳng là gì nếu không có một quy trình làm việc đúng đắn.

CUỐN SÁCH NÀY DÀNH CHO NHỮNG AI?

Cuốn sách này phù hợp cho cả Designer, người muốn trở thành Designer nhưng không biết bắt đầu từ đâu và cả Những nhà phát triển web Đối với Designer: cuốn sách có thể giúp bạn ôn tập lại và cải thiện quy trình thiết kế Bạn cũng có thể tìm thấy nhiều thủ thuật và phương pháp hữu ích để áp dụng vào công việc Nếu bạn là một Newbie Design ,cuốn sách này sẽ đưa cho bạn một môi trường làm việc ổn định và con đường phát triển đúng đắn vì nó chứa lý thuyết thiết kế căn bản Vậy bạn đã biết mình bắt đầu từ đâu rồi chứ? Cách tốt nhất đó là áp dụng quy trình vào một môi trường thiết kế tốt nhất. Cách này giúp bạn có được những thói quen tốt và tập trung vào điều quan trọng nhất.

Điểm khác biệt giữa 2 nội dung trên là gì?

Bạn thích thiết kế nào hơn?

hay

2 ?

Nếu câu trả lời của bạn là phương án bên phải thì có nghĩa là: BẠN HOÀN TOÀN CÓ ĐỦ KHẢ NĂNG TRỞ THÀNH MỘT DESIGNER GIỎI ! Đơn giản có vậy thôi :)

Tất cả những thứ bạn cần đó là Adobe Photoshop Nhưng bạn cũng có thể sử dụng các phần mềm khác. Tất cả các ảnh chụp màn hình được chụp bởi phiên bản CC(14.0), nhưng thậm chí bạn có thể sử dụng CS 4.0 + cũng có thể giúp bạn theo được tất cả các bước trong cuốn sách này.

Một vấn đề đặc biệt mà bạn cần hiểu được đó là thiết kế web không phải là thiết kế đồ họa đẹp – nếu chỉ là một họa sỹ thì bạn không thể làm được tốt việc này. Việc thiết kế website thường xuyên cần đến khả năng phân tích dữ liệu, tìm kiếm giải pháp cho các vấn đề về sử dụng, nghiên cứu và đưa ra được giải pháp toàn diện cho vấn đề.

BẠN CẦN NHỮNG GÌ?

Mình sử dụng Adobe Photoshop cho mọi thiết kế Nhưng đây không phải là phần mềm thiết kế vạn năng. Mình sẽ mách bạn một số kỹ thuật giúp bạn có thể sử dụng được hầu hết tất cả các phần mềm thiết kế chuyên nghiệp, thậm chí bạn có thể thiết kế ngay trên trình duyệt của mình. Tuy nhiên, đi kèm với cuốn sách này là những file thiết kế, bạn sẽ cần Photoshop để mở chúng. Tất cả các file này đều được tạo ra và sử dụng bởi Adobe Photoshop.

VỪA HỌC VỪA LÀM Cách tốt nhất để học chính là làm thật nhiều! (Mình thật sự muốn bạn thông qua cuốn sách này tự vẽ cho mình một webiste thực thụ.)

Ok !!! Chúng ta bắt đầu nhé?

QUY TRÌNH THIẾT KẾ

Lên kế hoạch. (trang tiếp theo)

Mô tả dự án, các yêu cầu và mục đích giúp bạn định nghĩa dự án đang làm Ở giai đoạn nàY cần phải ra một số quyết định quan trọng như cách hoàn thành dự án, nghiên cứu khách hàng mục tiêu, đặt ra các mốc hoàn thành công việc và đưa ra sơ đồ trang.

Ý tưởng và phác thảo

(chương 3)

Đây là lúc bạn tìm kiếm nguồn cảm hứng, nghiên cứu và vẽ nháp hoặc viết ra tất cả những ý tưởng mà bạn có được. Designers suy nghĩ thông qua hình học trực quan và vẽ ra ý tưởng sẽ giúp bạn giữ được suy nghĩ tốt nhất và biết chắc chắn việc tưởng tượng của bạn trông như thế nào.

Typography

(chương 5)

Typography là thành phần quan trọng nhất Ở bước này, bạn cần định nghĩa một bảng chỉ dẫn phong cách typography cơ bản, bảng này sẽ là nơi bạn tham chiếu trong suốt quá trình làm dự án. Bảng chỉ dẫn bao gồm font chính cho các headlines và đoạn văn.

Màu sắc

(chương 6)

Chọn ra màu chính, màu phụ, màu nền và màu kích hoạt cho dự án của bạn sau đó lưu lại dưới dạng 1 tệp bảng màu photoshop (palette). Tương tự như typography, một bảng màu tốt sẽ giúp bạn làm việc thông suốt cả dự án.

Khung sườn và bố cục

(chương 3)

Hoàn thành design mockups

(chương 8)

Đây là lúc bạn đưa tất cả các thành phần thành một khối và sử dụng các bảng chỉ dẫn bên trên áp dụng vào khung sườn và tạo nên một bản thiết kế mockup hoàn chỉnh.

LÊN KẾ HOẠCH Mọi dự án thiết kế cần phải có kế hoạch. Đó là bước đầu tiên và vô cùng quan trọng trong quy trình bởi vì đây là lúc bạn đưa ra những quyết định quan trọng cho toàn bộ phần còn lại của dự án.TT Trong - - - - - -

một bản mô tả dự án bạn phải đưa ra được những tiêu chí sau đây: Tóm tắt dự án Mục tiêu dự án Khách hàng mục tiêu Sản phẩm cuối là gì Cách quản lý dự án Sơ đồ trang

Mục tiêu dự án Bạn nên bắt đầu viết một mô tả dự án bằng cách trả lời này một câu hỏi: “Chúng ta là gì xây dựng? Nó sẽ giúp bạn tập trung vào những gì chính xác dự án của bạn. Có một cửa hàng thương mại điện tử, mộtquán cà phê hay một mẫu blog? Trả lời câu hỏi đó trong một vài câu và nó sẽ giúp bạnrõ ràng tâm trí của bạn và xác định dự án. Nó thực sự giúp khi bạn bao gồm những người khác bằng cách đơn giản mô tả các dự án mới cho người khác.Khi bạn giải thích và mô tả bất kỳ ý tưởng của một người “bên ngoài”, bạn nhìn vào nó từ một quan điểm. Nó buộc bạn phải suy nghĩ nhiều hơn và chắc chắn rằng ý tưởng của bạn có ý nghĩa. Càng ít am hiểu công nghệ người đó, thì tốt hơn. Vâng, ý tưởng của bạn phải là đơn giản như vậy mà bạn sẽ không có vấn đề giải thích cho bất cứ ai.

Chúng tôi đang xây dựng gì trong ebook này?

Dự án của chúng tôi trong suốt ebook này là một trang web mẫu cho dịch giả tự do và tư vấn. Bởi vì đó là cho các cá nhân, chúng tôi muốn chắc chắn rằng các thiết kế chủ đề sẽ được tập trung vào cá tính. Trang web này sẽ giúp quảng bá thương hiệu cá nhân và bán dịch vụ. Để giúp dịch giả tự do bán các dịch vụ, chúng tôi cần phải tìm một cách dễ dàng để liệt kê chúng và làm cho họ dễ dàng truy cập. Ngoài ra, chúng tôi muốn thể hiện danh mục đầu tư và khách hàng những người mà họ đã làm việc với họ. Chiến lược tiếp thị Các dịch giả tự do chính “là xây dựng quyền lực và uy tín của mình trong cộng đồng bằng cách chạy một blog. Chúng tôi cần phải chắc chắn để bao gồm các chức năng đó trong mẫu của chúng tôi. Bởi vì chúng ta không tạo ra nó cho một khách hàng cụ thể, chúng tôi miễn phí để lựa chọn thương hiệu riêng của chúng tôi, thiết kế phong cách, màu sắc, và một biểu tượng mẫu. Đó là tất cả trong tay của chúng tôi và chúng tôi cần phải đi lên với một cái gì đó sẽ phù hợp với hầu hết các nhu cầu của khách hàng mục tiêu. Hơn nữa, nó rất quan trọng để giữ cho mọi thứ đơn giản càng tốt và tránh bất kỳ cụ thể hoặc yếu tố tùy chỉnh mà sẽ rất khó để sử dụng trong các tình huống khác nhau. Chúng tôi muốn chắc chắn rằng các thiết kế mẫu sẽ được phổ cập và sử dụng được cho một nhóm lớn của người dân và theo những cách khác nhau.

Xác định mục tiêu của dự án của bạn là một phần cơ bản của quá trình thiết kế. Như với tất cả hành trình, chúng ta cần phải biết điểm đến của chúng tôi. Nếu không, chúng ta có thể đi du lịch ở nhiều hướng khác nhau và dễ dàng bị lạc. Bằng cách đặt các mục tiêu dự án rõ ràng, chúng ta biết đi đâu và khi dự án được thực hiện. Đó là nhiều dễ dàng hơn để xem xét công việc của chúng tôi và xem chúng ta đã làm một công việc tốt bằng cách hỏi một câu hỏi đơn giản này: “Chúng ta đã đạt được mục tiêu của chúng tôi?” Như chúng tôi đã đề cập trong mô tả dự án của chúng tôi trước đó, chúng tôi đang xây dựng một trang web mẫu cho freelancer. Chúng tôi muốn tạo ra một chủ đề đó sẽ giúp khách hàng của chúng tôi có được thêm kinh doanh. Đó nên được tập trung chính của chúng tôi và nếu chúng ta đạt được điều đó, khách hàng của chúng tôi sẽ tìm giá trị lớn trong sản phẩm của chúng tôi. Điều này sẽ làm cho chủ đề của chúng tôi nhiều hơn mong muốn. Dựa trên mô tả dự án của chúng tôi, chúng tôi có thể xác định ba mục tiêu chính: 1. Tạo một chủ đề trang web giúp để có được kinh doanh cho các dịch giả tự do và tư vấn. 2. Bao gồm các chức năng thiết kế sẽ giúp: dịch vụ danh sách, danh mục đầu tư hiện tại, chương trình khách hàng đánh giá / chứng thực, viết blog (xây dựng cơ quan) và giữ liên lạc. 3. Thiết kế một thiết kế đơn giản, đơn giản hóa và thẩm mỹ. Ba tiêu chí đơn giản bao gồm các trọng tâm chính của các chủ đề thiết kế, xác định các chức năng chính mà chúng ta cần phải thiết kế, và chỉ cho chúng ta như thế nào chúng ta nên đối xử với cái nhìn thẩm mỹ tổng thể.

Khách hàng mục tiêu Xác định mục tiêu của dự án của bạn là một phần cơ bản của quá trình thiết kế. Như với tất cả hành trình, chúng ta cần phải biết điểm đến của chúng tôi. Nếu không, chúng ta có thể đi du lịch ở nhiều hướng khác nhau và dễ dàng bị lạc. Bằng cách đặt các mục tiêu dự án rõ ràng, chúng ta biết đi đâu và khi dự án được thực hiện. Đó là nhiều dễ dàng hơn để xem xét công việc của chúng tôi và xem chúng ta đã làm một công việc tốt bằng cách hỏi một câu hỏi đơn giản này: “Chúng ta đã đạt được mục tiêu của chúng tôi?” Như chúng tôi đã đề cập trong mô tả dự án của chúng tôi trước đó, chúng tôi đang xây dựng một trang web mẫu cho freelancer. Chúng tôi muốn tạo ra một chủ đề đó sẽ giúp khách hàng của chúng tôi có được thêm kinh doanh. Đó nên được tập trung chính của chúng tôi và nếu chúng ta đạt được điều đó, khách hàng của chúng tôi sẽ tìm giá trị lớn trong sản phẩm của chúng tôi. Điều này sẽ làm cho chủ đề của chúng tôi nhiều hơn mong muốn. Dựa trên mô tả dự án của chúng tôi, chúng tôi có thể xác định ba mục tiêu chính: 1. Tạo một chủ đề trang web giúp để có được kinh doanh cho các dịch giả tự do và tư vấn. 2. Bao gồm các chức năng thiết kế sẽ giúp: dịch vụ danh sách, danh mục đầu tư hiện tại, chương trình khách hàng đánh giá / chứng thực, viết blog (xây dựng cơ quan) và giữ liên lạc. 3. Thiết kế một thiết kế đơn giản, đơn giản hóa và thẩm mỹ. Ba tiêu chí đơn giản bao gồm các trọng tâm chính của các chủ đề thiết kế, xác định các chức năng chính mà chúng ta cần phải thiết kế, và chỉ cho chúng ta như thế nào chúng ta nên đối xử với cái nhìn thẩm mỹ tổng thể.

Sản phẩm cuối Mỗi dự án có kết quả cuối cùng của nó. Khi làm việc trên một mẫu thiết kế website, chúng tôi có thể gửi dự án thiết kế của chúng tôi để một nhà phát triển web và biến nó thành một trang web làm việc, hoặc làm cho chúng tôi thiết kế các tập tin một sản phẩm cuối cùng và bán nó như là. Dù bằng cách nào, chúng ta cần phải chắc chắn để làm sạch các tập tin của chúng tôi và làm cho họ dễ dàng để làm việc với. cung cấp tổ chức tốt các file dự án phục vụ để chứng minh tính chuyên nghiệp của bạn, độ chính xác và độ chính xác mà đang có nhu cầu cao từ các nhà thiết kế. phân phôi của chúng tôi trong dự án ebook này sẽ là một hướng dẫn phong cách kiểu chữ, màu sắc, wireframes, và mockups thiết kế. Họ là tất cả các file PSD và chúng tôi cũng sẽ bao gồm một số tài sản (tài liệu thiết kế, hình ảnh, vv) và các thông tin (liên kết đến các phông chữ web) đó là cần thiết để làm việc với các dự án của chúng tôi.

QUẢN LÍ DỰ Cho dù bạn làm việc với một đội bóng lớn hay bạn chỉ là một người đàn ông một cửa hàng chủ đề, ít nhất là một kiến thức cơ bản về quản lý dự án là cần thiết. Nó sẽ giúp bạn theo dõi sự tiến bộ của bạn và biết giai đoạn nào của dự án hiện tại Bắt đầu bằng cách xác định các mốc lớn của mình trong dự án và sau đó phân chia các thành phần nhỏ hơn, cho đến khi bạn có danh sách đầy đủ các công việc phải làm nhiệm vụ cho mỗi mốc. Các chi tiết hơn và nhỏ hơn các nhiệm vụ là, dễ dàng hơn họ sẽ được xử lý. Nó cũng là một hệ thống động lực rất lớn, bởi vì mỗi lần duy nhất bạn gạch bỏ một mục từ của bạn để làm danh sách, nó sẽ cảm thấy như bạn đang thực sự tiến bộ! Vì vậy, đây là một số sự kiện quan trọng và nhiệm vụ đơn giản trong dự án mẫu của chúng tôi: • Nghiên cứu Dự án • Hướng dẫn mẫu: • Typography • Màu sắc • wireframes: • Trang chủ • Trang Blog • Bài viết trên blog • Trang giới thiệu • Thiết kế mockups: • Trang chủ • Trang Blog • Bài viết trên blog • Trang giới thiệu Cung cấp các tập tin PSD chính thức Xin lưu ý rằng trong khi tạo chủ đề, sự kiện quan trọng và nhiệm vụ của bạn sẽ gần như giống nhau cho mỗi dự án. Điều này sẽ giúp bạn hệ thống hóa toàn bộ quá trình và tiết kiệm một số thời gian trong khi kế hoạch các dự án trong tương lai của bạn. Nó có thể rất hữu ích để sử dụng một số công cụ quản lý dự án, nếu bạn làm việc trên nhiều dự án cùng một lúc và có rất nhiều người tham gia vào quá trình này. Là một nhà thiết kế, bạn có thể cần một ứng dụng mà sẽ giúp bạn tổ chức tốt hơn các dự án của bạn, trình bày mockups bạn và cộng tác với những người khác.

Dưới đây là một số ứng dụng quản lý dự án mà tôi muốn giới thiệu cho các nhà thiết kế:

Basecamp.com Basecamp là ứng dụng quản lý dự án phổ biến nhất. Bạn có thể lưu trữ tất cả các dự án của bạn, thiết lập cột mốc, tạo ra nhiệm vụ, và sử dụng nó để liên lạc với các thành viên khác trong nhóm.

Trello.com

Ngược lại với Basecamp, Trello mà không phải là tiên tiến. Thay vào đó, nó là một đơn giản và miễn phí (phí bảo hiểm phiên bản có sẵn với một số chức năng phụ) ứng dụng có thể được sử dụng để tạo ra nhanh chóng công việc phải làm danh sách. Đó là hình ảnh, intuitivem, và rất dễ dàng để làm việc với.

InVisionApp.com

Invision là nhiều hơn một công cụ thiết kế tạo mẫu, nhưng nó cũng có thể được sử dụng như là một dự án cơ bản ứng dụng quản lý cho các nhà thiết kế. Bạn có thể lưu trữ các dự án của bạn, thiết kế tương tác hiện nay mockups, và cộng tác với các thành viên khác

Viewflux là một ứng dụng mới có thể là một công cụ tuyệt vời cho các nhà thiết kế. Bạn có thể tổ chức các dự án của bạn, nhận được phản hồi thiết kế, tạo mẫu và thậm chí điều khiển các phiên bản của các tập tin thiết kế của bạn.vv

SƠ ĐỒ TRANG Một sitemap là một công cụ tuyệt vời để lên kế hoạch toàn bộ cấu trúc trang web của bạn. Nó có thể giúp bạn có một hình ảnh lớn hơn của toàn bộ dự án trước khi bạn nhận được vào giai đoạn thiết kế thực tế. Sơ đồ trang web thường được dựa trên ngắn gọn và yêu cầu dự án. Một sitemap điển hình trông giống như một biểu đồ cho thấy một hệ thống phân cấp và kết nối giữa các trang chính và trang con. Nó giúp cả các nhà thiết kế web và phát triển tốt hơn xác định cấu trúc toàn bộ trang web của. Ngoài ra, do trình bày hình ảnh của họ, họ là một cách tuyệt vời để giao tiếp với các đội bóng khác các thành viên và khách hàng. Bạn không cần những người am hiểu công nghệ để dễ dàng đọc bản đồ website. Sơ đồ trang web nên phản ánh điều hướng của trang web bao gồm cả các trang chính và trang con như cũng như bất kỳ trang nào khác ẩn, các trang đích và quảng cáo. Các sơ đồ trang web của dự án thiết kế mẫu của chúng tôi trong ebook này là khá đơn giản. Đó là một mẫu, vì vậy chúng tôi sẽ chỉ tập trung vào một số trang chung mà tất cả các website của loại hình này có thể cần.

Đây là cách các sơ đồ trang web tìm kiếm ebook này trang web của dự án mẫu:

Sơ đồ trang web có thể giúp bạn xác định những trang bạn cần phải thiết kế cho. Rõ ràng, chúng ta có thể thiết kế một trang mẫu mà sẽ được phổ biến cho tất cả các trang Dịch vụ trang Giới thiệu.

Nó rất dễ dàng để tạo ra một sơ đồ trang web trực quan nhanh chóng cho dự án trang web của bạn. Bạn có thể sử dụng bất kỳ phần mềm thiết kế cho điều này, và sau khi thực hiện một vài sơ đồ trang web, bạn sẽ có một số mẫu mà bạn có thể tái sử dụng cho dự án khác. Tất nhiên, có rất nhiều các công cụ và ứng dụng có thể làm cho công việc này dễ dàng hơn và có thể đặc biệt hữu ích cho một số dự án thực sự lớn. Dưới đây, tôi liệt kê một số các công cụ yêu thích của tôi, tôi đã cố gắng và đề nghị:

Lucidchart.com

Gliffy.com

OmniGraffle.com

Động não và lên ý tưởng

CHUWOWNG 3

Đây là nơi mà các phần thú vị trước khi bắt đầu bạn bắt đầu phiên họp động não của bạn, hãy chắc chắn bạn đã hoàn thành tóm tắt dự án của bạn và đã xác định rõ mục tiêu dự án của bạn, vì vậy bạn có biết trong đó hướng bạn nên đi.

Động não là một quá trình tư duy sáng tạo, tìm kiếm ý tưởng, và chia sẻ suy nghĩ của bạn với Tothers.It phải là một phần quan trọng trong công việc của bạn, cho dù bạn làm việc một mình hoặc với toàn bộ đội. VChuyển mạch não của bạn vào một chế độ tư duy sáng tạo sẽ giúp bạn tập trung vào các chủ đề và nhận được một số ý tưởng thực sự thú vị. Nó không phải là dễ dàng, mặc dù. Chúng tôi không phải robot, và thường thì bạn có thể thấy mình đang gặp khó khăn để có được một số ý tưởng tốt. Điều này là bình thường, do đó, không đẩy mình quá khó. Chúng ta hãy xem làm thế nào để làm cho quá trình này dễ dàng hơn và hiệu quả hơn:

Tìm thời gian sáng tạo nhất của bạn.

Đừng đánh giá ý tưởng.

Bộ não con người rất thích các mẫu. Chúng ta đều khác nhau và có những thói quen khác nhau nhưng có những mẫu nhất định trong cuộc sống của chúng tôi. Não của chúng ta thường biết khi chúng ta nên thức dậy, khi đó là thời gian để đi vào giấc ngủ, và khi chúng tôi đã sẵn sàng để làm việc. Vì vậy, ví dụ, tôi không mong đợi là cực kỳ sáng tạo khi bộ não của bạn nói rằng nó thời gian ngủ. Hãy thử để tìm thấy khi bạn là người sáng tạo nhất trong ngày. Có lẽ đó là vào sáng sớm ngay sau khi ăn sáng và trước khi bạn bắt đầu làm bất kỳ công việc. Nếu bạn bắt đầu một ngày của bạn bằng cách kiểm tra email, đọc tin tức hay duyệt phương tiện truyền thông xã hội, có lẽ bạn nên thay đổi thói quen của bạn. Hãy thử để giới thiệu buổi động não của bạn vào đó 1-2 giờ đầu tiên của ngày làm việc của bạn. Nó có thể là một lợi thế rất lớn cho bạn. Nếu buổi sáng không phải là thời gian tốt nhất của bạn, tìm thời gian sáng tạo nhất của bạn trong ngày hoặc có thể đến muộn sau nửa đêm và nhận được nhiều nhất của tư duy sáng tạo của bạn. Tất nhiên, nó không có nghĩa rằng bạn có thể được sản xuất để chỉ những vài giờ một ngày.

Đây là một trong những nguyên tắc chính của tất cả các phiên động não. Không có ý tưởng xấu ở giai đoạn này. Hãy thử để đến với càng nhiều ý tưởng như bạn có thể và chỉ đơn giản là không phán xét họ. Một số ý tưởng có vẻ xấu hoặc điên, nhưng họ có thể dẫn đến những người khác, những người vĩ đại. Nếu có nhiều người tham gia vào các phiên họp động não, “không có thẩm phán” quy tắc sẽ giúp mọi người mở rộng tâm hồn của họ và có nhiều sáng tạo. Chúng tôi không muốn bất cứ ai phải sợ lên tiếng.

Creative time is for brainstorming and finding good ideas. Then, you can spend the rest of the day working on them and doing the actual production work.

Thiết lập thời gian và nghỉ ngơi. Thiết lập một giới hạn thời gian cho các phiên họp động não. Thật dễ dàng để có được tắt theo dõi và mất kiểm soát trên các hướng của các ý tưởng của bạn. Bạn không muốn kết thúc quá xa từ những giả định ban đầu của bạn và mục tiêu của dự án. Nghỉ giải lao ngắn sau mỗi 15 phút trong phiên của bạn. Hãy đứng lên, duỗi chân của bạn, đi bộ xung quanh văn phòng, có được một tách cà phê và đó có thể là thời điểm khi một ý tưởng tuyệt vời sẽ đến với bạn.

Đừng làm việc quá sức. Thật không may, không phải mọi phiên động não là thành công. Nếu bạn thấy mình đang gặp khó khăn quá nhiều với việc tìm kiếm ý tưởng cho dự án của bạn, chỉ cần dừng phiên. Bạn có thể muốn đi dạo, hít thở không khí trong lành hoặc làm điều gì đó cho vui. Thư giãn và lấy lại cho nó sau đó trong ngày hoặc sớm ngày hôm sau.

Thật không may, không có quá nhiều thời gian sáng tạo trong ngày. thời gian sáng tạo nhất của tôi là sớm trước khi tôi thậm chí kiểm tra email của tôi, ở giữa ngày và đêm khuya ngay trước khi tôi đi ngủ.

Viết xuống, phác thảo và lưu tất cả mọi thứ bạn làm trong các phiên họp động não. Có rất nhiều ứng dụng và các công cụ trực tuyến mà bạn có thể sử dụng để xây dựng bản đồ tư duy của bạn hoặc lưu các ghi chú nhanh chóng. Tuy nhiên, nó có thể là tốt để đi chỉ với một cây bút và một mảnh giấy để viết ra một số ý tưởng hay phác họa chúng ra.

Lấy cảm hứng Tất nhiên, cảm hứng là một phần cơ bản của buổi động não. Trong thực tế, mọi ý nghĩ hay ý tưởng của chúng tôi là bằng cách nào đó lấy cảm hứng từ một cái gì đó chúng ta đã thấy, đọc về hoặc vừa trải qua. Đó là tất cả được lưu trữ trong bộ nhớ của chúng tôi và bộ não của chúng ta làm cho các kết nối ngay giữa những suy nghĩ để tạo ra ý tưởng. Đừng ngại để tìm cảm hứng trong thiết kế khác làm việc. Tôi sẽ nói thêm về điều này và danh sách các nguồn nơi để tìm nguồn cảm hứng sau này trong chương này.

Phác thảo ý tưởng của bạn

Chia sẻ ý tưởng Cuối cùng nhưng không kém: chia sẻ ý tưởng của bạn với người khác! Hiển thị những gì bạn đang làm việc, chẳng hạn như ý tưởng của bạn và ý tưởng thiết kế. Thu thập thông tin phản hồi và cải thiện công việc của bạn.

Phác thảo ý tưởng của bạn Phác thảo ý tưởng thiết kế là quá trình hình dung suy nghĩ của bạn với bản vẽ đơn giản và chú thích. Nếu bạn chưa bao giờ phác thảo ý tưởng của bạn trước khi, nó có thể là khó khăn lúc đầu, nhưng càng có nhiều bạn thực hành, dễ dàng hơn nó sẽ trở thành. Có rất nhiều nhà thiết kế đã không bao giờ phác họa và bỏ qua bước này hoàn toàn. Có, bạn có thể thiết kế các trang web mà không làm bất kỳ phác thảo. Tuy nhiên, tôi tin rằng nhờ vào phác thảo, bạn có thể sáng tạo nhiều hơn và bạn có thể nhanh chóng thử một số ý tưởng. Bạn có thể làm cho một số mẫu trang web hình ảnh trước khi làm bất cứ công việc thiết kế thực tế trong Photoshop hoặc trình duyệt của bạn. Bằng cách đó bạn sẽ tập trung vào chức năng và cốt lõi của khái niệm của bạn trước khi thậm chí thêm một số phong cách và làm cho nó trông đẹp trực quan.

Có một vài nguyên tắc mà bạn cần phải nhớ trong khi làm bản phác thảo của bạn:

Đừng làm cho chúng hoàn hảo

Bạn không cần phải là một nghệ sĩ để làm cho bản phác thảo và bạn không cần phải hiển thị chúng cho bất cứ ai. Làm cho họ nhanh như bạn có thể và tập trung vào các khái niệm, không phải là chi tiết hình ảnh.

Thêm chữ

Một số phác thảo có thể được thô, vì vậy đừng quên chú thích và mô tả suy nghĩ của bạn. Nó sẽ giúp bạn xem lại bản phác thảo của bạn sau này.

Lưu giữ nó

Thu thập các bản phác thảo của bạn cho các dự án cụ thể và cố gắng giữ cho họ tất cả ở một nơi. Nó cũng là một ý tưởng tốt để thực hiện một quyển phác thảo nhỏ hoặc da lông chuột chũi với bạn. Bạn không bao giờ biết khi nào bạn có thể nhận được một số ý tưởng.

Dùng gì để phác thảo? Điều tốt nhất về phác họa là bạn không cần bất kỳ công cụ ưa thích để phác thảo ý tưởng của bạn. Bạn có thể có một cây bút chì và một mảnh giấy và bạn tốt để đi. Tất nhiên, nếu bạn muốn thực hiện phác thảo một phần của quá trình thiết kế của bạn, bạn có thể muốn có được một số công cụ chất lượng tốt hơn để giữ cho nó tất cả các tổ chức hoặc thậm chí sử dụng một số mẫu với một điện thoại hoặc trình duyệt di động mockups. Các tùy chọn là vô tận và bạn sẽ tìm thấy cách riêng của bạn, nhưng đây là một số khuyến nghị của tôi về làm thế nào để bắt đầu:

Dùng bút thật xịn

Tôi bắt đầu sử dụng bút bởi vì bạn không thể chỉ đơn giản là xóa bất cứ điều gì. Tôi tin rằng không có ý tưởng trong cuốn sổ của tôi mà có đáng bị xóa hoàn toàn và bị lãng quên. Giữ tất cả trong số họ bởi vì bạn không bao giờ biết khi nào bạn có thể cần đến chúng. Bạn có thể làm cho bản phác thảo của bạn nhiều màu bằng cách sử dụng một số màu sắc như màu đỏ hoặc màu xanh lá cây cho giọng hoặc bằng cách nêu bật một số lĩnh vực quan trọng hơn.

Dùng sổ phác thảo Có ít nhất một quyển phác thảo nhỏ mà bạn có thể mang theo bên mình để làm cho một số

Tìm kiếm cảm hứng Nó cũng gần như không thể tạo ra một cái gì đó từ không có gì. Không có vấn đề như thế nào sáng tạo chúng tôi, nó vẫn còn tất cả đều dựa trên kinh nghiệm của cuộc sống và những điều mà chúng ta đã thấy trong thế giới xung quanh của chúng tôi của chúng tôi.

phác thảo nhanh chóng. Sử dụng nó để tiết kiệm ý tưởng ngẫu nhiên của bạn. Chỉ cần nhớ để luôn luôn thêm một ngày và một tiêu đề ngắn cho mỗi ý tưởng, vì vậy bạn có thể dễ dàng tham khảo sau này.

Dùng bản phác thảo mẫu Bạn sẽ tìm thấy một số sẵn sàng để sử dụng các mẫu phác thảo trong khu vực thiết kế trên trang web của tôi. Sử dụng chúng cho một số phác thảo nâng cao hơn và các dự án đòi hỏi nhiều suy nghĩ và lập kế hoạch. Bạn thậm chí có thể vẽ wireframes hoàn chỉnh mà chúng tôi sẽ nói về trong wireframes và bố trí chương.

Có tất nhiên là một đường dây mỏng giữa được truyền cảm hứng và sao chép. Tuy nhiên, tôi tin rằng mỗi nhà thiết kế nên có thể đánh giá rằng ngày của riêng của họ và quyết định nếu nó là công bằng để sử dụng một số ý tưởng cụ thể. Cách tốt nhất để đảm bảo bạn không sao chép tác phẩm của người khác là không bao giờ chỉ tập trung vào một nguồn cụ thể của nguồn cảm hứng nhưng cố gắng đa dạng hóa nguồn lực của bạn. Do một số nghiên cứu cả online và offline và kết hợp tất cả lại với nhau. Ngoài ra, cố gắng để duyệt công việc thiết kế khác ‘mỗi ngày và tiết kiệm là những người bạn thực sự thích. Bạn có thể quay trở lại bộ sưu tập của bạn thiết kế yêu thích khi bạn bắt đầu làm việc trên một dự án cụ thể. Hãy nhớ rằng tất cả mọi thứ bạn sử dụng chỉ là để tìm cảm hứng và để có được một số ý tưởng. Khi bạn đã sẵn sàng để bắt đầu thiết kế, dứt tất cả những nguồn lực và để cho việc làm trí tưởng tượng của bạn. Sử dụng một số ý tưởng như bạn ghi nhớ chúng, không như bạn nhìn thấy chúng. Bằng cách đó, bạn không hạn chế bản thân, nhưng thay vào đó bạn đang áp dụng phong cách và suy nghĩ của bạn để quá trình này. Hãy để quá trình bộ não của bạn tất cả cảm hứng theo cách độc đáo của riêng bạn. Hãy xem nơi để tìm cảm hứng. Dưới đây là một số tài nguyên yêu thích của tôi

CẢM HỨNG THÔNG THƯỜNG

Gridspiration.com Đây là dự án của riêng cá nhân của tôi, nơi tôi liệt kê một số các thẻ Dribbble phổ biến nhất cho các trình duyệt ngay lập tức và nhanh chóng.

Dribbble.com Dribbble là một cộng đồng lớn của nhà thiết kế người chia sẻ ảnh chụp màn hình của tất cả mọi thứ mà họ hiện đang làm việc trên. Đây là nguồn yêu thích của tôi cảm hứng. Các nhà thiết kế được giới hạn để đăng 400x300 hình ảnh (hoặc 800x600 cho màn hình hiển thị võng mạc), vì vậy bạn có thể không thực sự luôn luôn nhìn thấy một dự án đầy đủ nhưng nó cho phép bạn tập trung vào các bộ phận nhỏ của thiết kế để thay thế, giống như một menu, hộp tìm kiếm, thiết kế logo , kiểu chữ, hình minh họa, vv

designspiration.net Đây là nơi mà bạn có thể tìm thấy nguồn cảm hứng thiết kế cụ thể. Có rất nhiều in thiết kế, biểu tượng, hình ảnh và thiết kế sản phẩm.

CSS Galleries Có tấn của phòng trưng bày CSS, nơi bạn có thể tìm thấy nhiều ví dụ về các trang web thiết kế đẹp từ khắp nơi trên thế giới. Họ được gọi là “phòng trưng bày CSS” vì họ chỉ liệt kê các trang web mà HTML / CSS mã hoá và không sử dụng flash.

CSSRemix.com

Fltdsgn.com

Màu sắc Bạn đang tìm kiếm một số nguồn cảm hứng màu sắc? Trên các trang web mà bạn sẽ tìm thấy một số màu sắc chương trình tuyệt vời mà bạn có thể dễ dàng sử dụng trong các dự án của riêng bạn: color.adobe.com

colourlovers.com

Typography Kiểm tra các trang web cho một số ý tưởng thú vị kiểu chữ và tập quán:

typespiration.com

typecache.com/fonts-in-use

justmytype.co

Offline Tại sao giới hạn nghiên cứu của bạn để tài nguyên trực tuyến duy nhất? Có rất nhiều thiết kế tuyệt vời xung quanh bạn mỗi ngày. Chỉ cần chắc chắn để chụp ảnh của tất cả mọi thứ thú vị mà bạn nhìn thấy.

Phim posters. Một số poster phim là nghệ thuật đích thực. Hãy chú ý đến kiểu chữ và màu sắc thiết kế cẩn thận của các nghệ sĩ đẳng cấp thế giới.

Sách và tạp chí Sách và tạp chí là những ví dụ tuyệt vời của kiểu chữ đẹp và thiết kế bố trí.

Tổ chức các tập tin dự án của Bây giờ bạn có một số ý tưởng cho dự án thiết kế của bạn và bạn có bản phác thảo đầu tiên của bạn thực hiện, đó là thời gian để thiết lập môi trường thiết kế của bạn trên Chúng tôi sẽ bắt đầu chương này với một số gợi ý về cách tổ chức các tập tin dự án và thư mục của bạn. Giữ tập tin dự án của bạn được tổ chức chắc chắn không phải là một nhiệm vụ dễ dàng, đặc biệt là khi sáng tạo của bạn đang kiểm soát dự án và bạn đã kết thúc với một loạt các tập tin thiết kế trên tất cả các ổ đĩa cứng của bạn.

chuong 4

Nhà thiết kế có xu hướng bỏ qua quá trình tổ chức “nhàm chán” và di chuyển trực tiếp đến giai đoạn sản xuất. Bạn có thể giải quyết vấn đề đó bằng cách kết hợp một cấu trúc thư mục rắn rằng sẽ giống như một khuôn mẫu cho tất cả các dự án của bạn. Có sự thống nhất rằng sẽ giúp bạn tiết kiệm rất nhiều thời gian và mọi thành viên trong nhóm của bạn sẽ đánh giá cao nó. Sau đó, trong quá trình thiết kế, bạn có thể cần một số tài liệu của khách hàng, hình ảnh cổ phiếu bạn mua trong quá khứ, hoặc chỉ đơn giản là một phiên bản cũ của tập tin thiết kế của riêng bạn. Một cấu trúc thư mục thích hợp sẽ làm cho nó dễ dàng và nhanh chóng. Vì vậy, giữ tập tin dự án của bạn được tổ chức tốt có thể là một tiết kiệm thời gian rất lớn và bạn sẽ cần phải tạm dừng giai đoạn sáng tạo của bạn quá lâu để tìm một tập tin cụ thể.

Cấu trúc thư mục dự án

Tôi đã được làm việc trên cấu trúc thư mục của tôi trong nhiều năm. Ban đầu, nó là một thư mục rất đơn giản, nhưng như tôi đã bắt đầu trở nên có kinh nghiệm hơn, cấu trúc thư mục của tôi bắt đầu phát triển quá. Hôm nay tôi đã kết thúc với một chương trình khá vững chắc mà tôi nghĩ rằng bao gồm hầu hết các nhu cầu của các dự án của tôi. Hãy để sửa đổi và chỉnh nó cho nhu cầu của bạn, như bạn có thể có những thói quen khác nhau hoặc có thể bạn sử dụng các tài sản khác hơn tôi. Hãy nhìn vào cấu trúc này:

Hãy để tôi giải thích vai trò của một số các thư mục này:

Project Name.

Đây là thư mục chính của dự án của bạn. Sử dụng một cái tên dễ nhận biết cho bạn và nhóm của bạn. Tránh bất kỳ tên không chính thức hoặc biệt hiệu. Nó có thể là khó hiểu sau một thời gian. Nếu bạn làm các dự án khác nhau cho một khách hàng rất tốt để đặt tất cả các thư mục dự án vào một thư mục "khách hàng". Đây là một nơi mà chúng ta có thể giữ tất cả các "sản xuất" các bộ phận của dự án. Một số dự án có thể bao gồm việc thiết kế nhiều hơn chỉ các trang web. Rất tốt để giữ cho nó tất cả trong một và đặt tên nó cho phù hợp: "Thiết kế Logo", "Thiết kế In", vv

Assets

Chúng tôi có thể sử dụng thư mục này để thu thập tất cả các tài liệu có liên quan đến dự án. Nó có thể là biểu tượng của một khách hàng, hình ảnh chứng khoán hoặc một số nội dung trang web. Ngoài ra, bạn có thể giữ tất cả các hình ảnh chứng khoán và bất kỳ vật liệu thiết kế cụ thể (như biểu tượng, kết cấu, mô hình), bạn mua cho dự án này ở đây. Sau một thời gian, bạn có thể cần phải thực hiện một số bổ sung thiết kế và nó sẽ rất hữu ích để nhanh chóng tiếp cận với các thiết lập cùng một biểu tượng hoặc kết cấu mà bạn sử dụng trước.

Web Design.

Chúng tôi tập trung vào thiết kế web trong ebook này, vì vậy tôi sẽ bổ sung thêm một số chi tiết về thư mục này (các thư mục khác của dự án thiết kế có thể trông rất giống nhau). Như bạn có thể thấy, chúng tôi có bốn thư mục con ở đây: _Archive - Không bao giờ loại bỏ các tập tin thiết kế cũ hoặc không sử dụng! Nếu có bất kỳ ý tưởng thiết kế mà không được sự chấp thuận của khách hàng, bạn luôn có thể giữ chúng trong thư mục _Archive. Bạn không bao giờ biết khi nào bạn có thể cần đến chúng. Bạn có thể nén nó để tiết kiệm một số không gian trên ổ cứng của bạn. Tôi không thể nhớ bao nhiêu lần thư mục này đã cứu sống tôi. PSD - ở đây bạn có thể giữ tất cả các tập tin dự án thiết kế của bạn như mockups thức, phong cách dẫn file, wireframes, vv Một số dự án cần nhiều file PSD, vì vậy bạn có thể muốn nhóm chúng theo các phiên bản hoặc loại. Preview - thư mục này được dành cho tất cả các tập tin mà bạn hiển thị cho người khác. Những tập tin này thường ở định dạng JPG PNG, PDF hay. Bạn có thể muốn phân loại vòng file xem trước phiên bản để theo dõi sự tiến bộ. Sketches - có hình ảnh của những ý tưởng của bạn từ các quyển phác thảo và lưu nó ở đây. Bạn có thể cần những ý tưởng ban đầu của bạn sau một thời gian và nó sẽ giúp bạn tiết kiệm rất nhiều thời gian nếu bạn giữ nó ở đây.

Naming project files

Đặt tên cho tập tin dự án của bạn vấn đề nhiều như tổ chức thư mục tốt. Để đặt tên cho đúng tập tin dự án của bạn, hãy tưởng tượng rằng ai đó gửi cho bạn file PSD của mình mà là một phần của một dự án lớn hơn. Những gì bạn muốn biết về nó? Nó có thể là thông tin như: • Tên khách hàng • Loại hình dự án. • tên hoặc tên viết tắt của nhà thiết kế. • số sửa đổi. Hãy xem một vài ví dụ về các quy ước đặt tên chính xác: • CompanyName_HomePage.psd • CompanyName_LandingPage-rev3.psd • ProjectName_IntroPage-John-rev1.psd Đây là tất nhiên chỉ là ví dụ nhưng nó sẽ cho bạn một ý tưởng. Thậm chí nếu bạn nhận được một số tập tin như thế này hoàn toàn ra khỏi màu xanh, bạn có thể thu thập rất nhiều thông tin chỉ từ tên tập tin. Nó rất hữu ích đặc biệt là khi bạn giao tiếp qua email hoặc quản lý dự án phần mềm và bạn không thể xem trước các tập tin PSD trong trình duyệt. Nhìn vào tên tập tin đính kèm có thể bạn và các thành viên nhóm của bạn tiết kiệm rất nhiều thời gian. Cũng giống như với cấu trúc thư mục của bạn, bạn có thể tìm thấy tập tin hoàn hảo quy ước đặt tên của riêng bạn mà bạn sẽ gắn bó với tất cả thông qua các dự án của bạn. Đó là một ý tưởng tốt để giữ một mô hình phù hợp trong những năm qua, vì vậy bạn có thể dễ dàng tham khảo các dự án cũ của bạn.

Adobe Photoshop. Lựa chọn phần mềm thiết kế

Có nhiều lựa chọn khi nói đến lựa chọn các phần mềm thiết kế của bạn nhưng trước khi tôi liệt kê một số các vị trí phổ biến nhất, tôi muốn bạn biết rằng các phần mềm thiết kế là không mà quan trọng ở tất cả. Tôi đã sử dụng Photoshop trong nhiều năm nhưng tôi chưa bao giờ coi mình là một bậc thầy Photoshop bởi vì tôi không sử dụng hoặc cần nhất của các chức năng của nó. Bạn nên tập trung nhiều hơn vào việc phát triển các kỹ năng thiết kế quan trọng hơn làm chủ một chương trình thiết kế đặc biệt. Những gì chúng ta sử dụng để thiết kế các trang web có thể thay đổi trong tương lai, nhưng các kỹ thuật thiết kế có thể vẫn còn trong nhiều năm. Điều quan trọng nhất là phải có kỹ năng đó là hoàn toàn độc lập với các phần mềm và phần cứng mà bạn sử dụng. Nếu bạn biết làm thế nào để lên kế hoạch một cách chính xác toàn bộ quá trình thiết kế, chọn kiểu chữ, màu sắc phù hợp và thiết kế bố trí, sau đó bạn sẽ có thể tạo ra các mẫu thiết kế đẹp sử dụng bất kỳ công cụ chuyên nghiệp. Phần mềm nào bạn nên chọn tùy thuộc vào nhu cầu cá nhân và sở thích. Để hiển thị cho bạn một số tùy chọn thú vị hơn, tôi liệt kê các ứng dụng phổ biến nhất có sự chú ý của tôi: tv

Điều này đã được các phần mềm thiết kế phổ biến nhất trong nhiều năm qua. Đó là rất linh hoạt, và nó sẽ cho phép bạn làm việc trên nhiều lớp và tạo ra đầy đủ mockups thiết kế website. Nó có tất cả các công cụ bạn cần như hướng dẫn, hình dạng, hiệu ứng hay bộ lọc và bạn có thể nhập hình ảnh bên ngoài. Ngoài ra còn có nhiều nguồn tài nguyên thiết kế tuyệt vời có sẵn như kết cấu, bàn chải, hành động và bổ sung. Vấn đề lớn nhất với Photoshop những ngày này là bạn chỉ có thể làm cho thiết kế tĩnh. Bạn không có thể làm cho trang web của bạn dễ dàng đáp ứng. Kết quả là, đã có một cuộc thảo luận lớn về nó và Adobe sau đó đã đưa ra một công cụ web mới có tên gọi Adobe Cạnh Reflow. Nó cho phép bạn nhập các tập tin PSD của bạn và dễ dàng làm cho các phiên bản thay thế của thiết kế của bạn cho kích thước màn hình khác nhau. Chương trình này vẫn đang trong phiên bản đầu tiên nhưng đó là một phần mở rộng rất đẹp cho Adobe Photoshop.

Adobe Fireworks. Đây là một thay thế tuyệt vời cho Photoshop cho nhiều nhà thiết kế. Thật không may, tại thetime viết ebook này, Adobe đã quyết định không còn tiếp tục phát triển pháo hoa; Tuy nhiên, bạn vẫn có thể mua phiên bản mới nhất và sử dụng nó. Adobe thông báo rằng họ sẽ phát hành một số công cụ mới tuyệt vời mà sẽ thay thế Pháo hoa, vì vậy tôi sẽ không khuyên bạn sử dụng pháo hoa nữa.

Sketch. Sketch là lẽ đối thủ cạnh tranh lớn nhất của Photohop khi nói đến thiết kế trang web. Trong khi Photoshop ban đầu đã được thực hiện để chỉnh sửa và chỉnh sửa ảnh, Sketch đã được tạo ra đặc biệt cho công việc thiết kế giao diện người dùng. Tất cả các mẫu thiết kế trong Phác thảo được hoàn toàn dựa trên vector, do đó bạn không cần phải lo lắng về hình ảnh độ phân giải hoặc lưu hình ảnh cho màn hình hiển thị võng mạc. Nó đầy đủ các tính năng tuyệt vời như biểu tượng, lớp, công cụ lưới, artboards và xuất khẩu hình ảnh dễ dàng. Phác thảo chắc chắn là một trong những ứng dụng mà là giá trị cố gắng và so sánh với Photoshop.

Webflow và Easel. Đây là một số ứng dụng web mới mà sẽ cho phép bạn làm toàn bộ thiết kế trang web ngay từ trình duyệt của bạn. Họ là những lựa chọn thay thế rất thú vị mà gần đây mới chú ý của tôi. Họ sẽ cho bạn hoàn toàn tạo mô hình thiết kế sử dụng hình dạng, kiểu chữ web, và hình ảnh nhập khẩu. Lợi thế lớn nhất của các công cụ này là bạn nhìn thấy ngay thiết kế của bạn trong trình duyệt và bạn có thể nhanh chóng xuất HTML và CSS để tạo mẫu nhanh. Tôi vẫn sẽ phải cẩn thận với việc sử dụng mã số đó vào sản xuất, mặc dù. Không có gì tốt hơn so với một mã bằng tay được.

Thiết kế trên trình duyệt

Kỹ thuật này đã trở nên phổ biến hơn vì nhiều nhà thiết kế phát hiện ra rằng họ không cần phải sử dụng Photoshop để thiết kế một cách hiệu quả các trang web. Bạn có thể làm tất cả mọi thứ trực tiếp trong trình duyệt bằng cách sử dụng HTML và CSS. Làm việc trên thiết kế của bạn trong môi trường thật sự của nó, trình duyệt web, có thể giúp bạn tiết kiệm rất nhiều thời gian. Adobe Photoshop là phần mềm của sự lựa chọn của tôi tại thời điểm văn bản ebook này (đầu năm 2015) và tôi sử dụng nó cho wireframes, hướng dẫn phong cách web, và mockups thiết kế. Tôi thường chỉ cần mockups của các trang quan trọng nhất như trang chủ, trang blog, trang đích, vv Tiếp theo, tôi kết thúc toàn bộ thiết kế trong trình duyệt dựa trên hướng dẫn phong cách trang web của tôi và mockups. Pre-thiết kế tất cả mọi thứ trong Photoshop cho phép tôi có nhiều sáng tạo và thử khái niệm thiết kế khác nhau nhanh hơn. Tôi cũng có thể sử dụng nó để chỉnh sửa ảnh hoặc minh hoạ mà tôi cần phải sử dụng trong dự án thiết kế của tôi. Photoshop vẫn là lựa chọn an toàn nhất trong đó để làm thiết kế của bạn những ngày này. Đó là ứng dụng thiết kế phổ biến nhất và hầu hết các khách hàng của bạn và các nhà phát triển web sẽ yêu cầu các tập tin PSD thiết kế của bạn. Ngoài ra còn có nhiều phần mở rộng giúp cải thiện chức năng của Photoshop, muốn nhanh chóng slicing đồ họa của bạn và xuất khẩu hình ảnh (Slicy) hoặc thậm chí xuất khẩu toàn bộ thiết kế sang HTML và CSS để tạo mẫu nhanh (Cut & Slice). Tiếp theo, tôi sẽ chỉ cho bạn làm thế nào để thiết lập một cách chính xác Adobe Photoshop cho dự án thiết kế web của bạn.

Setting up Photoshop

RGB (Red, Green, Blue).

Chế độ màu này được sử dụng cho tất cả các đồ họa có nghĩa là để được hiển thị trên màn hình.

Adobe Photoshop có thể được sử dụng cho cả in ấn và thiết kế web. Nó cho phép bạn làm việc ở độ phân giải khác nhau và các thiết lập màu sắc. Chúng ta hãy xem làm thế nào để thiết lập Photoshop của bạn để nó hoạt động đặc biệt tốt nhất với các dự án thiết kế web của bạn. Color settings Vì chúng ta sẽ không đào sâu vào quá nhiều chi tiết về quản lý màu sắc ở đây, tôi sẽ mô tả ngắn gọn các cài đặt màu sắc tốt nhất cho không gian làm việc của chúng tôi. cài đặt màu sắc trong thiết kế web là khá đơn giản. Một số thông tin này có thể được rõ ràng cho bạn, nhưng hãy nhanh chóng làm mới lý thuyết. Có hai chế độ màu sắc phổ biến nhất:

CMYK (Cyan, Magenta, Yellow, Black).

Chế độ màu này được sử dụng cho tất cả các đồ họa có nghĩa là cho in ấn. Như bạn có thể thấy, RGB là chế độ màu duy nhất bạn muốn làm việc với trong khi thiết kế websites.Simple? Có, nhưng ... để làm cho điều này phức tạp hơn một chút, có nhiều không gian màu khác nhau sử dụng các mô hình màu RGB; ví dụ, sRGB, Adobe RGB, vv Các không gian màu sắc xác định chính xác những gì màu sắc mà bạn nhìn thấy trên màn hình máy tính của bạn hoặc thiết bị khác với một màn hình RGB. Tôi thấy rằng một số nhà thiết kế khuyên bạn sử dụng Adobe RGB (1998) bởi vì nó có nhiều màu sắc hơn sRGB. Đúng là Adobe RGB có một gam màu rộng hơn, nhưng các nhà thiết kế web không nên sử dụng nó. Cách tốt nhất là sử dụng không gian màu sRGB, mà là một không gian màu tiêu chuẩn tạo ra hợp tác bởi HP và Microsoft trong năm 1996. Bằng cách sử dụng sRGB trong không gian làm việc của bạn, bạn hãy chắc chắn rằng các màu sắc mà bạn nhìn thấy trong Photoshop của bạn là rất gần với những gì người khác sẽ nhìn thấy trong trình duyệt của họ. sRGB là không gian màu thường được sử dụng nhất trên màn hình máy tính. Tất nhiên, những gì bạn nhìn thấy trên màn hình của bạn sẽ không bao giờ là 100% chính xác với những gì người khác nhìn thấy bởi vì mỗi màn hình là khác nhau. Tuy nhiên, bạn muốn sử dụng không gian màu chuẩn nhất, mà vị trí bạn ở một vị trí tốt như một nhà thiết kế. Đầu tiên, vào Edit -> Cài đặt màu (Shift + Command + K hoặc Shift-Ctrl + K). Để làm cho cuộc sống của chúng ta dễ dàng hơn, Adobe cung cấp một thiết lập màu chuẩn gọi là "Mục đích Bắc Mỹ chung 2." Nếu đây không phải là những gì bạn đã chọn hiện thời, thay đổi nó. Một khi bạn thay đổi các thiết lập màu sắc của bạn, nhấp vào "OK". Bây giờ, hãy chắc chắn rằng hồ sơ màu sắc của các tập tin của bạn là sRGB IEC61966-2.1 và nó luôn được nhúng vào các file PSD của bạn. Vì vậy, bất cứ khi nào bạn gửi tập tin dự án của bạn cho người khác, bạn biết họ sẽ được làm việc trong không gian màu giống như bạn đang có.

Kích thước tập tin dự án và độ phân giải Một khi chúng ta đã cài đặt màu sắc của chúng tôi thực hiện, chúng tôi có thể chăm sóc của các kích thước tập tin dự án của chúng tôi và giải quyết. kích thước canvas của bạn phụ thuộc vào những gì dự án bạn đang làm việc. Một trang web đầy đủ kích thước điển hình là 1140px rộng và bạn có thể muốn thêm ít nhất 150px trên cả hai mặt, vì vậy bạn có thể thấy một số nền xung quanh trang.

72 DPI (Dots Per Inch) hoặc PPI (pixel mỗi inch) là độ phân giải tiêu chuẩn cho tất cả các đồ họa hiển thị trên web. Trong thực tế, bạn không nên lo lắng về độ phân giải của hình ảnh của bạn khi thiết kế cho các trang web bởi vì không có vấn đề gì DPI / PPI ảnh của bạn có, nó sẽ luôn luôn giống nhau trong trình duyệt. DPI / PPI làm cho một sự khác biệt khi bạn thiết kế hình ảnh cho in ấn. Bạn cũng nên nhớ rằng các định dạng tập tin hình ảnh web như PNG và GIF thậm chí không lưu trữ các thiết lập DPI / PPI. Điều thực sự quan trọng trong việc thiết kế cho web là kích thước pixel của hình ảnh của bạn. Tuy nhiên, nó không phải là tất cả những gì dễ dàng. Nó sẽ là tất cả rất đơn giản nếu có không có màn hình độ phân giải cao, như hiển thị võng mạc của Apple. Tất cả hình ảnh làm cho hiển thị võng mạc nên được xuất khẩu trong kích thước 2x nếu bạn không muốn đồ họa của bạn là mờ.

Cài đặt môi trường làm việc

Bạn có thể kích hoạt các cửa sổ từng người một bằng cách nhấp vào chúng trong menu Window. Tiếp theo, bạn có thể sắp xếp lại bảng và nhóm chúng theo cách bạn thích và vào Window -> Workspace -> New Workspace để lưu nó như Workspace của riêng bạn mà bạn có thể sử dụng trong tương lai. Bất cứ khi nào bạn muốn sử dụng nó, hãy vào Window -> Workspace và chọn không gian làm việc của bạn từ danh sách. Bạn thậm chí có thể tạo ra nhiều hơn một không gian làm việc tùy thuộc vào kích cỡ màn hình bạn làm việc trên. Tôi thường có hai không gian làm việc khác nhau: một cho màn hình rộng của tôi và một cho máy tính xách tay 15 của tôi ''.

Như bạn thấy, tôi sử dụng một vài tấm giống như Styles, điều chỉnh, Properties, vv Tất cả phụ thuộc vào sở thích của riêng mình, vì vậy tôi sẽ đề nghị điều chỉnh không gian làm việc của bạn với nhu cầu riêng của bạn. Và đây là không gian làm việc máy tính xách tay của tôi:

Typography là gì?

chương 5

Typography đóng một vai trò đặc biệt trong thiết kế bởi vì đó là một hình thức nghệ thuật và truyền thông cùng một lúc. Mỗi từ có một ý nghĩa riêng của mình và bằng cách thiết kế nó, chúng tôi có thể cung cấp thông điệp này một cách hiệu quả hơn hoặc thậm chí trao quyền giải thích của nó. Mặt khác, một thiết kế xấu có thể làm phiền một chức năng cơ bản của kiểu chữ mà là khả năng đọc và hoàn toàn không khuyến khích người nhận từ việc đọc các nội dung. Typography không chỉ là về việc chọn phông chữ cái nhìn tốt đẹp. Có rất nhiều chi tiết và quyết định nhỏ tham gia vào quá trình thiết kế. Chỉ cần nhìn vào ví dụ dưới đây và xem như thế nào quan trọng đó là để phù hợp với kích thước đúng font chữ, màu chữ, chiều cao dòng hàng đầu), không gian giữa các chữ cái (theo dõi), vv

Thiết kế Typography là một đề tài rất rộng và có rất nhiều cuốn sách dành cho chỉ một chủ đề. Trong ebook này, chúng ta sẽ tập trung vào trang web typography và nghiên cứu một số kỹ thuật cơ bản về cách thiết kế một cách hiệu quả và chính xác loại trong các dự án của bạn. Nó thực sự không phải là khó khi bạn áp dụng những thói quen tốt để quá trình của bạn và bắt đầu làm theo một số quy tắc chung. Vì vậy, chúng ta hãy bắt đầu ... v

Google Fonts.

Tại sao việc sử dụng typography cho web lại khác biệt? Là kiểu chữ quan trọng trong thiết kế web? Nhìn vào bất kỳ trang web và tưởng tượng lấy ra tất cả các văn bản từ nó. Nó trông như thế nào?

Adobe Typekit.

Đây là dịch vụ thanh toán nếu bạn muốn sử dụng nó cho nhiều hơn chỉ là một trang web. Typekit cũng có một lựa chọn khá lớn của phông chữ và nhiều phông chữ của họ có chất lượng tốt hơn nhiều so với các phông chữ miễn phí từ Google. Nếu bạn là một người sử dụng Adobe Cloud, bạn có thể đồng bộ các phông chữ Typekit để sử dụng chúng trong Photoshop và các phần mềm khác của Adobe.

Content management.

Font rendering.

Responsiveness.

Font classifications Bạn đã biết một số vấn đề cơ bản của kiểu chữ web và bạn biết nơi để tìm kiếm các phông chữ sẽ được an toàn để sử dụng trên web. Hãy nhìn tại một số phân loại phông chữ và những loại font chữ, chúng tôi nhận ra.

Serif

San-serif

Blackletter

Slab serif. Handwriting

Script

Chọn mà phối hợp các font Bởi vì có rất nhiều người sẵn sàng phông chữ, có một số lượng vô tận của các tổ hợp font chữ, và chọn phông chữ đúng nghĩa đen có thể đưa bạn giờ làm việc. Nó không bao giờ là dễ dàng, nhưng bạn nên luôn luôn căn cứ quyết định của bạn về hướng dẫn thương hiệu dự án của bạn và sở thích của khán giả.

Tính nhất quán. Tính nhất quán là vô cùng quan trọng khi nói đến lựa chọn, pha trộn và bằng phông chữ. Chọn phông chữ của bạn và sau đó là rất phù hợp trong việc sử dụng chúng trên toàn bộ dự án thiết kế của bạn. Bằng cách tạo ra một mô hình vững chắc trong việc sử dụng phông chữ, thiết kế của bạn sẽ không chỉ được dễ dàng hơn để đọc, nhưng cũng sẽ trông rất chuyên nghiệp và thêm một số tính cách thiết kế của bạn. Bạn có thể đi một bước xa hơn và dính vào các phông chữ tương tự trên bất kỳ trang web mini hoặc trang đích vẫn là một phần của cùng một thương hiệu. Một vài ví dụ cho việc phối font đẹp

Đầu tiên là phải dễ đọc Không dùng quá nhiều font Nó là tốt nhất để sử dụng không quá ba phông chữ (có thể là chữ thứ ba tùy chọn đối với một số yếu tố đặc biệt) trong dự án thiết kế của bạn. Có ít nhất một vài lý do tốt cho việc này: 1. Nếu bạn đang sử dụng một trong những dịch vụ trực tuyến như Google chữ Fonts hoặc Typekit, mỗi bao gồm font chữ mới cho trang web của bạn có thể làm tăng đáng kể thời gian tải của nó. 2. Quá nhiều phông chữ gây phiền nhiễu và nó có thể được khó khăn cho du khách tập trung vào đọc nội dung. 3. Duy trì ít hơn ba phông chữ trong một thiết kế dễ dàng hơn nhiều để làm cho nó trông tuyệt vời.