15 тенденций веб-дизайна в 2012 году
Пока что в 2011 году произошли удивительные изменения в дизайне и интернет-технологиях. Веб-разработка стала гораздо более гладкой темой для обучения, не говоря уже о бесчисленных библиотеках с открытым исходным кодом, полезных для оптимизации процесса. И все же кажется, что мировое дизайнерское сообщество далеко не бросает полотенце.
Я хочу представить 15 идей, которые очень быстро выросли за последний год. Эти тенденции охватывают технологии веб-дизайна и графики, которые, вероятно, будут играть большую роль в 2012 году. Вероятно, вы видели некоторые из них, представленные на многих ваших любимых сайтах в Интернете..
К счастью, методы реализации этих функций становятся все более понятными и намного более тонкими в коде..
1. Адаптивный дизайн интерфейса
Опыт среднего пользователя, возможно, является наиболее важным аспектом, который следует учитывать при разработке веб-сайта. Вы хотите, чтобы элементы страницы быстро реагировали на ввод с клавиатуры / мыши и вели себя как ожидалось. Некоторые примеры могут включать всплывающие меню, раскрывающиеся окна и всплывающие окна..
Включая известные библиотеки JavaScript, такие как MooTools и jQuery, стало намного проще анимировать эти функции и даже больше. Большинство современных браузеров поддерживают этот код и даже изящно ухудшаются, когда сценарии недоступны. В конечном итоге вы хотите, чтобы пользователь чувствовал себя комфортно при общении с любым элементом дизайна.
Точно так же вы должны принять во внимание ввод данных и проверку данных. На многих страницах регистрации вы будете получать небольшие ответы, работая с каждой областью ввода. Вы можете автоматизировать проверку действительных адресов электронной почты, дублирующих имен пользователей и даже перепроверить вводимые пароли. Это сэкономит время пользователя и обеспечит удобное руководство на протяжении всего процесса регистрации..
2. Мобильные устройства с сенсорным экраном
В последние пару лет стало очевидным, что смартфоны получают поддержку даже среди не-технологических энтузиастов. Но только с 2011 года мы увидели взрыв мобильных сайтов и мобильных шаблонов.
Популярность устройств iPhone и iPad, а также телефонов на базе Android означает, что посетители будут полностью взаимодействовать с вашими страницами с помощью сенсорных команд. Это должно стать реалистичным соображением с каждым макетом дизайна. Тенденции в мобильном веб-дизайне показали, что создание совершенно отдельной мобильной темы часто дает наилучшие результаты. Таким образом, вы можете сохранить весь динамический контент в своем основном макете, одновременно предоставляя уменьшенную версию сайта для мобильных пользователей..
3. Тонны халявы!
Кто может сказать, что они, честно говоря, не пользуются бесплатными загрузками? Веб-дизайнеры уже несколько лет делятся своим контентом в Интернете, но лишь недавно это стало очень популярной тенденцией среди цифровых художников. Было несколько сообществ, созданных специально для того, чтобы предлагать бесплатные загрузки для веб-дизайнеров и графических дизайнеров..
Два из моих личных фаворитов - Download PSD и Designmoo, которые часто обновляются высококлассными участниками. Кроме того, в архиве бесплатных подарков Хонкиат есть много сладких вкусностей. В любую эпоху до этого никогда не было так просто скачать бесплатные веб-интерфейсы, макеты, логотипы, баннеры и практически любой другой тип PSD / AI-файла.!
Некоторые Аккуратные Загрузки
Ниже приведено лишь несколько интересных бесплатных предложений, которые можно было проверить ранее в 2011 году. И если вы считаете, что в этом списке есть отличные файлы, просто подождите, пока не наступит 2012 год.!
Mini Web UI Set
Dark Mini Музыкальный проигрыватель
Скользящие метки
Темный фото слайдер
Окна поиска
Войти в / Форма входа
Логин Модальная Коробка
Чистая форма входа
Таблицы цен
Минимальные бары загрузки
Приложение всплывающее окно
4. Стандарты HTML5 и CSS3
Оба этих новых архетипа дизайна набирали популярность в течение всего 2011 года. Семантические веб-дизайнеры годами ждали, когда появятся только CSS-проекты, отображающие закругленные углы и тени. Кроме того, 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 для дизайнеров теперь проще, чем когда-либо, реализовать тень в любом месте страницы. Тексту блока и элементам стиля блока были присвоены соответствующие свойства для рендеринга четких эффектов тени.
Синтаксис text-shadow очень легко запомнить и следует как box-shadow. Теперь, когда изображения не нужны для визуализации этих эффектов, веб-разработчики могут сосредоточиться на дальнейшем расширении этих основных идей..
9. Динамическая типография
Шрифты являются большой частью сферы, охватывающей традиции веб-дизайна. Самые известные шрифты, включая Arial, Helvetica, Georgia и Trebuchet MS, существуют уже много лет. Хотя они продолжают служить глубокой цели в веб-стандартах, существует множество альтернативных вариантов для расширенной типографии веб-страниц..
Например, Typekit требует, чтобы в заголовок документа была включена только пара строк кода. После этого вы можете указать, какие имена шрифтов включить и добавить их в свой CSS. Лучшая часть этого метода заключается в том, что он опирается главным образом на JavaScript, поэтому конечному пользователю не требуется устанавливать шрифты..
Другой альтернативой является Google Web Fonts, который ведет себя аналогично Typekit. Я рекомендую заинтересованным дизайнерам ознакомиться с медиа-запросом CSS3 @ font-face, так как вам предоставляется гораздо больше творчества. Этот код может быть использован для импорта .TTF или же .OTF файл шрифта с вашего веб-сервера и включите его в качестве используемого шрифта таблицы стилей! С таким количеством альтернативных систем, используемых для создания динамических шрифтов, я ожидаю, что в 2012 году произойдет всплеск инноваций и талантов в этой области..
10. Галерея изображений Слайд-шоу
С последующей популярностью jQuery я заметил, что все больше и больше слайд-шоу изображений добавляются в веб-макеты. Галереи идеально подходят для демонстрации быстрого просмотра содержимого внутренней страницы. Это может быть набор записей портфолио, фотографий, сообщений в блоге с изображениями, демонстрационных скриншотов и т. Д..
Когда вы рассматриваете множество уникальных анимаций скольжения и затухания, никогда не было так просто создать быстрое слайд-шоу для вашей домашней страницы. Я уверен, что 2012 год увидит подъем в этих тенденциях, и не только между дизайнерами. Онлайн-приложения и компании-разработчики программного обеспечения используют слайд-шоу в качестве руководств для отображения скриншотов и уникальных функций..
11. Модальные всплывающие окна
Я чувствую, что модальные коробки все еще довольно новы для Интернета, учитывая, что они появляются в настольном программном обеспечении и мобильных приложениях в течение многих лет. Цель модального окна - предложить содержимое коробки (например, регистрацию пользователя или логин) поверх текущей страницы без загрузки на новую..
Многие из сценариев галереи изображений с открытым исходным кодом используют тип эффекта лайтбокса, когда фон становится темнее, чем всплывающее окно. Мне действительно нравится эта функция, когда я ее вижу, хотя многие еще не приняли ее. И хотя модальные рамки сексуальны и изящны, их также может быть очень сложно кодировать и правильно работать.
Чтобы получить идеи для собственных веб-сайтов, ознакомьтесь с некоторыми из наиболее популярных социальных сетей. Reddit и Digg - первые два, которые приходят на ум, так как оба имеют модальные поля регистрации / входа с типичным расположением. Кроме того, эффекты пользовательского интерфейса для Google+ могут похвастаться значительным количеством модальных функций..
12. Вдохновляющие списки
Коллекции элементов списка появились с самых первых дней веб-дизайна. Когда мы перешли в новый век, дизайнеры начали использовать упорядоченные и неупорядоченные списки HTML для размещения навигационных меню. Но в настоящее время списки могут и используются для гораздо большего.
В большинстве тем блога я считаю, что вся боковая панель загружена списками! Не говоря уже о дизайнерах, которые создали потрясающие стили CSS для списков в своих статьях. Мы рассмотрели вдохновляющие стили списков в другом посте в начале этого года, который может дать вам более глубокое понимание этого вопроса. Заглядывая в будущее, я ожидаю несколько действительно креативных примеров, возможно, наравне с пользовательским макетом Flowapp для задач и задач.
13. Сгенерированные миниатюры изображений
В веб-вселенной мы можем согласиться с тем, что контент - это король. Но большинство дизайнеров также согласятся, что страница с пустым текстом быстро становится скучной. Изображения могут добавить эту дополнительную специю, если вы знаете, как аккуратно их посыпать. Одним из таких методов является использование динамических миниатюр для предварительного просмотра каждой страницы или статьи..
Сегодня в блогах по-прежнему используется тенденция избранных изображений, так почему бы не применить сгенерированные миниатюры и к вашей теме? Они часто привлекают мое внимание к заголовку статьи и помогают разбить страницу, полную текстовых ссылок.
В качестве другого примера Dribbble предоставляет полный список миниатюр для каждого снимка дизайна. В такой раскладке в виде строки таблицы очень просто мельком увидеть каждый эскиз и прокрутить, чтобы найти то, что вы ищете. Эта тактика, как оказалось, привлекла внимание всего сообщества дизайнеров! Ну, по крайней мере, члены Dribbble в лучшем случае. Я могу только ожидать, что в 2012 году эти идеи будут основываться на таких примерах из прошлого..
14. Негабаритные иконки
Эта уникальная тенденция проистекает из популярности дизайна иконок Mac OS X. Когда программисты начали запускать сайты для своих приложений Mac, мы слишком часто видели огромные размеры, представленные в брендинге. Соответственно, эта тенденция также была подхвачена разработчиками iOS и теперь комфортно опирается на культуру современного дизайна..
Трудно предсказать, насколько эти тенденции будут справедливыми, когда мы перейдем к 2012 году. С одной стороны, эти значки могут быть неуклюжими и занимать больше места, чем необходимо. Тем не менее, мы даже не близки к тому, чтобы решить проблему нехватки приложений для iOS / OSX, и дизайнеры по-прежнему выпускают идеальные для пикселов иконки. Не говоря уже о том, что веб-дизайнеры теперь включают негабаритные значки практически в любой брендинг страницы! Это хороший способ привлечь внимание вашего посетителя и создать название для вашей компании..
15. Преувеличенные гиперссылки
Якорные ссылки, безусловно, входят в пятерку самых важных элементов любого веб-сайта. Очевидно, что они прошли долгий путь с 1990-х годов, и популярные тенденции дизайна только росли в геометрической прогрессии. Похоже, мы вступаем в эпоху, когда преувеличенный дизайн имеет приоритет.
Посмотрите на несколько примеров ссылок из Patterntap, чтобы увидеть, выпрыгивают ли они из рук в руки. Существует так много невероятных идей для дизайна гиперссылок, как в стандартных, так и в парящих эффектах. Скругленные углы CSS3, тени для текста и семейства пользовательских шрифтов добавляют еще больше отличных идей в микс! Один из моих любимых примеров от SimpleBits, который использует короткую динамическую анимацию на каждой своей постоянной записи в блоге..
Заключение
Эти идеи - только некоторые из наиболее популярных тенденций, которые я заметил, получая приоритет в течение 2011 года. Отличный веб-дизайн всегда сосредоточен на том, чтобы намерения пользователей оставались на первом месте. Маловероятно, что в 2012 году эти принципы будут другими, но то, как мы строим макеты и предоставляемые данные, постоянно меняется. Дайте нам знать ваши мысли или вопросы в области обсуждения комментариев.
