Các bước trong thiết kế một trang web là gì?

Gọi tất cả các nhà thiết kế web :)

Tôi đang bắt đầu làm một trang web cho một doanh nghiệp nhỏ ở quê nhà và đó sẽ là dự án thích hợp đầu tiên của tôi. Tôi đã thực hiện các trang web trong quá khứ, mà tôi đã làm cho giải trí. Tôi thông thạo HTML và CSS. Tôi đã có các yêu cầu của khách hàng và những gì anh ta muốn trên trang web, v.v. Tôi đang bế tắc về những bước tôi nên làm theo sau khi hoàn thành các yêu cầu. Tôi đã tìm kiếm trên web và không thể tìm thấy bất cứ điều gì liên quan đến câu hỏi của tôi vì thông tin đã lỗi thời.

Câu hỏi của tôi là:

Quy trình thiết kế web trong năm 2014 là gì? (Bởi vì mọi thứ thay đổi quá nhanh) Tôi có tạo các khung lưới của trang web và sau đó thiết kế chúng bằng photoshop và sau đó mã hóa các thiết kế không?

Tôi chỉ muốn biết các quy trình "thiết kế" hoạt động như thế nào, như những bước tôi cần thực hiện để tạo trang web.

Cảm ơn trước.

Khám phá và Phạm vi

Ngồi xuống với khách hàng để xác định, mục tiêu, mục đích và nhu cầu. Bạn nên soạn thảo một trích dẫn của trang web có mục đích và cũng thảo luận về thời gian quay vòng. Hãy chắc chắn đã viết bằng bất cứ điều gì cần thiết mà bạn không thể cung cấp. Bạn cần tìm hiểu làm thế nào trang web sẽ được cấu trúc. Chẳng hạn như chỉ đáp ứng, máy tính bảng và điện thoại, chỉ máy tính để bàn, máy tính để bàn và máy tính bảng. Bạn cần tìm hiểu xem thiết kế có phải là mục tiêu thiết kế nhiều pha hay không, chẳng hạn như máy khách sẽ muốn phát hành phiên bản dành cho máy tính để bàn và muốn có một ứng dụng di động đầy đủ sau này.

Ánh xạ nội dung

Hy vọng rằng bạn đã được cung cấp tất cả các nội dung mong muốn cho trang web. Bạn nên vạch ra trang web và chức năng của nó. Quyết định khả năng mở rộng cho các sửa đổi trong tương lai, quyết định cách mã có thể được cấu trúc nếu nó dành cho CMS hoặc ứng dụng.

Thí dụ:

Giả lập

Sau khi bạn hoàn thành "cây" hoặc "bản đồ" của mình với sự chấp thuận của khách hàng, tôi sẽ làm việc trên một công cụ phác thảo bằng tay hoặc mô phỏng. Có một số lượng lớn câu hỏi về chủ đề này nếu bạn thực hiện tìm kiếm ở trên cùng bên phải

Thí dụ:

Ngói phong cách

Thiết kế trong Photoshop cho thiết kế web đánh bại mục đích của thời đại ngày nay. Tôi không biết nhiều người vẫn sử dụng Photoshop vì lượng thời gian bạn cần để tạo một nút ưa thích mà bạn có thể đã sử dụng cùng thời gian đó và được mã hóa trong trình duyệt. Nếu tôi phải sử dụng một ứng dụng theo yêu cầu đặc biệt, tôi sẽ triển khai nó trong Illustrator hoặc InDesign. Tôi sẽ khuyên bạn nên di chuyển để thiết kế một kiểu gạch như:

Với mục đích của gạch, bạn sẽ không trao cho khách hàng một thiết kế và đặt mình vào một góc của "điều này không giống với thiết kế mà bạn đã đưa cho tôi". Ngoài ra, nếu bạn đang lập kế hoạch cho một trang web, không có lý do gì để dành thời gian cho Photoshop để đáp ứng vì bạn sẽ dành nhiều thời gian để thiết kế cho một số thiết bị nhất định, v.v. Nếu bạn phải thiết kế trang web đầy đủ, tôi sẽ xem xét Illustrator, như đã nêu, về SVG và khả năng xuất các yếu tố cho trang web của bạn so với Photoshop. Ở một mức độ nào đó, bạn thậm chí có thể sử dụng InDesign để định dạng nội dung nhưng tôi sẽ chỉ sử dụng Photoshop để xử lý hình ảnh và nếu tôi sẽ làm điều đó thì có lẽ tôi sẽ sử dụng ImageMagick. Tôi đưa Style Style một cấp độ xa hơn các cấp độ khác và mã hóa nó thành một trang duy nhất để tôi loại bỏ một nhiệm vụ sơ bộ của chủ nhân.css tập tin.

Dây khung

