Thiết kế và phát triển web 101

phát triển web_101Bạn muốn biết những điều cơ bản về Phát triển và Thiết kế Web? Tuyệt vời…


Nhưng có một vấn đề với dòng suy nghĩ này, hoặc một số trong số họ thực sự

  • Mục đích của việc có một trang web là gì? Có phải ai cũng thực sự cần một?
  • Nếu vậy, làm thế nào để bạn xây dựng một trang web chất lượng? Hay nói cách khác, làm thế nào để bạn học thiết kế và phát triển web cơ bản cho phép bạn tự xây dựng trang web chất lượng đó?
  • Quan trọng hơn, bạn có thể xây dựng một trang web chất lượng trong lần thử đầu tiên không? Hoặc bạn cần nhiều năm kinh nghiệm đằng sau bạn, trước khi bạn có thể hy vọng bất kỳ kết quả nào đáng sợ hơn?

Hãy để câu trả lời cho tất cả những điều đó người mới bắt đầu hướng dẫn phát triển và thiết kế web.

[Cảnh báo spoiler. Đúng, bạn có thể xây dựng một trang web chất lượng trong lần thử đầu tiên.]

Những gì được bao phủ trong Hướng dẫn này?

Được rồi, điều đầu tiên, chúng tôi rất vui vì bạn đã tiếp tục đọc và bạn đã quyết định thử phát triển web! Ở đây, cách thức mà nó sẽ diễn ra:

Các chương được trình bày một cách rất đơn giản, với nội dung chính ở bên trái và các mục có thể hành động ở bên phải. Thích như vậy:

Hướng dẫn giới thiệu: Chương 1

Bây giờ, làm thế nào để tiến hành:

  • Trong khi bạn đọc lần 1: Chúng tôi khuyên bạn nên đọc toàn bộ từ trên xuống dưới. Điều này sẽ cung cấp cho bạn một cái nhìn tốt 10.000 feet về chủ đề và giúp bạn hiểu các phần quan trọng nhất của nó. Nó cũng sẽ cung cấp cho bạn các công cụ và phương pháp cơ bản về cách xử lý các tác vụ riêng lẻ.
  • Trong khi trên 2 của bạn đọc và hơn nữa: Sử dụng TOC và nhảy qua phần mà bạn quan tâm nhất. Ngoài ra, vui lòng sử dụng các nút chia sẻ bên cạnh mỗi chương và gửi các liên kết đến chính bạn hoặc cho bạn bè / người theo dõi của bạn, những người có thể quan tâm.

Sẵn sàng? Hãy cùng đi đến chương 1.

Ai Hướng dẫn này cho?

Nếu bạn muốn học thiết kế và phát triển web cơ bản, hướng dẫn này là dành cho bạn. Dù động lực của bạn là gì.

Ngoài ra, bạn không cần bất kỳ kiến ​​thức kỹ thuật nào trước đây để bắt đầu (ngoài các kỹ năng web cơ bản của Google). Toàn bộ quan điểm của hướng dẫn này là trở thành một loại khóa học 101 101 cho tất cả mọi người quan tâm đến việc xây dựng trang web và học phát triển web.

Dưới đây là một số lý do phổ biến tại sao bạn có thể quan tâm:

  • 1. Bạn CẦN một trang web cho doanh nghiệp của bạn (và bạn muốn xem liệu bạn có thể tự xây dựng nó không).
  • 2. Bạn muốn TÌM HIỂU sự phát triển web vì đam mê hoặc sở thích tạm thời (không có gì xấu về điều đó).
  • 3. Bạn CẦN một trang web cho trường học.
  • 4. Bạn có thể giúp đỡ một người bạn hoặc thành viên gia đình để có được trang web của họ trực tuyến.

Ý tưởng chính mà từ đó sẽ hướng dẫn chúng tôi

Điều này quan trọng! Và xin vui lòng không giận chúng tôi nếu bạn là một nhà phát triển web nâng cao đọc được điều này, nhưng ý tưởng chính mà Lạo sẽ hướng dẫn chúng tôi trong toàn bộ tài nguyên thiết kế và phát triển web 101 này là:

Cách tiếp cận kháng chiến ít nhất

Dưới đây là ba nguyên tắc của phương pháp kháng ít nhất:

  • không phá vỡ mọi thứ ở cấp độ phân tử. I E. chúng tôi sẽ không đi đến tận cùng của cách ngôn ngữ lập trình hoạt động, hoặc cách một máy chủ web hoạt động.
  • không phát minh lại bánh xe. I E. nếu ai đó đã giải quyết một vấn đề nhất định và đưa ra giải pháp khả dụng, chúng tôi sẽ sử dụng nó.
  • làm cho một giải pháp đơn giản tuyệt vời, thay vì một lỗi giải pháp phức tạp và có vẻ nhiều chức năng hơn và không thể hiểu được.

CHƯƠNG 1: Kế hoạch

Ý tưởng của bạn, loại trang web, tên miền và lưu trữ.

Trước khi bạn thiết lập một trang web, bạn sẽ cần một kế hoạch

Thật trớ trêu khi nghe – những bản hit đình đám của thập niên 80 cho thấy Nhóm A-Team đã dạy chúng tôi, một kế hoạch tốt là một chìa khóa thành công.

Nếu bây giờ bạn có một trang web đang ngồi trong bạn thì bạn chắc chắn rất vui mừng về ý tưởng duy nhất cuối cùng là đưa nó ra cho người khác đọc và duyệt.

Bạn muốn trang web của bạn là tuyệt vời. Bạn có thể biết nó sẽ trông như thế nào ở một mức độ nào đó. Hoặc thậm chí bạn có thể có logo hoàn hảo sẵn sàng.

Nhưng…

