Quy trình thiết kế web trong 7 bước

Thiết kế web giống như chạy marathon. Bạn không ngừng hoàn thiện thiết kế của mình cho đến khi về đích và được chào đón bằng một khách hàng vui vẻ.

Sự thành công của thiết kế phụ thuộc vào cách bạn kết hợp các yếu tố – đường nét, phông chữ, màu sắc và kết cấu – để truyền đạt sứ mệnh của công ty. Sự chú ý đến các chi tiết là cực kỳ quan trọng trong mỗi phần của quy trình!

7 bước này thể hiện chính xác những gì bạn nên chú ý khi đua về đích.

1. Tóm tắt thiết kế

Để hiểu được kỳ vọng của khách hàng, trước tiên hãy xem các ví dụ ngắn gọn về trang web mà họ đưa ra – một bức tranh có thể trị giá 1000 từ.

Nhưng đừng quên lời nói của khách hàng vì chúng cũng quan trọng không kém. Tôi tìm kiếm các câu chính trong phần mô tả ngắn gọn về ý định của công ty:

• Chúng tôi muốn một thiết kế có cảm giác nghệ thuật nhưng vẫn là dễ sử dụng và sẽ không khó để thực hiện nó làm việc với các yếu tố khác trong tương lai của trang web.

Sau đó, viết từ khóa điều đó sẽ giúp tôi đi đúng hướng:

• cảm giác nghệ thuật
• dễ dàng và nhanh chóng để sử dụng
• sẽ không khó để chỉnh sửa
• các yếu tố thu hút sự chú ý của bạn
• Điều hướng “điển hình” cho phép bạn nhanh chóng truy cập nội dung
• hầu hết nội dung trên trang chủ

2. Yêu cầu kỹ thuật: chương trình, kích thước và khả năng sử dụng

Chương trình bạn sử dụng phụ thuộc vào kết quả trực quan mà bạn muốn đạt được. Ở trong Nhà hát Fire Exit, Tôi sẽ cho một cảm giác kết cấu thô với sự không hoàn hảo.

Đối với những loại dự án này, tôi luôn chọn Photoshop vì nó là tốt nhất để tạo các mẫu, sử dụng các phương pháp lớp phủ khác nhau và vẽ bằng cách sử dụng mặt nạ.

Sau khi tôi chọn chương trình của mình, tôi xem xét các yêu cầu kỹ thuật của khách hàng từ bản tóm tắt:

• Chúng tôi muốn tạo trang web của mình bằng lưới 1140px. Có nghĩa là thiết kế nên có chỗ để nén đến 960 (cho màn hình 1024 x 768).

Kiểm tra 1140 CSS Grid để biết một số tài nguyên lưới thiết kế web tuyệt vời!

Lưới giúp mang lại khả năng sử dụng và khả năng đọc là những ưu tiên hàng đầu trong các thiết kế web của bạn. Trong thiết kế này, tôi đã tạo ra khả năng sử dụng bằng cách:

• tạo cấu trúc với tiêu đề lớn
• sử dụng lưới giống như tờ báo được chia bởi các đường chấm

3. Cân bằng giữa cá nhân với kỳ vọng của khách hàng

Có thể khó để tạo ra một thiết kế làm hài lòng bạn cũng như khách hàng của bạn. Đó là (thường) một sai lầm khi thiết kế một trang web quá cá nhân. Nhưng có một quy tắc bạn nên tuân theo – nếu thiết kế của bạn làm hài lòng bản thân thì rất có thể người khác cũng sẽ thích nó.

Là một nhà thiết kế chuyên nghiệp, điều quan trọng là phải thích các yếu tố cụ thể mà chúng tôi chọn như kết cấu, ảnh, biểu tượng, phông chữ web và những thứ tương tự. Bí quyết là thực hiện các yếu tố này để các mục tiêu và kỳ vọng của khách hàng cũng được đáp ứng. Có nhiều lần bạn sẽ nghĩ ra một đồ họa tuyệt vời, nhưng nếu nó không hòa hợp với cảm giác tổng thể của trang web thì hãy cất nó đi cho một dự án khác.

Nếu bạn không thể tự mình loại bỏ hình ảnh, hãy thử với nó cho đến khi nó phù hợp. Ví dụ: tôi đã mua một bức ảnh về một que diêm đang cháy trên iStockphoto và tách các phần của hình ảnh khỏi nền sau đó thêm bóng và đèn chiếu.

May mắn cho tôi, khách hàng thích nó nhưng nếu không, tôi sẽ nói ý tưởng tuyệt vời của mình, “hẹn gặp lại sau”.

4. Tạo nhiều phiên bản thiết kế của bạn

Bạn không chỉ thiết kế cho chính mình và khách hàng mà còn cho một số người xem – hãy chú ý đến đối tượng mục tiêu và chức năng tổng thể của trang web. Ví dụ, Nhà hát Fire Exit là một tổ chức dành cho nhiều loại người khác nhau, do đó nó phải có một số loại trung lập về văn hóa. Chức năng cơ bản của nó là chia sẻ các buổi biểu diễn, bán vé và hiển thị áp phích.

