15 Тенденції веб-дизайну, які слід спостерігати в 2012 році
Поки що 2011 рік викликав дивовижні зміни в дизайні та інтернет-технологіях. Веб-розробка стала набагато більш гладкою темою для переходу до навчання, не кажучи вже про незліченні бібліотеки з відкритим кодом, корисні для оптимізації процесу. І все-таки здається, що глобальна спільнота дизайну далека від того, щоб кидати в рушник.
Я хочу представити 15 ідей, які дуже швидко зросли за останній рік. Ці тенденції охоплюють методи веб-дизайну та графічного дизайну, які, ймовірно, відіграватимуть велику роль у 2012 році. Ви, напевно, бачили деякі з них, представлених у багатьох ваших улюблених сайтах в Інтернеті..
На щастя, методи для реалізації цих функцій стають легше зрозуміти і набагато тонше в коді.
1. Адаптивний дизайн інтерфейсу
Досвід середнього користувача є, мабуть, найважливішим аспектом, який необхідно враховувати при розробці веб-сайту. Ви хочете, щоб елементи сторінки швидко реагували на введення з клавіатури / миші і поводилися, як і очікувалося. Деякі приклади можуть включати в себе бічні пункти, що випадають, розкривні списки та спливаючі вікна.
Включаючи відомі бібліотеки JavaScript, такі як MooTools і jQuery, стало набагато простіше анімувати ці функції і навіть більше. Більшість сучасних браузерів підтримують цей код і навіть граціозно деградують, коли скрипти не доступні. Зрештою, ви хочете, щоб користувач відчував себе комфортно під час взаємодії з будь-яким місцем дизайну.
Аналогічним чином слід враховувати введення даних і перевірку даних. На багатьох сторінках реєстрації ви отримаєте невеликі відповіді під час роботи через кожну область вводу. Можна автоматизувати перевірку дійсних адрес електронної пошти, дублювати імена користувачів і навіть перевіряти введення паролів. Це дозволить заощадити час на кінці користувача та надає зручне керівництво протягом усього процесу реєстрації.
2. Сенсорні мобільні пристрої
За останні пару років стало очевидним, що смартфони отримують підтримку навіть серед нетехнологічних ентузіастів. Але тільки з 2011 року ми бачили вибух мобільних сайтів і шаблонів для мобільних пристроїв.
Популярність пристроїв iPhone та iPad, а також телефонів з Android-пристроями означає, що відвідувачі будуть повністю взаємодіяти з вашими сторінками за допомогою сенсорних команд. Це має стати реалістичним роздумом з кожним макетом дизайну. Тенденції в мобільному веб-дизайні показали, що побудова повністю окремої мобільної теми часто дає найкращі результати. Таким чином, ви можете зберегти весь динамічний вміст на вашому головному макеті, показуючи зменшену версію сайту мобільним користувачам.
3. Тонни халяви!
Хто може сказати, що вони чесно не користуються безкоштовними завантаженнями? Веб-дизайнери ділилися своїм вмістом в Інтернеті роками, але лише нещодавно це стало дуже популярною тенденцією серед цифрових художників. Там було кілька громад, побудованих спеціально навколо пропонують безкоштовні завантаження для веб-і графічних дизайнерів.
Двома моїми особистими фаворитами є завантаження PSD і Designmoo, які обидва часто оновлюються високоякісними членами. Крім того, в архіві Hongkiat Freebies є багато солодких ласощів. У будь-яку епоху, перш ніж вона буквально ніколи не була такою легко завантажити безкоштовні веб-інтерфейси, макети, логотипи, банери, і практично будь-який інший тип файлу PSD / AI!
Деякі цікаві завантаження
Нижче наведені лише кілька цікавих безкоштовних викликів, які можна перевірити раніше 2011 року. І якщо ви вважаєте, що цей список містить великі файли, просто зачекайте, поки 2012 не буде!
Набір міні веб-інтерфейс
Темний міні-музичний програвач
Розсувні теги
Повзунок темної фотографії
Поля пошуку
Вхід / Форма входу
Увійти Модальна коробка
Чиста форма входу
Таблиці ціноутворення
Мінімальні бари завантаження
Спливаюче вікно вкладення
4. Стандарти HTML5 & CSS3
Обидва ці нові архетипи дизайну накопичили постійно зростаючий наступний період протягом усього 2011 року. Крім того, W3C досягла значних успіхів у підтримці найпопулярніших браузерів.
Я можу тільки побачити хороші речі для майбутнього веб-розробки HTML5 / CSS3. Фронт-енд-дизайнери часто випускаються з поля зору в сучасній області, але вони мають таке важливе значення для всього процесу складання. Намагайтеся не втиснутись у будь-яку «етикетку», що ґрунтується на методах, які ви знаєте і щодня практикуєте. Ми пропонуємо посібник для початківців для кодування HTML5 / CSS3, якщо ви відчуваєте потребу в цьому.
Дотримання цих нових стандартів також значно полегшить розробку в JavaScript і jQuery. Розробники вже публікували та обмінювалися своїм кодом проекту HTML5 / CSS3 в Інтернеті, і якщо все продовжиться, ми обов'язково помітимо набагато більше цього в наступному році.
5. Стрічки і банери
Хоча цей метод проектування не зовсім “новий” вона ніколи не пробилася через мейнстрім до недавнього часу. Ви, напевно, бачили приклади стрічкових стрічок, барів навігаційних банерів і малих значків на стрічці. Ці тенденції, ймовірно, вибухнули через масове накопичення детальних посібників, які можна знайти через Google.
Веб-дизайнери в ці дні більш компетентні в запуску власних блогів для обміну інформацією. Тепер прості методи можуть бути легко передані між дизайнерами, щоб дублювати найпопулярніші ефекти. Є навіть безкоштовні PSD-файли, які можна завантажити, щоб заощадити свої зусилля.
6. Преміальні теми WordPress
Остаточний випуск WordPress 3.0 включав безліч довгоочікуваних функцій, таких як користувальницькі типи повідомлень і унікальні зображення статей. Проте найбільш глибокі зміни, які я бачив, надходять з магазинів розробки WordPress, які спеціалізуються на темах преміум-WP.
Після придбання такої теми процес інсталяції подібний до будь-якої іншої. Проте тепер можна включити користувальницькі функціональні можливості плагінів, дитячі теми, нові адміністративні меню та цілу низку інших функцій прямо з теми! WooThemes, ElegantThemes та Rocket Themes - це декілька брендів, які виділяються мені над усіма іншими. Їхня якість бездоганна, і я відчуваю, що їхні розробники йдуть вище і далі, щоб створити найкращі шаблони та найбільш інтуїтивні меню адміністратора.
У 2012 році я можу уявити собі, що WordPress стане ще простішим у використанні. Це означає, що буде випущено більш якісні теми, а також буде запущено більше дивовижних блогів.
7. Інтернет-журнали
Говорячи про теми WordPress, ми також повинні підняти успіх онлайн-журналів. Ці веб-сайти не настільки відрізняються від будь-якого загального блогу WordPress, окрім загальної структури та макета сторінки. Ви можете помітити ці великі маги на явну презентацію своєї домашньої сторінки, а також колекцію авторів, що пишуть для сайту.
Як журнали починають рухатися онлайн, вони стануть джерелом доходу для багатьох авторів. Тема на зразок "веб-дизайн" спрямована на меншу нішу, ніж, скажімо, на ігри або економіку. Але той факт, що ми бачимо більше журналів дизайну в Інтернеті, ніж друк, показує, де світ може рухатися в найближчі роки.
8. Легкі тіні
Як аспект CSS3 тепер простіше, ніж коли-небудь, дизайнери впровадити тінь в будь-якому місці сторінки. Текстові вікна та елементи стилю коробки отримали відповідні властивості для відображення чітких тіньових ефектів.
Синтаксис текстової тіні дуже легко запам'ятовується і слідує за текстом box-shadow. Зі зображеннями, які зараз не потрібні для відображення цих ефектів, веб-розробники можуть зосередитися на подальшому розширенні цих основних ідей.
9. Динамічна типографія
Шрифти - це велика частина сфери, що охоплює традиції веб-дизайну. Найбільш помітні шрифти, зокрема Arial, Helvetica, Грузія і Требушет, існують вже багато років. Хоча вони продовжують служити глибокої мети в веб-стандартах, є багато альтернативних варіантів для розширеної типографіки веб-сторінок.
Наприклад, Typekit потребує лише декількох рядків коду, які потрібно включити до головки документа. Після цього ви можете вказати, які назви шрифтів слід включати і додавати їх у ваш CSS. Найкраща частина цього методу полягає в тому, що він спирається в основному на JavaScript, тому кінцевому користувачеві не потрібно встановлювати шрифти.
Іншою альтернативою є веб-шрифти Google, які ведуть себе подібно до Typekit. Я рекомендую зацікавленим дизайнерам перевірити медіа-запит CSS3 @ font-face, оскільки вам надається набагато більше творчості. Цей код можна використовувати для імпортування .ttf або .otf файл шрифту з вашого веб-сервера і включіть його як шрифт для використання стилів! З такою кількістю альтернативних систем, які використовуються для створення динамічних шрифтів, я очікую, що в 2012 році в цій галузі відбудеться інноваційний та дизайнерський талант.
10. Галерея зображень Слайд-шоу
З подальшою популярністю jQuery я помітив все більше і більше слайд-шоу зображень впасти в веб-макети. Галереї ідеально підходять для демонстрації швидкого уявлення про вміст внутрішньої сторінки. Це може бути набір портфельних записів, фотографій, повідомлень у блогах з обраними зображеннями, демонстраційними скріншотами тощо.
Коли ви розглядаєте багато унікальних анімацій, що ковзають і вицвітають, ніколи не було легше побудувати швидке слайд-шоу для домашньої сторінки. Я впевнений, що в 2012 році в цих тенденціях буде спостерігатися стрімке зростання, а не тільки між дизайнерами. Веб-програми та компанії, що використовують Інтернет, використовують слайд-шоу як керовані навчальні посібники для показу скріншотів та унікальних функцій.
11. Модальні спливаючі вікна
Я відчуваю, що модальні коробки все ще є досить новими для Інтернету, враховуючи те, що вони з'являються в настільних програмних засобах і мобільних додатках протягом багатьох років. Мета модального вікна полягає в тому, щоб запропонувати вміст вікна (наприклад, реєстрацію користувача або логін) у верхній частині поточної сторінки, не завантажуючи новий.
Багато скриптів галереї зображень з відкритим кодом використовують тип ефекту lightbox, де фон темніше, ніж спливаюче вікно. Мені дуже подобається ця функція, коли я її бачу, хоча вона ще не прийнята багатьма. І хоча модальні коробки сексуальні і гладкі, вони також можуть бути дуже важко кодувати і працювати належним чином.
Щоб отримати ідеї для власних веб-сайтів, ознайомтеся з деякими з найбільш популярних спільнот спільного використання соціальних новин. Reddit і Digg - перші два, які приходять на розум, оскільки обидва вони мають реєстраційні / вхідні модальні коробки з типовою розкладкою. Крім того, ефекти інтерфейсу користувача для Google+ мають значну кількість модальних функцій.
12. Надихаючі списки
Колекції елементів списку з'явилися з самого початку веб-дизайну. Коли ми переїхали в нове століття, дизайнери почали використовувати впорядковані HTML і невпорядковані списки для навігаційних меню. Але нині списки можуть і використовуються набагато більше.
У більшості тем блогу я знаходжу всю бічну панель з списками! Не кажучи вже про дизайнерів, які створили дивовижні стилі CSS для списків у своїх статтях. Ми охопили надихаючі стилі списків на іншому посту на початку цього року, що може дати вам деяке розуміння цього питання. Сподіваючись на 2012 рік, я очікую деяких дійсно креативних прикладів, можливо, нарівні з користувальницьким макетом Flowapp для завдань та завдань.
13. Згенеровані ескізи зображень
У веб-всесвіті ми можемо погодитися, що зміст є королем. Але більшість дизайнерів також погодяться, що сторінка порожнього тексту швидко стає нудною. Зображення можуть додавати додаткові спеції, якщо ви знаєте, як посипати їх м'яко. Одним з таких методів є використання динамічних ескізів для надання попереднього перегляду для кожної сторінки або статті.
Блоги сьогодні продовжують застосовувати тенденцію відображення зображень, так чому б не застосувати створені ескізи також до теми? Вони часто привертають мою увагу до заголовка статті та допомагають розбити сторінку, повну текстових посилань.
В якості іншого прикладу Dribbble надає цілі галереї перелік мініатюр для кожного дизайнерського знімка. У такому макеті у вигляді рядка в таблицях дуже легко помітити кожну мініатюру і прокрутити, щоб знайти те, що ви шукаєте. Ця тактика довела, що привертає увагу всієї дизайнерської спільноти! Er, принаймні, члени Dribbble в кращому випадку. Я можу лише очікувати, що в 2012 році ці ідеї продовжуватимуться на таких прикладах з минулого.
14. Негабаритні іконки
Ця унікальна напівпохідна тенденція походить від популярності іконок Mac OS X. Як програмісти почали запускати веб-сайти для своїх додатків Mac, ми дуже часто бачили величезні розміри, представлені в брендінгу. Відповідно ця тенденція також була підібрана через розробників iOS і тепер зручно лежить в сучасній культурі дизайну.
Важко передбачити, як ці тенденції будуть чесними, коли ми перейдемо до 2012 року. З одного боку, ці ікони можуть бути незграбними і займати більше місця, ніж потрібно. Тим не менш, ми навіть не близькі до брак недоліків IOS / OSX додатків, і дизайнери досі випинають піксельні ідеальні характеристики. Не кажучи вже про те, що веб-дизайнери тепер включають великі піктограми в межах будь-якої сторінки брендингу! Це хороший спосіб знайти пряму увагу відвідувача і створити назву для своєї компанії.
15. Перебільшені гіперпосилання
Якірні посилання, безумовно, входять до п'ятірки найбільш важливих елементів будь-якого веб-сайту. Вони, очевидно, пройшли довгий шлях з 1990-х років і популярні тенденції дизайну тільки зростали в геометричній прогресії. Схоже, ми рухаємося в епоху, коли перебільшення має перевагу.
Перевірте декілька прикладів посилання з Patterntap щоб побачити якщо будь-який стрибок та ловлять ваше око. Є дуже багато неймовірних ідей для дизайну гіперпосилання, як у стандартному, так і в ефекті наведення. Закруглені кути CSS3, тіні тексту та користувацькі сім'ї шрифтів додають ще більше чудових ідей у мікс! Один з моїх улюблених прикладів від SimpleBits, який використовує коротку динамічну анімацію на кожній своїй статі блогу.
Висновок
Ці ідеї є лише деякими з найбільш популярних тенденцій, які я помітила, отримуючи пріоритет протягом 2011 року. Малоймовірно, що ці філософії відрізнятимуться від 2012 року, але те, як ми будуємо макети і дані, завжди змінюються. Дайте нам знати ваші думки або питання в області обговорення коментарів.
