15 xu hướng thiết kế web cần chú ý trong năm 2012
Cho đến năm 2011 đã mang đến một số thay đổi đáng kinh ngạc về thiết kế và công nghệ Internet. Phát triển web đã trở thành một chủ đề mượt mà hơn nhiều để nhảy vào học tập, chưa kể đến vô số các thư viện nguồn mở hữu ích trong việc hợp lý hóa quy trình. Tuy nhiên, dường như cộng đồng thiết kế toàn cầu còn lâu mới ném vào khăn.
Tôi muốn giới thiệu 15 ý tưởng đã phát triển rất nhanh trong năm qua. Những xu hướng này bao gồm các kỹ thuật thiết kế đồ họa và web có thể sẽ đóng một vai trò lớn trong năm 2012. Bạn có thể đã thấy một vài trong số này được thể hiện trên nhiều trang web yêu thích của bạn trực tuyến.
Rất may, các phương thức để thực hiện các tính năng này đã trở nên dễ hiểu và mã mỏng hơn nhiều.
1. Thiết kế giao diện đáp ứng
Trải nghiệm người dùng trung bình có thể là khía cạnh quan trọng nhất cần xem xét khi thiết kế trang web. Bạn muốn các thành phần trang phản hồi nhanh với đầu vào bàn phím / chuột và hoạt động như mong đợi. Một số ví dụ có thể bao gồm menu bay ra bên cạnh, hộp thả xuống và cửa sổ bật lên.
Bao gồm các thư viện JavaScript nổi tiếng như MooTools và jQuery, việc làm động các tính năng này trở nên dễ dàng hơn nhiều và thậm chí còn nhiều hơn nữa. Hầu hết các trình duyệt hiện đại đều hỗ trợ mã này và thậm chí xuống cấp một cách duyên dáng khi các tập lệnh không có sẵn. Cuối cùng, bạn muốn làm cho người dùng cảm thấy thoải mái khi tương tác với bất cứ nơi nào trong thiết kế.
Tương tự như vậy, bạn nên xem xét đầu vào mẫu và kiểm tra dữ liệu. Trên nhiều trang đăng ký, bạn sẽ nhận được những phản hồi nhỏ khi bạn làm việc qua từng khu vực nhập liệu. Bạn có thể tự động kiểm tra các địa chỉ e-mail hợp lệ, tên người dùng trùng lặp và thậm chí kiểm tra hai lần nhập mật khẩu. Điều này sẽ tiết kiệm thời gian cho người dùng và cung cấp một hướng dẫn hữu ích trong suốt quá trình đăng ký.
2. Thiết bị di động màn hình cảm ứng
Trong vài năm qua, người ta thấy rõ rằng điện thoại thông minh đang nhận được sự ủng hộ của những người đam mê phi công nghệ. Nhưng chỉ từ năm 2011, chúng ta đã chứng kiến sự bùng nổ của các trang web di động và các mẫu dành riêng cho thiết bị di động.
Sự phổ biến của các thiết bị iPhone và iPad cùng với điện thoại chạy Android có nghĩa là bạn sẽ có khách truy cập tương tác hoàn toàn với các trang của mình thông qua các lệnh cảm ứng. Điều này đã trở thành một sự xem xét thực tế với mỗi mockup thiết kế. Xu hướng thiết kế web di động đã chỉ ra rằng việc xây dựng một chủ đề di động hoàn toàn riêng biệt thường mang lại kết quả tốt nhất. Bằng cách này, bạn có thể giữ tất cả nội dung động trên bố cục chính của mình trong khi cung cấp phiên bản mỏng của trang web cho người dùng di động.
3. Tấn miễn phí!
Ai có thể nói rằng họ thực sự không thích tải về miễn phí? Các nhà thiết kế web đã chia sẻ nội dung của họ trực tuyến trong nhiều năm, nhưng chỉ gần đây, nó mới trở thành một xu hướng rất phổ biến trong giới nghệ sĩ kỹ thuật số. Đã có một vài cộng đồng được xây dựng đặc biệt xung quanh việc cung cấp tải xuống miễn phí cho các nhà thiết kế web và đồ họa.
Hai trong số các mục yêu thích cá nhân của tôi là Tải xuống PSD và Designmoo, cả hai đều được cập nhật thường xuyên bởi các thành viên chất lượng hàng đầu. Ngoài ra, kho lưu trữ Hongkiat Freebies có rất nhiều món quà ngọt ngào để kiểm tra. Trong bất kỳ thời đại nào trước đây, theo nghĩa đen, việc tải xuống các giao diện web miễn phí, bố cục, logo, biểu ngữ và thực tế là bất kỳ loại tệp PSD / AI nào khác!
Một số tải xuống gọn gàng
Dưới đây chỉ là một vài phần mềm miễn phí tuyệt vời để kiểm tra từ đầu năm 2011. Và nếu bạn nghĩ rằng danh sách này có một số tệp tuyệt vời, hãy đợi đến năm 2012!
Bộ giao diện người dùng web mini
Máy nghe nhạc mini tối
Thẻ trượt
Thanh trượt hình ảnh tối
Hộp tìm kiếm
Đăng nhập / Đăng nhập mẫu
Hộp Modal đăng nhập
Mẫu đăng nhập sạch
Bảng giá
Thanh tải tối thiểu
Đính kèm Pop-up
4. Tiêu chuẩn HTML5 & CSS3
Cả hai kiểu mẫu thiết kế mới này đã tích lũy được ngày càng tăng trong suốt năm 2011. Các nhà thiết kế web ngữ nghĩa đã chờ đợi nhiều năm để tạo ra các thiết kế chỉ CSS tạo ra các góc tròn và thả bóng. Ngoài ra, W3C đã hỗ trợ rất nhiều từ các trình duyệt phổ biến nhất.
Tôi chỉ có thể thấy những điều tốt đẹp cho tương lai phát triển web HTML5 / CSS3. Các nhà thiết kế front-end thường bị bỏ qua trong lĩnh vực ngày nay, nhưng họ phục vụ tầm quan trọng lớn như vậy đối với toàn bộ quá trình sáng tác. Cố gắng không ép mình vào bất kỳ 'nhãn' nào dựa trên các kỹ thuật bạn biết và thực hành hàng ngày. Chúng tôi cung cấp hướng dẫn cách bắt đầu cho mã hóa HTML5 / CSS3 cho người mới bắt đầu nếu bạn cảm thấy cần phải bắt kịp.
Bám sát các tiêu chuẩn mới này cũng sẽ giúp việc phát triển JavaScript và jQuery trở nên dễ dàng hơn nhiều. Các nhà phát triển đã xuất bản và chia sẻ mã dự án HTML5 / CSS3 của họ trực tuyến và nếu mọi thứ tiếp tục, chúng tôi chắc chắn sẽ nhận thấy rất nhiều điều này sẽ diễn ra vào năm tới.
5. Ruy băng và biểu ngữ
Mặc dù kỹ thuật thiết kế này không chính xác “Mới” nó không bao giờ thực sự phá vỡ dòng chính cho đến gần đây. Bạn có thể đã nhìn thấy các ví dụ về ruy băng góc, thanh điều hướng biểu ngữ và huy hiệu ruy băng nhỏ. Những xu hướng này có khả năng bùng nổ vì sự tích lũy lớn của các hướng dẫn chi tiết có thể tìm thấy tất cả thông qua Google.
Các nhà thiết kế web ngày nay có thẩm quyền hơn trong việc ra mắt blog riêng của họ để chia sẻ thông tin. Bây giờ các kỹ thuật đơn giản có thể dễ dàng được chuyển qua lại giữa các nhà thiết kế để nhân đôi các hiệu ứng phổ biến nhất. Thậm chí có những PSD miễn phí mà bạn có thể tải xuống để tiết kiệm cho mình công sức.
6. Chủ đề WordPress cao cấp
Bản phát hành cuối cùng của WordPress 3.0 bao gồm một loạt các tính năng được chờ đợi từ lâu như các loại bài đăng tùy chỉnh và hình ảnh bài viết độc đáo. Tuy nhiên, những thay đổi sâu sắc nhất mà tôi đã thấy là đến từ các cửa hàng phát triển WordPress chuyên về các chủ đề WP cao cấp.
Sau khi bạn mua một chủ đề như vậy, quá trình cài đặt tương tự như bất kỳ chủ đề nào khác. Tuy nhiên, giờ đây có thể bao gồm chức năng trình cắm tùy chỉnh, chủ đề con, menu quản trị mới và toàn bộ các tính năng khác ngay trong chủ đề! WooTheme, ElegantTheme và Rocket Themes là một vài thương hiệu nổi bật với tôi hơn tất cả những người còn lại. Chất lượng của chúng là hoàn hảo và tôi cảm thấy các nhà phát triển của họ vượt lên trên tất cả để tạo ra các mẫu tốt nhất và các menu quản trị trực quan nhất.
Đi vào năm 2012 tôi chỉ có thể tưởng tượng WordPress sẽ trở nên dễ sử dụng hơn nữa. Điều này có nghĩa là nhiều chủ đề chất lượng cao sẽ được phát hành và nhiều blog tuyệt vời hơn sẽ được tung ra.
7. Tạp chí trực tuyến
Nói về các chủ đề WordPress, chúng ta cũng nên đưa ra thành công nhanh chóng được thông qua của các tạp chí trực tuyến. Các trang web này không quá khác biệt so với bất kỳ blog WordPress chung nào ngoài cấu trúc chung và bố cục trang. Bạn có thể phát hiện ra những mags lớn hơn này bằng cách trình bày tuyệt đối trang chủ của họ và bộ sưu tập của các tác giả viết cho trang web.
Khi các tạp chí bắt đầu chuyển sang trực tuyến, chúng sẽ trở thành nguồn thu nhập cho nhiều nhà văn. Được cấp một chủ đề, chẳng hạn như 'thiết kế web' nhắm đến một phân khúc nhỏ hơn là, chơi game hoặc kinh tế. Nhưng thực tế là chúng ta đang thấy nhiều tạp chí thiết kế trực tuyến hơn in ấn sẽ cho thấy thế giới có thể hướng tới trong những năm tới.
8. Bóng dễ dàng thả
Là một khía cạnh của CSS3, giờ đây các nhà thiết kế dễ dàng thực hiện một bóng đổ ở bất cứ đâu trên trang. Văn bản hộp và các thành phần kiểu hộp đã được cung cấp các thuộc tính tương ứng để hiển thị các hiệu ứng bóng rõ ràng.
Cú pháp bóng văn bản rất dễ ghi nhớ và theo sau dưới dạng bóng hộp. Với hình ảnh bây giờ không cần thiết trong việc hiển thị các hiệu ứng này, các nhà phát triển web có thể tập trung vào việc mở rộng các ý tưởng cơ bản này hơn nữa.
9. Kiểu chữ năng động
Phông chữ là một phần lớn của hình cầu bao gồm truyền thống thiết kế web. Các phông chữ đáng chú ý nhất bao gồm Arial, Helvetica, Georgia và Trebuchet MS đã xuất hiện từ nhiều năm nay. Mặc dù chúng tiếp tục phục vụ mục đích sâu sắc trong các tiêu chuẩn web, có rất nhiều tùy chọn thay thế cho kiểu chữ trang web nâng cao.
Ví dụ, Typekit chỉ yêu cầu một vài dòng mã được đưa vào đầu tài liệu của bạn. Sau này, bạn có thể chỉ định tên phông chữ nào sẽ bao gồm và nối chúng vào CSS của bạn. Phần tốt nhất về kỹ thuật này là nó chủ yếu dựa vào JavaScript, vì vậy người dùng cuối không bắt buộc phải cài đặt phông chữ.
Một cách khác là Google Web Fonts hoạt động theo cách tương tự như Typekit. Tôi khuyên các nhà thiết kế quan tâm nên kiểm tra truy vấn phương tiện @ font-face của CSS3, vì bạn được sáng tạo hơn nhiều. Mã này có thể được sử dụng để nhập một .ttf hoặc là .không tập tin phông chữ từ máy chủ web của bạn và bao gồm nó như một phông chữ biểu định kiểu có thể sử dụng! Với rất nhiều hệ thống thay thế được sử dụng để xây dựng phông chữ động, tôi hy vọng năm 2012 sẽ có một sự đột phá về tài năng thiết kế và đổi mới trong lĩnh vực này.
10. Trình chiếu hình ảnh
Với sự phổ biến tiếp theo của jQuery, tôi đã phát hiện ra ngày càng nhiều trình chiếu hình ảnh được thả vào bố cục web. Phòng trưng bày là hoàn hảo để thể hiện một cái nhìn nhanh chóng về nội dung trang bên trong. Đây có thể là một tập hợp các mục danh mục đầu tư, hình ảnh, bài đăng trên blog với hình ảnh nổi bật, ảnh chụp màn hình demo, vv.
Khi bạn xem xét nhiều hình ảnh động trượt và mờ độc đáo, việc tạo một trình chiếu nhanh cho trang chủ của bạn chưa bao giờ dễ dàng hơn thế. Tôi tự tin rằng năm 2012 sẽ chứng kiến sự tăng trưởng trong các xu hướng này, và không chỉ giữa các nhà thiết kế. Các công ty phần mềm và ứng dụng web trực tuyến đã sử dụng trình chiếu làm hướng dẫn để hiển thị ảnh chụp màn hình và các tính năng độc đáo.
11. Hộp Popup phương thức
Tôi cảm thấy rằng các hộp phương thức vẫn còn khá mới đối với Internet khi chúng xuất hiện trong phần mềm máy tính để bàn và ứng dụng di động trong nhiều năm. Mục đích của cửa sổ phương thức là cung cấp nội dung hộp (như đăng ký người dùng hoặc đăng nhập) trên đầu trang hiện tại mà không tải lên trang mới.
Nhiều tập lệnh bộ sưu tập hình ảnh nguồn mở sử dụng một loại hiệu ứng hộp đèn trong đó nền mờ dần hơn hộp bật lên. Tôi thực sự thích tính năng này bất cứ khi nào tôi thấy nó, mặc dù nó vẫn chưa được nhiều người áp dụng. Và mặc dù các hộp modal rất gợi cảm và bóng bẩy, chúng cũng có thể rất khó mã hóa và hoạt động bình thường.
Để có ý tưởng cho các trang web của riêng bạn, hãy xem một số cộng đồng chia sẻ tin tức xã hội phổ biến hơn. Reddit và Digg là hai cái đầu tiên xuất hiện khi cả hai đều có các hộp phương thức đăng ký / đăng nhập với bố cục điển hình. Ngoài ra, các hiệu ứng UI cho Google+ tự hào có một số lượng đáng kể chức năng phương thức.
12. Danh sách truyền cảm hứng
Bộ sưu tập các mục danh sách đã xuất hiện từ những ngày đầu tiên của thiết kế web. Khi chúng tôi chuyển sang thế kỷ mới, các nhà thiết kế bắt đầu sử dụng các danh sách được sắp xếp theo thứ tự và HTML cho các menu điều hướng trong nhà. Nhưng ngày nay danh sách có thể và đang được sử dụng cho nhiều hơn nữa.
Trong hầu hết các chủ đề blog tôi thấy toàn bộ thanh bên được tải với danh sách! Chưa kể các nhà thiết kế đã tạo ra các kiểu CSS tuyệt vời cho danh sách trong các mục bài viết của họ. Chúng tôi đã đề cập đến các kiểu danh sách đầy cảm hứng trong một bài đăng khác vào đầu năm nay có thể giúp bạn hiểu rõ hơn về vấn đề này. Sắp tới 2012 tôi đang mong đợi một số ví dụ thực sự sáng tạo, có thể ngang bằng với bố cục tùy chỉnh của Flowapp cho các nhiệm vụ & to-dos.
13. Hình thu nhỏ hình ảnh được tạo
Trong vũ trụ web chúng ta có thể đồng ý rằng nội dung là vua. Nhưng hầu hết các nhà thiết kế cũng sẽ đồng ý rằng một trang văn bản trống trở nên nhàm chán thực sự nhanh chóng. Hình ảnh có thể thêm gia vị đó nếu bạn biết cách rắc chúng nhẹ nhàng. Một phương pháp như vậy là sử dụng hình thu nhỏ động để cung cấp bản xem trước cho mỗi trang hoặc bài viết.
Blog ngày nay đang tiếp tục áp dụng xu hướng hình ảnh nổi bật, vậy tại sao không áp dụng hình thu nhỏ được tạo vào chủ đề của bạn? Chúng thường thu hút sự chú ý của tôi về tiêu đề bài viết và giúp chia nhỏ một trang có đầy đủ các liên kết văn bản.
Như một ví dụ khác, Dribbble cung cấp toàn bộ danh sách các hình thu nhỏ cho mỗi lần chụp thiết kế. Trong cách bố trí theo kiểu hàng của bảng như vậy, thật dễ dàng để nhìn thoáng qua từng hình thu nhỏ và cuộn qua để tìm thấy những gì bạn đang tìm kiếm. Chiến thuật này đã được chứng minh để thu hút sự chú ý của toàn bộ cộng đồng thiết kế! Er, ít nhất là các thành viên của Dribbble tốt nhất. Tôi chỉ có thể mong đợi rằng năm 2012 sẽ chứng kiến sự phát huy hơn nữa của những ý tưởng này dựa trên những ví dụ như vậy từ quá khứ.
14. Biểu tượng quá khổ
Xu hướng độc đáo này bắt nguồn từ sự phổ biến của các thiết kế biểu tượng Mac OS X. Khi các lập trình viên bắt đầu tung ra các trang web cho các ứng dụng Mac của họ, tất cả chúng ta thường xuyên thấy các kích thước khổng lồ được thể hiện trong thương hiệu. Theo đó, xu hướng này cũng đã được chọn bởi các nhà phát triển iOS và giờ đây thoải mái nghỉ ngơi trong văn hóa thiết kế hiện đại.
Thật khó để dự đoán những xu hướng này sẽ công bằng như thế nào khi chúng ta chuyển sang năm 2012. Một mặt, các biểu tượng này có thể trở nên lộn xộn và chiếm nhiều không gian hơn mức cần thiết. Tuy nhiên, chúng ta thậm chí còn không đạt được sự thiếu hụt các ứng dụng và nhà thiết kế iOS / OSX vẫn đang tạo ra các thông số kỹ thuật biểu tượng pixel hoàn hảo. Chưa kể rằng các nhà thiết kế web hiện đang bao gồm các biểu tượng quá khổ trong bất kỳ thương hiệu trang nào! Đó là một cách hay để thu hút sự chú ý trực tiếp của khách truy cập và tạo tên cho công ty của bạn.
15. Siêu liên kết phóng đại
Liên kết neo chắc chắn nằm trong năm yếu tố quan trọng nhất của bất kỳ trang web nào. Những điều này rõ ràng đã đi một chặng đường dài kể từ những năm 1990 và xu hướng thiết kế phổ biến chỉ đang phát triển theo cấp số nhân. Có vẻ như chúng ta đang bước vào một kỷ nguyên mà thiết kế phóng đại được ưu tiên.
Kiểm tra một vài ví dụ liên kết từ Patterntap để xem có nhảy ra và bắt mắt không. Có rất nhiều ý tưởng đáng kinh ngạc cho thiết kế siêu liên kết, cả về hiệu ứng tiêu chuẩn và di chuột. CSS3 góc tròn, bóng văn bản và họ phông chữ tùy chỉnh thêm nhiều ý tưởng tuyệt vời hơn vào hỗn hợp! Một trong những ví dụ yêu thích của tôi là từ SimpleBits, sử dụng một hình ảnh động ngắn trên mỗi permalinks mục blog của họ.
Phần kết luận
Những ý tưởng này chỉ là một số trong những xu hướng phổ biến hơn mà tôi nhận thấy được ưu tiên trong suốt năm 2011. Thiết kế web tuyệt vời luôn tập trung và giữ ý định của người dùng là ưu tiên hàng đầu. Những triết lý này không có khả năng sẽ chuyển sang năm 2012, nhưng cách chúng ta xây dựng bố cục và dữ liệu hiện tại luôn thay đổi. Cho chúng tôi biết suy nghĩ hoặc câu hỏi của bạn trong khu vực thảo luận ý kiến.
