50 бесплатных фишек для веб-дизайнеров за прошлый месяц


Содержание

50 бесплатных ресурсов для веб-дизайнеров за апрель 2015-ого

Одна из самых потрясающих вещей, которую можно сказать о нашем дизайнерском комьюнити, это то, что все мы любим делиться. Это могут быть мысли и идеи, описанные в статьях, советы или фидбэки на форуме, или даже распространение первоклассных ресурсов. Все вышеперечисленное, делает наше комьюнити по-настоящему великолепным. Вот 50 лучших беспатных ресурсов этого месяца для веб-дизайнеров, начиная с ноября 2014-го.

Бесплатные шрифты

Didactic Regular (Включает веб-шрифт).

Brixton Line – отображается с прокруткой.

Office Code Pro (Заказная версия шрифтовой гарнитуры Source Code Pro).

Barry Free Font

Bough – нарисованный от руки шрифт.

El Capitan – нарисованный от руки шрифт.

Spastic– нарисованный от руки шрифт.

Moderne Sans – Аккуратный шрифт без засечек.

Phantasm Font.

Бесплатные GUI и Wireframe киты

Material Design UI Kit (PSD).

Flowchart Wireframe Kit (Sketch).

Arise Creative Agency UI Kit (PSD).

Epic UI Kit (PSD).

Creative Mind Blogging UI Kit (PSD).

Apple Watch GUI (Sketch).

iOS 8 GUI Ui Kit (PSD).

Библиотеки мобильных виджетов для iOS и Android (Axure).

Полный UI kit для плеера (Sketch).

UI Flat-шаблоны для браузеров (PSD).

Kit шаблонов для навбаров браузеров (PSD).

Бесплатные наборы иконок

Kölsch Icons (10 иконок, AI&EPS).

Набор иконок варфреймов (23 иконки, SVG).

Pamoke Invaders Themes (24 иконки, AI,EPS & PNG).

Иконки жестов (56 иконок, AI).

Простые иконки (70 иконок, PSD).

Базовые иконки (60 иконок, AI, Sketch, SVG & PNG).

Набор иконок банковской тематики (32 иконки, PSD).

Иконки для тулбара (6 иконок, AI).

Цветные Flat-иконки (312 иконок, SVG).

Иконки по тематике искусство (50 иконок, AI).

Набор Flat-иконок для iOS (21 иконка, AI, EPS & PNG).

Flat-иконки кредитных карт (10 иконок, PSD).

Бесплатные веб-шаблоны и темы

Media Flat Web шаблон (PSD).

Esports Web шаблон (PSD).

Шаблон сайта тату-студии (PSD).

Отзывчивый шаблон в стиле Игры Престолов (HTML).

Тема EverBox (WordPress).

Тема Big Pix (WordPress).

Бесплатные мокапы

Apple Watch Movado Edition мокап (PSD).

Apple Watch Мокап (PSD).

Apple Watch Flat-шаблон (PSD).

Генератор Creative Scene (PSD).

Мокап с винтажными камерами и визитками (PSD).

Мокап журнала 2 (PSD).

Мокап бумаги с текстовым оттиском логотипа (PSD).

Всё остальное

5 текстур с эффектом стертых чернил (3508х2480 px, JPEG).

10 шаблонов с типографикой (AI & EPS).

Набор кисточек для Photoshop от Garvel.

Мокапы в PSD, которые вы всегда хотели…

Видеокурс «50 фишек Фотошопа», часть 4 из 5

Павел Горбунов записывает серию из 50 уроков по 3-6 минут о тонкостях и хитростях Фотошопа. Предлагаю вам посмотреть четвёртый десяток.

31. Проверка орфографии и Поиск слоев по имени в Photoshop
32. Дизайн в Photoshop на двух и более мониторах
33. 3 маленьких функции Photoshop, о которых мало кто знает
34. Лайфхаки Photoshop для фото и ретуши
35. Фишки фотошоп для фотографа-дизайнера
36. Боке с помощью фильтра
37. Лучшие горячие клавиши для работы с текстом в Фотошоп
38. Простая анимация в Photoshop
39. Новые фичи Photoshop 2020 | Обзор конференции Adobe Max
40. 12 способов вырезать объект в Photoshop

64 сайта для дизайнеров, которые нужно добавить в закладки

Ищете сайты, которые помогут справиться с первыми заказами и прокачать новые навыки?

Мы собрали список из самых полезных и интересных сайтов про дизайн, с помощью которых вы будете в курсе последних новостей, научитесь новым фишкам, прокачаете навыки UX и сможете работать быстрее и эффективнее.

12 сайтов для вдохновения

  • https://www.pinterest.ru. Чаще всего это первый ресурс, на который идут дизайнеры самых разных специализаций в поисках вдохновения. Самое удобная функция на Pinterest — это возможность создавать свои подборки.
  • https://www.behance.net. Дизайнеры традиционно публикуют свое портфолио Behance, поэтому сайт можно смело назвать самой большой коллекцией удачных примеров в любой сфере дизайна. Следите за новыми проектами, подпишитесь на дизайнеров и студии, на работы которых вам бы хотелось равняться.
  • https://www.awwwards.com. Ресурс посвящен самым лучшим работам в веб-дизайне, на Awwwards можно найти подборки лучших сайтов за день, неделю, месяц или год. Вдохновляйтесь лучшими!
  • https://dribbble.com. Платформа, на которой дизайнеры размещают свои портфолио. Чтобы добавить свои работы, нужно получить приглашение от участника Dribbble.
  • https://www.designspiration.net. На сайте вы встретите сотни примеров хорошего дизайна для вдохновения.
  • https://synapticstimuli.com. Галерея самых разнообразных проектов. Развивает чувство прекрасного.
  • http://www.designmadeingermany.de/sites-we-like/. Можно найти авторские подборки красивых сайтов разнообразных стилей. Кстати, в подборку можно предложить и свой сайт.
  • https://designshack.net/category/articles/critique-articles. Сайт для дизайнеров, на котором не хвалят, а критикуют. Новички наверняка узнают для себя много полезного.
  • https://siiimple.com. Поклонникам минимализма и тем, кто хочет научиться создавать дизайн в этом стиле. На сайте просто огромная подборка примеров дизайна в минималистичном стиле, которая постоянно обновляется.
  • https://onepagelove.com. Отличный ресурс с подборкой одностраничных сайтов. Всем, кто занимается лендингами, смотреть обязательно.
  • https://mediaqueri.es. Довольно удачный проект об адаптивном дизайне. Особенно пригодится тем, у кого еще не было опыта в создании таких макетов.
  • http://bookcoverarchive.com. Сайт пригодится не только тем, кто занимается оформлением обложек книг, но и тем, кто постоянно сталкивается с необходимостью подобрать хороший шрифт.

Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.

14 медиа о веб-дизайне

  • http://webdesignerwall.com. Сайт посвящен не только созданию дизайна, но и затрагивает темы разработки, верстки, анимации и продвижения.
  • http://houseofbuttons.tumblr.com. Здесь можно найти десятки интересных примеров оформления кнопок на сайте (многие с готовой анимацией).
  • https://www.webdesignerdepot.com. Еще один информационный сайт для дизайнеров, затрагивающий самые разнообразные сферы, начиная с приемов оформления интерфейса и заканчивая организацией рабочего процесса.
  • https://webdesignledger.com. Неплохой ресурс о веб-дизайне, на котором можно найти много различных подборок удачных решений, новые тренды, узнать больше о типографике и элементах дизайна сайтов.
  • https://designyoutrust.com. Ежедневная подборка новостей, событий и тенденций в сфере дизайна.
  • https://www.creativebloq.com/computer-arts-magazine. Международный интернет-журнал о цифровом искусстве.
  • https://say-hi.me. Один из лучших русскоязычных ресурсов, рассказывающий о творчестве для креативных людей.
  • https://designpub.ru. Рассказывают о событиях, типографике, дизайн-процессах, иллюстрации и саморазвитии.
  • https://infogra.ru. Отличный русскоязычный ресурс для начинающих и практикующих дизайнеров, на котором размещены море статей, десятки уроков, обзоры и рецензии на книги, курсы и программы. А еще на сайте регулярно появляются подборки кириллических шрифтов.
  • https://bureau.ru/bb/soviet/. Рубрика «Советы» на сайте дизайн-бюро Артема Горбунова ответит на множество вопросов новичков, это — настоящий кладезь практических знаний.
  • http://onjee.ru. Прекрасный сайт для дизайнеров, которые только начали делать первые шаги в этой сфере.
  • https://blog.shaihalov.ru. Этот ресурс заинтересует тех, кто решил специализироваться на UX и продуктовом дизайне.
  • http://deadsign.ru. Подойдет тем, кто не знает английского, но хочет быть в курсе последних новостей в веб-дизайне.
  • https://www.vandelaydesign.com. Это целое собрание хороших статей и отличных подборок по веб-дизайну.

11 сайтов о логотипах

  • https://www.logodesignlove.com. На сайте собрано огромное количество логотипов, но интереснее то, что каждому посвящена небольшая заметка. Изучая сайт, вы не только найдете неординарные решения и красивые примеры, но и узнаете, как автор того или иного логотипа пришел к своей идее.
  • https://logopond.com. Сотни примеров логотипов, как удачных, так и не очень, в вашем распоряжении. Плюс ресурса в том, что вариантов на нем очень много, а еще их можно по-разному отсортировать.
  • https://www.logaster.com. Сервис позволяет очень быстро генерировать логотипы. Да, уникальный логотип с его помощью не сделать, но сайт очень выручает, когда у клиента еще нет логотипа, а в шапку сайта нужно что-то поставить.
  • https://logo.squarespace.com/. Аналогичный сервис для создания логотипов небольшого размера. Вы вводите название компании и попадаете в редактор, в котором к логотипу можно добавить иконку, а заодно посмотреть, как все это смотрится на визитке, мониторе и футболке.
  • http://logofaves.com. В подборках логотипов на этом ресурсе можно найти не только идеи, но и контакты дизайнера, а также ссылку на его Behance-профиль. Это очень удобно в случае, когда вам нужно не только посмотреть логотип, но и найти исполнителя.
  • https://www.hipsterlogogenerator.com. Еще один генератор, позволяющий создать простой, но достаточно эффектный логотип за пару минут.
  • http://logotypes101.com. Подборка бесплатных векторных логотипов. Если у вас есть время и вы готовы его потратить, то сможете найти неплохой вариант.
  • https://logobaker.ru. Сайт для тех, кто разрабатывает логотипы. Здесь есть неплохая подборка, а также возможность попросить совета или получить фидбек.
  • https://www.logofury.com. В этом сервисе от вас требуется только ввести название компании, выбрать категорию и добавить слоган (при желании), все остальное генератор делает за вас, мгновенно создавая десятки вариантов.
  • https://www.logomoose.com. Очень солидная подборка логотипов со всего мира. Что интересно, есть действительно много хороших вариантов, которые можно использовать для вдохновения.
  • http://www.thelogomix.com. И снова подборка логотипов, но на этот раз с расширенной сортировкой: можно выбрать логотипы по определенному цвету или тематике. Когда нужно что-то быстро придумать, очень выручает.