Đây là nơi mà bạn nên bắt đầu. Nếu bạn bắt đầu với những kỳ vọng được thiết lập sẵn, điều này sẽ chỉ dẫn bạn đến rất nhiều nhầm lẫn trên đường đi và kết quả phụ ở cuối.

Thay vào đó, hãy nghĩ về những điều sau đây:

  1. Tách mình khỏi mọi mục tiêu kỹ thuật mà bạn có thể có. Ví dụ như mục tiêu học tập công nghệ trang web hoặc phần mềm trang web nhất định.
  2. Tự hỏi bản thân một câu hỏi chính: Tôi cần gì trang web này?

Đây là về bạn, đây là về mục tiêu của trang web.

Câu hỏi bạn cần tự hỏi mình trước khi thiết lập trang web

  1. Những gì trang web có nghĩa là để đạt được?
  2. Điều gì sẽ là thứ chính của người Viking được trình bày qua trang web? (ví dụ: doanh nghiệp của bạn, một sản phẩm, bài đăng trên blog của bạn, v.v.)
  3. Trang web sẽ có bất kỳ mục đích đặc biệt? (ví dụ: cửa hàng thương mại điện tử, danh mục đầu tư nhiếp ảnh gia, v.v.)
  4. Các đối tượng mục tiêu là ai?
  5. Tại sao họ quan tâm đến chủ đề của trang web?
  6. Trang web giải quyết nỗi đau gì cho các thành viên khán giả cá nhân?

Về 3 câu hỏi cuối cùng này, hãy để đối tượng nói chuyện trong một phút

Có 2 quy tắc chính để xây dựng trang web. Ở đây quy tắc # 1:

 Người đọc / khách truy cập đến trước. Họ là người chính mà trang web của bạn phải làm hài lòng.

Nói cách khác, trang web của bạn không phải là của bạn. Nó là của họ.

(Quy tắc số 2 chúng tôi sẽ thảo luận trong một phút.)

Quên về hướng dẫn đơn giản này có thể dẫn bạn đến một cách hoàn toàn sai lầm, thậm chí đến mức bạn thấy mình có một trang web mà Lừa gây nhầm lẫn với mọi người xung quanh nhưng bạn.

Ugh Ugh! Mọi người chỉ cần don hiểu những gì trang web này là về. Làm sao họ có thể ngu dốt đến thế?! – bạn kết thúc suy nghĩ. Nhưng hóa ra, người không biết gì là bạn.

Cách duy nhất để tránh điều đó là xây dựng trang web của bạn với người đọc trong tâm trí ngay từ khi đi.

Vì vậy, Lọ lấy mảnh giấy đó và trả lời tất cả các câu hỏi trên.

Khi bạn thực hiện xong, bạn có bộ hướng dẫn cuối cùng mà bạn sẽ hành động trong khi làm việc trên trang web của mình.

Những câu trả lời sẽ là một công cụ đặc biệt mạnh mẽ khi bạn đi cùng. Bạn sẽ có thể quay lại với họ bất cứ khi nào bạn phải đối mặt với một quyết định liên quan đến trang web của bạn.

Bạn nên làm * cái này * hay * cái kia *? Đến bảng trả lời và tìm hiểu. Bạn nên sử dụng một thanh bên rộng hay hẹp? Đi đến câu trả lời, tìm ra cái nào có khả năng cộng hưởng với người đọc mục tiêu. Và vân vân.

Tên miền và Web Hosting

Nếu bạn muốn trở thành chủ sở hữu trang web, bạn cần một tên miền và máy chủ web.

Chà, về mặt kỹ thuật, bạn có thể xây dựng một trang web thử nghiệm trên máy tính của riêng mình và sau đó chạy nó từ một máy chủ web cục bộ (cũng được cài đặt dưới dạng phần mềm trên máy tính của bạn), nhưng đó không phải là giải pháp có thể sử dụng cho 99% trường hợp, vì vậy hãy bỏ qua nó.

Vì vậy, một máy chủ lưu trữ và một miền tên miền

Tin xấu ở đây là cả hai đều tốn tiền.

Tin tốt lành. Nó không quá nhiều tiền trong sơ đồ lớn. Ngoài ra, khi bạn học, bạn thậm chí có thể khởi chạy nhiều trang web nhỏ trên một tên miền và dưới một máy chủ web duy nhất.

Nhưng hãy để ngay từ đầu.

Máy chủ web:

  • Nói một cách đơn giản, một máy chủ web là nơi trang web của bạn nằm và là nơi khách truy cập của bạn có thể tìm thấy nó. Theo một cách nào đó, máy chủ web cho các trang web giống như căn hộ cho con người. Dưới vỏ bọc, máy chủ web là các công ty cho thuê máy chủ của họ để đổi lấy tiền (căn hộ nhỏ cho trang web của bạn).
  • Để bắt đầu, một kế hoạch lưu trữ chia sẻ tiêu chuẩn sẽ làm. Bạn có thể nhận được những thứ đó cho bất cứ thứ gì bắt đầu từ $ 3 / tháng. Đây là một so sánh tốt đẹp của máy chủ web phổ biến. Kiểm tra nó và quyết định những công ty nào có vẻ phù hợp với bạn. Tuy nhiên, các đề xuất của chúng tôi dành cho SiteGround, A2 Hosting và Dreamhost.

Tên miền:

  • Nếu một máy chủ web là một căn hộ, thì một tên miền là địa chỉ của căn hộ đó. Ví dụ: tên miền của trang web này là hostingfacts.com.
  • Cách để bắt đầu là chọn tên miền mong muốn của bạn và sau đó mua nó từ một công ty đăng ký. Ở đây, một hướng dẫn toàn diện về cách mua một tên miền, và ở đây, một danh sách các trình tạo tên miền.

 

Gợi ý và lời khuyên cho việc chọn tên miền