Một cách tuyệt vời để đạt được thiết kế phù hợp là tạo nhiều phiên bản của nó. Tôi thường thiết kế các mô hình giả khác nhau từ vui nhộn đến tinh tế. Trong phiên bản đầu tiên cho Nhà hát Fire ExitTôi đã tìm kiếm chất lượng “độc nhất”, sau đó loại bỏ một số yếu tố để làm cho nó tinh tế hơn.

Phiên bản 1:

Phiên bản 2:

Phiên bản cuối cùng:

Sau một hoặc hai ngày với khái niệm đầu tiên của mình, tôi đã nhìn ra điểm yếu của nó và tìm cách cải thiện chúng. Tôi đã loại bỏ các chỗ ngồi cho phép tôi mở rộng trang theo chiều dọc. Tôi đã sử dụng lưới giống như tờ báo để cải thiện luồng thông tin và sử dụng một giải pháp công thái học hơn cho văn bản (đậm nhạt).

Như bạn có thể thấy, thiết kế cuối cùng đã giúp sứ mệnh của công ty trở nên rõ ràng hơn, nhằm tạo ra một khách hàng hài lòng. Một lần nữa, điều quan trọng là tôi không gắn mình với thiết kế đầu tiên nhưng tôi cũng không từ bỏ nó.

5. Tạo hiệu ứng và độ tương phản bất ngờ

Tìm cách tạo ra các hiệu ứng và độ tương phản bất ngờ khi bạn hoàn thiện thiết kế cuối cùng của mình. Hầu hết người xem ở trên các trang web kết hợp các thủ thuật đơn giản – các khái niệm hấp dẫn, hình ảnh gây ngạc nhiên và độ tương phản đẹp mắt.

Ở trong Nhà hát Fire Exit, Tôi kết hợp giấy với lửa vì nó tạo ra sự căng thẳng kịch tính – tương tự như một bộ phim kịch tính. Sự kết hợp này tạo ấn tượng rằng tờ giấy sẽ bắt lửa trong khi ngọn lửa dẫn mắt người xem đến tên công ty – EXIT. Hiệu ứng của bạn phải rõ ràng, biểu cảm và đáng ngạc nhiên. Trong trường hợp này, sự phù hợp lớn đã mang lại cho thiết kế một yếu tố đáng kinh ngạc.

Nhưng bạn không cần phải “đốt cháy thiết kế của mình” để tạo ra hiệu ứng bất ngờ – bạn có thể thêm các hiệu ứng nhỏ hơn. Trong trường hợp này, tôi đã thêm hiệu ứng ánh sáng vào đèn sân khấu.

Và ngược lại, tôi chơi với các kết cấu như trên con chim.

6. Ở mức vừa phải

Như câu nói, sau một cơn bão là một khoảng lặng. Bạn đã tạo ra các mô hình thiết kế vững chắc và bây giờ đã đến lúc làm dịu mọi thứ và kết hợp tất cả lại với nhau. Có khả năng khách hàng sẽ không xác định được mọi yếu tố mà bạn đã kết hợp. Những gì bạn nên làm? Đưa các yếu tố ra ngoài.

Ví dụ, đèn sân khấu và trận đấu đã đủ kịch tính nên tôi quyết định giữ các yếu tố thiết kế khác tinh tế hơn.

7. Quan tâm đến những nét cuối cùng

Như bạn có thể thấy, tôi quan tâm rất nhiều đến các chi tiết từ việc chọn phông chữ phù hợp để chọn nền hoàn hảo. Ngay khi tôi nhìn thấy vạch đích, không có lý do gì để chậm lại – điều quan trọng là phải tinh chỉnh và hoàn thiện thiết kế tổng thể.

Ví dụ, tôi cảm thấy cần phải làm mờ hậu cảnh vào bóng tối.

Tôi cũng cải thiện thanh ngang bằng cách làm dịu sắc thái xám của thành phố và tăng cường độ tương phản xung quanh văn bản “vé”.

Và khi mọi thứ dường như đã hoàn tất, tôi lùi lại 3 bước và nhìn vào thiết kế của mình với suy nghĩ “còn thiếu điều gì ở đây?” Và vâng, tôi thấy thiếu một thứ gì đó – trong trường hợp này là những chiếc đinh.

Và cuối cùng, công việc này đã mang lại chiến thắng cho tôi! Tôi đã thắng cuộc thi và được chứng kiến ​​cuộc thi được triển khai trên trang web của khách hàng. Nó cũng được giới thiệu trong Cuộc thi thiết kế “Are You The Platypus” và Top 9 ở vị trí 99.

Bạn cũng có thể có những phần thưởng này nếu bạn thực hành, thực hành, thực hành 7 bước chi tiết này.

Bạn có bất kỳ lời khuyên hoặc câu hỏi? Đăng câu hỏi của bạn.