8 полезных сайтов про иконки

  • https://www.iconfinder.com. Один из самых популярных сайтов для дизайнеров с огромным количеством иконок на все случаи жизни. Иконки делятся на платные и бесплатные, а скачать их можно как в PNG, так и в SVG-формате.
  • https://thenounproject.com. Очень приятный ресурс с большим выбором, легким дизайном и красивыми иконками. Для того, чтобы начать пользоваться, нужно лишь зарегистрироваться.
  • https://roundicons.com. Здесь можно найти очень необычные решения (обратите внимание на подборку doodle-иконок). Что самое приятное, небольшие наборы доступны для бесплатного скачивания.
  • https://iconmonstr.com. Очень похожий на уже рассмотренные нами ресурсы — множество иконок, удобный поиск и несколько форматов для скачивания (SVG, EPS, PSD, PNG).
  • http://fontello.com. Если вам нужно сгенерировать шрифтовые элементы из иконок, то без этого сайта не обойтись.
  • https://www.flaticon.com. Еще один сайт с подборкой плоских векторных иконок для любых задач. Самое сложное — выбрать из огромного количества вариантов.
  • http://endlessicons.com. Ресурс с большим выбором иконок. Особенно удобно то, что искать можно как по нужной иконке, так и по тематическому набору или тегам.
  • https://icomoon.io. Подборка из сотен разнообразных иконок, из минусов — все хорошее начинается после оплаты подписки или покупки определенного набора.

6 сайтов для дизайнеров о шрифтах и типографике

  • https://ilovetypography.com. Один из лучших ресурсов для тех, кто небезразличен к буквам. На этом сайте вы найдете массу полезных и просто интересных заметок о типографике и том, что с ней связано.
  • https://fonts.google.com. Подборка бесплатных шрифтов от Google, которой чаще всего пользуются дизайнеры. Самое полезное — возможность посмотреть, с какими шрифтами чаще всего сочетается выбранный вами вариант.
  • https://www.paratype.ru. Отличный сайт с хорошей подборкой шрифтов. Из приятного — можно без особого труда подобрать даже красивый русский шрифт, из печального — большинство шрифтов придется приобретать (но на сайте часто проводятся распродажи).
  • https://fontshop.com. Магазин шрифтов, где можно подобрать удачное решение для своего проекта. Но особенно интересен сайт даже не количеством самих шрифтов, а примерами их применения, которые позволяют лучше оценить, насколько выбранный шрифт подходит для вашей задачи.
  • https://www.dafont.com. Огромная подборка шрифтов для самых разных задач, а еще — удобный интерфейс и много новинок.
  • https://typejournal.ru. Полезный интернет-журнал о типографике и шрифтах.

6 сайтов для подбора цветовой палитры

  • https://www.materialpalette.com. Сервис для подбора палитры работает очень просто: выбираете два основных цвета, и сайт предлагает вам расширенную цветовую схему.
  • http://www.flatuicolorpicker.com. Множество очень красивых оттенков, разбитых по категориям: красные, фиолетовые, синие, зеленые, желтые, оранжевые и серые.
  • https://coolors.co. Онлайн-генератор цветовых схем для сайта создает подборку из пяти оттенков, каждый из которых вы можете изменить по своему усмотрению. Чтобы эффективнее пользоваться сервисом, советуем не пропускать инструкцию в самом начале.
  • https://colorfulgradients.tumblr.com. Очень хорошая подборка градиентов на любой вкус.
  • http://paletton.com. Один из самых удобных генераторов цветовых палитр. Его ценят за широкие возможности и гибкие настройки.
  • https://color.adobe.com/ru/create/color-wheel/. Неплохой и функциональный инструмент для создания палитры от Adobe. Обязательно попробуйте!

7 сайтов про UX

  • https://ux-journal.ru. Сравнительно новый журнал, в котором можно найти очень много полезного о самом востребованном направлении в веб-дизайне.
  • https://www.dtelepathy.com/blog. Если вы уже начали изучать UX, то посоветуем вам блог команды из Сан-Диего.
  • https://usabilla.com/blog. Еще один сайт про качественный UX и проектирование интерфейсов.
  • http://uxchecklist.github.io. Суперполезный ресурс представляет из себя список действий по UX, с помощью которого можно пройти весь процесс от начала до конца и не забыть ни о чем.
  • https://uxmovement.com. Сильно поможет в случае, когда во главу угла ставится проблема конверсии сайта.
  • https://uxmastery.com. Этот сайт целиком и полностью посвящен UX и всем его тонкостям, сложностям и особенностям.
  • http://uxmag.com. Ресурс поможет всегда быть в курсе последних новостей из мира UX, узнавать первым о новых методиках, исследованиях и мероприятиях.

Заключение

Сайтов про дизайн существует очень много, но прочитать все статьи и запомнить все советы не под силу ни одному человеку. Именно поэтому так важно фильтровать поступающую информацию — стараясь осилить все и сразу, вы наберете поверхностных знаний, но есть риск, что специалистом вы так и не станете. Лучше всего выбрать структурный подход и образование у лидеров рынка. Курс «Веб-дизайн с 0 до PRO» рассчитан на новичков в веб-дизайне. Шаг за шагом, вместе с опытными и практикующими преподавателями, вы узнаете все о дизайне и станете востребованным специалистом.

Новое для веб-дизайнера за первую половину декабря

Новые полезные штуки для веб-дизайнеров за первую половину декабря 2012. Прошлый месяц: ноябрь. Во все подобные топики буду добавлять тег «новое для веб-дизайнера»

Сервисы и инструменты

Weavly — бесплатный онлайн-сервис для удобного создания роликов из видео, аудио и gif-картинок.

Best Web Fonts — очень удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.

Ai -> Canvas — сервис для экспорта изображений из Adobe Illustrator в HTML5 Canvas.

Method Draw — простой, но функциональный онлайн-инструмент для создания SVG-графики.

Cedvel — онлайн-сервис для создания собственных сеток.

Artery — простой способ продажи любых цифровых товаров через Dropbox-аккаунт.

POP — интересное приложение для айфона, которое умеет переводить прототипы интерфейса, нарисованные на бумаге, в удобный цифровой вид.

34Grid — новая сетка для адаптивного дизайна, достойная внимания.

jQuery-плагины

Fullscreen pageflip layout — плагин, с помощью которого можно страницы сайта листать как книжные.

Spectragram — плагин, умеющий создавать фид из инстаграм-фотографий через API.

Crumble — плагин, использующий grumble.js, для создания тура по сайту в виде подсказок.

Бесплатные плюшки

Ну очень крутой пак Ipad GUI в PSD, оптимизированный под ретину.

Подборка ресурсов для создания дизайна в стиле Metro UI.

Интересные фишки в веб дизайне: 10 необычных эффектов для вашего сайта

Какой у вас сайт? Самый простой, сделанный на шаблоне, или с интересными эффектами? Сегодня расскажем о необычных способах сделать ваш ресурс запоминающимся и удобным для посетителей. Вы тоже можете их применить!

Зачем нужны эффекты?

  1. Чтобы отстроиться от конкурентов. Далеко не все способны к новаторству, многие владельцы сайтов почему-то боятся интересных идей. Меж тем они способны выделить ваш сайт из сотен других.
  2. Чтобы привести трафик. Достаточно рассказать о необычных функциях на стороннем ресурсе и заинтересовать пользователей — они сами придут из любопытства.
  3. Чтобы увеличить продажи. Многие эффекты не просто красивы, но и функциональны. Интересные решения побуждают псетителя принять решение в вашу пользу.

Необычные фишки в веб-дизайне

1. Игра “Выбери тариф”

Начнем с самого простого. Сайт оператора предлагает пользователям выбрать варианты тарифов и наглядно увидеть разницу. Создается впечатление, что клиент сам решает, что выбрать. И не обязательно, что это будет самый дорогой тариф — пожалуйста, хозяин барин, выбирайте самые простые варианты.

2. Прием “Сравнение”

Лучший способ мотивировать клиента сделать заказ, совершить покупку — показать ему все плюсы вашего предложения. Можно долго убеждать человека словами, но лучше наглядно показать, что он получит и сколько сэкономит. Например, вот так. Этот прием можно использовать практически в любой тематике.

3. Визуализация фото в реальной жизни

Покупка в интернет-магазине — всегда определенный риск для клиента. Вдруг не подойдет, не угадаешь с размером, выбранная мебель не впишется в интерьер квартиры? Для этого и придумали визуализацию: чтобы увидеть, как тот или иной товар будет смотреться в реальной жизни.

Возьмем покупку одежды. В крупных интернет-магазинах ввели услуги онлайн-примерочной. Загружаете фото и примеряете на себя разные образы. Система не только наряжает вас в одежду, но и дает рекомендацию по подбору образа, подсчитывает общую стоимость заказа и даже дает возможность поделиться картинкой в соцсетях.

Или взять мебель. Крупная покупка, которую проблематично вернуть, если вдруг ошибешься с цветом, размером, иными параметрами. Существует масса приложений, которые помогают “увидеть”, как этот диван или люстра будут смотреться именно в вашей квартире: подойдут ли по габаритам, сочетаются ли по стилю. Можно также поиграть с цветом, подобрать дополнительные предметы интерьера. Все для удобства пользователя!

Цукерберг рекомендует:  Курс - Не хватает курса

4. Необычное меню

Горизонтальное, вертикальное иии… какое еще? На самом деле есть масса других вариантов, которые привлекут внимание пользователей. Один нюанс: консервативные люди могут и не оценить. Они привыкли, чтобы все было “как раньше”, привычно и понятно. Поэтому такой прием лучше использовать, если ваша целевая аудитория — люди молодые и современные, с восторгом относящиеся к новым тенденциям. Им точно понравится.

Обратите внимание на адаптивную версию: необычное меню должно быть не только удобным (человек должен разобраться в нем самостоятельно или с помощью ваших подсказок), но и отображаться на всех носителях: ПК, смартфонах, ноутбуках, планшетах. Если система глючит — лучше с таким меню не играть. Иначе выйдет как в бессмертной цитате: “Хотели как лучше, а получилось как всегда”.

5. Нover-эффект

Такое вы наверняка видели: наводишь курсор или двигаешь мышкой — а картинки меняются. Двигаются, приближаются и удаляются, из черно-белых становятся цветными, а то и вовсе пропадают. Такое зрелище завораживает: пользователи способны долгое время провести на сайте, наблюдая за изменениями. Вам же лучше: улучшаются поведенческие факторы, ваш сайт получает одобрение от поисковых систем. А сам дизайн становится более живым.

6. Уникальные иллюстрации

Где взять уникальные картинки для своего сайта? Купить на фотостоке? Лучше не надо, сейчас это дурной тон. Сделать самому? Отличный вариант, но придется потратиться на профессиональное оборудование и услуги фотографа. Есть еще способ: нарисовать иллюстрации вручную. Это практически беспроигрышный вариант: сейчас в моде все крафтовое — то есть сделанное вручную. Понятно, что придется пригласить специалиста-иллюстратора и не раз согласовывать варианты рисунков, но дело того стоит. Если получится угадать миссию и основную идею сайта, дополнить весь остальной контент авторскими иллюстрациями — получится очень интересно и необычно.

7. Сплит-макеты

Модный эффект — разделение экрана на две равные части. Такой дизайн решает сразу несколько проблем: привлекает внимание посетителя к каждому элементу, дает возможность показать в 2 раза больше информации на одном экране (особенно это актуально для лендингов, интернет-магазинов с широким ассортиментом да и везде, где много информации, и посетитель может растеряться). А еще дает возможность выбора — вспоминаем прием “Сравнение”.