Được rồi, đi đến một số nhà đăng ký tên miền và thực sự mua tên miền là một chuyện, nhưng làm thế nào để bạn chọn đúng tên miền?

Có một vài trường học:

  • Tên miền có thương hiệu. Đó là những lĩnh vực bao gồm các từ không tồn tại. Hãy suy nghĩ, những thứ như Google.com hoặc Yahoo.com. Trước khi những công ty đó xuất hiện, những từ đó chẳng có ý nghĩa gì. Mặt trái của một tên miền có thương hiệu là nó Mạnh, rất dễ thương hiệu, dễ nhớ và dễ dàng phân biệt trang web của bạn với các tên miền khác.
  • Tên dựa trên từ khóa. Những từ này bao gồm các từ hiện có, được đặt trong một chuỗi mô tả mục đích của trang web. Hãy suy nghĩ, những thứ như Pizza.com, hoặc StartBloggingOnline.com. Với một tên miền như vậy, khách truy cập của bạn sẽ có thể dự đoán chính xác loại trang web mà họ sắp truy cập. Nhược điểm là những tên miền đó thường ít thương hiệu.
  • Tên kết hợp. Đó là những tên miền có thương hiệu và tên miền dựa trên từ khóa được đặt cùng nhau. Hãy suy nghĩ, Facebook.com hoặc Copyblogger.com. Những cái tên như vậy gợi ý về một số phần của trang web trên mạng của người dùng, nhưng họ vẫn có thương hiệu cao.

Một số nguyên tắc chung bất kể loại tên miền bạn chọn:

  • Làm cho tên miền dễ nhớ.
  • Làm cho nó ngắn gọn và đơn giản. Tên miền càng dài thì càng khó hiểu.
  • Nhận một tên miền (nếu có thể). Tên miền .com là tên miền cấp cao nhất của Wikipedia có sẵn. Don thăng giải quyết cho bất cứ điều gì khác.
  • Cố gắng tránh dấu gạch ngang. Lấy tên của bạn ở dạng đơn blob như ăn cakerecipes.com, thay vì kiểu bánh ngọt-recipes.com

Những điều đã sẵn sàng sau chương này:

  • Một tên miền.
  • Một máy chủ web.
  • Bảng câu trả lời của bạn – mục tiêu của trang web của bạn và cách thức mà nó sẽ phục vụ khán giả.

Cần sự giúp đỡ nhiều hơn? Ở đây, đọc thêm cho bạn:

  • Tại sao chia sẻ lưu trữ? Các loại máy chủ chính được so sánh
  • 10 điều làm cho một máy chủ web tốt
  • 12 quy tắc để chọn đúng tên miền
  • Hướng dẫn lập kế hoạch trang web toàn diện

CHƯƠNG 2: Thiết kế và tạo khung

Lấy giấy và bút và cào cùng với cấu trúc trang web của bạn

Được rồi, hãy để Lốc bước vào giai đoạn thiết kế.

Trước tiên, ở đây, hãy nói về đạo đức công việc mà chúng tôi sẽ thực hiện ở đây:

  • Chúng tôi sử dụng bút và giấy càng lâu càng tốt, và chỉ sau đó chuyển sang máy tính. Hãy tin chúng tôi, mỗi phút dành cho thiết kế của bạn trên giấy là một giờ được lưu khi bạn bắt đầu điều chỉnh mọi thứ trên máy tính.
  • Chúng tôi đang thực hiện công việc lặp đi lặp lại Chúng tôi làm »kiểm tra kết quả» cải thiện »kiểm tra kết quả» lặp lại cho đến khi hoàn thành.

Trong chương 1, chúng tôi đã đề cập đến một cái gì đó chúng tôi gọi là quy tắc số 1 của việc xây dựng trang web. Bây giờ là thời gian cho quy tắc # 2:

Quy tắc số 2 về xây dựng trang web:

Hãy suy nghĩ nội dung trước.

Nội dung là những gì quan trọng trên một trang web. Không phải là thiết kế. Nội dung.

Mọi người đến cho nội dung. Họ không đến với thiết kế. Thiết kế chỉ là một phương tiện để cung cấp nội dung.

Không bao giờ bắt đầu với trang web của bạn trông như thế nào. Bắt đầu với nội dung. Nội dung. Nội dung. Nội dung.

Vậy nội dung của chúng tôi có ý nghĩa gì? Nói tóm lại, đó là điều mà mọi người muốn nhận được từ trang web của bạn. Bài đăng trên blog, sản phẩm trong cửa hàng, chủ đề diễn đàn nếu bạn đang xây dựng một diễn đàn, bài viết tin tức, đề nghị kinh doanh của bạn, v.v..

“Có thật không? Vẻ ngoài thực sự rất quan trọng? – Bạn hỏi.

Thay vì chúng tôi đánh bại điều này, hãy xem trang này:

Trang web đơn giản

Cho đến nay, trang web đơn giản này là lời giải thích tốt nhất về thiết kế là gì và mục đích của nó phục vụ trực tuyến là gì.

Hãy nhớ rằng, nội dung đầu tiên!

Nội dung và cấu trúc trang web

Được rồi, vì nội dung là điều quan trọng nhất, bạn cần phải có (hầu hết) nó sẵn sàng trước. Hoặc ít nhất, bạn cần có một ý tưởng tốt về việc sẽ có bao nhiêu nội dung và sẽ ở dạng nào.

Ghi chú. Chúng tôi biết rằng phần này có thể khó khăn. Bắt đầu với nội dung có vẻ khá không tự nhiên đối với thiết kế trang web, nhưng nó thực sự là cách tốt nhất để có được kết quả tuyệt vời cuối cùng. Vì vậy, hãy suy nghĩ về nội dung mà bạn muốn chia sẻ với người đọc và cách bạn muốn trình bày nó.

