QUY TRÌNH THIẾT kế WEB

Quy trình phát triển website chuẩn được mô phỏng theo mô hình thác nuớc, các giai đọan chủ chốt được chia thành các công đọan nhỏ hơn, cho phép thực hiện việc thiết kế web song song một lúc nhiều công đọan. Quy trình chuẩn có thể được chúng tôi thêm, bớt hoặc thay đổi để phù hợp với nhu cầu của dự án.

QUY TRÌNH THIẾT KẾ WEB – PART : CLIENT SURVEY Như nói viết trước, thiết kế web phải tuân thủ theo quy trình Nếu bạn nóng lòng bắt tay vào thiết kế máy tính vẽ giấy liền không mang lại hiệu cao Do đó, bạn tạm thời gác việc máy tính lại, gặp trực tiếp khách hàng để trao đổi xác định hướng rõ ràng cho website mà bạn muốn thực Với viết này, giới thiệu đến bạn bước quy trình thiết kế web, khảo sát khách hàng, bạn làm website cá nhân cho thân mình, bạn nên tự đặt cho câu hỏi khảo sát, việc quan trọng cần làm để xác định mục đích hướng phát triển cho website Đầu tiên, bạn phải hiểu rõ khách hàng muốn thực website này? Bạn cần phải đặt câu hỏi cụ thể để khách hàng trả lời Việc đặt câu hỏi cho khách hàng bước quan trọng để tìm hiểu cách tổng quát mục tiêu hướng phát triển mà họ muốn cho website Đến có lẽ bạn thắc mắc, phải đặt câu hỏi nào, cần xác định rõ nội dung cụ thể gì? Bạn yên tâm công việc bạn trở nên tốt bạn đặt câu hỏi tập trung ý sau : MESSAGE – THÔNG ĐIỆP MÀ KHÁCH HÀNG MUỐN ĐƯA LÊN WEBSITE Bạn muốn thông tin ưu tiên truyền tới người xem gì? Khách hàng bạn muốn hướng tới thuộc giới nào? độ tuổi bao nhiêu? Làm để công ty bạn trở nên khác biệt với đối thủ cạnh tranh? Bạn cho biết lý mà khách hàng chọn công ty này? điểm mạnh công ty gì? PERCEPTION – NGƯỜI SỬ DỤNG NHẬN THỨC NHƯ THẾ NÀO VỀ WEB NÀY Bạn muốn người sử dụng nhận xét vào website này? Hãy dùng tính từ để mô tả Vd : có uy tín, thân thiện, dí dỏm, trẻ trung, động, trang trọng, v.v…) Những bạn cho thách thức lớn việc đưa hình ảnh công ty bạn đến với khách hàng? Bạn liệt kê website mà bạn thích, cho biết bạn thích điều qua website (nút liên kết, màu sắc, bố cục, hình ảnh, v.v…) Bạn cần liệt kê sẵn để đưa khách hàng chọn Ngược lại, bạn liệt kê website mà bạn không thích, nói rõ không thích Liệt kê website công ty ngành nghề, đối thủ cạnh tranh, cho biết điều bạn thích không thích website ACTION – NGƯỜI SỬ DỤNG SẼ THAO TÁC NHỮNG GÌ TRÊN WEBSITE CỦA BẠN? Thao tác người sử dụng phải làm vào home page? (Vd : chọn ngôn ngữ, đăng nhập, download, v.v ) Bạn muốn người sử dụng phải thực thao tác trước rời khỏi website bạn? Thao tác mà bạn muốn người sử dụng thực trang nào? (Vd : search, add to cart, buy, v.v…) CONTENT – NỘI DUNG CỦA WEBSITE NHƯ THẾ NÀO? Hãy cho biết cấu trúc thông tin nội dung xếp sao? Hãy mô tả chi tiết đề mục, tiêu đề, nội dung chính, phụ… Nội dung, thông tin bạn muốn xuất xuyên suốt trang? Những thông tin, nội dung website cung cấp từ ai? Nếu sử dụng từ nguồn khác bên ngoài, người có trách nhiệm phê duyệt? nội dung có kiếm chứng rõ ràng hay không? TECHNOLOGY – SỬ DỤNG NHỮNG KỸ THUẬT NÀO CHO WEBSITE CỦA BẠN? Trình duyệt mà bạn muốn sử dụng? Bạn có muốn sử dụng kỹ thuật Flash, Javascript, DHTML … không? Nếu có, giúp ích cho bạn? Bạn có sử dụng database không? Nếu có mô tả chi tiết Bạn có cần tính bảo mật? Hãy cho biết cấp độ bảo mật MARKETING – CÁC CHIẾN LƯỢC QUẢNG CÁO VÀ CẬP NHẬT THÔNG TIN CHO WEB Kế hoạch marketing cho khởi đầu bạn gì? Làm trang web giúp đáp ứng mục tiêu bạn? Bạn có kế hoạch hay chiến lược quảng cáo cho website chưa? Bạn có muốn thường xuyên cập nhật thông tin cho website không? Ai người chịu trách nhiệm cập nhật thông tin đó? Điều bạn cảm thấy vấn đề quan trọng cho việc kinh doanh bạn? (Vd: thay đổi hình ảnh, tìm kiếm khách hàng, thúc đẩy hoạt động công ty, v.v…) ADMINISTRATIVE – QUẢN TRỊ VÀ BẢO TRÌ WEBSITE Bạn nghĩ tên miền (Domain Name) chưa? Nếu có, đăng ký chưa? Hãy chuẩn bị sẵn tên miền liên quan đến công ty Ai người chịu trách nhiệm có quyền cao trang web này? Hãy cho biết họ tên, email, số điện thoại Ngày trang web thức hoạt động ngày nào? Có kế hoạch để chuẩn bị cho ngày đó? (Vd : chiến lược PR, hội chợ thương mại, v.v…) Ngân sách dành cho việc thực website này? Bạn muốn toán giai đoạn hay không? Ngoài điều trên, bạn tham khảo cảm nhận màu sắc khách hàng, để từ chọn màu sắc phù hợp cho website QUY TRÌNH THIẾT KẾ WEB – PART : SITEMAP Hôm giới thiệu đến bạn phần quy trình thiết kế web cách lập Sitemap Với viết này, hiểu thêm sitemap quy luật đặt tên cho trang trang web I SITEMAP LÀ GÌ? – Sitemap sơ đồ cấu trúc website, thể hình ảnh phác thảo theo sơ đồ nhánh (Hierarchical sitemap) – Sitemap cho ta nhìn tổng quát thông tin : + Sự liên kết trang : động (dynamic, có code, database) – tĩnh (static) + Tên tửng trang web, hệ thống số tham chiếu, v.v… – Sitemap nên thực cách rõ ràng để tìm thông tin cách nhanh chóng II PHÁC THẢO SITEMAP Khi phác thảo sitemap, trang cần phải có thông tin sau : • Tên trang • Tên tập tin : *.html • Số tham chiếu Và chúng thể dạng sơ đồ sau : III Ý NGHĨA CÁC TRANG Splash page : có không, thường để biểu diễn vào trang web (intro) Homepage : bắt buộc phải có, trang chủ trang website, chứa thông tin ưu tiên nhất, liên kết để đến trang khác Các trang khác : trang chứa thông tin, hình ảnh đề mục IV QUY LUẬT ĐẶT TÊN Tên trang : – Đặt tự cho vừa ý với nội dung trang – Tên thể sitemap – Tên trang nên nút liên kết Tên tập tin : Vì tên file lưu máy vi tính nên bắt buộc phải tuân theo quy luật sau : – Tập tin phải có tên index.html – Tên file khoảng trắng, muốn tách phải có ký tự gạch “_” – Không nên viết chữ hoa – Các tập tin phải đặt tên cho gợi ý để dễ tìm, nên đặt theo quy luật nối tiếp (portfolio.html -> port_web.html, port_logo.html) Số tham chiếu Thông thường, trang Home quy định 1.0 – Nếu có trang Splash 0.0 – Các trang cấp : 1.0 ; 2.0 ; 3.0 ; 4.0 ; … – Các trang cấp : 1.1 ; 2.1 ; 3.1 ; 4.1 ; … – Các trang cấp : 1.1.1 ; 1.1.2 ; 1.1.3 ; … V TIPS – Tùy theo lượng thông tin mà nên thực website rộng (wide site) hay sâu (deep site) – Trước thực sitemap, thông tin nằm chỗ nào, đặt tên cho nút liên kết thật gợi ý dễ hiểu, gắn với nội dung chủ đề đó, thông thường nên tên trang QUY TRÌNH THIẾT KẾ WEB – PART : CONTENT OVERVIEW Ở viết trước, bạn có tất nội dung survey sitemap trang web muốn thực Đến lúc có lẽ bạn hình dung trang web Nếu bạn, bước bạn làm gì? Đối với website có giao diện đẹp, màu sắc bắt mắt, nội dung thú vị, cách sử dụng dễ dàng gây ấn tượng với người truy cập, từ họ trở lại thăm web bạn nhiều lần Vì vậy, bước bước giúp bạn hình thành nên diện mạo trang web bạn, kết hợp yếu tố hình thành nên trang web lại với cách chặt chẽ hiệu Nếu bạn nghĩ lúc bạn bắt đầu với Photoshop, Illustrator hay Fireworks? Có lẽ không, hay không bạn muốn có nhiều ý tưởng cho trang web Ngay lúc đây, tờ giấy trắng bút chì thứ cần thiết để bạn tập trung vào thiết kế mà không bận tâm đến công nghệ đằng sau Thực tế, bạn phác thảo nhiều ý tưởng giấy 10 phút bạn layout máy Dựa thông tin survey, thông tin sitemap, bạn cần phác thảo khu vực cần thiết cho web bạn Vì thế, mục đích phần Content Overview phác thảo mô tả chi tiết trang web Khi chưa sử dụng hình ảnh text thật mà thực đường nét phác thảo (wireframe) để tượng trưng cho vị trí yếu tố Nơi bạn đặt logo, navigation, main content, sidebar footer? Làm để chúng có mối quan hệ chặt chẽ với nhau? QUY TRÌNH THIẾT KẾ WEB – PART : LAYOUT VỚI GRID SYSTEM Với viết trước, có tổng quan cấu trúc website Bài viết này, giới thiệu đến bạn số hệ thống lưới thường sử dụng cho web design Lưới có nhiều kiểu, tùy mục đích sử dụng nhu cầu người mà dùng kiểu lưới khác Tuy nhiên, với viết này, giới thiệu kiểu lưới nhiều người sử dụng cho web, lưới dành cho layout in ấn giới thiệu viết khác Các bạn có thường xuyên sử dụng lưới không? Các bạn có biết phải sử dụng lưới thiết kế không? Hãy thử nhìn layout : Đối với trang trang web bạn, cần có meta description cho trang từ khóa (keyword) Điều giúp cho công cụ tìm kiếm google, bing, yahoo, v.v dễ dàng định vị trang web bạn hiển thị với mà người dùng sử dụng để tìm kiếm Nó giúp bạn có thêm lượng truy cập đáng kể FAV ICON Đa số người thiết kế web quên bỏ qua Fav Icon Tuy nhiên, thật cần thiết, fav icon coi logo, thương hiệu cho trang web bạn Nó không hiển thị trang web, mà nằm phía menu trình duyệt Đối với người có thói quen mở nhiều trang web lúc, trình duyệt họ xuất nhiều tab Đối với lượng tab lớn vậy, họ khó để đọc tên trang web, tab trang web bạn Lúc fav icon giúp họ dễ dàng nhận trang web bạn rừng tab SITEMAP Thêm sitemap vào thư mục gốc trang web bạn giúp bạn có mục công cụ tìm kiếm Điều giúp công cụ tìm kiếm dễ dàng hệ thống phần website, giúp bạn có lượng truy cập đáng kể VALID HTML Valid HTML đơn giản HTML kiểm tra tính hợp lệ W3C Trang web có Valid HTML làm cho dễ dàng hiểu HTML code Valid HTML thể tính chuyên nghiệp cho trang web để tối ưu hóa cho máy tìm kiếm (SEO) CÁCH SỬ DỤNG NỀN TRẮNG TRONG WEB DESIGN Ngày nay, hầu hết người sử dụng màu trắng làm cho website, thay cho kiểu website tối hay sử dụng pattern Mọi người nghĩ sử dụng màu trắng layout cách gần an toàn để làm cho thiết kế trở nên thoáng hơn, trông hơn, thực tế luôn Khi làm việc với thiết kế có màu trắng, cần phải làm việc chi tiết cẩn thận với yếu tố: chữ hình ảnh Nền màu trắng cần phải hài hòa với thiết kế tổng thể kết thành color scheme hợp lý Vì vậy, designer làm với thiết kế có trắng họ? Chúng ta xem xét vài điểm TẠI SAO LẠI CHỌN NỀN TRẮNG? Một lý để màu trắng lựa chọn phổ biến thiết lập cách mặc định code HTML/CSS – phong cách thiết kế với trắng hồi sinh tháng trở lại Màu trắng màu cho trang blogs hay ecommerce chủ yếu, với nhìn thấy áp dụng cho tất thể loại khác nhau, ngày sáng tạo Bạn thắc mắc không hiểu lý điều xảy ra, thực số lượng trang web sử dụng màu trắng làm thiết kế theo kiểu tone màu sáng ngày lan rộng, vài năm trước xu hướng web thường màu đen màu đậm Ta nhận thấy mối tương quan màu trắng xu hướng thiết kế web : • Responsive design : phong cách responsive design hệ thống lưới dùng rộng rãi cho loạt thiết bị giúp cho người dùng dễ dàng hơn, trắng phổ biến dễ đọc trông tự nhiên Trong số thiết kế responsive, họ cố định chiều rộng trang web hiển thị phần bên nội dung màu background đó, vô hình tạo nên “2 đường gạch” bên giới hạn nội dung hiển thị trang web Nếu tất background màu trắng nội dung background trở nên đồng hơn, không bị giới hạn cho cảm giác không gian thoáng hơn, dễ bắt mắt • Flat design minimal style : Đơn giản xu hướng lớn có hầu hết thiết kế năm 2013, trắng hình ảnh thu nhỏ đơn giản Màu trắng khiến ta dễ dàng sử dụng kết hợp với yếu tố khác, màu sắc đậm tươi sáng biểu trưng cho thiết kế phẳng MÀU TRẮNG NÓI LÊN ĐIỀU GÌ? Màu trắng màu đơn giản – thiếu màu sắc – có số ý nghĩa riêng nó, quan trọng phối hợp với yếu tố xung quanh khác Trắng, chất, màu tinh khiết, đức tin, ánh sáng, sẽ, khả năng, mềm mại, v.v… nói chung mang tính tích cực Mặc dù sử dụng màu nền, màu trắng góp phần quan trọng nhiều yếu tố khác Nó trì đặc tính riêng nó, không ngừng hấp thụ xung quanh để mang đến đầy đủ ý nghĩa tất yếu tố xung quanh Vì vậy, trắng sử dụng màu nền, ví dụ muốn làm thiết kế nữ tính, bạn sử dụng màu trắng kết hợp với màu hồng font chữ viết tay Màu trắng màu nhấn mạnh rõ ràng điểm chính, loại bỏ điểm dư thừa khỏi mớ lộn xộn gây trở ngại thị giác sử dụng số xu hướng Sắc sử dụng để nhấn mạnh hình ảnh đến yếu tố quan trọng khác thiết kế (màu sắc, chữ hình ảnh) luôn phần quan trọng thiết kế SHADES KHÁC CỦA MÀU TRẮNG Những màu khác dùng để đại diện cho màu trắng gần trắng bao gồm tuyết, sữa, ngà voi, ngọc trai, giấy, vỏ sò, kem thạch cao Màu gần trắng kết hợp với màu khác (thường đen) tạo màu trắng mềm mại, dễ đọc hình Một số người dùng nhà thiết kế cho màu trắng tinh khiết thường gây khó chịu cho mắt, dự án in ấn màu trắng màu tiêu chuẩn THỦ THUẬT CHO VIỆC SỬ DỤNG NỀN TRẮNG Tạo tương phản : Chọn màu tối sáng mà gây ý cho người dùng trắng Màu đen lựa chọn phổ biến cho thiết kế trắng (màu xám đen) dễ xem đọc Điều với yếu tố hình ảnh Chọn hình ảnh không trắng sử dụng đường viền màu đen bao quanh để dễ dàng tách biệt khỏi yếu tố xung quanh Giữ thật đơn giản : Bản chất màu trắng đơn giản Điều quan trọng để giữ thiết kế mức đơn giản Sử dụng hình ảnh đơn giản : Ảnh chụp, graphics hay ảnh illustration nên nói lên cảm xúc tương tự thiết kế tổng thể, sử dụng hình ảnh sặc sỡ, phức tạp, gây rối mắt Giữ mức tối giản tốt Tập trung vào kiểu chữ : Những kiểu chữ đẹp điều quan trọng với thiết kế đơn giản Điều làm bật lên số yếu tố thiết kế tổng thể Hãy chọn font chữ lớn sử dụng chúng thật tốt Không gian : Hãy nhớ màu trắng phần nhìn tổng thể xu hướng Chúng ta sử dụng chúng tốt cách coi tất yếu tố thiết kế phòng Sau thêm thật nhiều không gian vào đối tượng, để khoảng cách lớn chữ menu items Cố gắng tập trung vào không gian rộng bên yếu tố thiết kế Tập trung vào màu nhấn : Chọn màu sắc sử dụng điểm nhấn để bật trắng chữ đen Các màu sắc khác giúp cho người dùng tập trung vào yếu tố cách tinh tế hơn, dùng với hầu hết màu sắc Trong thiết kế sử dụng màu trắng mới, họ phát triển theo cách khác để tạo thiết kế mẻ sáng tạo Làm việc trắng cho ta cảm giác mẻ, đại, kiểu dáng đẹp, hầu hết tất thiết kế web Mobile Spy [...]... giúp cho việc thiết kế linh hoạt hơn Với hệ thống lưới này, khi chia các phần trong website của bạn sẽ dễ dàng hơn, mình cũng rất hay sử dụng Grid này Dưới đây là một ví dụ website sử dụng modular grid Thật đơn giản để thực hiện phải không các bạn? QUY TRÌNH THIẾT KẾ WEB – END : PSD TO HTML Đây là bước cuối cùng trong loạt bài hướng dẫn quy trình thiết kế web, sau khi đã có được layout web bằng photoshop... có thể duyệt web ở bất cứ nơi đâu mà họ muốn Hầu hết các nhà thiết kế web đều tạo ra một phiên bản di động của trang web để người dùng có thể dễ dàng xem website của họ trên điện thoại di động một cách chính xác, nhanh chóng và ít chi phí nhất Đây là một cách hoàn hảo để đảm bảo trang web hiệu quả cho người dùng 4 MỘT TRANG LỖI 404 Có thể bạn không biết rằng trang web của bạn có một liên kết bị hỏng,... nhất để làm cho thiết kế trở nên thoáng hơn, trông sạch sẽ hơn, nhưng thực tế không phải luôn luôn đúng như vậy Khi làm việc với những thiết kế có nền màu trắng, chúng ta cần phải làm việc chi tiết và cẩn thận với cả 2 yếu tố: chữ và hình ảnh Nền màu trắng cần phải được hài hòa với thiết kế tổng thể và kết thành một color scheme hợp lý Vì vậy, những designer đã làm gì với những thiết kế có nền trắng... nó thật sự cần thiết, bởi vì fav icon có thể được coi là một logo, một thương hiệu cho trang web của bạn Nó không hiển thị trên trang web, mà nằm ở phía trên thanh menu của trình duyệt Đối với những người có thói quen mở rất nhiều trang web cùng một lúc, khi đó trên trình duyệt của họ sẽ xuất hiện rất nhiều tab Đối với một lượng tab lớn như vậy, họ sẽ rất khó để đọc tên của từng trang web, và sẽ không... có, nhưng tương lai bạn không chắc chẳn được là sẽ hoàn toàn không có một liên kết nào bị phá vỡ trong hệ thống trang web của bạn Do đó, một trang báo lỗi 404 là điều thật sự cần thiết Nó có thể là một điều hướng nhỏ, giúp người dùng biết được rằng website của bạn hiện vẫn đang được duy trì nhưng họ đang đi vào một liên kết không tồn tại hoặc đã bị phá vỡ, bạn có thể giúp người dùng định hướng lại... Đối với mỗi trang trong trang web của bạn, cần có meta description cho từng trang và các từ khóa (keyword) Điều này sẽ giúp cho các công cụ tìm kiếm như google, bing, yahoo, v.v dễ dàng định vị trang web của bạn và hiển thị nó đúng với những gì mà người dùng đang sử dụng để tìm kiếm Nó sẽ giúp bạn có thêm được một lượng truy cập đáng kể 6 FAV ICON Đa số người thiết kế web đều quên hoặc bỏ qua Fav Icon... dụng mà mọi người sử dụng trình duyệt nào cho phù hợp Do vậy, bạn phải chắc chắn rằng website của bạn có thể hiển thị đầy đủ và chính xác trên mọi trình duyệt Hiện nay mình thấy có rất nhiều trang chỉ hiển thị đẹp trên Firefox hay Google Chrome, khi duyệt bằng IE hay những trình duyệt khác thì nó hiển thị khác hẳn Điều này có thể gây bất lợi, làm giảm lượng khách truy cập đến website bạn 3 KIỂM TRA TRÊN... HTML cơ bản đã được kiểm tra tính hợp lệ của W3C Trang web có Valid HTML làm cho nó dễ dàng hiểu HTML code Valid HTML cũng là thể hiện tính chuyên nghiệp cho trang web và cũng để tối ưu hóa cho các bộ máy tìm kiếm (SEO) CÁCH SỬ DỤNG NỀN TRẮNG TRONG WEB DESIGN Ngày nay, hầu hết mọi người đều sử dụng màu trắng làm nền cho các website, thay thế cho kiểu website nền tối hay sử dụng pattern Mọi người đều nghĩ... trọng trong mỗi thiết kế, nếu bạn muốn có được những bố cục chặt chẽ, gọn gàng thì bạn không thể nào bỏ qua được hệ thống lưới Đối với web design, hệ thống lưới được nhiều người dùng nhất đó là multicolumns và modular 1 MULTI-COLUMNS : Đối với hệ thống lưới multi-columns, các bạn có thể tham khảo thêm tại 2 website http://960.gs/ 960 Grid System đơn giản là hệ thống lưới cho nội dung website có độ rộng... PSD TO HTML 21 CODING A CAR SALES LAYOUT 8 ĐIỀU WEB DESIGNER THƯỜNG QUÊN KHI CHẠY SITE MỚI Mỗi người chúng ta, sau khi làm ra được 1 trang web cho mình hoặc khách hàng, ai cũng háo hức khởi chạy nó Do sự nôn nóng, háo hức đó, chúng ta thường dẫn đến việc chúng ta bỏ qua một vài bước mà lẽ ra nó rất hữu ích cho tranng web của chúng ta Nay mình tình cờ dạo web, thấy bài viết này trên trang http://creativenerds.co.uk, ... hợp cho website QUY TRÌNH THIẾT KẾ WEB – PART : SITEMAP Hôm giới thiệu đến bạn phần quy trình thiết kế web cách lập Sitemap Với viết này, hiểu thêm sitemap quy luật đặt tên cho trang trang web I... việc thiết kế linh hoạt Với hệ thống lưới này, chia phần website bạn dễ dàng hơn, hay sử dụng Grid Dưới ví dụ website sử dụng modular grid Thật đơn giản để thực phải không bạn? QUY TRÌNH THIẾT KẾ... với nhau? QUY TRÌNH THIẾT KẾ WEB – PART : LAYOUT VỚI GRID SYSTEM Với viết trước, có tổng quan cấu trúc website Bài viết này, giới thiệu đến bạn số hệ thống lưới thường sử dụng cho web design