Возможностей для реализации такой идеи тоже множество. Игра на контрастах, анимация, 3D-эффекты, необычная типографика — все к вашим услугам. Испортить сплит-макет практически невозможно: хороший веб-дизайнер обыграет его мастерски.

8. Параллакс-эффект

Чувствуете, как фишки становятся все более интересными? То ли еще будет! На очереди параллакс-эффект, известный с давних времен, когда понятий “сайт” и “веб-дизайн” просто не существовало. Вообще параллакс (от греческого слова Parallax) означает смену, чередование. В природе так названо изменение видимого положения объекта по отношению к удаленному фону — в зависимости от того, где находится наблюдатель. В веб-дизайне — особый эффект, когда изображения на дальнем фоне двигаются медленнее, чем те, что находятся на переднем плане. Нет, это не сломает мозг посетителю — хороший параллакс-эффект способен сделать картинку более глубокой и объемной. Вот, например, как это выглядит.

А если использовать сразу несколько слоев, поиграть со скоростью движения элементов — возможности этого способа просто неисчерпаемы.

9. Виртуальная реальность

Виртуальные карты, онлайн-трансляции, 3D-путешествия по вашему офису, складу привлекают пользователей. Это возможность заглянуть одним глазком в чужую жизнь, как в замочную скважину. Мы уже писали о том, как использовать видеомаркетинг в веб-дизайне. Можно просто снимать и вставлять видео на сайт — главную страницу, карточки товаров, а можно сделать 3D-панораму, которая будет показываться посетителю постоянно. Например, продаете вы туристические путевки — показывайте карту стран, достопримечательности, прямые включения из городов мира, создавайте у себя на ресурсе эффект присутствия.

Это и есть виртуальная реальность — кто-то очень умный догадался использовать эту популярную технологию и в веб-дизайне. И это уже не просто 3D — намного шире. Можно “перенестись” куда захочешь, “побродить” по виртуальному пространству, ощутить прикосновения, послушать звуки, послушать VR-помощника, который расскажет о том, что происходит. Некоторые сайты смотришь, как кино: тут вам и эффект присутствия, и 360- градусные панорамы, и игры — что пожелаете.

Наиболее эффективно этот прием работает, когда человеку предлагается что-то протестировать. Как выбирать машину, если не едешь в автосалон? Легко: в виртуальной реальности тест-драйва для Volvo XC90 можно было оценить габариты автомобиля, почувствовать его скорость, отрегулировать сиденья. Мечта!

Конечно, не каждый может себе позволить столь масштабный и дорогой проект. Более демократичный вариант — панорама в 2D пространстве. Это не совсем виртуальная реальность, но уже с эффектом присутствия — например, стоит покрутить мышкой — и как будто поворачиваешь голову влево, вправо, вниз и вверх.

10. Оптические иллюзии

Оптические иллюзии вдохновляли, наверное, каждого человека. Движущиеся круги, картинки с двойным смыслом: так посмотришь — бокал вина, а взглянешь под другим углом — ба, обнаженная женщина. Функциональной нагрузки они практически не несут: главная цель оптических иллюзий — привлечь посетителя, заставить приковать взор к вашему сайту и остаться там навсегда (шутка). Они притягивают внимание, развивают творческое воображение и вообще круто смотрятся. Так, что многие студии дизайна оценили этот прием и вовсю используют в работе.

Основные приемы при создании иллюзий: изменение привычных представлений о форме и пространстве, выход за рамки стандартов, хитрые контрасты, способность увидеть то, что на первый взгляд недоступно. Вот как это можно применить на сайте. Прямо сейчас наведите курсор мыши на картинку и покрутите колесико вниз и вверх — чувствуете вибрацию?

Хотя нет, мы вас обманули. Есть в оптических иллюзиях и функциональность, в основном это придание элементам двойного смысла, что подчеркивает креативность бренда. Часто этот прием используется при создании фирменного стиля, особенно логотипов. Вот посмотрите на лого компании FedEx. Ничего не замечаете? А еще раз? Ладно, откроем секрет (мы сами не заметили без подсказки): между буквами E и X расположена белая стрелка. Это и игра воображения, и вполне конкретный посыл от бренда: мы движемся вперед, come together, my friend.

Как правильно внедрять интересные фишки?

  1. Главный принцип — не навреди. Описанные эффекты — достаточно сложная штука, это вам не лендинг на шаблоне создать. Если привлечь к работе косорукого веб-дизайнера или отчаянного креативщика, которому собственные амбиции дороже выгоды клиента, ничего хорошего не получится. Эффекты будут смотреться колхозно и ничего, кроме усмешек и отторжения, не вызовут.
  2. Постоянно тестируйте. Если дизайнер справился, все получилось отлично, нужно еще проверить, как отреагирует аудитория. Вдруг людям не понравится? Поэтому любую фишку нужно протестировать, а уж потом запускать в работу. Приготовьтесь к тому, что дизайн придется менять, 2, 5 или 100 раз — пока не найдется оптимальный вариант, который устроит всех. Не стесняйтесь спрашивать напрямую у пользователей, нравятся ли им нововведения. Это укрепит обратную связь и создаст вам репутацию лояльной компании, которой интересно мнение клиентов.
  3. Не копируйте бездумно. Часто так бывает — понравилась идея, надо срочно утащить ее себе на сайт. Но, во-первых, помните об авторских правах, а во-вторых, любую хорошую идею можно чуть изменить, дополнить, подстроить под себя. Просто адаптируйте ее к вашей нише, специфике — и получайте вкусную конфетку в красивой обертке.

Где брать идеи?

У веб-дизайнеров есть много потайных мест, где они берут идеи для вдохновения. Это может быть как обычный Pinterest, так и профессиональные сообщества и ресурсы. Это, например, Awwwards, Designer News, Dribbble, Web Design Freebies, Behance Pinterest, Revision и другие. Ну а как технически внедрять идеи конкретно на ваш сайт — это вам подскажут специалисты.

Творите, экспериментируйте, перенимайте чужой опыт и адаптируйте его под себя! Не бойтесь экспериментов — лучше сделать и пожалеть, чем не сделать и наблюдать, как вашу идеи воплощают в жизнь конкуренты. Ну а мы, студия дизайна IDBI, всегда готовы помочь в разработке интересных проектов!

14 классных фишек с 11 лучших мобильных сайтов

Время чтения: 5 минут Нет времени читать? Нет времени?

Мобильные сайты должны быть функциональными, легкими и интуитивно понятными. В этой статье вы найдете описания фишек, которые делают классными мобильные сайты известных компаний.

Фишка № 1: Lowe’s сообщает о времени работы ближайшего магазина

Американский ритейлер Lowe’s предлагает клиентам покупать товары онлайн, а забирать в физических магазинах. Для удобства покупателей на мобильной версии сайта указывается время работы ближайшей торговой точки сети Lowe’s. Нужный магазин определяется с помощью геолокации.

Фишка № 2: контрастная кнопка «Добавить в корзину» на сайте Lowe’s

Кнопка «Добавить в корзину» выделяется на фоне других элементов страницы благодаря цвету и размеру. Она достаточно большая, что удобно для мобильных пользователей.

Фишка № 3: подсказка на сайте Cleartrip

На сайте онлайн-покупки авиабилетов Cleartrip для десктопов есть подробная информация о каждом рейсе, включая продолжительность перелетов и пересадки.

Чтобы просмотреть эту информацию на мобильной версии сайта, пользователь должен перейти на новую страницу, выбрав интересующий его рейс. Чтобы сравнить условия перелета с другими рейсами, пользователю нужно вернуться на предыдущую страницу, а это неудобно. Для экономии времени мобильная версия имеет схематическое обозначение длительности перелетов и количества пересадок. А чтобы пользователи легко поняли обозначения, при загрузке результатов поиска всплывает окно подсказки.

Фишка № 4: на мобильном сайте Kia желаемые конверсионные действия оформлены в виде элементов меню

На мобильной версии сайта автопроизводителя Kia желаемые действия оформлены в виде панели меню, закрепленной в верхней части экрана.

В меню сайта конверсионные элементы выделены красным. Это делает их более заметными и увеличивает кликабельность.

Фишка № 5: сайт интернет-магазина Argos ненавязчиво предлагает установку мобильного приложения

На сайте Argos пользователь видит предложение установить мобильное приложение интернет-магазина. Оно удачно сочетает две противоположности: остается заметным, но не отвлекает пользователя от контента.

Фишка № 6: резервация в физическом магазине в один клик

Сайт ритейлера Argos позволяет зарезервировать товар в физическом магазине одним нажатием кнопки. Покупатель может оплатить товар, когда приедет за ним.

Фишка № 7: меню-аккордеон на сайте Warby Parker

Производитель очков Warby Parker славится нестандартными маркетинговыми подходами. Когда вы покупаете очки этой компании, она бесплатно отправляет такие же нуждающимся людям в страны третьего мира. Также вы можете подобрать подходящие очки прямо на сайте, если у вас есть медицинский рецепт. А мобильная версия сайта Warby Parker является наглядным пособием по дизайну. Например, здесь очень удачно использовано меню-аккордеон.

Фишка № 8: выбранные варианты выделяются цветом

Warby Parker продает подарочные сертификаты. На странице оформления этого продукта пользователь самостоятельно выбирает тип и номинал подарочной карты. Выбранные варианты выделяются цветом.

Фишка № 9: большой размер шрифта меню

Мобильная версия сайта BuzzFeed имеет удобное меню. Его удобство главным образом определяется большим размером шрифта.

Фишка № 10: удобный опросник для получения обратной связи

Фонд TED нашел способ получать обратную связь от пользователей мобильной версии сайта. Вместо стандартного большого опросника им предлагается выбрать три варианта, точнее всего характеризующие просмотренный контент.

Фишка № 11: большие кнопки шеринга в соцсетях

Издание Huffington Post сделало все, чтобы пользователи легко делились контентом в социальных сетях. Огромные кнопки шеринга удобно использовать даже тем пользователям, чьи мобильные гаджеты имеют очень маленький экран.

Фишка № 12: подсказка для пользователей

На мобильной версии сайта ритейлера John Lewis есть удачная подсказка: при просмотре товара сайт сообщает посетителю, как увеличить фото или просмотреть следующее.

Фишка № 13: возможность быстро вернуться к первому экрану

Мобильная версия сайта ритейлера Sainsbury’s позволяет мгновенно вернуться к первому экрану при изучении списка товаров. Это экономит время и упрощает навигацию.

Фишка № 14: удачный цвет кнопок

Мобильная версия сайта Ford является образцом эстетичности и функциональности. Кнопки меню ресурса выполнены в двух цветах. Голубой цвет конверсионных кнопок не режет глаз, но мгновенно привлекает внимание.

Функциональность и эстетичность мобильных сайтов часто зависит от незаметных на первый взгляд мелочей. Удачные фишки ускользают от внимания, потому что помогают пользоваться сайтом на интуитивном уровне. Пользователи скорее замечают их отсутствие, чем присутствие. Тем важнее для маркетологов замечать и коллекционировать такие мелочи. Пожалуйста, пополняйте коллекцию мобильных фишек в комментариях.

Rusability

Первое впечатление всегда важно, и обычно у вас есть всего несколько секунд, чтобы произвести его.