Bước tiếp theo là chọn ra từng loại trang bạn sẽ cần (như trang chủ, trang sản phẩm, trang danh mục, trang giới thiệu, trang liên hệ, trang bán hàng chính, trang đích đăng ký bản tin, danh sách blog chính, bài viết cá nhân, có lẽ một cửa hàng, và bất cứ điều gì khác có vẻ cần thiết).

Hãy suy nghĩ, cách hiệu quả nhất để tổ chức nội dung của bạn trên trang web là gì?

Làm tất cả điều này trên giấy. Nó có khả năng sẽ dễ dàng và nhanh hơn cho bạn hơn là học một số phần mềm vẽ biểu đồ ngay tại chỗ.

Thí dụ:

cấu trúc nội dung

Cào cùng một khung dây

Một khung dây trong thiết kế web chỉ đơn giản là sơ đồ trang hoặc kế hoạch chi tiết – một hướng dẫn trực quan đại diện cho khung của trang web (Wikipedia cho chúng tôi biết).

Wireframes là tuyệt vời! Chúng tôi sử dụng chúng cho hầu hết những thứ chúng tôi làm có nghĩa là xuất hiện trực tuyến. Ví dụ, ở đây, một khung dây cho chính hướng dẫn này:

Cào một khung dây

Như bạn có thể thấy, một lần nữa, đó là trên giấy. Mặc dù có nhiều ứng dụng cho loại công việc này, chúng tôi không thực sự khuyên bạn nên sử dụng chúng. Chúng có thể là tuyệt vời cho các nhà thiết kế chuyên nghiệp, nhưng một người mới bắt đầu hoặc một người trung cấp sẽ chỉ mất thời gian tìm hiểu chúng, và cuối cùng, họ đã giành được sự cải thiện nhiều so với những gì họ sẽ đạt được thông qua bút và giấy.

Vậy, làm thế nào để khung dây?

Chà, có hai cách tiếp cận nếu bạn là người mới bắt đầu:

  • Đi theo dòng chảy nếu bạn cảm thấy mạnh mẽ và chỉ cần rút ra (không phải lúc nào cũng là một giải pháp hoàn hảo).
  • Nhận một số kiến ​​thức nhanh về cách cấu trúc khung dây đúng cách (thường là tốt hơn).

Về sau, hãy đến đây – một hướng dẫn tuyệt vời.

(Đảm bảo tạo một khung dây của mọi loại trang quan trọng mà bạn đã liệt kê trong bước trước.)

Những điều đã sẵn sàng sau chương này:

  • Hầu hết nội dung cho trang web, hoặc ít nhất là hầu hết nội dung dự đoán (ví dụ: nếu bạn dựa vào nội dung do người dùng tạo, thì nó khó có thể có trước đó).
  • Cấu trúc nội dung trang web của bạn được chuẩn bị dưới dạng biểu đồ.
  • Một khung dây gồm các loại trang riêng lẻ mà bạn sẽ cần.

Đọc thêm:

  • 9 bước để lập kế hoạch nội dung trang web
  • Mới làm quen với thiết kế web? Bắt đầu ở đây.

CHƯƠNG 3: UX và UI

Đừng bao giờ đánh giá thấp tầm quan trọng của trải nghiệm người dùng và giao diện người dùng

Như trong, Trải nghiệm người dùng và Giao diện người dùng.

WebDesignerDepot cho chúng ta một định nghĩa khá thi vị về hai:

UI là yên xe, bàn đạp và triều đại.

UX là cảm giác bạn có thể cưỡi ngựa và lên dây cót.

Đối với một định nghĩa thực tế hơn:

  • Giao diện người dùng là những gì người dùng nhìn thấy khi họ nhìn vào trang web của bạn.
  • UX là cách họ cảm nhận về nó.

Cặp này và mức độ mà nó thực hiện tốt, về cơ bản xác định tính hữu dụng của trang web của bạn đối với người dùng cuối / khách truy cập.

Bản thân cả thiết kế UX và UI đều là những chủ đề lớn và có rất nhiều yếu tố nhỏ hơn đóng vai trò trong kết quả cuối cùng.

Nói tóm lại, có rất nhiều thứ để học nếu bạn chỉ bắt đầu hành trình của mình.

Vì vậy, thay vì chúng tôi cố gắng nhồi nhét toàn bộ khóa học thiết kế UX và UI ở đây, chúng tôi chỉ nêu ra một số yếu tố quan trọng, sau đó gửi bạn qua một nơi khác để đọc thêm.

Mục tiêu người dùng

UX là về mục tiêu của người dùng, không có nhiều mục tiêu của bạn..

Được rồi, điều này có nghĩa là gì? Trước hết, hãy quay lại mục đích của trang web của bạn – điều bạn đã làm trong các chương trước. Lý do tại sao bạn xây dựng trang web và cách nó giúp người dùng / khách truy cập.

Làm thế nào để nó dịch vào mục tiêu của khách truy cập? Một điều mà khách truy cập muốn đạt được hoặc đạt được khi họ đến trang web của bạn là gì? Đó là mục tiêu của họ.

Những mục tiêu đó dễ dàng đạt được như thế nào?

Tiếp theo, tập trung vào câu hỏi sau:

  • Khách truy cập có thể đạt được mục tiêu của họ một cách dễ dàng? – Họ có thể nhận được thông tin chính xác mà họ đã tìm kiếm một cách đơn giản?

Để trả lời điều này, bạn cần quay lại khung dây, cấu trúc nội dung của bạn và kiểm tra lại mọi thứ.

Hãy chắc chắn rằng cấu trúc nội dung và các trang bạn đã nghĩ ra có ý nghĩa theo quan điểm của người dùng. Hãy chắc chắn rằng nó có thể giúp họ điều hướng giữa các trang quan trọng một cách tự do và theo cách không khó hiểu.

