Hành trình lột xác ngoạn mục của 6 website được thiết kế lại

6 website có cú lột xác ngoạn mục sau khi được thiết kế lại website. Bạn có nhận ra những nét khác biệt lớn nhất của những thiết kế website này sau khi được làm lại?

Trước:

Sau:

1. Thanh Navigation bar được giữ nguyên, cả màu sắc lẫn nội dung
2. Sự thay đổi trong thông điệp từ " công ty phần mềm marketing" sang " Công ty marketing và sales software"
3. Mọi nút call to action đều ghi là "Learn More"
4. Loại bỏ bớt nội dung về hội thảo marketing HubSpot tổ chức vào tháng 9 năm 2015
5. Khu vực nút call to action "Just Launched, New in HubSpot"to hơn và nằm ở vị trí trung tâm trên đầu trang
6. HubSpot nhấn mạnh rằng phần mềm của họ có sẵn ở 5 thứ tiếng
7. Tông màu tối hơn tạo diện mạo chuyên nghiệp hơn 
8. Nội dung mới cho mọi tiêu đề chính và phụ 
9. Kích thước font Headline được giảm xuống  
10. Xóa bỏ nội dung về việc HubSpot có 15,000+  khách hàng ở 90 quốc gia 

02. Yodle

Trước:

Sau: 

1. Thêm video toàn trang ở chế độ play tự động, thay thế luôn cho lớp nền màu xám trước đây
2. Nút play video lớn hơn ở phía trên 
3. Cập nhật video sản phẩm từ 4 đến 2 phút 
4. Ở thanh navigation trên đầu, phần login được chuyển sang bên phải 
5. Ở thanh navigation, chữ "Call" chuyển thành "Customer Support" và đẩy về bên trái của login. Con số cạnh   "Learn More" cũng được bổ sung thêm vào cạnh"Customer Support"
6. Headline giờ được đặt ở giữa và tăng kích thước (thành 3 dòng thay vì 2 dòng) và chuyển font chữ trắng
7. Tiêu đề phụ tăng kích thước, đổi màu chữ trắng và cập nhật số "45,000" thành "50,000"
8. Bên trái của tiêu đề phụ, một logo của "Forbes 2015: America's Most Promising Companies" đã được thêm vào
9. Khu vực nội dung mới được thêm vào dưới video, thêm vào đó là dòng chữ "More customers. Less effort. All-in-one affordable marketing solution"
10. Biểu đồ thể hiện số lượng đặt hàng của Yodle thay đổi từ 6 phần với nội dung được viết ở bên trong mỗi phần 

03. 99 designs

Trước:

Sau:

1. Top banner đổi từ xanh sang xám
2. Nội dung ở banner đổi từ ""Free tips: learn how to brand your new website Check it out"sang  "Save: Bundle a logo design with matching website f-rom $499"
3. Khu vực ảnh Header  chỉ bao gồm một hình ảnh với nội dung màu trắng viết chữ trắng lên trên. 
4. Logo màu cam và xanh được thay bằng logo trắng
5. Link đến "agencies" đã bị xóa ở top navigation
6. Số điện thoại được thêm vào ở dòng chữ dọc giống như ởtop navigation
7. Cả 2 link được ghi  "Questions? call us" và "Request a design consultation" đều bị xóa
8. Nội dung Headline đã đổi từ "Get a design you'll love - guaranteed" sang"Great business starts with a great logo"
9. Call to action đã thay đổi thành hình vuông ở trung tâm thay vì nút trong và giờ nó có màu cam thay vì màu xanh 
10. Phần chữ "100% money back guarantee" được thêm vào, trong khi chức năng click để play video đã được xóa và thay bằng "how it works" link to a pop-up video player

04. Evernote

Trước:

Sau:

1. Banner tối màu ở đầu trang được xóa 
2. Top navigation link thay từ  "download" và "menu" sang "pricing" và "menu"
3. Search box được thêm vào
4. Hình ảnh header mới có thêm phần nền nhiều màu sắc
5. Nội dung Headline và subheadline cùng call to action vẫn được giữ nguyên nhưng màu của chữ bây giờ có màu trắng để đọc dễ hơn  
6. Hình ảnh người đàn ông vẫn ở tâm điểm của trang chủ, nhưng nội dung quanh anh ấy đã thay đổi từ "airport, new space - desks, floor plan - lighting" sang "write article, story ideas, destinations, call editor, photographs." Thông điệp cũ hướng đến công việc làm tại văn phòng theo kiểu truyền thống, còn thiết kế mới hướng tới thông điệp là làm việc ở mọi nơi
7. Dưới khu header, phần giá cả đã được thêm vào với 3 mức basic, plus và premium
8. Khu vực "One Workspace" đã được chuyển xuống dưới để dành chỗ cho phần giá cả 
9. Khu vực thứ 2 ở phần giá đã được chèn thêm vào đáy của trang 
10. Hình ảnh ở đáy trang nơi có phần nội dung "Available on everything you use every day" đã được cập nhật để thấy rõ hơn mọi thiết bị  có thể dùng được, bao gồm cả đồng hồ 

05. Prezi

Trước:

Sau:

1. Thanh Top navigation đổi màu từ trắng sang đen
2. Logo đổi màu từ trắng trên nền đen thành xanh trên nền trắng 
3. 3 link được thêm vào navigation bên trái , bao gồm "Gallery, Features và Support"
4. Ảnh hero image thay đổi từ người phụ nữ sang một chiếc máy tính bảng 
5. Khu vực phụ ở đầu trang thêm một thông điệp phụ nữa là "One to one"
6. Headline và nút call to action chuyển lên cao hơn và nằm ở vị trí lệch về bên trái
7. Headline chuyển từ "Be a great presenter" sang "The presentation software for when it matters"
8. Subheadline bị xóa
9. Video link bị xóa
10. Nội dung nút call to action đổi từ "Get Started"sang "Give Prezi a Try"

06. Casper

Trước:

Sau:

1. Logo được đặt ở giữa
2. Top navigation link đổi từ  "mattress, design, reviews" sang "shop, design, reviews"
3. Thanh Top navigation đổi từ xám sang trắng 
4. Font chữ ở headline có sự thay đổi và được đẩy lên cao
5. Nội dung nút call to action giữ nguyên nhưng đổi kích thước và font chữ
6. Thêm hình ảnh người đàn ông và phụ nữ 
7. Bóng đổ sáng hơn cho hình hero 
8. Chiếc giường (hình ảnh sản phẩm) thể hiện đúng tỷ lệ và nằm ở trên một giá đỡ thay vì nằm trên sàn như thiết kế trang cũ
9. Giỏ hàng đặt ở trên cùng bên phải trang 
10. Nút bấm 100 night trial nằm ở chính giữa, phía dưới ảnh hero.