Cách sử dụng bản đồ thông minh trên website (P.1)

Thứ ba - 24/07/2018 22:15

Hôm nay chúng tôi mang tới một danh sách những thiết kế website đẹp mắt và thông minh nhờ sử dụng các bản đồ rất đúng lúc đúng chỗ.

Cách sử dụng bản đồ thông minh trên website (P.1)

Khi nói đến việc sử dụng bản đồ trong thiết kế web chuyên nghiệp, chúng ta hiểu rằng đó là cách sử dụng những tiện ích như Google maps để thể hiện địa chỉ của công ty, cửa hàng, khách sạn...

Với một chút tưởng tượng, cùng sự giúp ích đắc lực của công nghệ cao, chúng ta có thể tạo ra một trải nghiệm người dùng đặc biệt ấn tượng nhờ vào bản đồ tương tác trên thiết kế web.

Để tạo ra một bản đồ tương tác, chúng ta cần đế sự kết hợp của nhiều yếu tố: hiệu ứng, chuyển động tinh tế, những cú chỏ chuột linh hoạt...Các xu hướng thiết kế web hiện đại như thiết kế phẳng, illustration đa giác, vẽ phác thảo...đều có thể mang lại sức sống mới cho một bản đồ. 

Hôm nay chúng tôi mang tới một danh sách những thiết kế website ấn tượng và thông minh nhờ sử dụng các bản đồ rất đúng lúc đúng chỗ. 

Rolex Awards 2014

1 rolex awards 2014 thiet ke web dep

Trang chủ của website này sử dụng bản đồ với những phong cách đường thẳng tinh tế. Các đường thẳng với các màu sắc nổi bật mang lại diện mạo sáng sủa. Nó không chỉ có tác dụng thể hiện 5 nhân vật cùng quốc gia của họ, , đó còn là cách tuyệt vời để thể hiện sự bao phủ của thương hiệu. 

TFI World Map

2 tfi world map thiet ke web dep

Khá giống với ví dụ trước, thiết kế gọn gàng với cách dùng các chấm của bản đồ này phù hợp với địa điểm của các nhân vật được nói tới. Màu xám được sử dụng tạo sự hài hòa với thiết kế web, cũng như nhấn mạnh những cá nhân trong lĩnh vực thời trang. 

Sailing Seas of Plastic

3 sailing seas of plastic thiet ke web dep

Màu tối và ảm đạm ngay lập tức nhấn mạnh mức độ nghiêm trọng của vấn đề được nói đến trong dự án. Nhóm nghiên cứu đã khéo léo thể hiện sự phân phối của nhựa qua những vệt sáng. 

Cost of Living

4 cost of living thiet ke web dep

Bạn muốn biết thủ đô nào của Châu Âu có mức sinh hoạt phí đắt nhất và nơi nào mang lại cảm giác dễ chịu hơn với mức ngân quỹ hạn hẹp? Dự án bản đồ illustraion này sẽ giải đáp tò mò của bạn theo một cách thú vị. Website cũng mang tới những lời khuyên hữu ích cho việc chi tiêu tại các địa điểm này. 

Alfoart Photo Travel

5 alfoart photo travel thiet ke web dep

Nếu bạn là một fan của những địa danh lịch sử thì dự án này chắc chắn dành cho bạn. Bản đồ theo phong cách cổ xưa này sử dụng màu sắc nhẹ nhàng, icon tinh xảo đại diện cho nhiều địa danh nổi tiếng, đây là một hướng dẫn tương tác đầy tính thông tin. 

Deutschland

6 deutschland thiet ke web dep

Google cho phép bạn khám phá nước Đức kỹ hơn. Website này mang tới một bản đồ tương tác với những điểm màu linh hoạt bao trùm 25 chủ đề. Bạn có thể dịch bất kỳ câu nào sang ngôn ngữ của mình cũng như tham gia trao đổi với mọi người. 

Beyond the Track

7 beyond the track thiet ke web dep

Beyond the Track là một hướng dẫn tương tác tuyệt diệu, nó tạo sự gần gũi giữa mọi người với giải vô địch Moto GP theo một cách hấp dẫn. Website thể hiện 5 địa điểm đua hàng đầu cùng những sự thật thú vị về nó, văn hóa, điều kiện vật chất và những điều hữu ích khác. 

Galapagos

8 galapagos thiet ke web dep

Đây là một thiết kế web với bản đồ tương tác 3 chiều. Ilusstration đa giác tạo ra nhờ HTML5, phần hướng dẫn trông khá tinh xảo và độc đáo cũng như thể hiện đảo Galapagos với hình ảnh dễ hình dung nhất. 

Everyday Moments

9 everyday moments thiet ke web dep

Everyday Moments là các tương tác hình ảnh mag tới lộ trình hàng ngày ở Anh và  Ireland. Nhờ vào màu sắc nhẹ nhàng, đồ họa tinh tế và hiệu ứng bắt mắt linh hoạt, sự đa dạng của bản đồ ngay lập tức thu hút sự chú ý. 

Dangerous Roads

10 dangerous roads thiet ke web dep

Sử dụng công nghệ Street View, nhóm thiết kế đã thành công trong việc tạo sự chú ý vào những con đường nguy hiểm nhất trên thế giới. Mặc dù một phiên bản illustration của bản đồ chỉ được sử dụng cho khu vực “welcome”  tuy nhiên cả dự án thiết kế này dựa trên ý tưởng của việc miêu tả địa hình. 

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: www.youthedesigner.com