Về cơ bản, ở đây, chúng tôi đảm bảo rằng trang web mang lại giá trị cho khách truy cập của bạn.

Khó khăn để tự mình tìm ra điều này, không phải là nó?

Nó rất khuyến khích bạn nên kiểm tra các tài nguyên được liệt kê trong phần Đọc thêm về phần của chương này, nhưng bạn cũng có thể dùng thử hack, hack để nói.

Cụ thể, hãy nghĩ về những gì làm bạn thất vọng khi bạn truy cập các trang web tương tự như trang web bạn muốn xây dựng? Có thể có một số thông tin mà LỚN thực sự khó có được hoặc một số yếu tố giao diện khiến trang web khó hiểu.

Ghi chép, rút ​​ra kết luận, không nên phạm lỗi tương tự với trang web của bạn.

Sử dụng cảm xúc như một công cụ

Khi làm việc trên UI và UX của trang web của bạn, những gì bạn về cơ bản nhắm đến là gợi lên một cảm xúc nhất định trong khách truy cập của bạn.

Bạn muốn họ cảm thấy một cách nhất định, sau đó sẽ thuyết phục họ hành động theo một cách nhất định. Do đó, làm cho trang web của bạn thực sự hữu ích.

Để làm việc trên phần cảm xúc của công việc, một trong những công cụ tốt nhất là màu sắc.

Màu sắc có ý nghĩa khác nhau trong các nền văn hóa khác nhau. Hiểu những khác biệt đó có thể làm cho công việc của bạn dễ dàng hơn rất nhiều. Ở đây, một tấm cheat đẹp.

Sau khi bạn sử dụng màu sắc trong sân bóng của những màu bạn muốn (có thể) sử dụng, đây là một số nguyên tắc chung khi làm việc với màu:

  • Chọn một bảng màu chính bao gồm một vài màu kết hợp tốt với nhau. Đây là một trình tạo màu tuyệt vời.
  • Chọn một màu mà LÒNG sẽ là màu nhấn của bạn – màu mà Lùng sẽ được sử dụng cho các nút hành động, nút mua, v.v … Về cơ bản, bất cứ điều gì cần người dùng chú ý.

Kiểu chữ

Trong nhiều trường hợp, typography là nơi bạn thắng (hoặc thua) trò chơi xây dựng trang web.

Nó rất dễ để quên hoàn toàn kiểu chữ và chỉ sử dụng Arial cho mọi thứ.

Không được khuyến khích.

Ngày nay, làm việc với các phông chữ tùy chỉnh rất dễ dàng và bạn thậm chí không cần phải làm bất cứ điều gì kỹ thuật để kích hoạt các phông chữ tùy chỉnh đó trên trang web của mình.

Những kiểu chữ lớn, hoành tráng rất nhiều trong thời trang ngày nay, và nó cũng làm cho một nhà thiết kế thành công – đặc biệt là một nhà thiết kế mới bắt đầu làm việc – dễ dàng hơn nhiều.

Kiểm tra trang web này, ví dụ:

bonobos

Có thông báo gì không? Đúng, phông chữ rất lớn, và chúng trông thật tuyệt!

Đây là cách làm việc trên này:

  • Nói chung, mỗi thiết kế trang web cần hai loại văn bản: đề mục và đoạn văn. Trong hầu hết các trường hợp, chỉ một phông chữ cho mỗi sẽ làm.
  • Chuyển đến Google Fonts – Thư viện phông chữ miễn phí của Google, bạn có thể sử dụng trên trang web của mình – và tìm một phông chữ tiêu đề mà bạn thực sự thích.
  • Sau đó, lấy tên phông chữ đó và tìm nó tại Font Font – nó là một thư viện các cặp phông chữ được tạo sẵn kết hợp tốt với nhau.
  • Chọn một cặp trông tuyệt vời.
  • Ghi lại tên của cả hai phông chữ, bạn sẽ cần chúng sau này.

Làm theo cách này sẽ tăng tốc quá trình của bạn và vẫn cho bạn một kết quả tuyệt vời.

Ví dụ: chúng tôi đã tìm thấy một phông chữ có tên Bree Serif trong Google Fonts mà chúng tôi khá thích:

Bree-Serif

Sau đó, chúng tôi đã đưa nó đến Font Pair và trang web gợi ý rằng Bree Serif hoạt động tốt với Open Sans. Hoàn hảo:

Bree-Serif-mở-sans

Cấu trúc cuối cùng

Cuối cùng, bước cuối cùng!

Toàn bộ vấn đề của chương này là dựa trên bố cục / cấu trúc cuối cùng mà bạn sẽ sử dụng cho trang web của mình. Tại thời điểm này, bạn nên chắc chắn về những điều bạn muốn làm với thiết kế và giao diện người dùng của bạn.

Những điều đã sẵn sàng sau chương này:

  • Mục tiêu người dùng của bạn được liệt kê rõ ràng.
  • Khung dây của bạn được kiểm tra kỹ để đảm bảo rằng những mục tiêu đó không gây nhầm lẫn.
  • Bảng màu được chọn.
  • Các kiểu chữ đã tìm ra.
  • Toàn bộ bố cục / cấu trúc / tổ chức trang web của bạn.

Đọc thêm: 

  • Tạp chí UX
  • Gian hàng UX
  • Tâm lý và cảm xúc đằng sau màu sắc trong thiết kế web
  • Thiết kế trải nghiệm người dùng là gì? Tổng quan, công cụ và tài nguyên
  • Đặt mục tiêu kinh doanh thông minh cho một trang web
  • 8 quy tắc tạo kiểu chữ hiệu quả

CHƯƠNG 4: WordPress, HTML hoặc Mẫu?