Tôi thích triển khai thiết kế trong trình duyệt nếu bạn không chú ý. Ngày nay, tôi có thể sử dụng Illustrator cho bản phác thảo trang web hoặc mô phỏng trang web nhưng tôi thường triển khai một .csstệp mẫu mặc định có không quá 6 màu theo thang màu xám và tôi mã hóa mọi thứ cho cấu trúc của trang vì hầu hết mọi người không thể có được một sự hiểu biết thiết kế và muốn một cái gì đó để chơi với. Đôi khi tôi tiếp tục và làm điều này trong PHP vì việc triển khai cho CMS dễ dàng hơn. Sau đó, tôi sẽ phát triển một tên miền phụ đơn giản với phông chữ CUNG CẤP của khách hàng theo cách thức đen trắng để toàn bộ chức năng của trang web có mặt và họ có thể đi qua nó. Vì tôi đã không dành thời gian để thêm tất cả nội dung hoặc màu sắc (vì tôi sử dụng tham chiếu văn bản giả: "Thay thế cho Lorem Ipsum (văn bản giả) cho các trang web") Tôi có thể dễ dàng sửa đổi bất kỳ thay đổi nào hiện diện nếu chúng không thích một yếu tố nhất định dựa trên thiết bị.

Tô màu và nội dung

Khi khách hàng đã đăng xuất vào cấu trúc của trang web và chức năng, tôi sẽ viết phần còn lại của CSS và thêm các hình ảnh động được yêu cầu hoặc các chi tiết cụ thể về JavaScript. Vì tôi có kiểu xếp được phê duyệt và nếu tôi phát triển nó một cách chính xác, tôi có thể chỉ cần sao chép CSS và được đặt.

Gỡ lỗi, gỡ lỗi, gỡ lỗi

Bước cuối cùng trước khi đăng xuất máy khách là gỡ lỗi và đảm bảo mã của tôi là vững chắc không có lỗi. Nếu mọi thứ đều chính xác tôi nên có một bản phát hành trơn tru. Bước này cũng bao gồm phục vụ thử nghiệm và thử tải, nếu đó là những gì bạn đã định giá và cung cấp. Cá nhân, tôi là một người tin tưởng vững chắc rằng bất kỳ nhà thiết kế nào cũng nên biết về những gì họ đang phát triển giống như bạn, hy vọng, sẽ làm khi nói đến một thiết kế in ấn. Nếu khách hàng không đủ khả năng cung cấp một nhà cung cấp dịch vụ lưu trữ thực sự, điều đó có thể hạn chế hiệu suất của trang web và tất cả họ sẽ nói đó là lỗi của bạn và bạn đã làm gì đó sai.

Đào tạo

Tôi thường đấu thầu trong khóa đào tạo ngắn gọn / trích dẫn của tôi trên các trang web CMS. Một số người dùng không biết họ đang làm gì nên tôi sẽ trả giá cho một buổi chiều với một giờ đệm cho các câu hỏi để đảm bảo vượt qua mọi thứ hoặc đảm bảo rằng họ đang sử dụng thiết kế của tôi với khả năng tối đa.

Một số chủ đề khác có thể giúp ích vì bạn đang hỏi một câu hỏi cơ bản:

• Sự khác biệt giữa khung dây và mockup là gì?
• Làm thế nào để trình bày mockup thiết kế web cho khách hàng?
• Một số cách thực hành tốt của Mocking-up trên thiết kế web là gì?

Tôi cũng là một nhà thiết kế web mới bắt đầu trong lĩnh vực này. Tôi đã thực hiện một vài dự án bây giờ, mặc dù. Đối với tôi, quy trình làm việc của tôi diễn ra như sau:

1. Cuộc họp Thiết kế & Phát triển Ban đầu
   Đây là khi tôi thu thập tất cả các thông tin liên quan, bao gồm ngày hoàn thành dự kiến, lập danh sách các mục cần thiết từ khách hàng của mình, v.v.
   
2. PhotoShop Mockups
   Tại thời điểm này, tôi tìm thấy một hoặc hai hoặc ba thiết kế phù hợp với khách hàng của mình và tạo ra các mockup trong Photoshop bằng cách sử dụng thương hiệu, màu sắc, kiểu dáng của họ, v.v. , sau đó để khách hàng quyết định thiết kế nào họ thích nhất.
   LƯU Ý: Nếu bạn đang sử dụng WordPress để xây dựng, bạn có thể truy cập http://themeforest.comvà kiểm tra hàng tấn chủ đề. Từ đó, bạn có thể chụp ảnh màn hình và thực hiện các mô hình của mình, sau đó bạn cũng có thể cung cấp bản demo trực tiếp (rõ ràng không có tùy chỉnh của khách hàng). Nếu khách hàng của bạn thích một trong những mockup này, thì bạn sẽ mua chủ đề và có thể thay đổi theo cách bạn cần. Đây là những gì tôi có xu hướng làm. Tôi không bao giờ sử dụng một chủ đề (hoặc bất cứ điều gì khác cho vấn đề đó) mà không cung cấp tín dụng / thanh toán / vv thích hợp. để người sáng tạo ban đầu. :)
   
