Кто собирается отдыхать в горы? Эта подборка для вас, а также для тех, кто не собирается но все равно остается неравнодушен к зимним видам спорта и конечно к веб-дизайну. Мы собрали сайты, посвященные зимним видам спорта. Многие из них украшены снежными вершинами, некоторые выполнены в ином стиле, однако все они интересные и достойны внимания. Вы найдете ресурсы посвященные хоккею, лыжам, сноуборду и многое другое.
10 трендов в веб-дизайне на 2015 год
Праздники закончились, а значит, пришла пора взбодриться и подумать про планы на будущее, грядущие проекты и перспективы. Мы в Wix всегда, сколько себя помним, ждем нового года с волнением и любопытством. Впереди — 2015-й, и он наверняка принесет немало интересного в сферу веб-дизайна.
Разумеется, мы не можем предсказать все, что случится, но кое-какие догадки у нас имеются. Вы же помните, что Wix не только удобная, но и современная платформа, поэтому мы внимательно следим за всем, что происходит, и знаем, куда дует ветер перемен.
Пристегните ремни, дорогие друзья, путешествие в будущее начинается! В этом году нас ждут очень любопытные тренды:
Материальный дизайн
Разновидность «плоского» дизайна, придуманная компанией Google. В основе идеи лежат традиционные техники дизайна и реальные физические явления, адаптированные под веб. В результате получаются многослойные интерфейсы, способные передавать особенности материалов, освещения и имитировать движения из реального мира. Пример того, как это выглядит, можно посмотреть по ссылке.
Анимация
В течение нескольких лет веб-дизайнеры убеждали онлайн-отрасль избавиться от анимации раз и навсегда, а сейчас она вдруг резко вошла в моду. Что же изменилось? Во-первых, анимационные эффекты стали осмысленными и аккуратными, и дизайнеры поняли, как ими нужно пользоваться. Во-вторых, сейчас эти эффекты делают акцент на движении, переходах и неназойливых подсказках, которые обозначают какое-то действие. Вот здесь можно почитать о том, как добавить анимацию на Wix-сайт.
Призрачные кнопки
Забудьте о ярких кнопках, призывающих к действию. Сейчас в моду входят простые и прозрачные элементы, отделенные от фона тонкой рамкой. Они, как правило, больше, чем стандартные кнопки и находятся на самом заметном месте страницы. Скромный внешний вид вовсе не означает, что такие кнопки никто не замечает и не нажимает, наоборот, людям очень нравится их изящная простота и уместность. У нас, кстати, есть готовый шаблон как раз с такими элементами (а на сайте Urban Cup этот тренд уже используется во всю).
Сторителлинг
Сторителлинг в веб-дизайне означает, что сайт должен рассказывать посетителям историю — не в буквальном смысле, конечно, а через ощущения, которые возникают у человека в момент просмотра. Для этого можно использовать связанные по смыслу картинки и тексты или интерактивный скроллинг, чтобы читатель был не просто зрителем, но и участником. Существует масса способов рассказать историю при помощи дизайна, и мы надеемся, что в 2015 году этот тренд станет еще популярнее. Отличный пример сторителлинга можно увидеть на этом Wix-сайте.
Карточный дизайн
Более гибкая и демократичная версия так называемого «плиточного дизайна», о котором мир впервые узнал в 2010 году благодаря сервису Pinterest. Карточки сейчас используются в качестве отправной точки для движения по сайту: это анонс того материала, который откроется при клике. В наступившем году карточный дизайн будет развиваться дальше, появятся новые стили и интерактивные опции. Если вы хотите сделать такой сайт, то рекомендуем взять за основу этот шаблон.
Видео в качестве фона
Красивые видео, не ограниченные рамкой видеоплеера, классно смотрятся и вытесняют традиционные фоновые изображения. И неудивительно — это свежо, красиво, с видео можно придумать что-нибудь новенькое и оно хорошо сочетается с идеей сторителлинга, о который говорится выше. Такой фон определяет концепцию всего сайта, оживляет его и создает динамику. Посмотрите сайт Zenit и оцените, насколько это красиво.
Скроллинг вместо кликов
Хороший пример того, как мобильные интерфейсы повлияли на веб-дизайн. Распространенность тач-устройств изменила способ взаимодействия со страницами: прокрутка теперь действие привычное, а «кликанье» — менее интуитивный и естественный способ навигации. Сейчас принято размещать контент на отдельной вертикальной странице и делить его не на разделы, а на «экраны». Сайт Madsschou, сделанный на Wix, отлично эту мысль иллюстрирует.
Микровзаимодействия
На веб-дизайн в этом году повлияют новые способы заинтересовывать посетителей сайтов. Логика такая: каждый раз, когда вы просите человека выполнить какое-то действие, рождается взаимодействие. Переход в сторону микровзаимодействий — это попытка создать как можно больше поводов для каких-то небольших действий. Классические примеры — это окошко для e-mail-подписки или фича, с помощью которой можно ставить оценки. Появится ли что-то новое в 2015 году? Готовы спорить, что да.
Рисунки от руки
Иллюстрации всегда были важным элементом веб-дизайна, но сейчас мы наблюдаем, что предпочтение отдается изображениям, словно нарисованным от руки. Нет, они не выглядят любительскими, а подчеркивают индивидуальность и привносят что-то авторское — то, чего так не хватает «выглаженным» работам профессиональных иллюстраторов. Наши пользователи Джо и Лиза поняли это и украсили свой сайт такими рисунками.
Спрятанные меню
Еще один пример того, как мобильные устройства изменили мир веб-дизайна. На экранах смартфонов и планшетов, как мы знаем, не так много места, а навигационное меню спрятано за иконкой в углу экрана. Дизайнеры попробовали сделать то же самое на большом экране и увидели в этом эстетический и практический смысл. Меню не видно до тех пор, пока в нем нет надобности, а когда есть, то его легко активировать один кликом мышки или просто наведением курсора.
7 трендов в веб-дизайне на 2015 год

Текст в веб дизайне очень сильно отличается от печатного, и в 2015 году мы наконец-то полностью избавимся от старомодных взглядов, которые делали текст очень мелким и сжатым на многих сайтах.
В этом нет ничего нового, так как этот концепт обсуждался еще с 2006 года, но дизайнерское общество очень долго и медленно приспосабливалось и привыкало к нему. Очень сложно отпустить принципы, которыми руководствовался годами.
Вот три главных аспекта, которые влияют на читабельность текста в веб дизайне:
- Размер шрифта
- Ширина столбцов
- Высота строки
Исследования не устают повторять, что больший размер шрифта способствует более удобному чтению в вебе. Дизайнеры уже начали внедрять отзывчивую типографику наряду с отзывчивыми изображениями и интерфейсом. Очень важно, чтобы текст всегда выглядел хорошо, вне зависимости от платформы.
2. Никакого веб-кодинга
В процессе веб-разработки всегда участвовало несколько человек: дизайнер создавал внешний вид и ощущения, а потом кодер брался за работу, чтобы превратить разработку в реальность. Этот процесс изменяется и инструменты для веб-дизайна становятся умнее, лучше и амбициознее.
Сегодня дизайнеры могут создавать сайт даже не притрагиваясь к коду, используя все преимущества сильного графического дизайна и чистого кода. Это переворачивает все с ног на голову и понижает барьер для тех дизайнеров, целью которых является создавать красивые и функциональные сайты для своих клиентов.
Но из-за того, что дизайнеры фокусируются на внешнем виде сайта, доработки алгоритмов и шлифовка кода все же имеют место быть. Так что здесь всегда будет место для веб-кодеров, правда доля их работы будет значительно меньше, чем было раньше.
3. Эволюция отзывчивого дизайна
Всего несколько лет назад создать отзывчивый сайт означало просто сделать его удобным для просмотра на компьютерах, планшетах и смартфонах. С «умными часами», телевизорами и огромным количеством технических новинок для дома значение «отзывчивого дизайна» начинает подразумевать все больше нюансов.
Так как у каждой платформы есть свои требования, главной задачей является сделать так, чтобы контент отображался корректно на любом устройстве. И если структура сайта для смартфона и планшета будет практически одинакова, то для «умных часов» она не подойдет. То же самое и со смарт ТВ, для которых не подойдет структура, предназначенная для ПК.
4. Плоский дизайн покорит каждый пиксель
Пока некоторые спорят о проблемах плоского дизайна в сфере пользовательского интерфейса, остальные единогласно называют его своей любимой техникой в веб-дизайне.
Это во многом зависит от того, как мы воспринимаем контент, и как воспринимают его девайсы. Плоский дизайн сам по себе ведет к минималистичными принципам, что в свою очередь приводит к чистым, легким и сфокусированным на контенте сайтам.
Плоский дизайн хорош не только из-за своих эстетических преимуществ. Он очень практичен и позволяет пользователям взаимодействовать с контентом, не отвлекаясь на сторонние факторы.
5. Больше = лучше для изображений
Не только текст увеличивается, но и изображения!
Было очень много важных ограничений, которые нужно было держать в голове из-за ограниченной ширины сайта. Но это становится все меньшей проблемой с течением времени, и в результате большие изображения волной накрыли интернет.
В 2015 изображения займут центральную позицию. Очаровательные техники будут требовать соответствующих изменений размеров, выделяя доминирующие цвета для фона и оптимизируя изображения для более быстрой загрузки.
Вдобавок главным трендом в 2015 году будет использование изображений вместо фона, а текст будет «плавать» на его поверхности без ущерба удобству.
6. Обновленные анимации скроллинга, параллакс-эффект и микроинтеграции
Наверное, самый впечатляющий тренд — это параллакс-скроллинг.
Мы видим его повсюду и результат говорит сам за себя — вовлечение на сайте с параллакс-скроллингом может увеличиться до 70%! Использование скроллинга вместо кликов, как технику навигации, является отличным решением, которое требует меньшего времени для загрузки, а также позволяет сделать плавные переходы от точки к точке, избежав раздражающих загрузок. Информация продолжает просто плыть.
В 2015 мы можем ожидать огромное количество веб-дизайнеров, использующих параллакс-эффект в своих работах.
7. Рассвет веб-графики
Как специалисты в визуальной сфере, мы стараемся сделать информацию проще для усваивания, что привело к появлению и популяризации инфографики. Она позволяет передавать большие количества информации, удерживая при этом внимание пользователя.
И на основе этого появился новый тренд — веб-графика. Как и инфографика, веб-графика конвертирует большое количество информации, но кроме этого еще и содержит элементы, с помощью которых пользователь может взаимодействовать с информацией. Это более визуально привлекательно, чем инфографика, и удерживает больше внимания.
В 2015 году веб-графика будет пользоваться огромной популярностью и зарекомендует себя, как основной компонент современного веб-дизайна.
Взгляд в будущее
Тренды в веб-дизайне приходят и уходят, но творческая изобретательность дизайнеров приводит к изменениям в стандартах веб-дизайна. Дизайнеры преобразуют идеи в тенденции, а тенденции — в стандарты.
Тренды, перечисленные здесь, быстро становятся обычным явлением в веб-дизайне и найдут еще большее признание в наступающем году. Сайты, не использующие эти элементы, безусловно, будут медленно умирать в 2015 году.
Дайте нам знать в комментариях, какие еще дополнительные тенденции, по вашему мнению, должны быть включены в этот список и будут заметны в 2015 году!
7 тенденций для Веб-дизайна, которые нужно учитывать в 2015 году!
1. ДОСТУПНЫЙ, КАЧЕСТВЕННЫЙ КОНТЕНТ
Прежде чем углубиться в тенденций дизайна, важно констатировать, что содержание — это всегда главное и содержание всегда «было царём», и на 2014 год так и остаётся основной задачей продукта (сайта).
Дизайнеры должны быть уверены, что они создают полезный, информативный и доступный контент, который достигает пользователя посредством лучшего интерактивного возможного опыта.
Твердый заголовок, несомненно, сделает сайт более открытым, но качественный контент в равной степени необходим для того чтобы остаться на месте в течение достаточного периода времени… а также вернуться вновь.
2. ИЛЛЮСТРАЦИИ ПОД САЙТ
Дизайнеры принимают этот подход с иллюстрациями очень серьезно, таким образом дизайнер действительно может отличить сайт от других. Иллюстрации, векторная графика и нарисованные от руки иллюстрации становятся популярными из-за «природной» эстетической красоты, энергии и уникальности. Они могут быть либо простые или сложные, но нет абсолютно никаких сомнений в том, что они делают дизайн более запоминающимся.
В то время как большинство дизайнеров ограничивается детальными иллюстрациями на контент страницах, другие смело выставляют иллюстрации на полную станицу во всю ширь.
«Месидж» дойдёт быстрее с помощью иллютрации нежели словестным объяснением.
3. БОЛЬШОЙ ТЕКСТ БОЛДОМ!
Посетите сколько угодно современных новых сайтов и вы сами увидите, что приветствие (первая страница, можно назвать это шапкой сайта) написано всегда большими буквами в стиле болд.
Это текст является приветствием и краткой информацией о том что Ввы сможете получить на этой странице.
Тренд сезона — это уместить в одно предложение суть занятия компании, часто это предложение сопровождается фоновой огромной фотографией (не много не в фокусе, чтобы не «кричала»)
Идея краткого большого текста болдом стала популярной так как она удабна в применении и отлично сдится по сути в юзабилити интерфеиса — легко быстро читается.
И на сайтах и на мобильных устроиствах пользователи любят нажимать именно на большие понятные и читабельные ссылки/слова.
Большие слова действенные.
Все больше и больше дизайнеры используют минимальные шрифты и делают их просто больше размером.
Если у вас есть всего одноин фоновое изображение используйте один шрифт и больший размер шрифта, это сделает ваше сообщение яснее.
Кроме того, дайте своему сообщению возможность дышать, имея достаточно пустого пространства вокруг текста. И, наконец, фоновая фотография конечно же должна соответствовать вашему сообщению.
4. ВИДЕО ЗАМЕНА ТЕКСТА И ГРАФИКИ
Анимация(графика в движении) всегда приветствовалась и существовала в веб дизайне, вспомните ФЛЕШ.
И сегодня это популярно только уже по новым технологиям с помощью HTML5 Canvas Video
Вот отличный пример (наверху) агентство CARROT, которые используют видео на многих дополнительных страницах своего сайта. Это помогает добавить динамики и понимание компании, и может только с фотографиями или иллюстрациями не было бы такого ясного понимания и эффекта как с видео. Если картинка стоит 1000 слов, сколького стоит видео?
Ещё один отличный пример это вомпания Sony с видео от компании BeMoved , это сайт который использует прокрутку паралакса и mp4 видео очень хорошо. Вы можете видеть что происходит за кулисами сайта по ссылке : behind the scenes
5. Подход — «МЕНЬШЕ, ЗНАЧИТ БОЛЬШЕ!»
Меньше значит больше! Минимализм набирает обороты в мире веба. Никто не хочет смотреть на страницы, переполненые графикой, фотографиями, текстами и случайнымих летающимих объектами.
На очищенной страницы легче ориентироваться и воспринимать информацию.
Дизайнеры быстро схватывают эту тенденцию и используют в своих работах.
Дизайнеры должны максимально прочистить ряды контента, вникнуть в суть конента чтобы оставить самое нужно.
Удаляя на повал всё до тех пор пока не убедитесь что удалять больше нельзя (максимально!).
Меньше слов или изображений — является правилом!
Хороший точный глазомер нужен для размещения фотографий и текста, расстояние и пропорции приобретают решающее значение.
Умный выбор шрифта и минимальный текст может творить чудеса при размещении контента в белом пространстве. Используйте сетку для размещения фотографии и текста для усиления эффекта (плюс тем самым вы упростите себе задачу).
6. ДИЗАЙН — ПЛОСКИЙ (Flat design)
Плоский дизайн является прямой связующей иллюстраций и инфографики, которое стремится к простоте, ясности и честности материалов в пользовательских интерфейсах.
Плоские страницы не подчёркивают глубину страниц, но зато при современной прокрутки паралакса такой дизайн более выгодный — яркие, чёткие иллюстрации и графические элементы более радуют глаз.
Они более точны и просты и понятны. (и не перегружают сам сервер).
Тенденция плоского дизайна будет продолжать цвести до 2015 года.
Особености плоского дизайна :
1.простота
2.Прямые линии, и квадратные углы
3.Нет эффектов на тексте
4.Всего несколько кнопок, «меньше элементов»
5.Типография & лидирующий цвет в дизайне
6.Уникальность, часто Яркие Цветовые сочетания
7. АНИМАЦИОННЫЙ РАССКАЗ ИСТОРИИ
Многие дизайнеры взяли на себя задачу — стать развлекательныМИ рассказчиками для того чтобы пользователям было интереснее прочитывать контент.
Использование повествования в веб-дизайне часто показывает шаг за шагом сообщение (месидж сайта\компании).
Дизайнеры используются различнымие элементамиы, чтобы рассказать свою историю марки путем сочетания слов, иллюстраций, типографики, видео, фотографии, цвета, иконок, значков и символов.
Слова всегда были самым простым способом рассказать историю. Предложения должны быть краткими и по существу.
Видеоряд может быть более эффективным когда одно изображение может сказать много о вашем бренде. Чтобы пойти еще дальше, мы можем анимировать части страницы :
Простой, ориентированный контент вместе с вспомогательными элементами дизайна помогут сделать для пользователя бренд более эффектным и запоминающимся.
--------------------------------------------------------------------------------------------------------------------------------
Учитывая все эти тенденции вы сможете предоставить продукт в ином стиле более презентабельном.
Топ-10 тенденций веб-дизайна в 2015 году
Веб-дизайнеры неплохо провели время в прошлом году, обогатив сайты множеством новых интересных идей. Некоторые из них оказались провальными, зато другие “пошли на взлет” и стали весьма востребованными. Эти тренды наделали шуму в 2014 году и имеют все шансы стать доброй традицией в 2015 году, в то время как дизайнеры продолжают работать над различными идеями, выделяя их них лучшие и доводя до совершенства.
Так какие же тенденции ожидают нас в 2015 году?
“Плоские” дизайны процветают.
Если вы думаете, что это очередная прихоть, то вы ошибаетесь. Плоские дизайны – это минималистичный дизайн на стероидах. Оно основывается на сохранении простоты, чистоты и современности, именно эти слова чаще всего говорят пользователи таких порталов.
Основная причина использования многими таких дизайнов – они действительно разумны. Портал становится менее запутанным, больше используется свободное пространство и в целом достигается максимальный комфорт пользователей. Он вынуждает дизайнеров достигать большего, используя в своей работе меньше и в связи с этим, как нам кажется, это будет тенденция номер один в 2015 году.
Адаптивный дизайн, как должное
Не возникает и сомнений в том, что адаптивный дизайн сайтов станет стандартом. Клиенты будут просить его, а разработчики научатся всем требуемым навыкам программирования и, следовательно, разовьют идею дальше. Причина проста – они востребованы. С тех пор, как смартфоны и планшеты распродаются как горячие пирожки, возник и не меньший маркетинговый потенциал. Даже владельцы малого бизнеса начинают задумываться о нем, так как они видят адаптацию на других сайтах в сети.
Сайты улучшают изображения
Дизайнеры продвигали идею лучших изображений из возможных уже долгое время, но всегда сталкивались с проблемами на клиентской стороне. В 2015 году повысится их качество, креативность и уникальность, причиной послужит: приемлемая цена, более высокая скорость интернета, доступ к высококачественным изображениям имеется везде.
Parallax-эффект будет популярен
Давным-давно прошли времена, когда сайт на 960 пикселей должен был отлично работать на IE6. Теперь все дело в необходимости толчка и действительно громкого заявления. Дизайны с параллаксом достигают этих двух требований к сайту, благодаря мощной визуальной составляющей, креативных шрифтов и возможности перемещения по изображению. Вы увидите больше таких сайтов в 2015 году, особенно от крупных брендов.
Инфографика
Инфографика позволяет представить много информации, заняв при этом мало места, и привлечь внимание пользователя, сохраняя привлекательную стоимость. Именно поэтому владельцы бизнеса постоянно спрашивают о них. Конечный пользователь любит инфографику за её уникальность – она немного необычная, совмещает оригинальные шрифты, цветовые схемы и различные размеры так, чтобы заинтриговать зрителя.
Творцы, которые рассматривают их как серьезный инструмент, всегда смогут создать вокруг инфографики особую атмосферу, сдобрив её фактами и цифрами. Возможно, такой способ подачи информации переносит пользователя в детство, поближе к комиксам. Или это просто своеобразная “конфетка” для глаз. Факт в том, что зритель поглощает огромное количество информации и ему это нравится. По этой причине инфографика становится эффективным способом представить большое количество информации, поэтому она будет использоваться чаще в 2014 году.
Шрифты выходят на первый план
Прощай Georgia, прощай Times New Roman, прощай Helvetica! Добро пожаловать в 2015 год, когда шрифты начинают восприниматься серьезно. В действительности, так было всегда, но только теперь такая ситуация получает развитие. Лавина мобильных приложений, в которые нырнули с головой пользователи, открыла им глаза на все возможные виды типографики, что и подтолкнуло к появлению новых ожиданий от используемых дизайнерами шрифтов.
Теперь Arial больше не универсальный шрифт для всех ситуаций, так как существует множество других отличных вариантов по привлекательным ценам. Пользователь привык к ним до такой степени, что ощущает легкий дискомфорт при их отсутствии, упираясь взглядом в Helvetica. С другой стороны владельцам бизнеса больше не приходится серьезно тратиться на приобретения полного семейства необходимых шрифтов.
Упрощение сайтов и фокус на содержимом
Не так давно The New York Times сделали редизайн своего портала, о чем громко заявили публике, и они попали в тренд, так как сделали его проще, эргономичнее, выставили вперед то, что они хотят предложить, обеспечив больший комфорт работы пользователям. В оформлении не появилось ничего нового, в плане дизайнерских трюков и возможностей, но мы думаем, что все больше и больше сайтов, особенно ориентированных на обилие содержимого, последуют этому примеру, предприняв такой логичный следующий шаг. Достаточно сбросить всю мишуру и содержимое засияет, позволяя дизайну портала выполнять его настоящую роль, а не перетягивать на себя внимание пользователя.
Короткие видео-презентации вновь на сцене
Мы думаем, что видео-презентации вновь выйдут на сцену в 2015 году. Ролики продолжительность в шесть секунд легко станут вирусными, их просто делать и, судя по всему, они всем нравятся. В прошедшие годы мы увидели постоянное уменьшение продолжительности видео, а потому в следующем году ожидается особая популярность клипов мене 30 секунд. И за такую тенденцию можно сказать спасибо Vine.
Дизайн новостных писем будет улучшаться
Интернет-маркетинг с использованием электронной почты больше не единственный способ достучаться до собственной целевой аудитории, но он еще является хорошим инструментом поддерживания интереса среди пользователей. В 2014 году рекламные рассылки все еще будут “на плаву”, а все благодаря креативному и интригующему дизайну. Хоть это более и не самый предпочтительный канал распространения информации, но умирать в ближайшее время он не собирается – умные владельцы бизнеса уже распознали изменения, происходящие в нем.
Фиксированная навигация – её любят все
Было время, когда дизайнеры ощущали потребность сменить на странице все, в том числе и основное меню. К счастью, оно давно прошло и пользователям больше не надо выискивать постоянно пропадающее анимированное меню, скрытое в самом дальнем углу сбоку экрана за каким-нибудь украшением.
В 2015 году навигационные панели стали видимыми в любое время. Так что, если вы собираетесьсоздавать сайт с огромным количеством содержимого, то стоит создать фиксированное в верхней части экрана меню, где пользователи будут ожидать увидеть его.
А какие, по вашему мнению, будут новые тенденции в дизайне сайтов 2015 года?
Топ-10 тенденций веб-дизайна в 2015 году оригинальный материал на сайте: EPICOM