Quyết định tuyến đường nào sẽ đi – hệ thống quản lý nội dung hoặc mã hóa từ đầu

Tại đây, nơi bắt đầu công việc thực sự, bẩn thỉu, bẩn thỉu!

Đây có lẽ cũng là phần đáng sợ nhất của quá trình (thừa nhận nó!).

Lần đầu tiên, đó là thời điểm thích hợp để đặt bút và giấy sang một bên và bắt đầu làm việc với một số phần mềm.

Và ra khỏi cổng, có một tấn câu hỏi

  • Tôi có nên học HTML không?
  • CSS thì sao?
  • Các mẫu trang web HTML đã sẵn sàng sẽ thực hiện thủ thuật cho tôi?
  • Tôi có cần học một ngôn ngữ lập trình như PHP không?
  • Tôi đã nghe nói WordPress là cách để xây dựng một trang web ngày nay.
  • Tôi thấy quảng cáo Squarespace Super Bowl. Những gì lên với điều đó?
  • Cái gì mà thứ này gọi là Joomla? Hoặc Drupal?
  • Và trên và trên và trên.

Câu trả lời cho tất cả những điều đó là có.

Như trong, vâng, bạn có thể thực hiện một trong hai hoặc tất cả những điều đó, và nó chỉ tùy thuộc vào bạn để quyết định chọn con đường nào.

Điều mà chúng tôi đang cố gắng nói là có cách tiếp cận tốt nhất số 1 ở đây. Tất cả phụ thuộc vào mức độ bạn muốn tham gia phát triển web, mức độ cơ bản của việc xây dựng trang web mà bạn muốn tìm hiểu, bạn cần một trang web chất lượng nhanh như thế nào và sau đó bạn có thể tùy chỉnh nó như thế nào.

Vì vậy, ở đây, cách thức mà chúng tôi sẽ tiến hành từ chương này. Đầu tiên, chọn nhân vật xác định rõ bạn nhất:

  • a) Tôi muốn tìm hiểu về phát triển web là gì, tất cả những điều cơ bản, tất cả các hoạt động bên trong của một trang web và tất cả các cơ chế làm cho một trang web hoạt động.
  • b) Tôi muốn tìm hiểu cách sử dụng một người xây dựng trang web đáng tin cậy mà Lọ sẽ xử lý hầu hết các công việc nặng nhọc cho tôi.
  • c) Tôi không biết phải làm gì. Tôi chỉ muốn một trang web mà tôi có thể tự xây dựng và nó sẽ hoạt động đúng.

Đã trả lời a)? Chuyển đến chương 5.

Đã trả lời b)? Chuyển đến chương 6.

Đã trả lời c)? Hãy xem bài viết này và sau đó quay lại (nó sẽ giúp bạn chọn đường dẫn hoàn hảo):

  • 8 nền tảng xây dựng trang web và viết blog tốt nhất đã được xem xét Mỗi nền tảng được mô tả cùng với ưu và nhược điểm của nó và tài nguyên cũng gợi ý lựa chọn khả dụng tốt nhất (Wix hoặc SB) cho các nhu cầu cụ thể của bạn.

Bạn đọc nó xong chưa? Tuyệt quá! Vì vậy, những gì ở trên mô tả bạn tốt nhất – a) hoặc b)?

Các công cụ có thể có ích trên đường đi:

  • Đồ họa: Paint.NET, Gimp, Pixlr.
  • Viết mã: Notepad ++, TextWrangler, SublimeText.
  • Quản lý công việc: Trello.
  • Thiết kế: phối màu, Google Fonts, các công cụ từ đây.
  • Nhiếp ảnh: Bapt, AllTheFreeStock

CHƯƠNG 5: Giới thiệu về HTML, CSS & Javascript

Làm thế nào các trang web là một thực tế tích hợp

Trong chương này, chúng tôi sẽ chỉ ra những điều cơ bản về phát triển web, giải thích các điều khoản quan trọng nhất và sau đó gửi cho bạn một số tài nguyên cụ thể nơi bạn có thể nâng cao kiến ​​thức và kỹ năng của mình.

HTML

HTML là ngôn ngữ của các trang web. Mỗi trang web được xây dựng hoặc chuyển đổi sang HTML tại một số điểm.

Ví dụ: để xem cấu trúc HTML của chính hướng dẫn này bạn đang đọc ở đây, chỉ cần nhấn CẠNG Ctrl + UNH trên bàn phím của bạn.

HTML định nghĩa mọi khối bạn nhìn thấy trên một trang web. Vào cuối ngày, để hiển thị bất cứ điều gì trên một trang web, nó cần phải được chuyển đổi sang HTML.

Để học HTML hiệu quả, chúng tôi khuyên bạn nên đăng ký một trong những khóa học (miễn phí hoặc trả phí) có sẵn trên web. Một số trong những cái tốt nhất có thể được tìm thấy tại Codeacademy hoặc Treehouse.

Ví dụ: ở đây, một phần cụ thể trên Codeacademy, tất cả về HTML và CSS.

Trang chủ CodeCademy

Vì vậy, mà cách tiếp cận toàn diện với HTML.

CSS

CSS – để bỏ qua các chi tiết kỹ thuật nhàm chán – chịu trách nhiệm tạo kiểu cho mọi thứ mà hiển thị trên trang web.

CSS lấy các thẻ HTML và sau đó cấu trúc và thêm kiểu dáng cho chúng. Những thứ như: văn bản in đậm, điều chỉnh màu sắc, đổ bóng, bố cục, thậm chí hoạt hình, hiện được thực hiện chủ yếu bằng CSS.

Để hiểu rõ hơn về cách thức hoạt động chính xác của nó, hãy tham gia khóa học nhanh này tại Codeacademy.

Để tìm hiểu sâu hơn, hãy kiểm tra các phần CSS trên Codeacademy hoặc Treehouse.