3. Phát triển
   Sau đó tôi cuối cùng đã bắt đầu thực sự phát triển trang web trong môi trường phát triển (KHÔNG phải trang web trực tiếp của khách hàng, mà là một tên miền phụ nếu có thể - IE dev.clienturl.com) Tôi gửi thông tin cập nhật cho khách hàng của mình mỗi khi tôi cảm thấy như một trang đang đóng để hoàn thành, theo cách đó nếu có vấn đề, chúng ta có thể khắc phục chúng ngay lập tức.
4. LUÔN LUÔN SAU
   Ngay cả sau khi trang web của khách hàng của bạn hoạt động và họ có vẻ hài lòng và không yêu cầu thay đổi gì thêm, hãy chắc chắn theo dõi. Chỉ cần đảm bảo rằng tất cả mọi thứ đang hoạt động như nó cần, theo mong đợi của họ. Tôi cũng khuyên bạn nên viết một bản khảo sát nhỏ cho mỗi khách hàng để hoàn thành một khi trang web đã hoạt động được khoảng một tuần. Bạn có thể sử dụng ý kiến ​​từ đây như lời chứng thực trên trang web của bạn.

Nếu bạn cần bất kỳ sự giúp đỡ với bất cứ điều gì, liên hệ với tôi thông qua trang web của tôi. Tôi có rất nhiều tài nguyên tôi có thể chia sẻ với bạn cho những thứ như hợp đồng, khảo sát hậu kỳ, bảng câu hỏi ban đầu, v.v ... http://anchorsawaydesigns.com/

thử và lấy càng nhiều thông tin càng tốt ngay từ đầu, sau đó làm theo cách tiếp cận theo giai đoạn tương tự như bên dưới. Hãy thử và thông báo cho khách hàng của bạn càng nhiều càng tốt, vì bạn sẽ không muốn phát triển một thứ gì đó một cách cô lập để sau này phát hiện ra rằng nó không đáp ứng mong đợi của họ. Nếu bạn đầu tư vào một công cụ tạo khung dây tốt (tôi sử dụng balsamiq) thì một nửa công việc được thực hiện cho bạn.

1. Yêu cầu thu thập
2. Nối dây
3. Thiết kế mockup
4. Thiết kế hoàn thiện
5. Phát triển
6. Lưu trữ

Chúc may mắn.

Hi anh bạn tốt đẹp của bạn đang bắt đầu dự án mới.

Các bước cho nhu cầu của bạn:

1. đầu tiên bạn quyết định công nghệ nào bạn muốn sử dụng cho dự án của bạn, ý tôi là cuộn trang đơn, nhiều trang, v.v.

2. Sau đó, chuẩn bị phác thảo cho bố trí và quy trình làm việc của bạn.

3. Bây giờ bắt đầu thiết kế bố cục của bạn trong công cụ bạn thích tôi làm với photoshop nhưng bạn có thể sử dụng ý thích của mình.

4. Sau đó, thật tốt khi bạn hiển thị bố cục của bạn cho khách hàng cho bất kỳ thay đổi nào. màu sắc, phông chữ, vv để bạn không bị đau đầu tại thời điểm html.

5. Bây giờ, sau khi xác nhận của khách hàng. Đã đến lúc bắt đầu mã hóa với Html và Css.

6. Sau đó, đã đến lúc chuyển nó cho Nhà phát triển để mã hóa cơ sở Ngôn ngữ khác. PHP, .Net, v.v.

Thưởng thức............

Trong ngành Web, để hợp lý hóa quy trình phát triển của bạn, Thiết kế được thực hiện và trước khi thiết kế cuối cùng được trình bày để tiếp tục phát triển hoặc được thử nghiệm, một số bước trung gian khác có liên quan:

Bước 1: Lấy cảm hứng:

Nếu bạn liên tục quan sát những gì các nhà thiết kế hoặc trang web khác đang làm cho khung lưới của họ, bạn sẽ dần dần có được một hình ảnh trong tâm trí về cách một khung dây giúp tổ chức thông tin cho màn hình.

và để làm được điều đó, bạn có thể sử dụng công cụ Wireframing "Wirify", chỉ cần thêm liên kết lớn vào dấu trang của bạn và truy cập vào bất kỳ trang web mong muốn nào, nhấp vào dấu trang, bạn sẽ thấy trang web chuyển thành khung dây.