Опрятная одежда, стильные аксессуары, явка на встречи без опозданий — это все очень важно. Люди, видя вас впервые, испытывают эмоции, которые и дальше ассоциируют с вами.

Аналогично, первое впечатление также имеет огромное значение в онлайн-мире. Через несколько секунд у посетителей сайта уже складывается впечатление о нем и они начинают задумываться о доверии к вашей компании. Согласно статистике, каждый пятый посетитель покинет ваш сайт, не давая вам второго шанса, если не будет сразу заинтересован увиденным настолько, чтобы остаться.

Безусловно веб-дизайн чрезвычайно прогрессировал на протяжении многих лет и продолжает прогрессировать. Новые функции открываются и внедряются каждый год. Самые популярные из них добавляются в арсенал разработчиков и дизайнеров. Бесконечная прокрутка, целевые страницы, баннеры, всплывающие окна, файлы cookie, интеграция в социальные сети, совместное использование, комментарии – список может продолжаться – это лишь некоторые из функций, которые сделались горячими трендами последних лет.

Зная самые последние тенденции в веб-дизайне и адаптируя их под конкретные нужды, чтобы лучше подать ваш ресурс, можно создать веб-сайт, который поразит существующую аудиторию и привлечет внимание новых посетителей.

Но прежде чем погрузиться глубже, давайте кое-что проясним: даже если веб-дизайн требует творчества, это не искусство в чистом виде. Сайту недостаточно только лишь быть красивым и вызвать положительные эмоции пользователя, он обязательно должен удовлетворить нужды посетителя и предоставить всю необходимую информацию.

Сейчас как никогда раньше, все в веб-дизайне, от изображений до контента и навигации, служит конкретным целям. Конечно, многие веб-сайты были разработаны давно и стали выглядеть неактуально к настоящему времени. Если вы намерены обновить или перепроектировать такой веб-сайт, первым шагом должен быть аудит контента, удаление всего лишнего или устаревшего, дополнение его тем, что действительно важно для вашей целевой аудитории. Если же вы решили создать сайт с нуля, отправными точками должны быть карта сайта, его каркас и главные цели. Ясность, четкость, понятность — это важнее, чем огромный объем контента, в котором невозможно разобраться за разумное время.

Мы выбрали пять тенденций веб-дизайна, рост которых мы отследили в этом месяце, они помогут вам создать современный и эффективный веб-сайт.

1. Крошечный текст

Несмотря на то, что огромные жирные шрифты все еще встречаются повсеместно, куда более маленькие, почти крохотные тексты уже начали заменять габаритные заголовки и подзаголовки, которые были трендом дизайна веб-сайта некоторое время. От заголовков до целых текстов, которые выполнены буквально на пределе читаемости — определенно прослеживается тенденция к уменьшению шрифтов.

Беспокойство может вызвать тот факт, что мелкие шрифты станут преградой к удобочитаемости, но на самом деле, иногда, они предпочтительнее габаритных шрифтов. С одной стороны, небольшие шрифты позволяют макету дышать, добавляя ему легкости; С другой стороны, небольшие шрифты помогают увеличить интерес к сообщению, которое они содержат. Главное здесь — не переусердствовать.

Уменьшение шрифтов требует соблюдения баланса. Гармонично будет смотреться не просто выбор меньшего размера букв, но и выгодное комбинирование цветов и типов шрифта. Легкие и тонкие линии заголовка могут замечательно смешиваться с последующим мелким текстом.

2. Геометрическое наслаивание

В постоянном поиске новых приемов, которые могли бы добавить привлекательности дизайну, геометрическое наслаивание неуклонно становится все более популярным. Геометрическое наслаивание – это метод придания новой жизни изображениям, которые являются несколько простоватыми сами по себе – например, здания, интерьерные проекты, работающие люди и так далее.

Добавление веселых форм, контрастных цветов и вырезов всегда помогает посетителю проникнуться дизайном сайта и сосредоточиться на наиболее релевантном контенте, таком как брендинг или заголовок.

Самое лучшее в этом приеме заключается в том, что с ним легко работать и интегрировать в основной дизайн, оно также подходит практически для любого контента. Углы и изгибы геометрических фигур помогают направлять внимание посетителя от одного элемента к другому. Заключите самый важный контент в окружность, а углы используйте как указатели, так вы поможете аудитории лучше понять сообщение, которое вы хотите передать.

3. Улучшенный 3D

3D внедрили в веб-дизайн в 2011 году и с тех пор крепко обосновался на множестве современных сайтов. Сейчас это далеко не всегда вау-фактор, подчеркивающий общую концепцию дизайна, часто это хитро продуманный элемент, работающий проводником для посетителя прямиком к основной информации, которую необходимо ему красиво и своевременно подать.

Использование 3D-элементов в веб-дизайне может сделать сайт по-настоящему впечатляющим и запоминающимся, а их главная цель – создание чувства глубины. Согласитесь, что сайты, содержащие 3D-элементы, выглядят более интересными и яркими, чем большинство сайтов, которые выполнены в плоском 2D-дизайне. 3D-эффекты могут работать очень хорошо в самых разнообразных вариантах дизайна. От интерфейса в игровом стиле до презентации товара, которая дает пользователям ощущение практически реального взаимодействия. Посетители находят это очень интересным и привлекательным, заставляя разработчиков и дизайнеров все больше включать 3D-эффекты и стили в дизайн сайта. Кроме того, благодаря быстрому развитию технологий виртуальной и дополненной реальности эта тенденция развивается еще быстрее и становится все более востребованной и популярной с каждым днем.

4.Инновационная прокрутка и параллакс

Прокрутка, созданная однажды для перехода от верхней части страницы и наоборот, теперь используется куда более креативно, в том числе и для доставки контента посетителю. Если дизайнеры в прошлом были обеспокоены сохранением самого важного контента в верхней части страницы, то сейчас это старомодное понятие исчезает, поскольку пользователи просматривают содержимое на экранах абсолютно разных размеров с совершенно разным разрешением.

Параллакс – это, по сути, механизм прокрутки, который обеспечивает при этом 3D-эффект, поскольку передний план движется быстрее, чем фон за ним. Эффект параллакса использовался уже с очень давних времен в классических видеоиграх, но в последние годы он стал тенденцией и в мире веб-дизайна. Этот приятный и современный эффект можно все чаще и чаще увидеть на качественных веб-сайтах. Чтобы создать ощущение глубины и обеспечить интересный и привлекательный просмотр страниц вашего сайта, следует использовать одновременно несколько слоев фона, которые имеют различные скорости прокрутки.

Термин происходит от греческого «parallaxis», что означает «изменение». Другими словами, объекты поблизости имеют больший параллакс, чем более удаленные объекты при наблюдении с разных позиций, поэтому прокрутку с эффектом параллакса можно использовать для позиционирования расстояний.

Такой визуальный эффект станет отличным дополнением любого веб-сайта. Возможно все: от многослойного параллакса фона, до параллакса видео — выбирать вам.

5. Микроинтерактивы

Микроинтерактивы – это отдельные моменты, когда пользователь взаимодействует с вашим сайтом. Сейчас это стало настолько распространенным, что без этих приятных мелочей не может обойтись ни один современный сайт. Эти волшебные компоненты добавляют изысканности, делают приятный сюрприз и предлагают что-то по-настоящему привлекательное и запоминающееся посетителям сайта.

Несмотря на то, что создание таких удивительных микро-взаимодействий не всегда легко, если они применяются умело и к месту, они просто великолепны. Если же эти правила не соблюдаются, это может стать катастрофой. Поэтому вы должны создать что-то практичное, что облегчит жизнь пользователя, что-то такое, что станет для посетителя интуитивно понятным и отзывчивым. На эту тему можно долго рассуждать, так что если вы до сих пор не применяли микроинтерактивы, вам стоит попробовать! При должном исполнении вы будете поражены результативностью этого приема.

Заключение

Как бы ни был хорош ваш дизайн, созданный в прошлом году, не стоит расслабляться. Ничто не стоит на месте, в том числе и веб-дизайн тренды. Вы уверены, что ваша страница выглядит актуально до сих пор? Следите за новыми тенденциями, не бойтесь идти в ногу или даже опередить моду — кто знает, может именно ваш стиль станет трендом в следующем месяце.

80 бесплатных ресурсов в помощь дизайнеру

Не важно кто вы: профессиональный дизайнер или любитель, smm-специалист или владелец бизнеса и т. д. Картинки, видосы, иконки и прочие штуки для сайта, поста, статьи, баннера временами ой как нужны всем, кто трудится над продвижением бизнеса в Интернете.

Создать свой проект с нуля может не каждый. Но каждый может в разы облегчить себе жизнь, узнав о некоторых инструментах и «примочках», которыми мы поделимся в этой статье. Тем более что все представленные ресурсы бесплатны (ну или почти все).

Материал разбит на тематические блоки, чтобы вам проще было ориентироваться и выбирать нужный сервис. В общем, читайте, берите и пользуйтесь. ;)

Смотри, любуйся, вдохновляйся

    1. https://dribbble.com/ – популярный среди дизайнеров веб-портал. Дизайнеры со всего мира выкладывают свои работы и делятся опытом. Сайт – это социальная сеть для креативных людей: смотрите и оценивайте чужие работы как зарегистрированный пользователь. Делиться своими работами можно после специального приглашения (invite) от друга-дизайнера. Или показав свои работы другому пользователю с имеющимся приглашением.
    2. https://www.behance.net/ – сетевая платформа для творческих людей. Behance предназначен не только для дизайнеров и иллюстраторов, но и для художников, фотографов, видеографов, архитекторов и многих других людей, чья профессия связана с креативом. Большинство работ представлены как полноценные презентации своих навыков и талантов.
    3. http://revision.ru/ – сетевой выставочный зал в основном с работами русскоязычных дизайнеров.
    4. https://onepagelove.com/ – площадка с большим разнообразием одностраничных сайтов, созданных дизайнерами и разработчиками с разных уголков планеты.
    5. https://land-book.com/ – еще один сайт-портфолио только одностраничных сайтов.
    6. https://www.awwwards.com/ – авторитетная премия в мире веб-дизайна и разработки сайтов. На сайте представлены лучшие работы студий со всего света.
    7. http://www.webdesign-inspiration.com/ – название сайта говорит само за себя. Ресурс, созданный для вдохновения сайтами. Удобная фильтрация работ по цвету, типу и тематикам.
    8. http://www.fltdsgn.com/ – вы любитель сайтов в стиле FLAT? Тогда этот ресурс для вас.
    9. http://www.siteinspire.com/ – тут собраны красивые и вдохновляющие сайты. Сам ресурс регулярно обновляется и пополняется новыми работами.
    10. https://www.thebestdesigns.com/ – еще один сайт с вдохновляющими работами в сфере веб-дизайна.
    11. https://www.uplabs.com/material/ – для любителей Material Design полезно заглянуть сюда. Вдохновение не заставит себя ждать.
    12. https://ru.pinterest.com/ – как же обойтись без Мировой доски вдохновения. Здесь можно найти вдохновение на что угодно и кого угодно.
    13. https://pttrns.com/ – сайт с шаблонами пользовательского интерфейса на любой вкус.
    14. http://www.gomoodboard.com/ – сайт для создания собственной доски вдохновения.
Цукерберг рекомендует:  Одно устройство. Везде

Бесплатные фотостоки