JavaScript, jQuery, Bootstrap, v.v..

JavaScript là ngôn ngữ lập trình cho phép bạn giới thiệu một số hành động năng động trên trang web của mình. Chẳng hạn, bạn có thể thực hiện những việc như xác thực các biểu mẫu web hoặc tương tác với người dùng theo cách hợp lý hơn mà không phải tải lại trang mà họ đã đăng nhập. Dưới đây là một hướng dẫn tốt đẹp của w3schools.

Hiểu được điều đó, jQuery là một thư viện JavaScript cho phép bạn tạo ra những thứ nâng cao với ít mã hóa hơn. Rất tiện dụng cho một nhà phát triển web. Tim hiểu thêm ở đây.

Cuối cùng, Bootstrap là một phát minh rất thú vị. Ban đầu được giới thiệu bởi Twitter, về cơ bản, nó là một môi trường mặt trước giúp tăng tốc quá trình xây dựng trang web bằng cách cung cấp hầu hết các yếu tố trang web phổ biến đã được xây dựng trước. Nghe có vẻ phức tạp, nhưng không phải là nó?

Nhưng nó không phải là người. Chỉ cần kiểm tra khóa học khởi đầu này tại Codeacademy (nhân tiện, đây là cách chúng tôi học Bootstrap ban đầu).

Những điều đã sẵn sàng sau chương này:

  • Về cơ bản, bản thảo đầu tiên của trang web HTML / CSS của bạn được xây dựng hoàn chỉnh. Từ đó, bạn có thể bắt đầu lặp lại và cải thiện kết quả cuối cùng.

CHƯƠNG 6: Nền tảng xây dựng trang web

Thiết lập trang web đầu tiên của bạn? Hãy dùng thử các nền tảng trang web miễn phí như WordPress, Joomla hoặc Drupal

Chương 6: Nền tảng xây dựng trang web

  • Quảng trường
  • WordPress
  • Joomla & Drupal

Có nhiều người xây dựng trang web ngoài đó hơn là bạn có thể lắc một cái gậy. (Nếu bạn là loại người bắt tay vào mọi thứ.)

Được rồi, đùa qua một bên.

Rõ ràng, nếu bạn không có ý định học cách viết mã mọi thứ bằng tay, thì họ chắc chắn là nhiều giải pháp có thể giúp bạn giải quyết.

Ghi chú. Xin lưu ý rằng mọi thứ khác mà chúng ta đã thảo luận trong chương 1-4 vẫn được áp dụng ở đây. Ngay cả khi bạn đi với một giải pháp xây dựng trang web mà loại xử lý tốt, bạn vẫn cần cẩn thận để làm cho sản phẩm cuối cùng trở nên thân thiện với người dùng và phù hợp với mọi mục tiêu của bạn. Những công cụ xây dựng trang web đó chính xác là những công cụ đó.

Bắt đầu với những thứ dễ nắm bắt nhất:

Quảng trường

Nền tảng trang web duy nhất quảng cáo trong Super Bowl.

Nói tóm lại, một giải pháp rất tiện dụng có thể được sử dụng bởi bất cứ ai. Không yêu cầu kỹ năng trước.

Nó cho phép bạn xây dựng các trang web cổ điển, blog, thậm chí các cửa hàng thương mại điện tử mà chúng tôi thậm chí đã viết một bài đánh giá về chúng. Giao diện và toàn bộ quá trình sử dụng nó khá dễ nắm bắt, cộng với những người Squarespace cung cấp rất nhiều hướng dẫn thú vị. Kiểm tra chúng ở đây.

WordPress

Thành thật mà nói, chúng tôi yêu WordPress.

Hầu hết thời gian, nó là nền tảng hoàn hảo để xây dựng một trang web. Nó có sự cân bằng hoàn hảo giữa độ phức tạp và dễ sử dụng, và về cơ bản, nó có thể tùy biến vô tận.

Hoạt hình WordPress

Ngoài ra, nó hiện là nền tảng trang web phổ biến nhất trong số tất cả. Theo chia sẻ của người tạo ra WordPress – Matt Mullenweg – WordPress hiện chiếm 25% toàn bộ internet. Tất cả những người đó có thể sai?

Được rồi, vì vậy để bắt đầu với WordPress, về cơ bản bạn chỉ cần tên miền và lưu trữ của bạn. Bản thân phần mềm WordPress hoàn toàn miễn phí.

Để bắt đầu, hãy thoải mái đi theo một trong những con đường sau:

a) Đường dẫn bắt đầu nhanh

  • Tới đây để tìm hiểu cách đơn giản hóa để cài đặt WordPress và khởi chạy trang web của bạn vào một buổi chiều.
  • Chọn một chủ đề miễn phí từ thư mục chính thức – đảm bảo rằng nó phù hợp với mục tiêu trang web của bạn và bố cục / thiết kế không phải là cấu trúc mong muốn của bạn (bạn sẽ điều chỉnh nó một chút).
    • Kiểm tra hai tài nguyên này để tìm hiểu cách tùy chỉnh một chủ đề hiện có.
    • Ngoài ra, bạn có thể chọn một chủ đề cao cấp đa năng có thể được điều chỉnh thông qua giao diện người dùng tiện dụng (không liên quan đến mã hóa). Chủ đề X là một ví dụ tốt về điều đó.
  • Cài đặt một số plugin phổ biến nhất và tốt nhất để có thêm tính năng.

b) Đây là con đường chuyên sâu

  • Bắt đầu bằng cách học WordPress thông qua một khóa học trực tuyến. Treehouse cung cấp một cái tuyệt vời.
  • Chọn chủ đề và plugin của bạn như trên. Thay phiên, xây dựng chủ đề của riêng bạn từ đầu.