Bước 2: Thiết kế quy trình của bạn:

Các nhà thiết kế khác nhau tiếp cận cấu trúc khung và bản dịch của nó sang hình ảnh hoặc mã theo những cách khác nhau,

Ở đây không chỉ là nhà thiết kế để chọn con đường cần theo dõi, đôi khi khách hàng thích trực tiếp thực hiện các mô hình, và một số thích hệ thống hơn,

Phác thảo => Wireframe => Mockup => Mã

Bước 3: Phác thảo:

Bây giờ khi bạn được truyền cảm hứng có một số ý tưởng sơ bộ và lập kế hoạch tiếp cận, bạn nên bắt đầu với việc phác thảo, không có vấn đề gì khi bạn kiểm soát chuột / bút stylus hay bất cứ thứ gì bạn sử dụng, họ không thể đánh bại giấy, bút chì sự đơn giản.

Phác thảo bằng tay trên giấy luôn là điểm khởi đầu tốt cho bất kỳ nhà thiết kế nào. Nó cung cấp một cách nhanh chóng và dễ dàng để tập trung và tổ chức. Nếu bạn rất chính xác với việc phác thảo, bạn thậm chí có thể sử dụng nó làm khung dây cuối cùng của mình.

Bước 4: Cấu trúc khung dây:

Tạo khung dây là một trong những bước đầu tiên bạn nên thực hiện trước khi thiết kế.

Một khung dây giúp bạn tổ chức và đơn giản hóa các yếu tố và nội dung trong một trang web và là một công cụ thiết yếu trong quá trình phát triển.

Một khung dây về cơ bản là một đại diện trực quan của bố cục nội dung trong một thiết kế .

Giống như nền tảng của một tòa nhà, nó phải mạnh về cơ bản trước khi bạn quyết định có nên cho nó một lớp sơn đắt tiền hay không.

Chọn công cụ của bạn

Dưới đây là danh sách 10 công cụ tạo khung miễn phí dành cho nhà thiết kế của Mashable

Đặt lưới

Lưới rất cần thiết để đạt được một thiết kế đối xứng và song song.

Bất cứ khi nào bạn nhìn vào một trang web được thiết kế tốt, bạn sẽ thấy rằng nội dung của nó bắt đầu từ một điểm cụ thể trong cơ thể và kết thúc tại một điểm, chúng được quản lý bằng cách sử dụng lưới.

Xác định bố cục với hộp

Xác định phân cấp thông tin với kiểu chữ

Những điều cần tránh trong khi Wireframing:

• Quá nhiều điều xảy ra trên trang.
• Nhấn mạnh vào màu sắc và thiết kế
• Quá nhiều chi tiết

Tạo khung dây cho khách hàng, nhà phát triển và nhà thiết kế có cơ hội để có cái nhìn quan trọng về cấu trúc của trang web và cho phép họ thực hiện các sửa đổi dễ dàng ngay từ đầu trong quy trình.

Wireframing mang lại những lợi ích chính sau:

Bước 5: Mockups / Visual:

Bây giờ Wireframe cuối cùng có thể được chuyển đổi thành Mockup hoặc Visual cuối cùng:

Một số công cụ phổ biến cho Mockuos là Adobe photoshop, Corel Draw và rất mới nhưng đã có populare Sketch, v.v.

Phân cấp thông tin

Bạn có thể cần phải xem xét những gì cần làm nổi bật và những gì là thông tin bên lề, và bảng màu, định vị lại và kiểu chữ được quyết định như vậy.

Kiểu chữ

Chọn kiểu chữ trực quan hấp dẫn và dễ đọc cho trang web với sự kết hợp đúng của các lựa chọn thay thế. Cỡ chữ, trọng lượng và màu sắc đóng một vai trò quan trọng trong khả năng đọc.

Phối màu

Bảng màu đại diện cho Nhận diện thương hiệu và màu sắc tâm lý như Đỏ cho nguy hiểm, xanh lục cho Thành công, v.v.

Bước 6: Nguyên mẫu :

Một nguyên mẫu là một đầu mẫu, người mẫu, hoặc phát hành một sản phẩm được xây dựng để thử nghiệm một khái niệm hoặc quá trình hoặc hoạt động như một điều cần được nhân rộng hoặc rút ra từ.

Wireframes xử lý cấu trúc, mockup xử lý hình ảnh và nguyên mẫu xử lý khả năng sử dụng (trong các sản phẩm web / ứng dụng).

Một sản phẩm nguyên mẫu được tạo ra và sau đó điều này đã được thử nghiệm và POC (Prof of concept) đã được thực hiện, Bây giờ chúng ta có thể hướng đến sản phẩm Real (rõ ràng nếu không cần thay đổi)

Liên kết đến bài viết gốc với hình ảnh và các liên kết khác