Фотографии, картинки и видео часто нужны в работе. Где брать, если нет возможности сделать свои качественные фотографии? На фотостоках. В сети есть платные и бесплатные. Мы перечислили для вас отличные бесплатные фотобанки, которые проверили и рекомендуем к использованию.

Одно важное но. Не все фотографии или видео бесплатных стоков можно использовать в коммерческих целях. Обязательно проверяйте лицензию. Она будет указана либо на странице с фотографией, либо на общей странице пользовательского соглашения фотостока.

    1. https://www.pexels.com/ – огромное количество красивых и бесплатных фотографий на самые разные темы со свободной лицензией. Есть очень удобный фильтр по цветовой гамме фотографии.
    2. https://unsplash.com/ – больше 200 000 бесплатных фотографий со свободной лицензией. Фотографии разбиты на коллекции от достойных фотографов со всего света.
    3. https://pixabay.com/ – бесплатные изображения высокого качества, так же есть иллюстрации и видео (для коммерческих целей).
    4. https://www.firestock.ru/ – бесплатный фотосток с огромным количеством категорий. Тип лицензии Editorial (для личного пользования).
    5. http://isorepublic.com/ – бесплатные изображения для творческих людей. Каждый день добавляется огромное количество новых фотографий. Можно использовать для коммерческих целей.
    6. http://jeshoots.com/ – более 800 000 бесплатных фотографий высокого разрешения. И тут есть лицензия для коммерческого использования.
    7. http://cupcake.nilssonlee.se/ – вдохновляющие изображения от талантливого фотографа Nilsson Lee, которые можно ставить на сайт и в рекламу. Коммерчески пригодные фото.
    8. https://magdeleine.co – на сайте представлены потрясающие фотографии разных тематик. Доступен поиск по преобладающему цвету. Ну и лицензии на все случаи жизни.
    9. http://nos.twnsnd.co/ – винтажные фотографии из публичных архивов. Все круто, но только для личного и некоммерческого использования.
    10. https://picjumbo.com/ – более 3 000 изображений высокого качества, библиотека активно пополняется. Разрешено использование фотографий в коммерческих целях, но запрещена перепродажа.
    11. https://www.freestockimages.ru/photo/ – бесплатный фотобанк лицензионных фотографий высокого разрешения. Допускается использование в коммерческих целях.
    12. https://www.sitebuilderreport.com/stock-up/ – более 18 000 доступных фотографий. Stock Up объединяет множество различных бесплатных веб-сайтов с фотографиями, поэтому лицензия на каждую фотографию будет отличаться.
    13. http://kaboompics.com/gallery – популярный бесплатный источник качественных фотографий. Фотографии с Kaboompics появляются на сайтах, таких как BBC, CNN, Forbes, Cosmopolitan, Yahoo и т. д. Но важно проверять лицензии на фотографии, они могут быть разными.
    14. https://www.foodiesfeed.com/ – бесплатный фотобанк с изображениями еды в высоком разрешении. Допускается использование в коммерческих целях.
    15. https://www.splitshire.com/ – фото и иллюстрации для бесплатного использования.
    16. http://www.lifeofpix.com/ – еще один бесплатный фотосток с фотографиями высокого качества и его вполне можно использовать для поиска фото в коммерческих целях.
    17. http://www.gratisography.com/ – сайт с креативными снимками от фотографа Райана Макгуаера. Фотосток пополняется еженедельно и также подходит для коммерческого использования.

Бесплатные видео

Часто для сайта нужны не только фото, но и видео. Когда под рукой нет видеографа, всегда можно обратиться к стокам. Но здесь также надо смотреть на лицензию, если интересует применение в коммерческих целях для фона на сайт, для обработки в синемаграмму с последующим использованием в блоге и т. д.

    1. http://www.clipcanvas.com/free-footage/ – на сайте большое количество платных и бесплатных видеороликов высокого качества.
    2. http://www.lifeofvids.com/ – бесплатные видеоклипы высокого разрешения с лицензией ROYALTEE-FREE. Разрешено использование в коммерческих целях.
    3. http://www.wedistill.io/ – бесплатные профессиональные видео для творчества. Можно использовать в рекламных целях.
    4. https://www.videezy.com/ – площадка профессиональных и начинающих видеооператоров, чьи работы находятся в открытом доступе. Разрешено использование в коммерческих целях.
    5. http://www.free-hd-footage.com/ – бесплатные видео отличного качества. Также имеются такие категории как 3D, 4k, 2k. Видео банк небольшой, но категории самые разнообразные.
    6. https://www.videvo.net/ – бесплатные видеоролики для любого проекта. Для скачивания требуется регистрация. Видео разрешено использовать в коммерческих целях.
    7. http://mitchmartinez.com/free-4k-red-epic-stock-footage/ – бесплатные 4к-видео от профессионального фотографа и видеографа Mitch Martinez. Его видео разрешается использовать только в личных целях, не в коммерческих, но есть возможность договориться с автором о расширенной лицензии.
    8. https://pixabay.com/ru/videos/ – бесплатные видео отличного качества. Разрешено коммерческое использование.
    9. http://www.coverr.co/ – сервис для подбора фонового видео на сайт. Видео разрешены для использования в коммерческих целях.
    10. http://mazwai.com/ – большое количество спокойных и живописных видео про природу. Лицензия позволяет использовать в коммерческих целях.

Бесплатные векторные иллюстрации, иконки, фоны и psd

Не всегда находится время отрисовывать векторные элементы с нуля, да и не всегда перерисовка целесообразна. Большинство классных вещей кем-то уже отрисованы, как бы грустно это не звучало. Поэтому иногда можно воспользоваться уже готовыми иллюстрациями или иконками, значительно сэкономив время.

Главное – выбирать не поднадоевшие везде используемые элементы. Векторный формат достаточно гибкий: он редактируется под свой проект. Все представленные в этом списке сервисы не имеют проблем с лицензией и их можно использовать в коммерческих целях.

    1. http://ru.365psd.com/ – на сайте огромное количество коллекций бесплатных векторных изображений, эмблем и PSD-исходников.
    2. http://www.freepik.com/ – графические ресурсы для всех. Поможет вам найти бесплатную векторную графику, иллюстрации, иконки, PSD и фотографии для использования на сайтах, баннерах, презентациях, журналах. На сайте есть в том числе и платные премиум-иллюстрации.
    3. https://www.flaticon.com/ – более 400 000 иконок на самые разные темы. Есть встроенный редактор иконок по цвету, размеру. В довесок есть и платные качественные иконки.
    4. https://icons8.com/ – 55 000 иконок в стиле Flat. Иконки формата png бесплатны, за формат svg нужно заплатить.
    5. http://dbfreebies.co/ – на сайте отобраны лучшие бесплатные работы с behance и dribbble. Среди них дизайнерские шрифты, иконки, PSD-шаблоны и мокапы, которые используются для презентаций своего дизайна на пустом макете продукта.
    6. https://www.toptal.com/designers/subtlepatterns/ – большое количество аккуратных фонов для сайта. Есть возможность посмотреть на фон «в работе» перед скачиванием.
    7. http://www.heropatterns.com/ – небольшой сайт с паттернами и фонами в svg формате от дизайнера Стива Сёргера. Есть удобный редактор цвета, формата и размера узора. Все паттерны Стив предоставляет бесплатно.
    8. https://freevectormaps.com/ – сайт полностью посвященный векторным картам в разных стилях и техниках. От больших карт Мира до карт мелких островов.
    9. https://freebiesbug.com/ – бесплатные иллюстрации, шрифты и PSD от популярных дизайнеров.
    10. http://www.fribbble.com/ – бесплатные PSD-файлы и другие бесплатные дизайнерские ресурсы от Dribbble.
    11. https://www.mockupworld.co/ – источник бесплатных фотореалистичных мокапов для презентаций, кейсов.
    12. http://fontello.com/ – большое количество иконок хорошего качества в формате svg, есть возможность генерации шрифта из иконок.
    13. http://perfecticons.com/ – генератор иконок социальных сетей онлайн.
    14. https://thenounproject.com/ – на сайте почти миллион дизайнерских иконок формата png и svg. Есть редактор иконок перед скачиванием.
    15. http://www.endlessicons.com/ – бесплатная библиотека плоских и контурных иконок.
    16. http://fontawesome.io/ – шрифт, генерирующий иконки.
    17. http://pixelmap.amcharts.com/ – генератор карты в аккуратные пиксели. Получившееся изображение можно скачать в формате svg, html, png.
    18. https://www.iconfinder.com/free_icons/ – бесплатные коллекции иконок в разных стилях.

Подбор цветовой схемы и палитры

Цвет несет важное значение в работе дизайнера. От выбора правильной палитры зависит тон и настроение всего проекта. Чтобы не терять время и не перебирать учебники с теорией цвета, существует много вспомогательных сервисов, работающих по тому же принципу.

    1. https://color.adobe.com/ – один из самых популярных помощников по подбору цветовой схемы. Есть возможность сохранять свои палитры и смотреть палитры других дизайнеров.
    2. https://colorscheme.ru/ – удобный инструмент для веб-дизайнера. Помогает не только определиться с цветом сайта, но и посмотреть выбранное сочетание на сайте-примере.
    3. http://bootflat.github.io/color-picker.html – подборка контрастных цветов для проектов в стиле Flat.
    4. https://uigradients.com/ – на сайте собраны самые модные и приятные градиенты для ваших проектов.
    5. https://dribbble.com/colors/9cf4df?percent=30 – у сайта dribbble.com так же есть фильтр по цвету работ. Можно выбрать подходящий цвет из палитры и посмотреть сочетания в работе популярных дизайнеров.
    6. http://discovercolor.ru/ – удобный сайт с приятными фотографиями, разбитыми на цветовые палитры.
    7. https://brandcolors.net/ – самая большая коллекция официальных цветов популярных мировых брендов.
    8. https://chrome.google.com/webstore/detail/eye-dropper/ – удобный определитель цвета для браузера Google Chrome (перед использованием требуется установка).
    9. http://www.0to255.com/ – сайт для подбора более светлых и темных оттенков одного цвета. Очень удобен для создания градиентов и hover-эффектов.
    10. https://www.materialpalette.com/ – генерация палитр в стиле material design.
    11. https://coolors.co/ – супербыстрый и бесплатный генератор цветовых схем.

Бесплатная типографика

Шрифты – неотъемлемая часть каждого проекта. Без текста нет рекламы и посыла. Создание своего шрифта требует немало усилий, опыта и времени. Не каждому титулованному дизайнеру это под силу. Именно поэтому существует немалое количество качественных бесплатных шрифтов и их сочетаний, которые придумали талантливые люди и любезно ими делятся.

    1. https://fonts.google.com/ – бесплатные шрифты от Google.
    2. https://www.canva.com/font-combinations/ – бесплатный поиск шрифтовых комбинаций для вашего дизайна.
    3. http://fishtext.ru/ – генератор рыботекста для незаконченных шаблонов или других ваших проектов.
    4. http://allfont.ru/cyrillic/ – большая коллекция кириллических шрифтов (не все лицензии подходят для коммерческого использования).
    5. http://typespiration.com/ – бесплатный подбор вдохновляющих шрифтовых комбинаций. Увы, не все шрифты доступны в кириллице.

Hover-эффекты, анимация и живые фоны