Cuối cùng, WordPress có lẽ là nền tảng trang web linh hoạt nhất trên thị trường. Với nó, bạn có thể xây dựng hầu như bất kỳ loại trang web nào, không chỉ blog hay các trang web kinh doanh đơn giản. Dưới đây, một danh sách 47 cách khác nhau để sử dụng WordPress, chỉ để bạn suy nghĩ.

Joomla và Drupal

Mặc dù hơi khác biệt với nhau, Joomla và Drupal đều là những hệ thống quản lý nội dung tuyệt vời cho các dự án web nâng cao hơn.

Họ không phải là người thiết kế mạnh mẽ, nhưng họ có khả năng tùy biến cao và có khả năng xử lý bất kỳ loại trang web nào bạn có thể có trong kế hoạch.

Đôi khi, tùy thuộc vào mức độ phức tạp của dự án của bạn, họ có thể cần nhiều thời gian hơn để thành thạo và nỗ lực nhiều hơn vào đó.

Để đào tạo chuyên sâu hơn, có những khóa học tuyệt vời trên Lynda.com, cả cho Joomla và Drupal.

Những điều đã sẵn sàng sau chương này:

  • Bản nháp đầu tiên của trang web của bạn được xây dựng hoàn chỉnh, bất kể bạn quyết định sử dụng WordPress hay một số nền tảng khác.
  • Hãy chắc chắn rằng nó phù hợp với mục tiêu ban đầu của bạn, đối tượng mục tiêu và nó mang lại UX tốt.

CHƯƠNG 7: Thiết kế đáp ứng di động

Hơn 60% mọi người sử dụng điện thoại di động và máy tính bảng để duyệt web

Khả năng đáp ứng trên thiết bị di động hiện là một khía cạnh rất quan trọng của việc xây dựng trang web, có lẽ còn hơn thế nữa..

Đây là những gì toàn bộ vấn đề là về:

Về cơ bản, ngay bây giờ, có nhiều người sử dụng thiết bị di động để truy cập web hơn bao giờ hết. Trên thực tế, nó đã ước tính rằng hiện tại có nhiều người dùng internet di động hơn người dùng internet trên máy tính để bàn (75,1% so với 52,7%).

Nhưng có một vấn đề.

Không phải mọi thiết kế trang web sẽ được tối ưu hóa để được xem trên thiết bị di động ngay ngoài cổng.

Một số vấn đề phổ biến bao gồm:

  • phông chữ quá nhỏ,
  • bản thân bố cục không điều chỉnh một màn hình nhỏ hơn,
  • hoặc công nghệ được sử dụng để xây dựng trang web không khả dụng trên thiết bị di động.

Đây là nơi mà ý tưởng về khả năng đáp ứng di động phát huy tác dụng.

Một trang web phản hồi đáp ứng với môi trường mà nó đang xem. Nếu nó là một máy tính để bàn, trang web sẽ hiển thị theo một cách nhất định. Nếu nó là một điện thoại di động, nó kết xuất theo một cách khác.

Dưới đây, một lời giải thích tốt hơn: Thiết kế web đáp ứng là gì?

Vì vậy, điều cần làm ngay bây giờ sẽ là kiểm tra và đảm bảo rằng trang web của bạn hoạt động trên thiết bị di động. Sử dụng các thiết bị của riêng bạn để kiểm tra điều này, nhưng cũng hãy dùng thử Google trên thiết bị di động hoặc thử qua một công cụ như Responsive Design Tester.

Nếu có vấn đề, bạn cần sửa chúng.

Một số giải pháp:

  • Thiết kế Web đáp ứng – cách thực hiện
  • Cách làm cho trang web phản hồi nhanh trong khoảng 15 phút

CHƯƠNG 8: Mang tất cả lại với nhau

Bạn biết những điều cơ bản, bây giờ đến lượt bạn

Đợi đã, chúng tôi gần đó!

Đây là chương cuối cùng trong hành trình khá dài của chúng tôi.

Tại thời điểm này, bạn nên xây dựng trang web đầu tiên của mình với WordPress, HTML / CSS được xây dựng bằng tay, một số công cụ xây dựng trang web hoặc bất kỳ công cụ nào khác bạn đã chọn cho công việc.

Tóm lại, xin chúc mừng! Nhưng vẫn còn một vài điều đáng làm:

  • Kiểm tra kỹ những điều chúng ta đã thảo luận trong chương 1 và 2. Hãy chắc chắn rằng các mục tiêu thực sự có hiệu quả đối với người dùng cuối và trang web này không gây nhầm lẫn.
  • Xác thực cấu trúc mã của bạn thông qua dịch vụ xác thực đánh dấu W3C.
  • Kiểm tra xem có bất kỳ vấn đề bảo mật nào với trang web không. Sử dụng máy quét của Sucuri cho điều đó.
  • Nhận phản hồi từ cộng đồng. Kiểm tra những gì người khác nghĩ về công việc của bạn. Các diễn đàn tại Sitepoint có thể tốt cho điều đó.

Nếu đó là lần đầu tiên bạn đọc tài nguyên này thì chúng tôi thực sự khuyến khích bạn quay lại với nó một vài lần và coi nó như một tệp tham khảo cho giáo dục nâng cao của bạn.

Giống như chúng ta đã nói lúc đầu, hãy sử dụng TOC và điều hướng từ chương này sang chương khác và tài nguyên đến tài nguyên khi bạn thấy phù hợp.

Cuối cùng, chúng tôi rất tò mò về những gì mà bạn gặp phải khi thử thách xây dựng trang web, phát triển web hay thiết kế? Hãy chia sẻ trong các ý kiến ​​hoặc thông qua Twitter. Chúng tôi tất cả các tai!

Cảm ơn đã đọc, bạn thật tuyệt vời!

  • Tổng cộng16
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector