Nếu bạn đang cố gắng xây dựng các trang web tự do cho khách hàng hoặc thậm chí chỉ đang cố gắng xây dựng danh mục đầu tư của mình, bạn có thể đã gặp phải câu hỏi hóc búa sau:
Làm cách nào để bạn xây dựng một trang web nếu bạn không có bất kỳ kỹ năng thiết kế web nào?
Dưới đây là một số tùy chọn:
- Bạn có thể thuê một nhà thiết kế web để tạo thiết kế cho bạn– nhưng các nhà thiết kế (giỏi) không hề rẻ.
- Bạn có thể tìm thấy một nhà thiết kế giá rẻ trên Fiverr hoặc Upwork– nhưng bạn biết điều đó có thể gặp rủi ro.
- Hoặc bạn có thể tải xuống mẫu hoặc chủ đề miễn phí hoặc cao cấp– nhưng đôi khi chúng không làm được mọi thứ bạn muốn.
Một lựa chọn khác dành cho bạn là học một số kỹ năng cơ bản về bố cục và thiết kế trang web cũng như xây dựng giao diện người dùng của riêng bạn.
Bây giờ, bạn sẽ không trở thành một nhà thiết kế tuyệt vời trong thời gian bạn đọc bài viết này. Và đối với các trang web phức tạp, bạn có thể phải làm việc với một nhà thiết kế chuyên nghiệp.
Nhưng tôi tin rằng bạn có thể học cách lập kế hoạch và thiết kế các trang web đơn giản phù hợp với hầu hết các doanh nghiệp nhỏ.
Phương pháp này bao gồm:
- Tìm hiểu kiến thức cơ bản về cách các trang web được kết hợp với nhau một cách trực quan,
- Và nghiên cứu các thiết kế web hiện có để lấy cảm hứng và ý tưởng cho chính mình.
Đó thực sự là chiến lược mà tôi đã sử dụng để xây dựng trang web Coder Coder! Đúng là một thiết kế khá đơn giản, không có gì quá cầu kỳ. Nhưng đôi khi đơn giản là tất cả những gì bạn cần.
Khi bạn biết những điều cơ bản về cách bố trí và thiết kế cho web, bạn sẽ có thể tạo các trang web tùy chỉnh mà bạn có thể sử dụng cho danh mục đầu tư và khách hàng tự do của mình.
Và, tất nhiên, mỗi trang web bạn xây dựng sẽ cho bạn trải nghiệm. Theo thời gian, bạn sẽ có thể tạo ra nhiều thiết kế phức tạp hơn khi tiếp tục thực hành nghề của mình.
Dưới đây là các bước chính của quá trình này:
- Quyết định thông tin cơ bản về trang web của bạn
- Lập kế hoạch bố cục trang web của bạn
- Kết hợp thiết kế với nhau
- Tạo ra sản phẩm cuối cùng
Mỗi bước sẽ được thúc đẩy bằng cách nghiên cứu– xem xét các trang web khác để xem chúng làm gì và rút ra những phần mà bạn muốn sử dụng lại cho trang web của mình.
Một lưu ý quan trọng:Tôi hoàn toàn không ủng hộ việc bạn ăn cắp CSS hoặc hình ảnh không phải của bạn. (Có điều, bạn sẽ không học được gì với công việc sao chép và dán.) Ý tưởng ở đây là có được những ý tưởng và khái niệm sáng tạo và sử dụng chúng để tạo ra thứ gì đó tương tự.
1. Quyết định thông tin cơ bản về trang web của bạn
Trước khi bạn bắt đầu chọn màu sắc hoặc phông chữ, hãy trả lời một số câu hỏi chung về trang web này:
1. Trang web sẽ quảng bá loại hình kinh doanh nào?
Địa điểm bán pizza, studio của nhiếp ảnh gia hay hiệu sách? Bất kỳ loại hình kinh doanh nào cũng có thể được hưởng lợi từ một trang web, vì vậy bạn có thể chọn bất kỳ thứ gì.
Vì mục đích của chúng tôi ở đây, chúng tôi sẽ chọn một quán cà phê hư cấu có tên là Central Coffee. Bởi vì mọi người đều thích cà phê, phải không?
2. Trang web sẽ có những trang nào?
Một số trang phổ biến sẽ là trang chủ, trang giới thiệu, trang liên hệ và các trang cụ thể cho ngành mà doanh nghiệp kinh doanh.
Cách tốt nhất để tìm ra các trang và các khía cạnh cấu trúc chung khác của trang web là thực hiện một số nghiên cứu trực tuyến nhanh chóng.
2. Nghiên cứu các trang web hiện có
Kiểm tra các trang web hiện có khác cho các loại hình kinh doanh tương tự. Hãy xem 3-4 trong số các trang web này và xem chúng có những trang nào.
Cố gắng để ý cách thiết kế trang web và ghi chú về:
- Trang web có những trang nào,
- Phong cách tổng thể là gì,
- Điều hướng và tìm kiếm mọi thứ dễ dàng như thế nào,
- Và bất kỳ điều gì khác thu hút sự quan tâm của bạn.
Một nơi tốt để tìm các trang web ví dụ là Theme Forest. Nó có rất nhiều mẫu trang web miễn phí và cao cấp và các chủ đề WordPress. Và nếu bạn gắn bó với những chủ đề phổ biến nhất, bạn biết rằng nhìn chung chúng sẽ là những ví dụ về thiết kế tốt.
Đây là một ví dụ về quán cà phê từ một chủ đề tôi đã tìm thấy.
Cái7
Trang:
Trang web một trang với các phần:Trang chủ, Giới thiệu, Vị trí, Phiếu mua hàng, Menu, Tin tức, Báo chí, Bài đăng trên blog
Phong cách:
Hiện đại và sạch sẽ, với những bức ảnh đẹp
Điều hướng:
Dễ dàng điều hướng
Và đây là một số trang web mà tôi tìm thấy từ tìm kiếm "quán cà phê ở Chicago":
Cà phê Wormhole
Trang: Trang chủ
, Blog, Vị trí / Địa chỉ liên hệ, Cơ hội việc làm
Phong cách: Loại
hiện đại; ảnh của quán mang hơi hướng hoài cổ
Điều hướng: Không rõ ràng ngay lập tức rằng đây là một quán cà phê. Có một chút khó khăn khi điều hướng trang web.
Phố cà phê
Trang: Trang web
một trang, các phần là:Trang chủ, Caffe (Giới thiệu), Thực đơn, Rang, Cỗ máy thời gian (nước trái cây), Mẫu liên hệ
Phong cách:
Đơn giản và hiện đại (Squarespace)
Điều hướng:
Khá dễ điều hướng; Tôi thích thanh menu dính ở trên cùng cuộn bạn xuống từng phần.
Cà phê Xây dựng
Trang: Trang web
một trang, các phần là:Trang chủ, Giới thiệu, Giờ, Địa điểm, Cửa hàng, Dịch vụ ăn uống, Sự kiện, Liên hệ
Phong cách:
Đơn giản, thiết kế là sự kết hợp của các bức ảnh có chiều rộng đầy đủ giữa các phần của nền trắng với văn bản.
Điều hướng:
Khá dễ điều hướng
Cà phê Sawada
Trang: Trang chủ
, Giới thiệu, Thức ăn &Đồ uống, Báo chí, Liên hệ &Giờ làm việc, Nhà hàng, Việc làm của chúng tôi
Phong cách: Thiết kế
chủ yếu là về nhiếp ảnh và văn bản gần như là một suy nghĩ sau
Điều hướng:
Điều hướng hơi khó khăn - hầu như không nhìn thấy menu bánh hamburger ở góc bên phải.
3. Viết ra ghi chú cho trang web của riêng bạn
Bây giờ, sau khi xem xét nhiều trang web cửa hàng cà phê, chúng tôi có một ý tưởng tốt hơn về những tính năng phổ biến. Và chúng tôi có một số ý tưởng về những gì chúng tôi cho là hiệu quả và không hiệu quả.
Dựa trên nghiên cứu của bạn, bây giờ bạn có thể bắt đầu viết ra các ghi chú cho trang web của riêng bạn.
Đối với Cà phê Trung tâm, tôi nghĩ chúng ta sẽ gắn bó với một trang web một trang đơn giản, với các phần sau:
- Tiêu đề
- Trang chủ
- Giới thiệu
- Thực đơn
- Vị trí / Liên hệ
- Chân trang
4. Lập kế hoạch bố cục trang web của bạn
Bây giờ chúng tôi đã tìm ra bộ xương của trang web, chúng tôi sẽ tạo ra từng trang hoặc phần với các yếu tố mà chúng tôi muốn đưa vào mỗi trang. Bố cục mà chúng tôi sẽ tạo ra còn được gọi là wireframe .
Trong wireframe, chúng tôi không thiết kế chính xác bất cứ thứ gì, nghĩa là chưa có phông chữ, màu sắc hoặc ảnh. Chúng tôi chỉ đang tìm ra loại nội dung mà chúng tôi muốn và gần như vị trí của nội dung đó trên trang. Ở điểm này, nó giống như một bản thiết kế hoặc một sơ đồ.
Tiêu đề
Tôi thích thanh điều hướng trên cùng trên trang demo Seven Coffee và trang web Caffe Street.
Tuy nhiên, trên cả hai trang đó, nó đều được căn giữa và tôi muốn căn chỉnh nó ở bên trái, với biểu trưng trước và các phần sau.
Đó là phiên bản dành cho máy tính để bàn. Đối với máy tính bảng và thiết bị di động, chúng tôi sẽ chỉ có biểu tượng và menu bánh hamburger trong tiêu đề theo mặc định.
Nhấp vào bánh hamburger sẽ mở ra một menu ngoài canvas sẽ trượt vào từ bên phải để hiển thị điều hướng phần.
Trang chủ
Vì là trang một trang nên “trang chủ” sẽ là thứ bạn thấy ban đầu trên màn hình khi tải trang web. Và tôi thích cách Seven Coffee có một dòng giới thiệu nhỏ dưới tên.
Tôi nghĩ rằng ở đây tôi sẽ có một hình ảnh trong nền (như Build Coffee) với văn bản ở trên nó. Nó sẽ giống nhau trên cả máy tính để bàn và thiết bị di động.
Giới thiệu
Tất cả các trang web đều có phần Giới thiệu ngắn, một số có ảnh. Tôi sẽ viết một đoạn văn về quán cà phê và kèm theo một vài bức ảnh về nội thất của quán để lôi kéo người dùng muốn đến.
Trình đơn
Mỗi trang web xử lý các menu khác nhau:
- Seven Coffee có một danh sách các món trong thực đơn với giá cả,
- Caffe Street chỉ có một danh sách các mặt hàng,
- và Build and Sawada liên kết với các tệp PDF của menu.
Cá nhân tôi ghét khi tôi đang duyệt một trang web trên điện thoại của mình và tôi phải tải xuống một tệp PDF. Vì vậy, tôi sẽ giữ một thực đơn đơn giản với đồ uống và đồ ăn, đồng thời kèm theo một vài bức ảnh.
Vị trí / Liên hệ
Tôi muốn đặt vị trí, giờ và thông tin liên hệ ở cuối trang web. Tôi đoán là người dùng sẽ bắt đầu ở đầu trang và cuộn xuống cuối trang.
Đặt lời kêu gọi hành động ở dưới cùng sẽ trả lời câu hỏi, "bây giờ thì sao?" Nó sẽ giúp khách truy cập thực hiện hành động, cụ thể là bằng cách chỉ đường đến quán cà phê và hy vọng sẽ ghé thăm!
Chân trang
Chân trang sẽ khá tối thiểu. Nó sẽ chỉ là một thanh nhỏ chứa thông tin bản quyền.
5. Xây dựng khung dây hoàn chỉnh của bạn
Dưới đây là khung dây hoàn chỉnh của máy tính để bàn và phiên bản di động của trang web. Tôi đã tạo những thứ này bằng một công cụ trực tuyến miễn phí có tên Mockflow. Họ cho phép bạn tạo một dự án miễn phí và họ có các gói trả phí nếu bạn muốn nhiều hơn một dự án.
Nó khá dễ sử dụng và tôi thích tùy chọn kiểu sơ sài vì nó thú vị 🙂
(Nhấp vào hình thu nhỏ để xem toàn bộ hình ảnh trong tab mới)
6. Quyết định các thông số kỹ thuật thiết kế cơ bản
Một lần nữa, chúng tôi sẽ không tạo ra các kiểu siêu chi tiết và lạ mắt. Tuy nhiên, chúng tôi cần phải tìm ra một số điều cơ bản… những thứ như:
Cách phối màu
Bảng màu chỉ đơn giản là các màu khác nhau mà bạn đang sử dụng trên trang web. Hãy coi nó giống như sơn và trang trí ngôi nhà của bạn. Thông thường, bạn sẽ muốn gắn bó với các tông màu trung tính như xám và trắng cho hầu hết các không gian. Và một hoặc hai màu nhấn sáng cho các yếu tố quan trọng mà bạn muốn bật ra, như liên kết và nút.
Nếu bạn cần một chút cảm hứng về màu sắc, Canva có một số bảng màu mẫu mà bạn có thể thử.
Đối với trang web của Central Coffee, tôi sẽ sử dụng Bộ sưu tập mùa thu từ liên kết Canva đó - đó là một bảng màu ấm áp dựa trên màu nâu.
Tôi đang cố gắng gợi lên cảm giác hoài cổ, ấm cúng gắn liền với các quán cà phê.
Phông chữ
Quay trở lại các trang web, hầu hết chúng đều sử dụng phông chữ sans-serif (nghĩa là các chữ cái không có “serif” hoặc các thanh cuối giống như văn bản máy đánh chữ). Tôi sẽ chọn một phông chữ đơn giản cho phần lớn văn bản của bạn, và sau đó bạn có thể ưa thích hơn một chút với phông chữ nặng hơn cho các tiêu đề và tiêu đề.
Google Fonts là một nơi tuyệt vời để tìm kiếm các phông chữ mà bạn có thể tải miễn phí trên trang web của mình. Chỉ đừng nhận quá nhiều, bởi vì mọi họ phông chữ, trọng lượng và kiểu sẽ bổ sung thêm tải cho trang web.
Hình ảnh / Nhiếp ảnh
Chọn phong cách hoặc tâm trạng chung phù hợp với loại hình kinh doanh của trang web. Đối với một quán cà phê, bạn thường muốn có những bức ảnh lôi cuốn với ánh sáng dịu nhẹ, cảm giác ấm cúng hoặc hoài cổ cho những bức ảnh nội thất, mọi người trò chuyện và thư giãn trong quán cà phê và những hình ảnh về đồ ăn và thức uống.
Đối với hình ảnh minh họa và biểu trưng, có một số công cụ thiết kế đồ họa trực tuyến miễn phí đi kèm với hình ảnh mà bạn có thể sử dụng trên trang web của mình. Một số ví dụ là:
- Canva
- Vectr
- Snappa
7. Xây dựng trang web!
Bây giờ chúng ta có wireframe để cho chúng ta biết tổng thể mọi thứ được sắp xếp như thế nào. Và chúng tôi có các tài liệu tham khảo thiết kế của mình, để giúp định hướng các kiểu giao diện người dùng.
Vì chúng tôi không có nhà thiết kế để tạo PSD chi tiết, nên chúng tôi sẽ tiếp tục và bắt đầu xây dựng trang web từ khung dây mà chúng tôi vừa vẽ.
Đây là cách tôi thường tiếp cận việc xây dựng giao diện người dùng của một trang web:
- Thiết lập các tệp trang web
- Tạo và cấu trúc các thư mục và tệp.
- Nhận và chạy nhiệm vụ chạy. (Tôi đang sử dụng Gulp cho dự án này.)
- Tạo một tệp HTML riêng cho từng mẫu.
Sau đó thực hiện các bước sau cho từng mẫu HTML:
- Tạo cấu trúc khung bằng các phần tử HTML cơ bản.
- Xây dựng từng phần tử của trang.
- Đối với mỗi phần tử, hãy thêm các kiểu CSS, trước tiên hãy đảm bảo rằng mỗi phần được trình bày chính xác.
- Kiểm tra giao diện của trang trong trình duyệt khi bạn làm việc, tiếp tục chỉnh sửa.
Đảm bảo rằng trang web của bạn đáp ứng
Trong khi bạn đang xây dựng một trang web, thông thường, bạn nên kiểm tra xem các kiểu của mình có trông liền mạch trên máy tính để bàn, máy tính bảng và thiết bị di động hay không.
Bạn có thể dễ dàng kiểm tra các kiểu máy tính để bàn trên máy tính của riêng mình, với các trình duyệt khác nhau. Đối với thiết bị di động, bạn có thể sử dụng các công cụ dành cho nhà phát triển của Chrome, công cụ này mô phỏng các trang web trên các thiết bị di động khác nhau.
Hãy nhớ rằng bất kỳ công cụ mô phỏng nào sẽ không chính xác 100% giống như những gì điện thoại hoặc máy tính bảng thực tế sẽ thấy. Vì vậy, khi kiểm tra kiểu của mình, cuối cùng bạn sẽ muốn kiểm tra kiểu đó trên điện thoại thực khi trang web có trên internet.
Dưới đây là một số trình giả lập thiết bị mà bạn có thể sử dụng để kiểm tra hiển thị trang web:
- Responsinator.com (miễn phí)
- Screenfly của Quirktools (miễn phí)
- Browserstack (trả phí) - Browserstack cho phép bạn kiểm tra máy ảo trên các thiết bị thực tế.
Thành phẩm!
Đây là ảnh chụp màn hình của trang web Cà phê Trung tâm đã hoàn thành:
Bạn có thể xem trang web thực cho chính mình trên trang Github.io của tôi.
Và đó là cách tôi thiết kế và xây dựng một trang web mà không cần phải thuê một nhà thiết kế.
Tôi hy vọng bạn thấy bài viết này hữu ích! Hãy cho tôi biết bất kỳ suy nghĩ nào của bạn trong phần bình luận bên dưới.
Bạn không muốn bỏ lỡ một bài đăng? Nếu bạn chưa đăng ký, hãy nhấp vào đây và bạn sẽ được thông báo khi có bài đăng mới trên blog.