Возможно, у кого-то возник вопрос: зачем здесь информация для front-end разработчиков? Но выбрать правильный hover-эффект или анимацию – задача дизайнера. Знания html и css еще ни одному веб-дизайнеру не навредили и быть в курсе новинок в стезе верстки его прямая обязанность. В этом помогут приведенные ниже сервисы и не обязательно изобретать велосипед. Вдохновляйтесь тем, что уже есть, и применяйте это в своей работе.

Создание сайта, рекламного баннера, картинки для статьи или поста в соцсетях – это комплексное мероприятие. Поэтому, помимо подбора красивенького изображения, не забывайте о качестве текста, удобстве ресурса и т. д. Кстати, все вышеперечисленные работы можно сделать в рамках редизайна и доверить это профессионалам. Без лишней скромности рекомендую нас. ;)

Создание сайтов в Киеве, Харькове

Создание сайта с нуля — один из важных этапов в построении успешного бизнеса и его развитии, ведь именно он — тот самый маркетинговый инструмент, который позволяет привлекать новых клиентов, повышать продажи и достойным образом представить ваш бизнес общественности.

Создание сайтов в Киеве и продающих интернет-магазинов — приоритетное направление деятельности компании Artjoker. Обратившись к нам, вы получите не просто качественный программинг, красивый и эргономичный дизайн, но и комплексный подход к решению всех возложенных на нас бизнес-задач.

Основные этапы разработки сайтов от компании Artjoker

Разработка сайта с нуля — процесс трудоемкий и требующий максимальной ответственности и профессионализма со стороны разработчиков и менеджеров. Основные этапы разработки сайта от Artjoker:

  • бизнес-анализ и составление технического задания
  • внедрение: дизайн, верстка, программирование и наполнение контентом
  • контроль (тестирование на всех технических этапах) и запуск в сеть (размещение на хостинге)

В компании Artjoker выполняется разработка сайта быстро, мы проповедуем Культ Дедлайна, и вы можете быть уверены, что на выходе получите свой веб-проект на высшем уровне и в срок. Как правило, создание сайта с нуля занимает около 30 дней, и, в конечном итоге, мир веба пополняется новым выдающимся ресурсом, а ваш бизнес-инструментарий — мощным источником новых клиентов, стабильной прибыли и усилением имиджа бренда.

1 этап — Формирование технического задания на изготовление сайтов

Итак, с чего все начинается? Изготовление сайтов начинается со знакомства с заказчиком и его бизнесом. Менеджеры проекта проводят, как правило, несколько встреч с клиентом, на основе чего выявляют особенности и специфику бизнеса, его сильные и слабые стороны, определяют целевую аудиторию и вырабатывают стратегию дальнейших действий.

Поставленные цели и задачи, а также поэтапный план работы над проектом отображается в техническом задании на изготовление сайта — документе, в котором прописаны основные моменты работы: архитектура страниц, структура, ключевые модули, разделы и функционал. Кроме того, на этом этапе окончательно определяются необходимые ресурсы, команда и часы работы каждого специалиста, сроки выполнения (обязательно фиксируется дедлайн). В окончательном итоге мы получаем конкретный план проекта, нацеленного на достижения положительного результата.

2 этап создание сайта — Разработка дизайна под ключ

После того, как техническое задание готово, обсуждено и утверждено, специалисты приступают ко второму этапу — разработке дизайна. Команда дизайнеров рисует все необходимые элементы веб сайта в соответствии с выбранной концепцией и пожеланиями клиента, чтобы создать сайт, который будет привлекательным как для заказчика, так и для целевой аудитории.

3 этап разработки сайта — Верстка

Создание, разработка сайта Харьков, Киев от команды Artjoker следующим этапом предполагает внедрение технологий, в частности, верстку. Можно использовать разные типы верстки: фиксированную, резиновую или адаптивную. Своим клиентам мы советуем адаптивную, ведь именно она позволяет сделать ресурс максимально удобным для использования не только на ПК, но и на различных мобильных устройствах, что сегодня особенно актуально.

4 этап — Программирование

Далее приступаем к программированию, в процессе которого происходит так называемая «магия», ведь не посвященному в особенности технологий веб-разработки может показаться, что специалист и правда колдует над проектом. На этом этапе происходит создание всех страниц и обеспечение функциональности всех элементов. Все, зафиксированные в техническом задании модули, внедряются, а верстка прикручивается к админке. По согласованию с заказчиком, мы разрабатываем сайты на CMS (админке) MODx, а интернет-магазины — на Magento или расширенной собственными доработками и модулями MODx E-commerce.

5 этап — Наполнение контентом

Разработка, создание сайтов Харьков заканчивается тем, что они наполняются контентом. Мы готовы предложить команду специалистов в лице контент-менеджеров и копирайтеров, которые не только напишут уникальные и продающие тексты, но и сумеют гармонично их вписать в общую структуру ресурса, при этом обеспечив начальный этап внутренней оптимизации ресурса: мета-теги, уникальные тексты и перелинковка.

После того, как интернет ресурс будет окончательно готов, мы размещаем его на домене клиента, настраиваем хостинг и обучаем заказчика работать с ресурсом. Благодаря тому, что в качестве административной панели мы используем систему управления MODX или Magento, процесс взаимодействия для вас со своим ресурсом предельно понятен и прост.

Вот, собственно, и все: на этом работа над созданием веб-ресурса заканчивается, но следует помнить, что разработка сайтов Украина — это первый шаг к успеху. Следующим логичным шагом будет грамотное и контролируемое продвижение проекта.

Разработка сайтов под ключ ведется на базе CMS:

Почему стоит доверить изготовление сайта студии разработки веб сайтов Artjoker?

Студия разработки веб сайтов Artjoker— это не просто команда опытных специалистов, это «большой мозг», который постоянно работает над улучшением качества своей работы и результатов для клиентов.

Обращаясь к нам за созданием сайта или интернет-магазина вы получаете:

  • продающий веб-проект, ориентированный на привлечение клиентов
  • контроль качества продукта на каждом из этапов разработки
  • надежность и стабильность работы
  • поддержку и возможность дальнейшего продвижения

Кроме того, вы получаете команду специалистов, состоящую из менеджера, дизайнера, верстальщика, юзабилиста, программиста, тестировщика и маркетолога, которые постоянно работают над вашим проектом и добиваются только лучших результатов!

Где заказать сайт под ключ дешево?

Создание сайтов, заказать которое можно практически в любой студии веб-разработки в Киеве, не всегда стоит дешево. А ведь так хочется получить максимально качественный и профессиональный веб-проект, при этом не потерять в экономическом плане, не так ли?

Но, если вы хотите заказать сайт дешево, то следует помнить, что «скупой платит дважды» и, сделав проект по низкой цене, вы рискуете получить неэффективный ресурс, который может не принести желаемого результата. Чтобы действительно развить свой бизнес и поднять продажи, в первую очередь, в приоритете должно стать качество проекта, в первую очередь, профессиональная разработка сайта, стоимость которой в компании Artjoker окупается в самые короткие сроки.

Свяжитесь с нашим менеджером прямо сейчас и мы поможем вам прокачать свой бизнес в сети!

65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи

Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.

Безлимитная графика для ваших проектов

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Главные тренды веб-дизайна в 2020 году

1. Смелые, яркие цвета

В 2020 мы наблюдали восхождение смелых и ярких цветов, и они не собираются сдавать свои позиции, превращаясь в один из самых значимых трендов 2020.

Проект: Show Go Poster Collection 2020 / Автор: ∆ Studio—JQ ∆

Проект: Daily Posters / Автор: Magdiel Lopez

2. Яркие и насыщенные градиенты

Последние годы ознаменовались возвращением градиентов. Ожидается, что они снова войдут в тренды веб дизайна, претерпев изменения в 2020 году: в палитру добавятся насыщенные цвета в сочетании с разнообразием текстур. Градиенты в обновленной версии будут использовать двухцветные эффекты.

Проект: Magic.co / Автор: Ludmila Schevenko

Проект: Electric Objects / Автор: Rose Pilkington

Проект: Gradient Studies / Автор: Evgeniya Righini-Brand

3. Цвет года (Пантон)

PANTONE® 16-1546 Живой коралл (Living Coral)

Проект: Pantone Color of the Year 2020 | Living Coral / Автор: ∆ Studio—JQ ∆

4. Простота и удобство

Меньше значит больше» — бессменный тренд. Простота подразумевает аккуратную страницу со светлым фоном в лучших традициях минимализма. Пространство — бог: при его правильном использовании можно получить многофункциональный дизайн.

Проект: Creative case / Автор: Nikita Mahaev

Проект: A propos du cancer / Автор: Extra

5. Больше дизайна с дополненной реальностью

Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.

Проект: DIA / Автор: DIA

6. Экстра глубина (и полуплоский дизайн)

В 2020 году имеет смысл немного оживить традиционный плоский дизайн: добавление теней поможет сделать элементы более объемными, сохранив основные концепции минимализма, которые сделали плоский дизайн популярным. Пространство и объем — элементы новой концепции глубины.

Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida

Проект: Flyknit Lunar 3 / Автор: Callum Notman

Проект: Made You Look�� 255 | Live a little more / Автор: STUDIOJQ

7. Геометрические элементы

Использование геометрических элементов, таких как многоугольники (треугольники, квадраты, пятиугольники) и кривые (окружность или эллипс) сделает ваш проект запоминающимся.

Проект: Nike Le Quartier / Автор: Atelier Irradié

Проект: France Colombia cultural season Brand design / Автор: Graphéine

8. Больше творческой фотографии

Современные фотосессии и брендинговые кампании стану более дерзкими и экспериментальными, обратившись к искусным дизайнерским приемам. Созданный на основе бумажных зарисовок или 3D визуализации, такой дизайн совершенно точно будет выделяться и сохранится в памяти.

Проект: Aizone / Автор: Sagmeister&Walsh

Проект: Monkifesto / Автор: Snask

Проект: Nike AMD Revolution / Автор: Happy Finish

9. Дуплекс

Дуплекс (репродукция изображения с использованием полутонов двух ведущих цветов) имеет все шансы попасть в ведущие тренды веб дизайна в этом году. Эта техника не является новой — она появилась несколько десятилетий назад, но благодаря Spotify вновь обрела популярность.

Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira

10. Брутализм

Брутализм — грубая концепция, рассчитанная на захват внимания. Брутализм применяется в дизайне с 50-х годов прошлого века, в основном для оформления плакатов и афиш (направление возникло в архитектуре 40-х и стало трендом). Концепция снова востребована, ее можно встретить во всех сферах дизайна. Направление призвано шокировать аудиторию прямолинейным подходом, громоздкой типографикой и неизящными дизайнерскими техниками.

Проект: DoD Cyber Guide / Автор: Marçal Prats

Проект: Power A political party / Автор: Bruce Vansteenwinkel

11. Анимация, Gift-картинки и синемаграфика

Веб-сайты, логотипы, рекламные видео товаров и услуг — графика движения используется везде. Один из ведущих трендов графики движения — незаметные переходы, которые помогают потребителю лучше понять продукт. Графика движения присутствует и в типографике: от бросающихся в глаза заголовков на слайдерах до анимации на логотипе.

Цукерберг рекомендует:  Php - как задать кодировку php

В 2020 очень вероятно возвращение в тренды синемаграфики (это статичные картинки с единичными движущимися элементами, например, изображение чашки, из которой с анимацией поднимается пар). Значимые элементы не должны быть неподвижными!

Проект: RED / Автор: Kevin Hou

Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck

Проект: Strong Women / Автор: Andreea Robescu

12. Генеративный дизайн

Генеративный дизайн уже несколько лет используется при разработке айдентики. За счет смешения цвета и формы этот прием позволяет добиться совершенно уникальной айдентики и повысить узнаваемость бренда.

Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio

Проект: Sydney School of Entrepreneurship / Автор: For The People

Проект: Archdiploma Dynamic Identity / Автор: Process

13. Набор цветов и узоров из 80-90-х

Где мы это видели? Ну конечно же: это возвращение популярных в 80-90-е цветов с их кислотным розовым и дерзкой контрастностью. Можно ли назвать эти ностальгические настроения вернувшимся трендом? Или все объясняется тем, что молодые дизайнеры — это люди, чье детство прошло в окружении сумасшедших цветов тех лет?

Их старые игрушки и сомнительные с точки зрения сегодняшней моды наряды родителей послужили вдохновением для возрождения яркого, красочного тренда, дополненного рядом современных веяний.

Проект: Yes To All / Автор: Nick Liefhebber

Проект: LOGOFOLIO 2020 / Автор: 268 Estúdio Design

Проект: 80’s inspired Pattern / Автор: Rahul Das

14. Кастомные иллюстрации

Персонализация бренда начинается с дизайна. Нахождение языка бренда посредством рисунков и иллюстраций превращает любой сайт в уникальную визитную карточку, которая будет транслировать голос бренда с самого запуска.

Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes

Проект: Illustrations for Koypo Industries / Автор: Milo Themes

Проект: Lifecycle / Автор: Paperpillar Studio

15. Иллюстрации в миксе с фотографией

Эклектичный тренд на 2020 год сочетает пользовательские иллюстрации с фотографией. Этот метод дает уникальный и очень современный вид для любого проекта. Добавление рисованных элементов в обычную фотографию может сделать любую фотографию особенной, даже если вы используете ее на модной фотографии или плакате.

Проект: Magazine covers / Автор: Andreea Robescu

Проект: Insects Love / Автор: Andreea Robescu

16. Реальные фото

Фотостоки тоже подвержены влиянию трендов. В этом году будут цениться реальные, честные фотоснимки. Многие бренды используют уникальные фото, снятые в движении и без постановки. Фотография становится более искренней и напоминает моментальные снимки, сделанные в расслабленной и естественной обстановке.

17. Изометрический дизайн и фотография

Изометрическое проектирование является способом художественного представления объемных объектов в плоскости. До того, как дизайнеры обнаружили этот прием, он использовался большей частью для составления технических и инженерных чертежей. Изометрический дизайн совершает масштабное восхождение в фотографии, иллюстрировании, 3D графике и иконографике. Можно с уверенностью сказать, что в 2020 году он будет востребован во многих креативных проектах.

Проект: Ultraviolet Break of Day / Автор: Field.io

Проект: Abstractions Vol.1 / Автор: Mohamed Samir

Проект: Isometric House / Автор: Angela Chan

18. Сочетание 2D и 3D

Создавать 3D объекты и помещать их в 2D проекты стало очень модно. Это сочетание дает уникальную внешнюю эстетику, соединяя глубину и плоскость. Технику можно применить в разных направлениях дизайна: от создания логотипов до веб-сайтов и рекламного видео. Конечный результат представляет собой сложную визуальную презентацию, которую невозможно забыть.

Проект: Daily Posters / Автор: Baugasm

19. Монохром

За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.

Что произойдет, если 3D пойдет дальше в создании объема для объектов одного оттенка? Использование одноцветного 3D позволяет дизайнерам добиться иллюзии объема с помощью глубины цвета и теней.

Несмотря на отсутствие контраста возникает натуральный эффект объема, и мы видим объект, реалистично выступающий из фона. Этот магический эффект останется популярным в 2020 году.

Проект: Magrela Popcorn / Автор: Hugo Aranha

Проект: Amazonia Beverages / Автор: Hugo Aranha

Проект: Nespresso Expertise / Автор: JVG ™

20. Дудлы (иллюстрации, нарисованные вручную)

Нарисованные вручную картинки или даже просто отдельные элементы добавляют бренду уникальности. Картинки «от руки» не требуют выверенности линий и могут использовать грубые штрихи, за счет чего композиция получается более естественной.

Проект: Toasted Pets! / Автор: Brosmind ®

Проект: Awake Festival Proposal / Автор: Milo Themes

Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan

21. Смешение и пересечение стилей

Иллюстрация и фотография, типографика и рисунки, градиенты с жирным шрифтом, дуплекс и яркие цвета — сочетайте 2, 3 или даже больше трендов 2020 года, чтобы получить эклектичный и запоминающийся дизайн.

Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly

Дизайн логотипа

В мире «отзывчивого» дизайна адаптация логотипа под любое устройство крайне важна. По-настоящему адаптивный логотип не просто уменьшается на странице, а претерпевает дополнительные изменения и подстраивается под окружающий контекст.

Адаптация логотипа стала топовой задачей для дизайнеров: бренд должен быть эффектно представлен вне зависимости от пространства и измерений. Бросая вызов дизайнерам, адаптивные логотипы становятся маст-хевом в 2020 году.

Проект: Responsive Logos / Автор: Joe Harrison

Автор: Design Studio

23. Логотипы с анимацией

Логотипы с анимацией используются уже некоторое время, но сегодня их можно увидеть практически на любом сайте. Анимированные лого способны отобразить историю бренда и увеличить конверсию за счет хорошей узнаваемости.

Проект: Type With Pride Gilbert font / Автор: Fontself Team

Проект: Logo Visual identity / Автор: Mariusz Mitkow

Красочные лого с забавными элементами, анимацией и кастомными рисунками — значимый тренд 2020 года. Бренды хотят создать позитивный посыл потребителю, а развлекательный подход этому очень способствует.

Проекты: Axel Flores , Vladimir Lifanov , Silvestri Thierry , Vadim Carazan , Onrepeat Studio , Serafim Mendes

25. Негативное пространство

Негативное пространство остается горячим трендом в дизайне. Этот тренд продолжает потрясать основы веб дизайна, хотя активно используется уже некоторое время. Ранее дизайнеры обращались к негативному пространству для создания минималистского стиля, новшество этого года — наполнение свободного пространства яркими цветами, геометрическими фигурами и узорами.

Проекты: SeisTrece Studio , Vadim Carazan , Quim Marin , Bureau Rabensteiner , Andrei Traista

26. Геометрические фигуры и узоры

Оформление логотипа едва заметным кастомным узором делает громкое заявление о бренде. Мелкие геометрические элементы добавляют логотипу разносторонности и оригинальности, поэтому мы определенно увидим этот прием в 2020 году.

Проекты: islam biko , Quim Marin , Silvestri Thierry , Vadim Carazan

27. Монограммы

Монограммы никогда не исчезнут в сфере дизайне логотипа. Это способ создать стабильность, показать качество и традиции в бренде. Монограммы также могут быть созданы с использованием более современного подхода, смешивая некоторые современные тренды с этого года как яркие цвета, дуплекс или геометрические узоры.

Проекты: Milo Themes , Romain Billaud

28. Градиенты

Градиенты — один из главных трендов, унаследованных от 2020-2020 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?

Проекты: MICHAEL SPITZ , Nicholas Slater , Jeroen van Eerden , Vadim Carazan

29. Наложения

В связи с восхождением тренда дуплекс эффект наложения элементов друг на друга невероятно популярен в дизайне логотипов. Взгляните на нашу подборку.

Проекты: CaveLantern , Fontself Team , Rosie Manning

Веб-дизайн (Ui/Ux)

30. Концепция Mobile First

Ни для кого не новость, что мобильный трафик превышает десктопный. Веб дизайн 2020 года учитывает значимость мобильной версии динамических иконок, меню и подменю.

Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .

31. Микровзаимодействия

Они повсюду. Каждый раз, когда вы лайкаете что-то на facebook или пролистываете контент в мобильном приложении, вы участвуете в микровзаимодействиях. И они неплохо работают, учитывая, что их цель — активность пользователя и динамичный UX.

Элементы становятся текучими: кнопки могут менять форму, и все поверхности скрывают анимированные сценарии, ожидающие прикосновения и активации. Готовы спорить, что они не покинут пьедестал и в 2020 году.

Проект: Brewskies v2 / Автор: Kevin Yang

Проект: Gesichtspunkt / Автор: Alim Maasoglu

32. Встроенная анимация

Элементы со встроенной анимацией ненавязчиво помогают пользователю в процессе просмотра сайта. Они скрашивают ожидание полной загрузки контента и проявляются при взаимодействии с элементами и процессами на странице, к примеру, при скроллинге или наведении фокуса на определенный блок.

Присутствие анимированных персонажей на странице помогает установить контакт с пользователем, расширяя привычное взаимодействие с сайтом.

Проект: inturn website / Автор: INTURN

33. Креативные экраны загрузки

Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.

Проект: Awwwards Conference / Автор: Adoratorio

34. Раскладка с ломаной «сеткой»

Некоторые дизайнеры считают, что традиционная «сетка» раскладки ограничивает их креативность, поэтому стремятся изменить правила и высвободить свою творческую энергию. «Сетка» с наложением картинок и текста друг на друга способна создать уникальный экспериментальный дизайн.

Проект: The Refugee Nation Web Design Branding / Автор: Justin Au

Проект: Ueno Concepts / Автор: Ben Mingo

35. Разбивка страницы

Разбивка страницы на части позволяет разделить контент семантически, например, изолировав текст от картинок или расположив информацию по иерархии. В 2020 году, когда объем информации продолжает расти, никто не хочет пробираться через нагромождение контента. Разбивка станет для дизайнеров тем волшебным инструментом, который поможет вместить все, не потеряв в UX и эстетике.

Проект: Product Landing Page UI / Автор: Dinesh Shrestha

Проект: Design Thinking / Автор: Radowan Nakif Rehan

36. Больше (интерактивного) 3D в оформлении

Главный тренд, который признает современный веб дизайн 2020 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.

Проект: Atacac 2020 Yearbook

Проект: The Artery

37. Закругленные углы и плавные формы

На протяжении последних лет в дизайне преобладали прямые углы и остроконечные геометрические фигуры. В последние месяцы их сместили плавные линии и округлые формы. В сочетании с сочными цветами и использованием слоев этот тренд укрепляет свои позиции.

Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow

Проект: Landing page project design / Автор: Mariusz Mitkow

38. Фоны с движущимися элементами

«Заставь меня читать» — скрытое обращение пользователя к любому веб дизайнеру. Фоны с движущимися элементами решают эту задачу, притягивая взгляд, но не отвлекая внимание от текста. К тому же они не вызывают проблем при загрузке в отличие от фонов из видео.

Едва уловимое движение текстуры, легкая анимация, эффект вплывающих пузырьков — все они отлично впишутся в веб дизайн сайта, цель которого — понравиться пользователю. Даже в 2020 году.

Проект: Wibicom / Автор: Wibicom Agency

39. Футуристические узоры

В начале 2000-х будущее виделось похожим на показанное в «Матрице»: бегущие по экрану цифры, технологии, робототехника, пульсирующий свет.

Сценарий утратил свою привлекательность, когда стало понятно, насколько далеко фильм отошел от реальности, которая оказалась намного менее футуристичной. Однако благодаря Глубокому Анализу и Big Data мы наблюдаем возвращение робототехнических трендов: футуристические орнаменты найдут применение и в 2020.

Проект: Crown Tech / Автор: Jan Wolinger

Проект: SpaceShip / Автор: Arif Rachman Hakim

Проект: Data Visualization Concept / Автор: Mario Šimić

40. Монохромные иконки

В то время, как остальное пространство страницы наполняется цветом и градиентами, иконки продолжают следовать «моно» правилу, ведь их главная цель — оставаться читабельными. Небольшое заполнение вариациями одного цвета сделает иконку визуально привлекательной, а не только информативной, и ловко впишет ее в общий дизайн.

Проект: Icon Design / Автор: Eaton

41. Иконки, частично заполненные цветом

Части графических иконок будут закрашиваться цветом. Это будет не полное заполнение, а лишь легкое прикосновение цвета, оставляющее пробелы, словно иконка небрежно нарисована от руки. Заливка, которая не перегружает иконку и сохраняет ее читабельной.

Проект: Alfred icons / Автор: Andrea O

Проект: Icons / Автор: Alisa_

42. Скроллинг с Parallax

Скроллинг с Parallax настолько вездесущ, что невозможно не принимать его во внимание. Когда скроллинг может управлять скоростью анимации, единственный лимит дизайнера — воображение.

Parallax — бессменный тренд веб-дизайна, продолжающий делать сайты оригинальными и запоминающимися. Создавая 3D эффект между движущимися передним планом и фоном, Parallax придает неуловимую глубину странице и плавность пролистывания контенту.

Проект: Dex Multi-Layer Parallax / Автор: Milo Themes

43. Мондрианизм

Желание свободы и эквилибриума (гармонии) — врожденное стремление человека (по причине присутствия в нем вселенной)», сказал Пит Мондриан. Мондрианизм станет трендом 2020 года: стиль, в котором соединяются базовые цвета — красный, желтый и синий, создавая впечатление чистоты, гармонии и уравновешенности.

Эквилибриум, основанный на прямоугольных формах и базовых цветах, с идеальным с точки зрения удобства пользователя размещением элементов.

Проект: Mondrian / Автор: Stugbear

Проект: Guernica / Автор: Shota

Типографика

44. 3D — моделирование

3D — многообещающий тренд, охвативший все сферы дизайна. Объемный текст добавляет реалистичности общей композиции.

Проект: Atypical / Автор: Pawel Nolbert

Проект: Alphabet Project / Автор: Serafim Mendes

Проект: RE NEON vI / Автор: Omar. Aqil

45. Жирная типографика

Жирная типографика была большой трендом в последние годы, и она определенно останется. В 2020 году мы увидим гораздо более смелую типографику в сочетании с яркими цветами. Поэтому помните, что если вы хотите сделать сильное заявление, смелая типографика это отличный метод.

Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes

Проект: TEDxGroningen / Автор: Rudmer van Hulzen

46. Serif шрифты

На протяжении нескольких лет в типографике преобладали sans-serif шрифты, но сейчас наблюдается возвращение serif. Ниже представлены несколько интересных проектов, авторы которых выбрали serif шрифты и добились впечатляющих результатов.

Проект: Custom Type Design / Автор: Moshik Nadav Typography

Проект: Lux Naturalis Gala Invitation

47. Геометрический шрифт

Геометрические шрифты были востребованы последние несколько лет и остаются важным трендом и в 2020 году.

Проект: VitrineMedia / Автор: Graphéine

Проект: Sydney School of Entrepreneurship / Автор: For The People

48. Кастомные шрифты

Эксцентричные кастомные шрифты становятся хитом среди дизайнеров. Фрагментированный, искаженный или ломанный шрифт определенно выделяется на фоне других, на что и делается расчет. Некоторые из подобных шрифтов еще и интерактивные, с откликом на движения курсора мыши. Уникальности кастомных шрифтов нет предела, и в 2020 году мы увидим множество экспериментов с ними.

Проект: Lingerie XO The Sexiest Most Powerful Typeface Yet / Автор: Moshik Nadav Typography

Автор: Jeanne Bataille

49. Эксперименты с выравниванием и кернинг

Хаотичность в типографике была одним из главных трендов 2020 и остается на вершине в 2020 году. Забудьте о правилах и дайте простор фантазии!

Проект: Studio Studio / Автор: Rudmer van Hulzen

Проект: nyMusikk annual report 2020 / Автор: Non-Format

50. Экспериментальная типографика

Дизайнеру следует экспериментировать со шрифтами, добиваясь инновационных результатов. Добавляя в существующие шрифты негативное пространство или кастомные элементы, можно добиться потрясающих результатов.

Проект: Experimental Chinese Typography / Автор: Letitia Lin

51. Типографика в миксе реальными фото

Эклектичные тренды всегда эффектны, и этот не исключение. Добавляйте типографику в фотоснимки или 3D отрисовки и получайте авангардный дизайн.

52. Креативная типографика

Креативная типографика, применяющаяся уже некоторое время, не только не исчезнет в 2020 году, но и получит статус одного из главных трендов. Свободное от условностей применение этой техники поможет построить «мир, созданный воображением». «Используй шрифт, чтобы впечатлять» — лейтмотив этого года.

Проект: ILOVEDUST — 3D TYPE COLLECTION 1 / Автор: ILOVEDUST

Проект: Typography 3D — 9 / Автор: Alexis Persani

Дизайн упаковки

53. Плоский дизайн

Плоский дизайн до сих пор остается востребован в оформлении лейблов и упаковок. Плоские фигуры, узоры и кастомные иллюстрации — верный выбор в 2020 году.

Проект: Cheddar-Cheese-Melt-Mcdonalds-Packaging / Автор: Mostafa Abdelmawla

Проект: The-Gang / Автор: MARKA NETWORK

Проект: Melio / Автор: Rachael Batley

54. Минималистский дизайн

Дизайн со множеством элементов ушел в пошлое, вся второстепенная информация должна уступить место важной. Этот тренд активно использует отрицательное пространство, чтобы пользователь взаимодействовал только с необходимым ему контентом.

Проект: Sarta-Milano / Автор: MARKA NETWORK

Проект: Gyalmo / Автор: Łobzowska Studio

55. Узоры и фигуры

Геометрические

Геометрические формы будут присутствовать во всех сферах дизайна. Выбирайте орнаменты, которые отражают суть продукта.

Проект: NICHE-Tea / Автор: IWANT design

Кастомные фигуры и элементы

Персонализированный дизайн — обязательная составляющая в построении идентичности бренда.

Проект: aleFanty / Автор: less

Проект: Nature Organic Chocolates / Автор: Mike Karolos

Дудлы

Дудлы — свежий тренд этого года во всех направлениях дизайна, а разработка айдентики — идеальное поле применения для этих смелых рисунков. Дудлы могут преобразить обычный скучный дизайн в интересное и уникальное произведение искусства.

Проект: Zoe-Juices / Автор: Beetroot Design

Винтаж

Винтажные узоры остаются в теме, их традиционно принято связывать с определенным уровнем качества. Винтажный дизайн опирается на детали и способен создать айдентику, которая будет актуальна долгое время.

Проект: Mutti Special Edition for FICO Eataly World / Автор: Auge Design

56. Смелая типографика

Смелая типографика создает сильный и однозначный посыл. Если нужно, чтобы продукт выделялся, используйте большой шрифт в связке с яркими цветами.

Проект: Amilk & Adidas / Автор: Duy Dao

57. Цвета

Дерзкие цвета

Сочные цвета — хит этого года, поэтому мы не раз столкнемся с ними в оформлении. Дополненные сумасшедшими узорами и геометрическими фигурами, яркие цвета преобразят оформление любого продукта.

Проект: Deker-rebranding / Автор: less

Проект: Mochila / Автор: Sweety & Co.

Пастельные цвета

Пастельные цвета — тренд-реакция на яркие цвета, охватывающий все больше пространства в оформлении. Мягкие оттенки транслируют теплое отношение к потребителю.

Проект: Freshly Baked / Автор: Design Happy

Проект: Ela cosmetics / Автор: ChocoToy cute

58. Необычные текстуры и формы

В оформлении упаковки разрешено все: от стекла до металла. Упаковка продукта должна выделять его на фоне аналогов и делать запоминающимся. Использование необычных материалов для современной инновационной упаковки — новое требование в дизайне.

Проект: Sprout Green Paulownia Wooden Box / Автор: Yinjue

Проект: Eco bamboo tooth brush / Автор: Margas Family

59. Голографический эффект

Голографический эффект — вернувшийся тренд. Металлические текстуры позволяют достичь футуристического эффекта и создать магически притягательный дизайн.

Проект: EAT ME / Автор: PACKVISION AGENCY

Проект: Sphynx / Автор: Anagrama Studio

60. Градиенты на упаковке

Добавьте мягкие градиенты для создания глубины или используйте яркие цвета для более прямолинейного эффекта.

Проект: YOU & OIL natural cosmetics / Автор: Irmantas Savulionis

61. 3D натюрморты

Последние годы был заметен рост числа проектов с 3D дизайном. Наблюдая работы некоторых 3D художников из топа, например MVSM или Питера Тарка, можно предсказать, что в 2020 году популярность 3D натюмортов возрастет. Для корпоративных коллабораций тренд окажется на одном уровне важности с разработкой лого и размещением продукции.

Проект: Squarespace stillife / Автор: MVSM

Проект: Adobe Government / Автор: Peter Tarka

Проект: Audi Q-Riosity / Автор: Peter Tarka

62. Абстрактные фигуры

Абстрактные 3D фигуры и яркие цвета — микс года. Это определенно один из самых влиятельных трендов, так что не упускайте его из вида.

Проект: Logitech CRAFT / Автор: Pawel Nolbert

Проект: SWEET SPIRALS / Автор: Kirill Maksimchuk

63. 3D отрисовка в стиле металлик

3D отрисовка в стиле металлик смотрится эффектно и несомненно относится к трендам, которые интересно отслеживать в 2020.

Мощные инструменты отрисовки делают возможным создание безупречных и изящных 3D моделей. Благодаря им стал доступен реалистичный и привлекательный металлик эффект, излучающий роскошь и благородство. За счет правильного применения света, отражений и теней поверхности и элементы в стиле металлик обретают глубину и реализм и больше не выглядят неуместно.

Проект: Grand Spectacular 2020 / Автор: Mustaali Raj

Проект: Various Concepts / Автор: Oleg Morozov

Проект: NIKE FC 3D Golden balls in the real world / Автор: T A V O .

64. 3D графика с анимацией

Поскольку анимация все больше завоевывает мир дизайна, 3D графика с анимацией определенно достойна внимания в этом году. Вместе с аудио данное направление анимации станет хитом всех мультимедиа проектов. Используя визуальные и кинематические эффекты, моушн-дизайнер может вдохнуть жизнь в 3D персонажей и типографику, добавляющих уникальности продукту.

Проект: NIKOPICTO SHOWREEL 2020 / Автор: Nikopicto

65. Очень реалистичное 3D

3D всегда вызывает восторг и будет возглавлять современные тенденции веб дизайна 2020. Этот эффект способен обыграть реальность и вымысел так тонко, что их практически невозможно отличить. Картинка это или отрисовка? Грани продолжают стираться…

Проект: YOOX: Make a Wish / Автор: JVG ™

Проект: Air Max ’17 / Автор: Berd .

Статья собрана из источников:

Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих