Лучшие заметки о веб-дизайне за 2017 год, материалы для скачивания и вдохновения

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

Основные тематики постов в 2017 не сильно отличались от более ранних периодов, все они сгруппированы в несколько разделов: статьи, материалы для скачивания, вдохновение и сервисы. Подобные записи найдете за 2016 год и предыдущий 2015  — многие из них сейчас все также актуальны.

Если говорить о самом блоге, то прошедшие 365 дней, в принципе, можно занести в актив. Не смотря на то, что полностью реализовать все планы не получилось, работа была проделана не малая: во первых, удалось увеличить количество материалов на 15%, во-вторых, практически закончили внедрение нового шаблона. В текущем 2018 все должно свершится.

Возможно, вас также заинтересуют итоговые дайджесты из других тематических блогов — лучшие посты о Вордпресс 2017 из WordPress Inside и полезные фишки для вебмастеров и оптимизаторов из Tod’s Blog.

Статьи про веб-дизайн

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

Дизайн статьи 2017

Тренды

  • Тенденции веб-дизайна 2017 — десятка основных особенностей в разработке внешнего вида онлайн проектов за прошлый год: нестандартная сетка, карточки, большая типографика, яркие градиенты, параллакс эффект, геометрические формы и др.
  • Современные тренды логотипов 2017 — аналогичный предыдущему материал, но уже по разработке лого: затухание цвета, простота, парные объекты, микролинии, пересечения элементов, символ троеточия, текстовые блоки и другие.
  • Летающие логотипы — это один из мини-трендов, которые иногда встречались на некоторых веб-ресурсах. В основном подход используется для отображения иконок соц.сетей или сервисов.
  • Фоновое подчеркивание текста — еще одна небольшая фишка, что была замечена в макетах страниц. В статье есть парочка скриншотов + описание реализации через свойство text-decoration-skip (ниже данная фишка CSS рассмотрена более детально).

Элементы сайтов

  • Гамбургер-меню: история и альтернативы — что вообще это за элемент навигации такой и какими другими вариантами его можно заменить. Так как споры насчет рациональности применения не утихают, полезно знать альтернативные решения.
  • Иконки гамбургер меню — в продолжение предыдущей темы рассмотрели некоторые примеры сайтов, где сделана подобная навигация. Дополнительно найдете подборку для скачивания и скрипты, позволяющие добавить их в собственных проектах.
  • Бесконечная прокрутка — еще одно «спорное» решение, которому не все доверяют. В статье приведен список возможностей/преимуществ такой прокрутки, почитайте о причинах, когда ее делать не следует, и посмотрите несколько подсказок по внедрению.
  • Все про шапку сайта — запись полностью посвящена хедеру (header). Во-первых, здесь рассматриваются нюансы его использования: важность элемента на странице, что может в него входить, а во-вторых, есть советы по реализации: фиксированный блок, двойное или гамбургер-меню, визуальное оформление.

Веб-дизайн

  • Методы сплит-скрин дизайна — подборка наиболее удачных способов внедрения одного из трендов прошлого года (Split Screen): визуальный переход, анимация, яркие цвета, типографика, контраст.
  • Конец эпохи статичных лого? — современные логотипы должны быть универсальными и оригинальным, поэтому процесс их разработки значительно усложняется. Каждая реализация должна иметь разные варианты/форматы и, возможно, даже анимацию.
  • Золотое сечение в дизайне — о теоретических принципах построения макета страницы с эффективным представлением информации: золотая спирать, правило третей, размеры блоков. Интересное чтиво.
  • Разница между UI и UX — разбираем на практических примерах основные отличия между пользовательским интерфейсом и взаимодействием. Достаточно один раз вдумчиво прочитать чтобы раз и навсегда усвоить чем эти понятия отличаются.

Обучение, верстка

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

  • GIF анимация в Photoshop — пошаговый процесс создания анимированной гифки через Фотошоп. Скриншоты помогут разобраться пользователям с любым уровнем подготовки. Процедура на самом деле не такая уж и сложная.
  • Начинаем рисовать с нуля — здесь приведены 6 простых упражнений, полезных для освоения базовых техник и особенностей рисования. Такой себе мини-тренинг нужных в этом деле навыков.
  • Создание фавиконки в Логастер — на примере одного из сервисов показано как сделать свою мини-инонку для сайта. Не смотря на то, что проект не бесплатный, он может оказаться более выгодным нежели работа с фрилансерами.
  • Подчеркивание в CSS (text-decoration) — описание функции подчеркивания элементов контента веб-страницы, которое допускается применять в тексте и ссылках. Рассмотрели все свойства и варианты на реальных примерах кода.
  • Тестируем фоторедактор Movavi — обзор основных фишек и функций программы, а также демонстрация работы в ней для обработки фото. Внедрение эффектов на картинке и удаление лишних объектов занимает считанные секунды.

Полезные материалы дизайнерам

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

Полезные материалы дизайнерам

Иконки 

  • Красочные иконки Icojam — очень яркие качественные изображения, которые мы выбрали из одного интересного веб-проекта. В некоторых наборах кроме цветных есть также монохромные и объекты с тонкими линиями. Реально это одни из лучших работ, что попадались в сети. 
  • Мини-иконки небольших размеров от 48×48 до 16×16 (25+ архивов). Подобная графика используется в навигации сайта или программах. Есть реализации в разных стилях: минималистичные, с максимальной детализацией и т.п.
  • Цветы в PNG и векторе — если вам нужны изображения цветов для украшения веб-ресурсов или создания печатной продукции, то статья однозначно пригодится. Картинки яркие, красочные, где-то чуть лучше прорисованы, где-то просто образы.
  • Отличные пиктограммы для сайта — оочень много наборов схематических иконок, в которых в отличии от предыдущего мини-формата допускаются объекты чуть большего размера. Единственное требование — минимальная детализация, поэтому почти все они монохромны.

Кисти и текстуры

  • Кисти боке для фотошопа — в дополнение заметкам с красивыми фотками, где применен данный эффект, и наборами текстур решили также добавить соответствующие кисти. Они позволят создавать собственные «модификации» любых изображений.
  • Акварельные текстуры и фоны — выбирайте из 55-ти разных объектов подходящие вам по технике исполнения и цветовой палитре. Есть фоны попроще, сложные, с минимальным количеством краски и т.п.
  • Кисти звезды — 40+ ссылок для скачивания наборов фотошоп кистей в форме звездного неба, свечения и т.п. В каждой из них найдете от нескольких до десятков файлов, добавляющих красивый визуальный эффект.

Шрифты 

  • Шрифты мелом на доске — позволяют создавать соответствующие по стилистике надписи. Здесь важно правильно выбрать фон. Данные декоративные шрифты абсолютно разные: жирные, прописные, с тенью, заштрихованные и т.д. Всего 50 архивов.
  • Лучшие Google шрифты заголовков — подборка из десяти топовых вариантов оформления заголовка для контента на странице. Все они взяты с Google Fonts, а значит бесплатные и легко подключаются. Скриншоты покажут как будет смотреться итоговый результат с текстом.

Шаблоны

  • Monstroid 2 — супер крутое и функциональное решение под WordPress проекты. С помощью этого макета сможете реализовать практически любой по сложности сайт, а имеющиеся в комплекте темы позволяют выбирать оформление под те или иные ниши. Короче говоря, максимально универсальный инструмент по вменяемой доступной цене.
  • Шаблоны портфолио MotoCMS — неплохие варианты дизайна для творческих и креативных людей: фотографов, писателей, музыкальных исполнителей, моделей и т.п.  В данной системе разные детали и элементы на веб-страниц достаточно легко редактируются.
  • Шаблоны сайта строительной компании — еще 10 тематических макетов под конструктор MotoCMS. Они отлично подойдут корпоративным веб-ресурсам, что так или иначе связаны со стройкой, соответствующей продукцией, архитектурными задачами и т.д.

Вдохновение

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

Вдохновение дизайн

Элементы сайта

  • Хлебные крошки с реальных онлайн-ресурсов и просто графические концепты этой функции. В принципе, придумать что-то оригинальное сложно, но в некоторых случаях у дизайнеров это получается.
  • Страница о сотрудниках — часто встречается в корпоративных проектах, способствует «доверительным» отношениям с посетителями/клиентами. Внешний вид зависит от количества работников: для больших коллективов могут просто добавляться фото, в маленьких — более детальная информация о людях.
  • Дизайн веб-кнопок — подборка скриншотов с вариантами кнопок на сайтах и в интерфейсах приложений, которые были популярны в период 2009 — 2017 годов. Интересно отследить как менялись тренды и мода в этом направлении.

Веб-дизайн и логотипы

  • Примеры WooCommerce дизайнов — этот модуль интернет-магазина не зря является одним из самых популярных, ведь он позволяет реализовывать столь удивительные и разные проекты. Если перед вами стоит задача создания eCommerce шаблона, статья пригодится как нельзя кстати.
  • Зимние дизайны — рассматриваем сайты зимней тематики, где в основном выбирается холодная палитра цветов. Все остальные детали напрямую зависят от специфики/направленности конкретного проекта: для курортов характерны описания с фото, для туров — бронирование и т.п.
  • Логотипы с котами — простая, но интересная подборка лого, где встречаются изображения котов. Как правило, результат зависит от названия и специфики бренда, под который он разрабатывается.

Художники иллюстраторы

  • Пейзажи Me Kyeoung Lee — милые, очаровательные и очень атмосферные зарисовки мини магазинчиков Южной Кореи. Тема, казалось бы, немного странная и простая, но исполнение, выбранные ракурсы, детализация позволяют получить весьма оригинальный результат.
  • Акварели Tilen Ti  — современного художника из Малайзии. В работах используются красочные акварельные брызги, создающие яркие силуэты из обычных, по сути, объектов.
  • Иллюстратор Jason Solo — футуристическая графика в некой «синтипоп-арт» ретро стилистике, имеющая специфические ограниченные наборы цветов и образы.
  • Carne Griffiths — британский художник с необычной техникой портретов, которые он рисует смешивая чернила, чай и другие жидкости. В отличии от второго автора практически все образы выполнены в пастельных тонах.

Фотография

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

Сайты и сервисы

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

Сервисы дизайн 2017

  • Выпуск №6: коды цветов Coffee is the color, Type Terms о типографике, теги HTML Cheat Sheet, фотки 500px, иконки Feather icons, кнопки шеринга Sharingbuttons.io.
  • Подборка №7: два ресурса по шрифтам Nerd Fonts и Fontjoy, полезные ссылки Design Resources, бесплатные Free PSD Files, цвета Color Tool, фотосток Stockio.
  • Дайджест №8: коллекция лендингов Good Web Design, сервисы по лого DesignEvo и Logo Crunch, скрипт Balloon.css, гайд по типографии Better Typography, генератор Favicon.
  • Подкасты по дизайну и UX — отличный гостевой пост с перечнем сайтов источников тематических подкастов. Данный (местами забытый) формат подачи контента позволяет эффективнее усваивать информацию.

Проекты по веб-дизайну

  • Онлайн редакторов иконок — 5 полезных бесплатных ресурсов, где их можно подправить или нарисовать с нуля. По каждому есть описание преимуществ и показан пример работы.
  • Архивы русских шрифтов — обзор 7 веб-каталогов для скачивания русскоязычных кириллических шрифтов. Они пригодятся, если нужно создавать графику под рунет, поскольку на топовых площадках в основном представлен английский алфавит.
  • StickPNG.com — архив PNG клипартов из более чем 13 тысяч изображений. Все они доступны с прозрачным фоном, а также рассортированы в разные категории.
  • Подбор цвета в дизайне — полезные проекты по цветовому оформлению веб-страниц или UX интерфейсов: поиск вдохновения, непосредственно создание палитр и проверка их доступности для пользователей.
  • W3Schools — целиком и полностью посвящен вопросу цвета в Web’е. Здесь есть инструменты выбора, смешивания, конвертирования цветов, а также их названия и коды. Кроме того, найдете схемы Color Schemes, градиенты и парочку других фишек.

Веб-разработка

  • В 2017 было сразу две статьи про конструктор Wix — сначала рассмотрели новые приложения и функции, а чуть позже рассказывали о продвинутой функциональности Wix Code, которая добавляет в сервис работу с базой данных, генерирование динамических  страниц и внедрение Javascript. Его по праву считают одним из лучших в своей нише.
  • UI Patterns — это своего рода библиотека элементов дизайна сайтов и веб-интерфейсов. Почитайте зачем используются те или иные объекты, как лучше их вставлять на страницу + посмотрите скриншоты примеров их реализации.
  • Сервис Kwork — обзор новой биржи фриланса, где каждая услуга стоит 500 рублей. В посте приведены основные фишки проекта, показаны кейсы как там можно зарабатывать + есть парочка советов.

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

3 комментария к статье “Лучшие заметки о веб-дизайне за 2017 год, материалы для скачивания и вдохновения”
  1. Nika

    Спасибо, отличная подборка!

  2. Яна

    Не знала, что тут так много всего интересного. Наверное, лучше подписаться чтобы не пропускать)

  3. Толик

    хорошая подборка, а самое главное актуальная и нужная, буду теперь вас читать

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *