Trang 1 Trường Đại Học Hòa Bình KHOA CÔNG NGHỆ ĐA PHƯƠNG TIỆN ------ ĐỒ ÁN TỐT NGHIỆP Đề tài: Sử dụng phần mềm Photoshop thiết kế giao diện web ứng dụng trong thương mại điện tử Giáo
GIỚI THIỆU CHUNG VỀ PHẦN MỀM ADOBE PHOTOSHOP 6 1.Giới thiệu Phần mềm Adobe Photoshop
Tổng quan về phần mềm Photoshop
Adobe Photoshop (thường được gọi là Photoshop) là một phần mềm chỉnh sửa đồ họa được phát triển và phát hành bởi hãng Adobe Systems ra đời vào năm
1988 trên hệ máy Macintosh Photoshop được đánh giá là phần mềm dẫn đầu thị trường về sửa ảnh bitmap và được coi là chuẩn cho các ngành liên quan tới chỉnh sửa ảnh Từ phiên bản Photoshop 7.0 ra đời năm 2002, Photoshop đã làm lên một cuộc cách mạng về ảnh bitmap Phiên bản mới nhất hiện nay là Adobe Photoshop CC
Ngoài khả năng chính là chỉnh sửa ảnh cho các ấn phẩm, Photoshop còn được sử dụng trong các hoạt động như thiết kế trang web, vẽ các loại tranh (matte painting và nhiều thể loại khác), vẽ texture cho các chương trình 3D gần như là mọi hoạt động liên quan đến ảnh bitmap
Adobe Photoshop có khả năng tương thích với hầu hết các chương trình đồ họa khác của Adobe như Adobe Illustrator, Adobe Premiere, After After Effects và Adobe Encore
Sự ra đời và phát triển của phần mềm Photoshop
198 8 Ngày 10 tháng 2, phần mềm Adobe Photoshop phiên bản 0.63 chính thức ra đời và cha đẻ tên là Thomas Knoll là người sáng lập nên phần mềm này Bản 0.63 này được viết chạy trên hệ điều hành Macintos System 7
1990 PHOTOSHOP 1.0.7, photoshop được nâng cấp lên bản 1.0.7 và chỉ chạy riêng cho Macintos
1993 PHOTOSHOP 2.0, photoshop được nâng cấp lên phiên bản 2.0 và lúc này nó chạy được trên Window 3.1 , lúc này nó có tên là Photoshop LE
- Năm 1993 , photoshop được nâng cấp lên phien bản 3.0 và chạy trên hệ điều hành Windows 98
1996 PHOTOSHOP 4.0, photoshop được nâng cấp lên phiên bản 4.0 , các tính năng dần được cải thiện Lúc này vẫn chạy trên hệ điều hành Win 98 Giao diện lúc này đã được cải thiện đáng kể
1998 PHOTOSHOP 5.0, bản Photoshop 5.0 được ra đời , và cùng năm đó bản
5.5 cũng đã được nâng cấp Đây là giao diện của 5.0
2000 PHOTOSHOP 6.0, bản photoshop 6.0 ra đời và được viết chạy trên hệ điều hành mới nhất là Win 2000
2002 PHOTOSHOP 7.0 bản Photoshop 7.0 ra đời đánh dấu sự phát triển vượt bậc của loại phần mềm xử lý ảnh Bitmap
2003 PHOTOSHOP CS1 , phiên bản Photoshop CS 1 ra đời nhằm tăng cường thêm nhiều tính năng xử lý ảnh , và chỉ chạy trên Win XP
2005 PHOTOSHOP CS2, hãng Adobe đã đánh dấu sự vượt trội bộ phần mềm của hãng bằng sự đột phá CS2 , photoshop CS2 ra đời với nhiều tính năng mới và rất mạnh mẽ , chạy trên hệ điều hành Win XP và Mac OS X 10.4 Tiger
2007 PHOTOSHOP CS3 Xử lý nhanh hơn có lẽ là tính năng đáng chú ý nhất của phiên bản này năm 2007.Phiên bản này tập trung nâng cấp các công cụ hiện có của nó thay vì tập trung vào những cái mới
2008 PHOTOSHOP CS4 Giao diện người dùng được đơn giản hoá đáng kể trong CS4 Sử dụng và các công cụ chính đã được thêm vào thanh tiêu đề để dễ truy cập Nhanh chóng truy cập cho hoạt động phổ biến đã được làm sẵn có trong khu vực bảng điều khiển Tính năng Masks và điều chỉnh bảng điều khiển đã được bổ sung
2010 PHOTOSHOP CS5 Adobe Photoshop CS5 Extended là là bản photoshop với nhiều tính năng mới, giải pháp tuyệt đỉnh cho các tác vụ xử lý ảnh số cao cấp, cung cấp mọi tính năng phối ghép và biên tập vốn có trong Adobe
Photoshop CS5 cộng thêm những công cụ đột phá cho phép tạo lập và chỉnh sửa các nội dung 3D và chuyển động
2012 PHOTOSHOP CS6 Thêm vào các công cụ thiết kế sáng tạo, cung cấp giao giện thiết kế lại và tập trung vào nâng cao hiệu suất
2013 – 2015 PHOTOSHOP CC Là những phiên bản nâng cấp sau CS6 cùng với những cải tiến thông minh và tiện lợi cho người sử dụng
Vai trò của Photoshop trong thiết kế Website
Với xu hướng đang lên của ngành thiết kế đồ họa thì thiết kế web đang là một lĩnh vực được ưa chuộng hiện nay Để thiết kế được một trang web đầy đủ nội dung và cho nó hoạt động được không phải là điều khó, cái khó là phải làm sao khiến cho nó thật ấn tượng và thu hút người xem đó mới là điều mà nhà thiết kế web hướng tới Hầu hết thời nay các trang web đẹp và độc đều được thiết kế với photoshop, cho dù là trang web nhỏ, đơn giản hay phức tạp đều yêu cầu bạn phải thiết kế trước trong photoshop hoặc những trình đồ họa tương đương Vì vậy thiết kế web bằng photoshop là điều cần thiết cho bất kỳ ai muốn thiết kế web
Phần mềm chuyên dụng Adobe Photoshop là lựa chọn số một trong thiết kế đồ họa Tuy nhiên để thiết kế một mẫu Layout chuyên nghiệp đẹp mắt ngoài các yếu tố về mỹ thuật, bạn cần phải có kiến thức tốt trong việc sử dụng các công cụ hỗ trợ của phần mềm Adobe Photoshop điều đó sẽ giúp bạn tiết kiệm được thời gian làm việc và hoàn chỉnh mẫu thiết kế như yêu cầu đề ra.
Phần mềm thực hiện đồ án:Photoshop CC 2015.5
3.1 Tổng quan về Photoshop CC 2015.5
Photoshop CC 2015 là phần mềm được biết tới với rất nhiều chức năng hỗ trợ chỉnh sửa hình ảnh, tạo ảnh tĩnh và ảnh động độc đáo Bên cạnh đó, Photoshop
CC 2015 còn bao gồm rất nhiều tính năng hấp dẫn khác như cắt ảnh, làm bìa sách, nhãn vở, bìa văn bản báo cáo, tiểu luận, đồ án … Photoshop CC
2015 được đại đa số người dùng trên toàn thế giới sử dụng và không thể thiếu trong những chiếc laptop, PC của những nhà thiết kế, đồ họa
Các cải tiến mới trong Adobe Photoshop CC 2015 bao gồm:
• Export nhanh và hiệu quả
• Tìm stock nhanh trong library (stock)
• Cho phép thêm layer style
• Thiết kế phù hợp hơn với iOS
• Hiệu ứng làm mờ (blur) thật hơn với noise
• “Trị mụn” và “cứu ảnh” tốt hơn – nhanh hơn
• Move and extend objects with more control
• Better panoramas with Content-Aware Fill
• Adobe Camera Raw 9.1 – thêm sương mù
• Hỗ trợ màn hình HiDPI
• Làm nhẹ khi tường tác với 3D model
• Tạo Bump maps từ ảnh
3.2 Hướng dẫn cài đặt Photoshop CC 2015.5
Hướng dẫn cài đặt và crack
Các bạn down file cài đặt Photoshop CC ở trên về máy tính
Dùng phần mềm Winrar để giải nén Vào folder vừa giải nén, bạn click vào file Setup.exe để bắt đầu cài đặt
Nếu trước đó bạn đã đăng nhập vào Adobe, thì nó sẽ ghi nhớ và chọn Email đăng nhập trước đó để cài đặt
Nếu bạn muốn cài đặt với email khác, hoặc bạn chưa có email thì click vào Not your Adobe ID
Lựa chọn phiên bản bạn muốn cài đặt
Màn hình quá trình cài đặt Photoshop CC
THƯƠNG MẠI ĐIỆN TỬ VÀ WEBSITE TRONG THƯƠNG MẠI ĐIỆN TỬ
Thương mại điện tử là gì?
2.1.1 Khái niệm về thương mại điện tử
Thương mại điện tử, hay còn gọi là e-commerce, e-comm hay EC, là sự mua bán sản phẩm hay dịch vụ trên các hệ thống điện tử như Internet và các mạng máy tính Thương mại điện tử dựa trên một số công nghệ như chuyển tiền điện tử, quản lý chuỗi dây chuyền cung ứng, tiếp thị Internet, quá trình giao dịch trực tuyến, trao đổi dữ liệu điện tử (EDI), các hệ thống quản lý hàng tồn kho, và các hệ thống tự động thu thập dữ liệu Thương mại điện tử hiện đại thường sử dụng mạng World Wide Web là một điểm ít nhất phải có trong chu trình giao dịch, mặc dù nó có thể bao gồm một phạm vi lớn hơn về mặt công nghệ như email, các thiết bị di động cũng như điện thoại
Thương mại điện tử thông thường được xem ở các khía cạnh của kinh doanh điện tử (e-business) Nó cũng bao gồm việc trao đổi dữ liệu tạo điều kiện thuận lợi cho các nguồn tài chính và các khía cạnh thanh toán của việc giao dịch kinh doanh
E-commerce có thể được chia ra thành:
E-tailing (bán lẻ trực tuyến) hoặc "cửa hàng ảo" trên trang web với các danh mục trực tuyến, đôi khi được gom thành các "trung tâm mua sắm ảo"
Việc thu thập và sử dụng dữ liệu cá nhân thông qua các địa chỉ liên lạc web Trao đổi dữ liệu điện tử (EDI), trao đổi dữ liệu giữa Doanh nghiệp với Doanh nghiệp
Email, fax và cách sử dụng chúng như là phương tiện cho việc tiếp cận và thiếp lập mối quan hệ với khách hàng (ví dụ như bản tin - newsletters)
Việc mua và bán giữa Doanh nghiệp với Doanh nghiệp
Bảo mật các giao dịch kinh doanh
Thương mại điện tử bao gồm việc sản xuất, quảng cáo, bán hàng và phân phối sản phẩm được mua bán và thanh toán trên mạng Internet, nhưng được giao nhận một cách hữu hình, cả các sản phẩm giao nhận cũng như những thông tin số hoá thông qua mạng Internet
"Thương mại điện tử có thể định nghĩa chung là sự mua bán, trao đổi hàng hóa hay dịch vụ giữa các doanh nghiệp, gia đình, cá nhân, tổ chức tư nhân bằng các giao dịch điện tử thông qua mạng Internet hay các mạng máy tính trung gian (thông tin liên lạc trực tuyến) Thuật ngữ bao gồm việc đặt hàng và dịch thông qua mạng máy tính, nhưng thanh toán và quá trình vận chuyển hàng hay dịch vụ cuối cùng có thể thực hiện trực tuyến hoặc bằng phương pháp thủ công
2.1.2 Vai trò của thương mại điện tử
Sự phát triển và phồn vinh của một nền kinh tế không còn chỉ dựa vào nguồn tài nguyên thiên nhiên và nguồn lao động, mà ở mức độ lớn được quyết định bởi trình độ công nghệ thông tin và tri thức sáng tạo Cùng với xu thế đó, TMĐT xuất hiện đã làm thay đổi bộ mặt kinh tế thế giới bởi những ảnh hưởng to lớn của mình:
Làm thay đổi tính chất của nền kinh tế mỗi quốc gia và nền kinh tế toàn cầu Làm cho tính tri thức trong nền kinh tế ngày càng tăng lên và tri rhức đã thực sự trở thành nhân tố và nguồn lực sản xuất quan trọng nhất, là tài sản lớn nhất của một doanh nghiệp
Mở ra cơ hội phát huy ưu thế của các nước phát triển sau để họ có thể đuổi kịp, thậm chí vượt các nước đã đi trước
Xây dựng lại nền tảng, sức mạnh kinh tế quốc gia và có tiềm năng làm thay đổi cán cân tiềm lực toàn cầu
Rút ngắn khoảng cách về trình độ tri thức giữa các nước phát triển với các nước đang phát triển Cách mạng hoá marketing bán lẻ và marketing trực tuyến
Thương mại điện tử đem đến lợi ích to lớn cho doanh nghiệp, người tiêu dùng và toàn xã hội Đối với doanh nghiệp, thương mại điện tử giúp tiết kiệm chi phí và tạo thuận lợi cho việc quảng bá sản phẩm, hàng hóa, dịch vụ Nhanh chóng thiết lập giao dịch và thực hiện giao dịch với khách hàng Đối với người tiêu dùng, thương mại điện tử giúp mở rộng khả năng lựa chọn hàng hóa, dịch vụ và nhà cung cấp Đối với xã hội, sự phát triển mạnh mẽ của thương mại điện tử đã làm thay đổi phương thức giao dịch và kinh doanh truyền thống Đem lại những lợi ích đáng kể về nhiều mặt cho xã hội.
Website trong thương mại điện tử
Website thương mại điện tử là trang thông tin điện tử được thiết lập để phục vụ một phần hoặc toàn bộ quy trình của hoạt động mua bán hàng hóa hay cung ứng dịch vụ, từ trưng bày giới thiệu hàng hóa, cung ứng dịch vụ, thanh toán và dịch vụ sau bán hàng Hay có thể hiểu đơn giản hơn, website thương mại điện tử chính là một loại website bán hàng
Tầm quan trọng của một website thương mại điện tử chuyên nghiệp
Với xu hướng mua hàng online đang ngày càng mở rộng hiện nay, việc thiết kế website thương mại điện tử chuyên nghiệp sẽ giúp cho việc kinh doanh của doanh nghiệp được thuận tiện, dễ dàng và chuyên nghiệp hơn Và quan trọng hơn hết, theo nhiều thống kê, doanh thu có được từ các đơn hàng online của nhiều doanh nghiệp ngày nay cũng chiếm 40-50% tổng doanh thu của toàn hệ thống, đặc biệt là trong lĩnh vực dịch vụ và các ngành hàng thời trang, mỹ phẩm Đặc biệt trong kỷ nguyên của công nghệ thông tin hiện nay, việc mua bán sản phẩm không còn đơn thuần là ra chợ hay đến siêu thị Xu hướng mua, đặt hàng trực tuyến đã dần trở thành một nếp văn minh mới trong thời đại tiên tiến Với sự phát triển mạnh mẽ của thương mại điện tử, mọi hoạt động mua bán diễn ra nhanh hơn, mang lại rất nhiều sự tiện lợi cho khách hàng Hiểu được ưu thế đó, thiết kế web thương mại điện tử là phải đưa ra gói thiết kế website thương mại điện tử
2.2.1 Giao diện website là gì?
Website là trung gian giữa khách hàng và bạn Giao diện website bao gồm tất cả những gì xuất hiện trên website bao gồm hình ảnh, thông tin, video, các điều hướng người dùng trên website, liên kết trên web hay đơn giản là tất cả những gì người dùng nhìn thấy, tương tác trên website( truy cập danh mục, đặt hàng, chat online ) khi vào trong trang web
Giao diện người dùng là định dạng trang web được trình bày trên màn hình của máy tính của người xem (máy khách) được xem bằng các phần mềm trình duyệt web như Internet Explorer, Firefox,… Tuy nhiên ngày nay người xem có thể xem website từ các thiết bị điện tử khác như điện thoại di động, PDA,…
-Thiết kế giao diện web dưới dạng ảnh trong Photoshop chính là bản giao diện demo cho khách hàng khi họ có nhu cầu làm web
Người thiết kế giao diện web phải sử dụng các công cụ Đồ họa và Thiết kế như: Photoshop, AI, Flash, Dreamweaver,… để biến ý tưởng của khách hàng thành phác thảo trên giấy và chuyển phác thảo đó thành giao diện web dạng Ảnh hoặc file html
2.2.2 Những yêu cầu cần thiết khi thiết kế giao diện về một website
Việc trình bày một website phải đảm bảo các yếu tố về thẩm mỹ đẹp, ấn tượng; bố cục đơn giản, dễ hiểu và dễ sử dụng, các chức năng tiện lợi cho người xem Đặc biệt ngày nay, website trở nên sống động với những hiệu ứng đa dạng của hình ảnh và chữ kết hợp với âm thanh
Khi thiết kế web, giao diện là phần được chú ý đầu tiên Giao diện website được thiết kế theo phong cách đơn giản, hiện đại, sang trọng phù hợp với từng doanh nghiệp Đặc biệt là luôn được thiết kế theo ý tưởng và chiến lược marketing riêng của mỗi khách hàng
Khách hàng sẽ lướt qua các thành phần chính của một trang web để xác định website nói về cái gì để khách hàng quyết định ở lại với website của bạn
Họ đưa ra quyết định ở lại website hay không trong ít nhất là ba giây
Nếu họ quyết định ở lại, họ sẽ chú ý nhất với nội dung của màn hình Người sử dụng web luôn luôn vội vàng Họ có những thứ khác để làm và điều bạn mong đợi ở khách hàng ở lại với website để đánh giá cao vẻ đẹp và tính thẩm mỹ của trang web của bạn Mặc dù thiết kế một website tốt là rất quan trọng nhưng web của bạn có đủ truyền cảm hứng cho một người truy cập vào website để click vào nút "Mua ngay bây giờ" hoặc "Biết thêm"?
Chúng ta không thể đổ lỗi cho họ Bao giờ cũng vậy, khi bạn muốn tìm một cái gì đó? Bạn vội vàng tìm kiếm trên Google và sau đó bạn nhanh chóng mở các web xuất hiện đầu tiên, hay đúng hơn là lướt qua tất cả các trang web đó
Website nào để lại ấn tượng và có giá trị với khách hàng thì họ sẽ quyết định quay trở lại trang này để đọc thông tin về website
Mục đích của nhìn và đọc lướt qua là gì? Để lấy các thông tin tối đa mà bạn có thể nhận được về trang website đó Nếu bằng cách nào đó khi thiết kế website chúng ta bố trí web thật khoa học Kết quả là tốt hơn cho sản phẩm hoặc dịch vụ của bạn và tốt hơn cho trải nghiệm của người dùng
Tư duy về thiết kế giao diện:
Thiết kế giao diện đòi hỏi người thiết kế có cái nhìn sâu sắc về màu sắc bố cục và thực tiễn một website bạn phối màu rất đẹp nhưng không mang lại giá trị cho người dùng truy cập sẽ trở thành một website vô nghĩa bạn cần có đam mê học hỏi, ít ai thành công mà không phải đi học, bạn dành thời gian đầu tư vào các lơp học nâng cao, kỹ thuật thiết kế web, công động để theo kiệp những cái đã có rùi từ đó bạn hãy tạo hướng đi mới
Một trong những điểm quan trọng tạo níu giữ khách hàng trên trang web chính là thiết kế giao diện website không những đáp ứng yếu tố đẹp mà còn phải thân thiện với người dùng
-Sự phân chia nội dung:
Trang web của bạn chứa đựng nhiều nội dung thông tin Thật khó để người dùng theo dõi được tất cả những nội dung ấy nếu bạn không phân chia chúng một cách hợp lý Điều đó sẽ rất bất tiện cho doanh nghiệp khi muốn truyền tải một nội dung thông tin quan trọng đến khách hàng của mình Cách tốt nhất là hãy phân chia nội dung ngay khi bạn thiết kế giao diện website để khách hàng để người dùng có thể dễ dàng làm quen và tạo tâm lý thoải mái cho họ khi truy cập, tìm kiếm thông tin
-Tránh đòi hỏi thông tin không cần thiết từ khách hàng
Lấy thông tin của khách hàng được xem là chi tiết quan trọng để tạo dựng mối liên hệ, cầu nối giữa doanh nghiệp và khách hàng Thế nhưng nếu bạn đòi hỏi hay yêu cầu khách hàng đưa ra những thông tin mang tính chất cá nhân hoặc bắt buộc chắc chắn sẽ khiến họ có tâm lý không thoải mái nhất là khi họ chỉ muốn tìm kiếm một vài thông tin cần thiết trên trang web doanh nghiệp Vì thế hãy cẩn trọng khi đòi hỏi thông tin của người dùng, tùy vào từng trường hợp cụ thể mà đưa ra quyết định nên hay không Bạn có thể lựa chọn một số thông tin yêu cầu cần thiết để có thể xây dựng data khách hàng mà không khiến họ cảm thấy khó chịu
PHÂN TÍCH VÀ THIẾT KẾ GIAO DIỆN WEBSITE
Phân tích Website cần thiết kế
Thiết kế một cửa hàng (showroom) kinh doanh mặt hàng xe moto phân khối lớn Cửa hàng trong lĩnh vực thương mại bán các loại xe của hãng xe phân khối nổi tiếng của Ý Hãng xe Ducati
Của hàng sử dụng tên giống như hãng xe là Ducati
Là nhà phân chính hãng Ducati tại Việt Nam, chuyên phân phối các dòng xe Ducati, sản phẩm, dịch vụ liên quan đến thương hiệu Ducati
Việc xác định đối tượng khách hàng trước khi quá trình mua bán xảy ra giúp bạn tiếp cận khách hàng tiềm năng một cách dễ dàng Thông qua đó, cửa hàng hiểu rõ về nhu cầu, mục đích quan tâm, mong muốn thực sự của khách hàng là gì? Từ đó đưa ra những gợi ý phù hợp Đối tượng khách hàng mà cửa hàng xe mô tô phân khối lớn hướng đến là tất cả mọi người việt nam hay ngoại quốc, đang có nhu cầu sở hữu một chiếc xe phân khối cá tính, mạnh mẽ, sang trọng và đầy giá trị hay những khách hàng rất quan tâm về dòng xe nổi tiếng này
Khách hàng đã đủ tuổi để sử dụng phương tiện tham gia giao thông và đã sở hữu cho mình bằng lái xe A2 cho những dòng xe trên 175 phân khối
Hướng tới thị trường thương mại đang phát triển mạnh mẽ tại Việt Nam
3.1.3 Cách thức hoạt động giao diện
Website có giao diện sẽ bắt đầu từ trang chủ là trang chính của một website hiển thị toàn diện đầu tiên khi khách hàng truy cập vào trang web của cửa hàng Trang chủ sẽ trình bày các nội dung lớn bao gồm:
Logo không chỉ là hình ảnh đại diện của cửa hàng, mà nó còn là một thông điệp mà chủ nhân của nó muốn gửi đến khách hàng
Menu nghĩa là thanh trình đơn hiển thị các liên kết trên giao diện, tùy vào mỗi giao diện mà bạn sẽ có bao nhiêu menu, hiển thị ở trên hay ở dưới, bên trái hay bên phải chứ không phải chúng ta muốn cho nó hiển thị ra đâu cũng được
+ Banner Đây là những ảnh quảng cáo đặt trên website Thường là thu hút để người dùng nhìn thấy và click vào để đến một trang đích nào đó
Là những sản phẩm xe cửa hàng đang bán
+ Phần Quảng cáo thương hiệu xe+
Là phần giới hiệu về thương hiệu, thiết kế, cửa hàng mục đích tạo niềm tin, sự ấn tượng hay quảng bá về sản phẩm thương hiệu với khách hàng
Là những dòng xe mới có mặt trên thị trường, mới được nhập khẩu về Việt Nam hay mới được cửa hàng bán
Bán những phụ kiện đi cùng với xe :quần áo bảo hộ, đồng hồ của hãng
Là các thông tin mới về những gì đã, đang hoặc sẽ diễn ra với các sự kiện hay những dòng xe của hãng xe Ducati
Bao gồm thông tin liên hệ (số điện thoại, địa chỉ, email ) cửa hàng, các nút liên kết sang các mạng xã hội, bản đồ cửa hàng
Sau trang chủ là phần giao diện của các trang con là các trang hiển thị sau khi được click vào các phần liên kết từ trang chủ qua đó hiển thị nội dung phù hợp đã được khách hàng lựa chọn
Trang con trình bày ra nội dung của sản phẩm, tin tức, dịch vụ, thanh toán cho khách hàng những thông tin hữu ích, đầy đủ nhất phục vụ quá trình mua hàng hay tìm kiếm thông tin
3.1.4 Chi tiết cấu trúc giao diện
Màu sắc: chữ trắng nền đen, chữ đen nền trắng, button nền đỏ chữ trắng
Menu: -Trang chủ (Click để quay về trang chủ)
-Các dòng xe -> Phiên bản xe -> Chi tiết về xe
-Tin tức -> Trang tin tức -> Chi tiết tin tức
-Giới thiệu -> Trang giới thiệu
-Dịch vụ -> Trang dịch vụ
-Liên hệ -> Thông tin liên hệ
Banner: -Banner 1 -> Thông tin xe Ducati Monster 1200s
-Banner 2 -> Thông tin xe Scrambler icon
-Banner 3 -> Thông tin xe Diavel
Sản phẩm xe -> Thông tin chi tiết xe
-> Mua ngay -> Giỏ hàng ->Thanh toán
Cửa hàng phụ kiện -> Trang sản phẩm phụ kiện
Tin tức -> Tin ngắn -> Nội dung tin tức
-> Trang tin tức, video -> Nội dung tin tức, video
Mục cuối website: - Nút liên kết mạng xã hội -> Trang mạng xã hội
- Thông tin về cửa hàng
- Liên hệ với chúng tôi -> Trang liên hệ
Thiết kế giao diện
3.2.1 Thiết kế giao diện trang chủ
Chọn tạo trang thiết kế web trên Photoshop (New/ Document Type:Web/ OK) Tên: thiết kế giao diện web cho cửa hàng xe mô tô Ducati
Xuất hiện vùng làm việc, có thể chọn Crop tool để tạo thêm hoặc bớt size vùng thiết kế
Sử dụng hệ thống lưới cho website có đọ rộng 960px (Độ rộng tiêu chuẩn của mọi Website) Với 12 cột
Có thể ẩn cột và những đường kẻ bằng việc ấn tắt con mắt ở phần GRID OVERLAY trên layers và Ctrl + H để tắt các đường kẻ
- Phần đầu trang: Logo, Menu và Banner
Logo được đặt trên đầu trang với 2 dòng kẻ cách điệu
Menu nền đen chữ trắng khỏe khoắn với các mục: Trang chủ, Các dòng xe, Tin tức, Giới thiệu, Dịch vụ, Liên hệ và Icon cho mục Tìm kiếm, Tài khoản và Giỏ hàng
Banner động gồm 3 ảnh và dòng tiêu đề : “Sáng tạo, trẻ trung và đẳng cấp,
Ducati mới không chỉ là một chiếc xe, đó là vùng đất của niềm vui, tự do và sự thể hiện cá tính của bạn.”
Ba hình ảnh quảng cáo sẽ tự động chạy trên Banner chính của trang Web, hoặc khách hàng có thể click chạy bằng việc trỏ chuột vào mũi tên chuyển hướng
- Phần giữa trang: Sản phẩm, Giới thiệu, Dòng xe mới, Cửa hàng phụ kiện
Tạo điểm nhấn thu hút khách hàng với sản phẩm là dòng chữ “Chọn xe và bắt đầu hành trình của bạn” được thiết kế gây nổi bật
Sản phẩm xe hiện tên và giá của từng sản phẩm ở dưới ảnh mỗi một dòng xe, khách hàng có thể xem tiếp những sảm phẩm khác bằng việc trỏ chuột và click vào mũi tên điều hướng
Kết quả khi khách hàng muốn xem sản phẩm tiếp và chọn click mũi tên điều hướng (phải)
+Giới thiệu thương hiệu xe
Mang những từ ngữ khẳng định thương hiệu của Dòng xe nổi tiếng với những thiết kế hoàn hảo, giúp khách hàng thêm chắc chắn về chất lượng sản phẩm đem tới niềm tin cho người mua ” Với hơn 60 năm làm thiết kế cho dòng xe này, chúng tối tự tin mang đến sự hoàn hảo cho những khách hàng khó tính nhất Không có lý do gì để từ chối dòng xe quá tuyệt vời này.”
Nút “Xem thêm” liên kết vào trang con giới thiệu chi tiết về thiết kế tuyệt vời của hãng xe
Giới thiệu những dòng xe mới nhất tại cửa hàng đang được bán
Nơi khách tham quan website có thể vào xem những phụ kiện tốt nhất phục vụ cho bạn cùng chiếc xe Ducati
- Phần Cuối trang: Tin tức, Phần kết thúc
Cập nhật những tin tức mới nhất của cửa hang và dự kiện hãng xe Ducati
Khách hang có thể chọn để vào xem chi tiết nội dung từng tin tức
Chọn các nút để liên kết các mạng xã hội của cửa hang Địa chỉ, số điện thoại và email liên hệ cung với bản đồ địa điểm cửa hàng
3.2.2 Thiết kế giao diện các trang con
Chọn Các Dòng Xe trên thanh menu để hiện ra bảng trình các dòng xe của hãng Ducati
Có những dòng xe sở hữu nhiều phiên bản xe khác nhau Trỏ vào một dòng xe có nút mũi tên hướng về bên phải sẽ hiện ra các phiên bản xe mà dòng xe sở hữu
- Chọn tên phiên bản xe ở bảng ngoài cùng bên phải để xem thông tin chi tiết
Có những phiên bản xe chưa có mặt tại cửa hàng hoặc đã hết hàng sẽ hiện ra giao diện như hình trên để thông báo cho quý khách
Chọn nút hình kính lúp để hiện ô tìm kiếm
Chọn nút hình người để hiện bảng tài khoản bao gồm:
VD: Họ tên khách hàng là Nguyễn Khánh, đã đặt mua một xe Diavel…
Thành viên mới, Loại thẻ bạc Ảnh miêu tả giao diện khi khách hàng đăng nhập và chọn tài khoản để xem thông tin tài khoản của chủ nhân tài khoản
Khách hàng sẽ được truy cập tới giao diện thanh toán để xác nhận mua sản phẩm của cửa hàng
Chọn Nút Giỏ hàng để xem trong giỏ bạn đã đặt sản phẩm gì:
Hình trên là khi khách chưa đặt sản phẩm nào vào giỏ
Giỏ hàng khi đã chọn được sản phẩm
Chọn Tin tức trên menu để vào trang tin tức dành cho mọi người khi ghé thăm website cửa hàng
Trang giới thiệu mô tả lịch sử, hành trình phát triển của hãng xe ý nổi tiếng Ducati Cho khách hàng thấy thương hiệu của sản phẩm tại cửa hàng
Chọn “Dịch vụ” trên menu để tới trang dịch vụ cửa hàng
Dịch vụ là phần không thể thiếu của website thương mại điện tử, Một cửa hàng có dịch vụ tốt chắc chắn sẽ chiếm được nhiều lượng khách hàng cũng như việc phát triển kinh doanh của cửa hàng
Liên hệ tạo sự kết nối giữa người mua và cửa hàng xe Khách hàng sẽ biết được các thông tin liên hệ với cửa hàng và có thể để lại tên, email, số điện thoại cùng lời nhắn Cửa hàng sẽ phản hồi cho khách để tư vấn, hỗ trợ mua hàng …
+ Trỏ chuột vào sản phẩm
Trỏ chuột vào xe Ducati 959 Panigale
Trỏ chuột vào xe Scrambler Icon
- Khi khách hàng chọn Nút “Mua Ngay” Sản phẩm sẽ được tự động thêm vào trong giỏ hàng
Click vào sản phẩm xe mà khách hàng quan tâm:
VD: Chọn Xe Ducati Diavel
Chi tiết về xe Ducati Diavel
+ Chọn “Cửa hàng phụ kiện”
Danh mục sản phẩm phụ kiện
+ Trang tin tức chi tiết:
Khi khách hàng chọn đọc tin tức “Tuần lễ Ducati thế giới – world Ducati Week”
+ Chi tiết các sản phẩm của cửa hàng
Sản phẩm Scrambler Full Throttle
+ Đặc điểm chi tiết : Mỗi trang chi tiết về phiên bản xe sẽ có 2 bảng về đặc điểm và chi tiết của loại xe đó