25 полезностей для веб-дизайнеров


Содержание

100+ сервисов для веб-дизайнера, о которых Вы могли даже не подозревать

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

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

Итак, вот подборка из 5-ти групп сервисов для веб-дизайнера:

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

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

Следующие сайты являются одними из самых лучших в данной области:

  • 1 Freebbble — если Вам нужно еще больше бесплатностей для создания Вашего дизайна, тогда загляните на данный сервис. Здесь Вы найдете очень много великолепных дизайнерских решений, которые можно скачать абсолютно бесплатно.
  • 2 AllFreeStock — классный сервис с бесплатными фото, mockup-ами, видео, звуковыми эффектами, а также иконками. Да и сам сайт очень прост в использовании.
  • 3 Dribbble — введите в поиске «freebie» и Вы найдете список всех бесплатностей, которые есть на этом сервисе и сможете скачать каждую из них.
  • 4 Graphic Burger — дизайн в высоком качестве.
  • 5 Pixel Buddha — сайт для профессиональных дизайнеров. Есть платные материалы.
  • 6 Freebiesbug — если Вы хотите использовать при разработке дизайна самые новые PSD шаблоны и новинки, тогда обязательно посетите данный сайт.
  • 7 365 PSD — большая коллекция PSD файлов.
  • 8 Dbf — данный сервис объединяет лучшие бесплатности сервиса Dribble и сервиса Behance.
  • 9 Marvel — это бесплатные материалы от дизайнеров, которые имеют хорошую репутацию у своих коллег и клиентов.
  • 10 UI Space — материалы ручной работы.
  • 11 Free Section of Pixeden — здесь находятся премиум-материалы.
  • 12 Free Section of Creative Market — новая бесплатность каждый понедельник.
  • 13 Teehan+Lax — это лучший ресурс с mockup-ом для iPhone 6 и iPad, а также графического интерфейса iOS8.
  • 14 Tech&All — большая коллекция PSD шаблонов, которые Вы можете использовать без какой-либо дополнительной ответственности.
  • 15 Freepik — бесплатные графические ресурсы.
  • 16 Tethr — самый потрясающий дизайн для iOS.

19 онлайн-палитр

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

  • 1 Material Palette — полезный инструмент для генерации и экспорта цвета для Material Design.
  • 2 New Flat UI Color Picker — этот сервис просто обязателен к использованию, если Вы создаете дизайны в современном Flat стиле. Цвета сделают Ваш сайт более привлекательными, несмотря на саму плоскую Flat концепцию дизайна.
  • 3 Flat UI Colors — еще один сервис, который должен присутствовать в арсенале дизайнера работающего с Flat.
  • 4 Coolors — классный сервис для дизайнеров, который позволяет получить не только великолепные цветовые схемы для сайта, а также сделать это очень быстро.
  • 5 Skala Color — это бесплатное ПО для подбора и определения цвета на OS X.
  • 6 Couleurs — еще одно приложение для пользователей Mac для работы с цветом на экране монитора.
  • 7 Material UI Colors — большой спектр цвета на Ваш выбор.
  • 8 Colorful Gradients — большая коллекция готовых градиентов, которые Вы можете использовать в своих проектах.
  • 9 Adaptive Backgrounds — плагин jquery который автоматически понимает доминирующий фоновый цвет изображения и делает фоновый блок с таким же цветом.
  • 10 Brand Colors — здесь Вы найдете цвета, которые используют самые известные бренды.
  • 11 Paletton — данный сервис позволит очень легко подобрать цветовую гамму для Вашего сайта.
  • 12 0 to 255 — поиск и изменение цветовых схем происходит намного легче с использованием данного сервиса.
  • 13 Colour Lovers — это небольшое сообщества где дизайнеры делятся своими наработками. Вы также можете создать свою цветовую схему или узор и разместить для общего обозрения свое творение.
  • 14 Adobe Color CC — цветовые схемы созданные в сообществе Kuler.
  • 15 Bootflat — если Вы работаете с сайтами во Flat дизайне, тогда Вы просто обязаны попробовать данный сервис.
  • 16 Hex Colorrrs -преобразование из формата HEX в RGB.
  • 17 Get UI Colors — с помощью данного сервиса Вы получаете потрясающие цвета для интерфейса пользователя.
  • 18 Coleure — отличный инструмент для выбора цвета.
  • 19 Palette for Chrome — данный плагин для браузера Google Chrome позволяет создавать цветовые схемы. А изображения можно брать прямо из изображений.

17 сайтов для поиска вдохновения

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

  • 1 FLTDSGN — Вы работаете преимущественно с сайтами у которых дизайн в стиле Flat? Тогда данный ресурс даст Вам очень много информации благодаря которой у Вас будут происходить идеи постоянно.
  • 2 Site Inspire — создаете сайты под заказ и уже не хватает вдохновения? Тогда просто загляните на данный сайт.
  • 3 UI Cloud — это одна из самых больших баз, где собраны дизайн для пользовательских интерфейсов. Данный сервис поможет Вам создать очень качественный UI (пользовательский интерфейс) дизайн для своего проекта и обеспечить легкость в использовании сайтом или веб-приложением.
  • 4 Moodboard — сервис дает возможность создать свой проект, который будет состоять из определенных изображений в одной стилистике, цветов и других материалов.
  • 5 Crayon — если Вы работаете над дизайном страницы с каким-либо товаром или услугой, то этот сервис поможет Вам в поиске идеи в данной области.
  • 6 Land-Book — создание лендинга занятие творческое. Посетите данный ресурс, чтобы узнать больше о креативных блоках и элементах, которые можно размезстить на своем лендинге.
  • 7 Dribbble — для опытных дизайнеров данный ресурс будет очень знаком, ну а для начинающих он окажется крайне полезным. Учитесь дизайну у профессиональных дизайнеров с помощью данного ресурса.
  • 8 Behance — также очень знаменитый ресурс, где профессиональные дизайнеры выкладывают свои работы.
  • 9 Pttrns — данный сервис полезен для тех, кто очень увлекается дизайном сайтов для мобильных устройств. Здесь Вы найдете большое количество различных примеров, которые сделаны профессиональными дизайнерами.
  • 10 Flat UI Design — простыми словами это «доска вдохновения».
  • 11 Awwwards — данный проект постоянно награждает самые креативные, самые минималистичные и самые красивые сайты. Поэтому советую посетить и посмотреть что сейчас наиболее актуально в мире веб-дизайна.
  • 12 The Starter Kit — полезный инструмент для веб-дизайнеров и веб-разработчиков.
  • 13 One Page Love — если Вы занимаетесь созданием одностраничных сайтов, то данный сервис Вы обязательно должны взять на вооружение. Потому что благодаря ему Вы будете создавать более дружелюбные сайты, которые будут нравится пользователям и будут максимально удобны при использовании.
  • 14 UI Parade — дизайн элементов пользовательского интерфейса и новые идеи после посещения данного ресурса Вам обеспечены.
  • 15 The Best Designs — лучшие разработки в сфере веб-дизайна.
  • 16 Agile Designers — если Вы являетесь дизайнером или разработчиком, то это ресурс, который Вы обязаны проверить.
  • 17 Niice — это поисковик «со вкусом». Потому что он позволяет искать информацию сразу на нескольких популярных сайтах посвященных дизайну. Вводить запрос, естественно, необходимо латинскими буквами.

38 бесплатных фотостоков

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

Вот небольшой список сайтов, которые Вы можете использовать для поиска качественных изображений совершенно бесплатно:

  • 1 Stock Up — один из лучших фотостоков, который предлагает на выбор большой спектр различных изображений.
  • 2 Pexels — лучшие фотографии заката, автомобилей, здания, людей, улиц города, природы и так далее.
  • 3 All the Free Stock — этот сервис предоставляет не только изображения, а также иконки и видео. Все изображения со свободной лицензией (Creative Commons Zero license).
  • 4 Unsplash — многим может быть знаком данный сервис. Здесь каждые 10 дней можно скачать 10 новых изображений.
  • 5 Startup Stock Photos — коллекция изображений посвященных стартапам.
  • 6 Jay Mantri — потрясающие изображения в высоком разрешении для Ваших нужд.
  • 7 Moveast — это фотографии одного португальского путешественника, который делает качественные снимки и позволяет использовать их абсолютно бесплатно.
  • 8 Stokpic — если все вышеупомянутые сайты при поиске не дали тот результат, который Вам нужен, тогда поищите необходимую фотографию здесь.
  • 9 Kaboompics — большой выбор потрясающих фотографий.
  • 10 Function — данный сайт предлагает целые наборы изображений.
  • 11 MMT — потрясающие фото интернета, которые сделаны автором Jeffrey Betts.
  • 12 Travel Coffee Book — данная коллекция фотографий была сделана при путешествии по всему миру.
  • 13 Designers Pics — здесь Вы сможете легко найти изображения как для Вашего личного использования, так и для бизнеса.
  • 14 Death to the Stock Photo — после подписки, данный сервис будет присылать Вам абсолютно бесплатные изображения каждый месяц.
  • 15 Foodie’s Feed — работаете над сайтами с тематикой питания? Тогда посетите данный сайт. Потому что там находится очень много изображений еды в высоком качестве. Так и хочется пустить слюну при просмотре �� .
  • 16 Mazwai — большой выбор видео для фона.
  • 17 Jéshoots — если Вы хотите воспользоваться самыми новыми и современными изображениями прямо сейчас — тогда этот сервис самое подходящее место для поиска таких изображений.
  • 18 Super Famous — данные фотографии были сделаны голландским дизайнером Folkert Gorter.
  • 19 Picography — этот сайт дает Вам возможность выбрать из большого количества изображений с высоким разрешением.
  • 20 Splashbase — коллекция фото и видео материалов для Ваших проектов.
  • 21 Pixabay — еще один сервис с изображениями в высоком разрешении.
  • 22 Little Visuals — подписавшись, Вы будете получать 7 изображений в высоком разрешении каждую неделю. То есть каждый день новое изображение!
  • 23 Splitshire — бесплатные «аппетитные» фотографии.
  • 24 New Old Stock — если Вам нужны старинные фотографии из государственных архивов, тогда Вам отлично подойдет данный сайт.
  • 25 Picjumbo — это еще один сайт, где Вы можете найти и скачать фотографии абсолютно бесплатно.
  • 26 Life of Pix — не все изображения данного сайта полностью бесплатны, но все они в очень высоком разрешении.
  • 27 Gratisography — если Вы не можете найти подходящее изображение с высоким разрешением, тогда данный сайт может Вам в этом помочь.
  • 28 Getrefe — еще больше беспталных изображений для Вашего дизайна.
  • 29 IM Free — этот сайт может похвастаться действительно большим выбором изображений.
  • 30 Cupcake — этот сайт является настоящим раем для фотографов, созданный Jonas Nilsson Lee.
  • 31 The Pattern Library — если Вы ищете паттерны для своего проекта, тогда данный сайт сможет Вам в этом помочь.
  • 32 Public Domain Archive — данный сервис предлагает 100% беслптаные изображения.
  • 33 ISO Republic — этот фотосток также предлагает Вам на выбор изображения в высоком разрешении.
  • 34 Paul Jarvis — на этом сайтке Вы найдете не только статьи, посвященные дизайну, а также коллекции из очень качественных изображений.
  • 35 Lock & Stock Photos — коллекция качественных фото.
  • 36 Raumrot — большой спектр изображений в высоком качестве.
  • 37 Bucketlistly — изображения путешествий.
  • 38 Magdeleine — каждый день новое изображение в высоком качестве.

14 сервисов с бесплатными иконками

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

  • 1 Fontello — сайт генератор иконок.
  • 2 Flat Icon — поиск по 16000+ иконкам в векторе. Здесь Вы сможете найти самые лучшие иконки для своих проектов.
  • 3 Material Design Icons — более 750 иконок от Google.
  • 4 Font Awesome — без сомнений, это лучший иконочный шрифт, который очень легко может быть подключен на любом сайте и имеет массу плюсов.
  • 5 Glyphsearc — поиск по нескольким базам с иконками.
  • 6 MakeAppIcon — с помощью нескольких кликов Вы можете создать иконки для своего приложения.
  • 7 Endless Icons — если Вы работаете с дизайном в стиле Flat, тогда посетите обязательно данный ресурс.
  • 8 Ico Moon — генератор иконок, который имеет более чем 4000 векторных иконок.
  • 9 The Noun Project — на данном сайте находятся тысячи различных иконок созданные разными дизайнерами.
  • 10 Perfect Icons — сервис для создания социальных иконок.
  • 11 Icon Finder — это бесплатный раздел данного сайта. Обязательно изучите его, возможно некоторые иконки Вам пригодятся.
  • 12 Doodle Set — бесплатный набор иконок в стиле Doodle.
  • 13 Flat Set — бесплатный набор икононок в стиле Flat.
  • 14 Icon Sweets — 60 бесплатных векторных иконок для Photoshop, которые сделают Ваш сайт еще более привлекательным.

Вывод

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

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

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

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

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

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

Верстка

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

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

Чтобы сверстать страницу хорошо, можно пользоваться такими приемами:

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

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

Ресурсы

Книги

Сетка

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

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

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

Ресурсы

Книги

Типографика

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

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

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

Дизайнер, который разбирается в типографике:

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

Ресурсы

Книги

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

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

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

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

Чтобы не ошибиться в выборе цветов, дизайнеры пользуются специальным палитрами.

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

Ресурсы

Книга

На протяжении долгого времени сайты рисовали в Adobe Photoshop — универсальном графическом редакторе. Со временем появились редакторы для веб: Sketch, Figma или Adobe XD, которые работают быстрее, чем Photoshop, у них простой интерфейс и нет лишних функций. Поэтому они хорошо работают даже с большим количеством открытых макетов и их легко освоить.

Вот программы, которые пригодятся веб-дизайнеру:

  • Axure — для проектирования сайта;
  • Sketch, Figma или Adobe XD — для работы с графикой и создания макетов;
  • Principle и Adobe XD — для создания анимированных прототипов сайтов и приложений;
  • Zeplin — для передачи файлов разработчику;
  • Adobe Illustrator — для создания иконок и логотипов, а также для работы с любой векторной графикой.

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

Текст и редактура

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

Полезное действие сайта или веб-приложения — привлечь, заинтересовать клиента или что-то продать.

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

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

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

Ресурсы

Книга

Интернет-маркетинг

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

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

Начинающим веб-дизайнерам нужно знать:

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

Ресурсы

Книги

Технические навыки

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

Простой способ узнать, как работает верстка, — познакомиться с кодом любого сайта с помощью веб-инспектора браузера.

Ресурсы

Психология и переговоры

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

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

Ресурсы

Книги

Заключение

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

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

Хороший дизайнер не просто много знает, но и применяет эти знания в работе.

Ресурсы

Книга

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

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

  • 32 часа теории и 16 практических заданий
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

20 лучших сайтов для веб-дизайнера

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

Wordmark

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

Right Font

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

Font Reach

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

Palleton

Инструмент, заметно упрощающий создание цветовых комбинаций. Он позволяет подобрать идеально сочетающиеся цвета и проводить тонкую настройку онлайн. Вы можете посмотреть, как будет выглядеть нужная вам страница в той или иной гамме. Что интересно, можно настроить просмотр гаммы с точки зрения отклонения цветовосприятия. Полезный инструмент для веб-дизайнера сохраняет цвета в палитрах Gimp, CSS, PNG, etc. Здесь есть встроенный конвертер цветов, что упрощает работу.

TinyPNG

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

Boxy SVG

Бесплатный редактор векторной графики. Да, здесь нет того разнообразия функций, как в Illustrator или Sketch, но зато он всегда под рукой. Если ваш друг только начал увлекаться векторной графикой, не фанат пиратства, а на оригинальные продукты Adobe у него нет денег, то это лучший выбор! В Boxy SVG можно создавать изображения, диаграммы, кнопки. Не любите работать через браузер? Скачайте приложение. Доступен импорт изображений и шрифтов Google. Вот такой доступный дизайн с нуля.

Цукерберг рекомендует:  Swift Cocoapods Frameworks. Вебинар будет полезен начинающим программистам, которые наверняка

Функционал Boxy SVG:

  1. Преобразование
  2. Группировка объектов
  3. Заливка
  4. Символы
  5. Кривые
  6. Редактируемые форм
  7. Логические операции;
  8. SVG и HTML 5
  9. Экспорт и импорт PNG, JPEG и GIF
  10. Шрифты Google
  11. Сочетания клавиш

uiGradients

Нужен трендовый градиент с быстрой выгрузкой CSS-кода? Отличный сервис для web-дизайнера, который ценит своё время.

GetCover

Заказчику ну уж очень интересно, как сайт будет выглядеть в реальности, но вы ещё только создаете макет? Или оформляете портфолио на Behance? Этот сервис покажет, как ваше детище будет выглядеть в основных браузерах и на яблочных девайсах. И не только, здесь есть макет Nokia 3310! За раз можно создать несколько макетов, что существенно экономит время при работе с крупными проектами.

Stylifyme

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

Gridzzly

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

Dimensions

Этот инструмент веб-дизайнера поможет измерить расстояние между элементами на сайтах. Не нужно каждый раз заходить на их сайт: существует дополнение для Chrome.

Streamline Icons, Modern UI Icons, Jolly Icons

Занимаетесь дизайном иконок? Вам помогут эти сайты. Идеально для начинающих дизайнеров.

Lingo

Искали альтернативу Dropbox? Создавайте библиотеки визуальных ресурсов и делитесь ими со своей командой.

HEX to RGB Converter

Нужно срочно переконвертировать цвет? 1 клик и всё готово!

Firebug

Хотите узнать, как был свёрстан сайт? Установите в Firefox это расширение. Вы удивитесь, когда поймёте, насколько кривым может быть сайт изнутри. Нужная фича для веб-разработчика или дизайнера.

Font flame

Подбирайте пары шрифтов, водите их на свидания, создавайте потомство, почувствуйте себя божеством! Font flame — крутейший сервис по подбору шрифтовых пар, который понятен даже детям. Мы проверяли.

Brandcolors

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

Mural

Как Trello, только для визуалов. Невероятно крутая доска для мозговых штурмов, совместной работы и синтеза идей.

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

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

  1. abduzeedo.com — сайт о логотипах и дизайне с подробными объяснениями.
  2. davidairey.com — официальный сайт дизайнера David Airey, здесь он делится своим опытом в дизайне.
  3. behance.net — большая подборка работ различных художников, людей искусства со всего мира.
  4. designiskinky.net — австралийский сайт о дизайне, только новости дизайна.
  5. freelancefolder.com — блог-сообщество фрилансеров с регулярными статьями, как организовывать свою работу вне штата.
  6. youthedesigner.com — незаурядный сайт с разнообразными статьями о графическом дизайне.
  7. bangbangstudio.ru — качественный российский сайт для иллюстраторов с интересными дизайнерскими работами.
  8. crazypixels.net — здесь собраны туториалы для photoshop, полезные статьи о дизайне.
  9. creativebloq.com — интернет-журнал о компьютерном искусстве.
  10. lookatme.ru — социальная сеть, где много-много дизайнеров.
  11. ucreative.com — много интересных статей, сайт на английском.
  12. designmodo.com — на этом сайте часто появляются интересные статьи и ресурсы. Здесь есть уникальные Photoshop туториалы, навряд ли вы их встретите на других сайтах.
  13. instantshift.com — отличный ресурс по подборке дизайна для сайта.
  14. dejurka.ru — очень качественный российский ресурс с уникальным контентом.
  15. piccsy.com — очень много потрясных картинок, надписей и фотографий. Огромный полет для творчества.
  16. render.ru — ну просто замечательный сайт для любого дизайнера, особенно меня вдохновляет 2D галерея аварда. Безусловно в закладки.
  17. dribbble.com — огромное количество работ различных дизайнеров, заходи обязательно!
  18. deviantart.com — мегакрутые работы, очень много талантливых и профессиональных дизайнерских проектов. Кто не знает этот сайт? Да каждый дизайнер на него заходил, все сливки общества здесь!
  19. techdesigner.ru — само название говорит за себя.
  20. fubiz.net — замечательный блог о дизайне, который постоянно обновляется, здесь вы узнаете новинки дизайна.
  21. aisleone.net — статьи о дизайне с примерами работ, англоязычный сайт.
  22. visuelle.co.uk — сюда я захожу частенько, когда требуется вдохновение и настрой к тех.дизайну, сборка различных студий расскажет и покажет что к чему.
  23. siteinspire.com — интересный ресурс, со множеством примеров в различных направлениях графического дизайна.
  24. awwwards.com — здесь только лучшие работы дизайнеров, словом AWARD.
  25. yankodesign.com — красивые рекламные фотографии.
  26. topdesignmag.com — интересные статьи из мира дизайна с красивыми картинками, как мы любим.
  27. butdoesitfloat.com — один из лучших блогов по граф.дизайну/современному искусству.
  28. fastcodesign.com — креативные идеи в мире дизайна, много красивых презентаций и видео.
  29. oneeyeland.com — огромная галерея работ, плюс интересные статьи.
  30. thebestdesigns.com — работы дизайнеров и фотографов, рекламные идеи, много креатива с потрясающим качеством работ.
  31. tutorial9.net — здесь можно найти ссылки на различные ресурсы.
  32. graphic-exchange.com — блог о дизайне, с красивыми фотографиями и работами.
  33. tympanus.net/codrops — обо всем.
  34. designgu.ru — здесь не только о графике, но и о фотографии и lightroom, много полезной информации, вообще разработчики молодцы, интересный ресурс.
  35. popsop.ru — новости в мире дизайна.
  36. informationisbeautiful.net — учимся предоставлять информацию красиво.
  37. industrialdesignserved.com — о промышленном дизайне.
  38. dburn.ru — фотографии на различную тематику, бесплатный фотосток.
  39. thefabweb.com — здесь можно взять любое понравившееся фото.
  40. designet.ru — все о промышленном дизайне, часто организовывают различные конкурсы для дизайнеров.
  41. pinwin.ru — дизайнерам интерьера придется по вкусу этот ресурс.
  42. artageless.com — очень много всего о дизайне и для дизайна.
  43. uxmag.com — здесь много полезных статей. Все статьи написаны специалистами, будьте уверены, каждая новость проходит тщательную проверку и отбор.
  44. ia.net/blog — блог об информационной архитектуре.
  45. uxmovement.com — блог, в котором вы узнаете как плохой интерфейс может влиять на поведение пользователя.
  46. heydesigner.com — рассылка материалов ежедневная/еженедельная для дизайнеров.
  1. noupe.com — отличный сайт о веб-дизайне и веб разработках. Постоянно обновляются новости, и много-много креативных идей, есть чему поучиться.
  2. smashingmagazine.com — эта информация подойдет как начинающему разработчику, так и профессионалу в области дизайна.
  3. alistapart.com — еще один островок в море блогов, посвященный веб-дизайну.
  4. sitepoint.com — очень разнообразный сайт: графика, css, ajax.
  5. webappers.com — блог, содержащий множество исходников, распространяемых по принципу open-source и предназначенный для веб-разработчиков и дизайнеров.
  6. happycog.com — на этом сайте его создатели публикуют свои собственные красивые веб-сайты и делятся лучшими из своих идей.
  7. webdesignerwall.com — каждый дизайнер должен знать, пусть даже если он не интересуется веб-дизайном.
  8. vandelaydesign.com — сборник отличных статей из различных медиаресурсов. Веб-дизайнер, тебе понравится!
  9. bestwebsite.gallery — знакомимся с модными тенденциями в мире веб дизайна.
  10. octaveoctave.com — очень полезный ресурс, зайдем на внутренние страницы.
  11. zurb.com — хорошая библиотека современного веб-дизайна.
  12. firefreebies.com — здесь можно скачать понравившуюся работу, тоже хорошая сборка качественного дизайна, жаль мало шаблонов.
  13. premiumpixels.com — неплохая сборка по навигации для сайта.
  14. spoongraphics.co.uk — можно скачать кучу фонов, векторной графики и т.д., на первый взгляд все туториалы платные, но это не так, заходите, выбирайте, бесплатно, без регистрации, проверено!
  15. onepagelove.com — коллекция одностраничных сайтов.
  16. line25.com — полезный блог для веб-дизайнера, свежие новости, примеры работ, советую к просмотру.
  17. houseofbuttons.tumblr.com — примеры навигации для сайта.
  18. stockvault.net — стильные сайты, будьте в тренде, вдохновляйтесь, черпайте идеи.
  19. minimalexhibit.com — портфолио веб дизайнеров, flat-дизайн.
  20. foliofocus.com — работы известных фирм, следим за новинками в мире веб дизайна.
  21. webdesignerdepot.com — новости в мире дизайна.
  22. webdesignledger.com — новости + ссылки на полезные ресурсы, на которых можно скачать понравившиеся шаблоны и не только.
  23. 24ways.org — здесь я часто смотрю о новшествах в навигации, много статей по цвету, оттенкам, да и вообще информативный ресурс (все статьи от профессионалов)
  24. design-mania.ru — блог о вебдизайне
  25. womtec.ru — блог вебмастеров
  26. cssbeauty.com — есть полезная информация
  27. bestwebgallery.com — очень полезная дизайн-галерея, которая подойдет для дизайнеров разных направлений.
  28. cssremix.com — современные интересные идеи по одностраничным сайтам можно черпать отсюда.
  29. templatemonster.com — каталог веб-студий. Уверена, этот сайт знает каждый разработчик.
  30. share-design.ru — много полезной информации и бесплатные шаблоны сайтов.
  31. templated.co — 845 бесплатных шаблонов HTML5 и CSS
  32. optimizilla.com — оптимизация изображений на сайте, изображения будут занимать меньше места и загружаться быстрее
  33. easel.ly — создание неповторимой инфографики.
  34. freebiesbug.com — самые свежие бесплатности.
  35. html5gallery.com — хорошие идеи для вашего ресурса.
  36. minimalsites.com — здесь собраны интересные сайты в стиле минимализма.
  37. webnews.ws — бесплатные шаблоны различных сайтов, все в psd, по слоям, как нам нравится.
  38. ruseller.com — уроки, исходники, шаблоны и много полезной информации.
  39. templaza.com — шаблоны и плагины для джумлы, для вордпресса, все распределено в тематическом каталоге.
  40. https://wordpress.com/themes — здесь большое количество бесплатных и платных шаблонов, и буквально все мне очень нравятся, это вордпресс. Если нужна идея, это место для вас, вдохновляемся и вперед к своему уникальному творению!
  41. responsivedesignchecker.com — проверка сайта на адаптивность. Рекомендую всем.
  42. megatimer.ru — генератор счетчиков/таймеров
  43. livetools.uiparade.com — генератор иконок, форм, лент для сайта
  1. logodesignlove.com — сайт о логотипах и только. Регулярное обновление новостей.
  2. logopond.com — сайт о логотипах. Много красивых примеров.
  3. logaster.com — здесь можно сгенерировать свой логотип. В маленьком размере бесплатно, можно использовать любителям создавать шаблоны, либо для примера клиентам, когда в шапку нечего поставить (из-за отсутствия логотипа у заказчика). Сервис очень выручает.
  4. squarespace.com/logo — маленькие логотипы бесплатно.
  5. hipsterlogogenerator.com — генератор логотипов для хипстеров.
  6. logotypes101.com — бесплатные векторные логотипы.
  7. logobaker.ru — кухня логомэйкеров.
  8. logofury.com — креативные идеи для создания логотипа.
  9. logomoose.com — сборка логотипов со всего мира, лучших логотипов на мой взгляд.
  10. Canva — работы различных логодизайнеров, достаточно хорошие работы!
  11. logofaves.com — отличная постоянно обновляющаяся галерея идей, плюс есть победители каждую неделю, так что обязательно участвуйте!
  12. thedesigninspiration.com — отличная подборка логотипов, просто смотрим и вдохновляемся. Многие идеи оригинальны, удивляюсь фантазии разработчиков.
  13. thelogomix.com — тоже неплохая подборка логотипов.

В начале хочу предложить заработок для всех (не обязательно быть ай-ти специалистом или дизайнером) смотрите этот раздел https://adamovna.ru/pps/bux/ . Я тут часто подрабатываю, когда устаю от дизайна и программирования. Выполняете задания, типа «подпишитесь на меня в вк», вступите в группу фб, лайкните инсту. И за это платят, суммы небольшие, но на продление интернета или на телефонию хватает. А если вы трудолюбивы, то можно заработать нормально. Бывало по 800-1000р. в день выходило.

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

  1. fl.ru/projects — здесь можно заработать на дизайне. Новые предложения от заказчиков практически каждый час, ставьте уведомление на email, и вы будете в курсе новых вакансий и проектов. Один огромный минус ресурса — на многие работы нельзя оставить заявку без PRO-аккаунта, за который надо платить ��
  2. https://ru.jobsora.com/ — Разве не было бы замечательно, если бы вы могли искать вакансии на нескольких разных сайтах в одном месте? Ну, теперь вы можете! https://ru.jobsora.com/ избавляет от необходимости посещать многочисленные сайты, чтобы найти следующую ступень в своём развитии, экономя ваше время и делая поиск работы более эффективным. Кроме того, вы можете воспользоваться бесплатной услугой Jobsora, которая связывает соискателей с соответствующими работодателями! Посетите Jobsora, чтобы найти тысячи рабочих мест в России.
  3. masterbundles.com — на этом сайте любой дизайнер может попробовать продать свои работы западным клиентам. Если не знаете английского — не беда, менеджер поможет все оформить.
  4. Исполню.ру — отличный вариант для дизайнеров продавать услуги по собственным ценам. Регистрируетесь, публикуете услугу (например, «нарисую логотип» или «создам дизайн 1 страницы сайта»), указываете стоимость от 300 до 15000 руб и срок выполнения. Всё! Далее получаете заказы.
  5. moguza.ru — интересный сервис, не похож на другие биржи, здесь каждое объявление начинается с «МОГУ ЗА…» с выбором определенной цены, все просто, доступно и оригинально. В особенности отмечу раздел «самые безумные ворки», обязателен к просмотру. У меня здесь партнерка, если регаетесь, получаете 100 бонусов на баланс … это примерно пара бесплатных ворков для ознакомления. А вот регистрироваться лучше по этой ссылке http://moguza.ru/?promo=2131819213941 так как вам подарят 100 бонусов, эквивалентно 100 рублям. На них можно купить понравившиеся ворки, либо прорекламировать себя.
  6. kwork.ru — регистрируемся как продавец или покупатель какой-либо услуги (что вам больше подходит). Хороший сервис, советую.
  7. 5bucks.ru — отличный ресурс для заработка, цена работ фиксированная 5$
  8. blogging.im — сообщество всех внештатных дизайнеров для работы за рубежом.
  9. work-zilla.com — удобное переключение от заказчика до исполнителя. Работы, они же «ворки», от 100 р до 35000 р.
  10. profittask.com — вот здесь задания типа «зайди в гугл, установи приложение, удали приложение» ну и много разной мелочевки, так сказать для ленивых �� в выходные здесь провожу время, за которое еще и платят, ну не так много, и мне нравится.
  11. upartner.pro — проект юкоZа или совместный проект с UCOZ, лично я захожу через свой Ui аккаунт. Кто работал с этим движком, поймут что к чему. Понятный и приятный интерфейс, удобная навигация.
  12. freelance.ua — крупная украинская биржа труда, обязательно регистрируемся.
  13. free-lancing.ru — хотелось бы почаще обновлений о работе, а так все отлично.
  14. freelance-tomsk.ru — редко обновляется, но клиенты находятся.
  15. revolance.ru — еще реже обновления, и все же регистрируемся.
  16. dalance.ru — тоже неплохой поиск работы и заказов.
  17. itfreelance.by — здесь только для it-разработчиков и дизайнеров.
  18. kitwork.net — биржа фриланса, пока только развивается.
  19. web-lance.net — редко обновляется в сравнении с другими ресурсами, но сайт развивается, думаю скоро станет отличной платформой для бизнеса в сети.
  20. indeed.com
  21. дизайнером.рф — нормальный ресурс, выложила здесь портфолио, и не думала, что будут заказы, что удивительно бОльшая популярность у меня именно на этом ресурсе.
  22. freelance.ru
  23. free-lancers.net
  24. best-lance.ru
  25. 24freelance.net — биржа фриланса, пока что развивающаяся, но с большими надеждами на будущее.
  26. freelancehunt.com — редко обновляется, но кто знает, лучше зарегистрироваться сейчас.
  27. allfreelancers.su
  28. freelancejob.ru
  29. golance.ru
  30. freelancerbay.com — обязательно регистрируйтесь.
  1. thedieline.com — этот ресурс считается мировым информационным ресурсом об упаковке. Здесь вы найдете всю информацию по дизайну упаковки.
  2. wtpack.ru — блог об упаковке.
  3. lovelypackage.com — подборки классных упаковок.
  4. packagedesignmag.com — интернет-версия авторитетного журнала Package Design Magazine. Все самое модное в мире упаковки, много комментариев, обзоров и статей.
  5. packagingoftheworld.com — дизайн различных упаковок со всего мира, достаточно информативный сайт.
  1. designfloat.com — здесь ссылки на ресурсы, где есть все: туториалы, шаблоны, уроки, flash и т.д.
  2. psd.tutsplus.com — уроки по веб-дизайну как для новичков, так и для ассов.
  3. bluevertigo.com.ar — здесь ссылки на все фотобанки интернета (крупные фотобанки).
  4. sxc.hu — самый крупный фотобанк интернета, а главное бесплатный.
  5. dafont.com — более 10 000 шрифтов любого вкуса.
  6. bittbox.com — сайт посвящен всем дизайнерским нуждам: узоры, текстуры, кисти, а самое главное консультации. Опять же как мы любим — все БЕСПЛАТНО!
  7. lenagold.ru — отличный сайт со множеством клипартов, уже вырезанных на прозрачном фоне, здесь и текстуры, и рамочки, и т.д., много psd картинок. Люблю этот сайт.
  8. allday.ru — замечательные материалы под любые дизайнерские нужды.
  9. 365psd.com — каждый день здесь появляются новые и бесплатные psd ресурсы. Спасибо создателю/лям!
  10. ru.clipart.me — более 40 тыс полезных материалов, векторная и растровая графика, по слоям, для иллюстратора и корела тоже есть, и очень много. Все бесплатно!
  11. 1001freedownloads.com — фотографии, обои, кисти, фоны и много-много еще чего. Весь материал в свободном скачивании (БЕСПЛАТНО)
  12. breezyprague.com — есть полезный материал, качайте на здоровье (больше разработчикам сайтов), материала чуть меньше, чем в предыдущих сайтах, но тоже выручает.
  13. wireframes.tumblr.com — подборка разных классных вещей.
  14. pixeden.com — понравится веб дизайнерам, шаблоны, бутстраповские темы, иконки на сайт и т.д.
  15. thenounproject.com — иконки, иконки и еще раз иконки, можно загрузить свою галерею.
  16. officialpsds.com — куча графики отделенной от фона.
  17. fonday.ru — галерея растрового клипарта.
  18. adigitaldreamer.com — различные галереи растрового клипарта, бесплатный фотосток, кисти, шрифты и многое другое.
  19. unprofound.com — много картинок.
  20. amazingtextures.com — здесь текстуры.
  21. placeit.net — бесплатные мокапы.
  22. graphicburger.com — большая «кухня» дизайнера: текстуры, текстовые эффекты, различные эффекты
  23. thehungryjpeg.com — смотрим раздел Freebies ^_^ Думаю, итак все понятно
  24. pixelbuddha.net — сборник бесплатных элементов с разных ресурсов.
  25. uispace.net — много мокапов, иконок, сайтов, в psd по слоям.
  26. techandall.com — бесплатная графика, стокфото.
  27. fotolia.com — частенько использую мелкие изображения ��
  28. photoshop-orange.org — все для фотошопа, в особенности выделю скрап-наборы и рамки для Photoshop.
  29. all-free-download.com — полным-полно качественного векторного клипарта!
  30. hameleons.com — различный клипарт
  31. 0lik.ru — набор разного клипарта
  32. all-clipart.net — много фотографий и хорошего клипарта
  1. fontello.com — генерируйте шрифтовые элементы из иконок здесь!
  2. fortawesome.github.io/Font-Awesome — или здесь (тоже шрифтовой генератор).
  3. flaticon.com — плоские векторные иконки.
  4. endlessicons.com — огромное количество плоских иконок.
  5. iconsweets.com — сборка иконок от Photoshop.
  6. glyphsearch.com — пиктограммы ищем здесь.
  7. makeappicon.com — генератор иконок для различного рода приложений.
  8. icomoon.io — более 3х с половиной тысяч иконок в векторном формате.
  9. thenounproject.com — сообщество создателей иконок.
  10. perfecticons.com — пиктограммы для социальных сетей.
  11. iconfinder.com/free_icons — ресурс по поиску иконок.
  12. roundicons.com/doodle-icons-free-set — 50 забавных doodle-иконок.
  13. roundicons.com/free-icons — 60 круглых плоских иконок.
  14. roundicons.com/free-vector-line-icons-set — а здесь сборка круглых иконок (все иконки векторные).
  15. favicon.ru — мой любимый генератор иконок для сайта.
  16. iconizer.net — иконки для вашего сайта на любой вкус и цвет.
  17. iconfinder.com — и тут отличный ресурс по иконкам.
  18. getbootstrap.com — иконки для бутстрап
  19. iconmonstr.com — много иконок (ищем в поиске на английском языке)
  1. materialpalette.com — создает палитру при выборе двух цветов.
  2. materialui.co/colors — еще палитра для material design.
  3. flatuicolorpicker.com — выбираем цвет интерфейса.
  4. getuicolors.com — еще поиск цвета интерфейсов.
  5. flatuicolors.com — красивые flat-цвета.
  6. bootflat.github.io/color-picker.html — хороший сайт flat-цветов.
  7. coolors.co — быстрота создания палитры на 5 цветов.
  8. bjango.com/mac/skalacolor — необычная пипетка для подбора цвета.
  9. couleursapp.com — сервис копирования цвета, который вам понравится с экрана.
  10. colorfulgradients.tumblr.com — автоматическое создание градиентов.
  11. briangonzalez.github.io/jquery.adaptive-backgrounds.js — плагин, который выделяет преобладающий цвет в изображении, затем делает его фоном.
  12. brandcolors.net— цвета известных брендов.
  13. paletton.com — создание палитры цветов. Очень удобная штука.
  14. color.adobe.com/ru/create/color-wheel — палитра от Adobe.
  15. 0to255.com — подбираем оттенки цветов.
  16. colourlovers.com — любителям подбора идей и брендов. Эта цветовая палитра для вас!
  17. hex.colorrrs.com — конвертируем из Hex в RGB.
  18. coleure.com — умный подбор цвета.
  19. colllor.com — еще один генератор, и довольно хороший.
  1. wikiart.org/en/paintings-by-style — энциклопедия искусства.
  2. petergreen.tumblr.com — фотоснимки из жизни.
  3. wallcoo.net — потрясающие обои на рабочий стол.
  4. adme.ru — редкие фотографии, рекламные подходы, красивый арт, и всему этому сопутствует описание, не только вдохновляющий, еще и информативный ресурс.
  5. fashionserved.com — о стиле, моде в фотографии.
  6. render.ru/gallery/?gal_rub=28&gal_add=award — и опять мой любимый render �� часто захожу за вдохновением, отличные AWARD-работы, за которыми слежу вот уже более 5 лет, с тех самых пор, когда ресурс был на graphics.ru.
  7. photocasa.ru — журнал о фотографии PhotoCASA.
  8. fotose.com — а это отличная соц. сеть для фотографов, можете тоже делиться своими фотоснимками. Очень много достойных работ.
  9. temos.ru — сайт посвящен только свадебной тематике, профессиональные свадебные фотографии, ну и много полезной информации на эту тему. И самое главное, все работы выполнены профессионалами.
  10. airpano.ru — 3d панорамы мира, выбирайте любое место на земле, над землей, под водой. Очень красивое зрелище с приятной фоновой музыкой.
  11. unsplash.com — креативные фотографии.
  12. 500px.com — красивые атмосферные фотографии.
  13. photoshelter.com — портфолио профессиональных фотографов
  14. lightroom.ru/gallery — здесь галерея фотографий обработанных с помощью Lightroom.
  15. bushrenz.com — красивый сайт, не забудьте включить звук ��
  16. siiimple.com — минимализм.
  17. digitalabstracts.com — абстракция.
  18. exodusgodsandkings.com — как снимали «Боги и короли». Просто красивый сайт.
  19. jviewz.com — смотрим, вдохновляемся (со звуком).
  20. bookcoverarchive.com — сборка дизайнов разных времен, много ретро. Потрясающие работы.
  21. designspiration.net — дизайны всего со всего мира, чепаем новые идеи.
  22. buamai.com — фотосток на различную тематику.


  1. labs.adobe.com — новые технологии и обновления от Adobe.
  2. coenraets.org — блог для разработчиков во Flex.
  3. flasher.ru — один из крупнейших форумов флешеров. Здесь и совет дадут и обучат )
  4. thefwa.com — здесь собраны FLASH-сайты высокого качества.

Видео и анимация:

  1. motionographer.com — международный ресурс для профессиональных аниматоров.
  2. fxgu > — сайт предоставляет бесплатные консультации по специальным видео-эффектам.
  3. animator.ru — русский аналоговый сайт про видео и анимацию.
  4. motionworks.com.au — сайт John Dickinson. Просто вдохновляющий сайт.
  5. motiongraphics.it — много полезного об анимации.
  6. videocopilot.net — туториалы, 3d, хорошая галерея работ, часто посещаю этот ресурс.

Типографика и шрифты

  1. ilovetypography.com — вы тоже полюбите этот ресурс, я уверена.
  2. typographe.com — сайт о типографике по-французски.
  3. slanted.de — крупный немецкий сайт о типографике с огромным количеством примеров.
  4. paratype.ru — сайт посвящен только шрифтам, вы будете в восторге.
  5. typofonderie.com — коллекция шрифтов
  6. webfont.ru — шрифты, подойдут разработчикам, ну и дизайнеру конечно! БЕСПЛАТНО.
  7. ph4.ru — эти шрифты отлично подойдут для баннеров, листовок и открыток.
  8. fontshop.com — конкретно о шрифтовом дизайне.
  9. google.com/fonts — бесплатные шрифты от google. Отлично подойдут веб-дизайнерам (для сайтов).
  10. typographyserved.com — креативная типографика.

Персональные дизайнерские блоги и сайты

  1. elliotjaystocks.com — блог графического дизайнера Elliot Jay Stocks.
  2. veerle.duoh.com — очень красивый блог. Подробные статьи и профессиональные консультации. Рекомендую.
  3. snook.ca — полезные советы и хитрости от графического дизайнера, писателя и разработчика Jonathan Snook.
  4. stuffandnonsense.co.uk — очень крутой и лучший на мой взгляд блог о веб-дизайне.
  5. blogof.francescomugnai.com — блог итальянского дизайнера Francesco Mugnai, вдохновляйтесь здесь.
  6. lysergid.com — французский блог, много полезного.
  7. blog.iso50.com — отличный блог дизайнера Scott Hansen.
  8. blogs.adobe.com — блог графического дизайнера John Nack. Статьи о графике, и об Adobe.
  9. weebls-stuff.com — отличный блог флэш-аниматоров.
  10. paris.blog.lemonde.fr — блог всеми известного Питера Гэйбора (Peter Gabor), здесь много вдохновляющих постов, читайте.
  11. vladstudio.com — красивые работы, думаю, согласятся все.
  12. lotusart.de — официальный сайт Alexander Beim. В принципе с него и началось мое увлечение графикой. …и та самая магическая коробка, смотрим работы, восхищаемся )
  13. pedramk.com — дизайнер-визуализатор Perdam Karimfazli, здесь вы найдете много известных работ.
  14. mattrobot.com — отличные иллюстрации от дизайнера Matt Talbot.
  1. canva.com — отличный онлайн-сервис обработки фотографий (можно отразить ваше фото зеркально, повернуть в любую сторону, плюс полезные фильтры). Часто пользуюсь этим сервисом при выкладывании фотографий в соцсеть + приятный интерфейс.
  2. instagram-foto.ru — фотоэффекты как в инстаграм (эффект ретро).
  3. picmonkey.com/editor — фотоэффекты + различные стикеры поверх фотографии.
  4. fotor.com
  5. photocat.com
  6. befunky.com
  7. photobucket.com/editor
  8. ipiccy.com
  9. fotoflexer.com
  10. popartstudio.nl — сервис позволяет сделать из своей фотографии оригинальную картинку в стиле попарт.
  1. flickr.com — огромная соц.сеть, где миллионы людей ежедневно делятся своими фотографиями. Вы найдете как начинающих фотографов, так и профессионалов.
  2. computy.ru — блог моего друга-программиста, часто захожу посмотреть новые заметки, и вам советую, пригодится
  3. hypebeast.com — модный журнал о культуре, дизайне и графике.
  4. tumblr.com — блоги обо всем. Много постов с красивыми огромными картинками, регистрируйтесь.
  5. pttrns.com — интерфейсы для мобильных устройств.
  6. mobile-patterns.com — приложения для мобильных устройств и интерфейсы.
  7. likecool.com — много разных креативностей.
  8. smashingjournal.ru — о том, как выгодно продать свои работы. Очень интересные статьи, подойдет всем фрилансерам рунета.
  9. pinterest.com — можно завести свой блог.
  10. favim.ru — коллекция гивок, и можно создать свою галерею картинок.
  11. phototalents.ru — много фотографий, каринок и уроков по фотографии.
  12. linksfarm.ru — генератор статей.
  13. admagazine.ru — журнал о дизайне, не только графическом.
  14. secondstreet.ru — сборка креативных идей.
  15. zarabotaydengi.com — немного о том как заработать на конкурсах и вообще на фрилансе
  16. pinme.ru — много оригинальный работ, регистрируйтесь и тоже участвуйте.
  17. translate.google.ru — гугл-переводчик, пользуюсь, когда просматриваю иностранные сайты о дизайне.
  18. pr-cy.ru — проверка текста на уникальность
  19. timeweb.com — завершу свой список хостингом, который всем рекомендую, если планируете создавать свой сайт. Цены дешевые, поддержка круглосуточная, я довольна.
  20. ruweb.net — здесь можно купить дешевый домен
  21. blogun.ru — сервис поможет в раскрутке вашего сайта

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

Веб-дизайнеру: 26 сайтов для вдохновения

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

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

Часть указанных сайтов и ресурсов используется в работе дизайнера ежедневно, другие — не чаще раза в неделю. С их помощью можно оставаться в тренде новостей веб-дизайна всего за 30-60 минут в день!

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

Вдохновение

Awwwards

Первый сайт из списка «места, куда следует приходить за вдохновением». Именно здесь Кристофер ищет новые идеи.

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

CSS Design Awards

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

Niice

Сами себя Niice позиционируют как «поисковая система со вкусом». Здесь собраны разнообразные изображения от сообщества, которые можно свободно использовать на своих проектах.

Designspiration

Еще один великолепный источник идей в дизайне, с которым можно безбоязненно работать каждому — Designspiration.

Muzli

Плагин для Google Chrome Muz.li заменяет домашнюю страницу браузера на агрегатор дизайнерских идей, куда попадают примеры с нескольких источников. В частности, плагин подключен к Awwwards.

One Page Love

Если вам нравится минимализм и одностраничники, то One Page Love подарит вам немало удивительных примеров дизайна.

Бесплатные изображения

Freepik

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

Freebiesbug

Freebiesbug раздает тысячи бесплатных PSD-макетов и других полезных в веб-дизайне ресурсов.

Graphic Burger

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

Палитра

Color.

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

Pltts

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

Adobe Color CC

Комбинатор палитр Adobe Color CC, переименованный из Adobe Kuler в нечто более осмысленное. Вместе с ребрендингом он получил мощное «колесо цветов», поэтому грех жаловаться.

Мобильные устройства

Pttrns

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

Так, например, выглядят калькуляторы под iOS8.

WTF Mobile Web

Или «Чего не следует делать при разработке мобильных сайтов». Здесь собраны яркие примеры ужасно неудобных дизайнерских решений.

Если вы попали сюда, надеюсь, Google забудет о вашем существовании.

Capptivate

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

«Просмотр кода элемента» – проверка на поддержку мобильными устройствами

Этот инструмент Кристофер обнаружил совсем недавно, хотя он присутствует в Google Chrome с конца 2013 года. Достаточно щелкнуть правой кнопкой по содержимому страницы и выбрать последний пункт «просмотр кода элемента», либо нажать комбинацию Ctrl+Shift+C. На появившейся панели скраю четко будет видна пиктограмма мобильного устройства, в котором можно выбрать симуляцию любого интересующего вас аппарата.

Econsultancy’s Mobile Web Design Best Practice Guide

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

Правила хорошего мобильного приложения от Google

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

Взаимодействие с пользователем

Hover States

Коллекция новых, необычных интерфейсов и дизайнерских решений по взаимодействию с ним. Каждый пример на Hover States снабжен удобной видеодемонстрацией.

Little Big Details

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

UXPin

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

Сообщество

Behance

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

Dribbble

По сути, Dribbble — это сервис «покажи и расскажи» для дизайнеров, на котором можно получить качественные отзывы о своей работе.

Чтиво

Smashing Magazine

На Smashing Magazine публикуют полезные статьи по дизайну и коду, руководства по созданию пользовательских интерфейсов и по работе с WordPress. Обновляется ежедневно.

Designer News

Что-то вроде Hacker News, но для дизайнеров. На Designer News сообщество профессиональных дизайнеров делится интересными ссылками и собственным опытом с другими.

User Testing Blog

Заглянув на User Testing Blog, можно найти огромную коллекцию статей об адаптивном дизайне, которые ответят на все вопросы о мобильной поддержке.

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

Перевод: Зубреков Роман, контент-менеджер компании “ТриЛан”

25 полезностей для веб-дизайнеров

Давайте разберемся, что значит быть популярным, модным и современным в веб-дизайне в 2020 году. Для этого рассмотрим основные тренды веб-дизайна. Большинство из них кочуют из года в год и стали уже неотъемлемой частью современного сайтостроительства. Особенно это связано с развитием мобильных технологий, каналов связи и усовершенствованием девайсов. Например, такой тренд, как мобильность сайта, стал обязательным для исполнения. Коммерциализация интернета тоже диктует свои жесткие условия дизайнерам и веб-разработчикам. При этом часть тенденций ослабевает и становится менее популярной, но все равно остается достаточно активной. Также появляются модные увлечения, характерные для короткого периода. Например, в прошлом году это были иконки с длинной тенью изображенных объектов. В этом году стали популярны геометрические узоры, их мы тоже рассмотрим. Итак, давайте по порядку.

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

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

Цукерберг рекомендует:  Вебинар - Не получается войти в вебинар

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

4. Большая фотография
Большая картинка на бэкграунде сайта остается самым популярным и востребованным трендом веб-дизайна. Это всегда эффектно и впечатляюще смотрится. А оригинальность фотографии позволяет сделать сайт запоминающимся и выделяющимся среди других. Примеры использования больших картинок и широкоформатного видео на бэкграунде можно посмотреть в подборке Топ 15 самых оригинальных сайтов за декабрь 2020 по версии DesigNonstop

5. Синемаграфия
Хорошая альтернатива широкоформатному видео и большой фотографии на бэкграунде. Синемаграфы — это фотографии, на которой происходят незначительные повторяющиеся движения. Обычно они представлены в gif формате и создают зрителю иллюзию просмотра видео. Подробнее о синемаграфии с большим количеством примеров можно посмотреть в подборке Завораживающее движение синемаграфа от Kevin Burg и Jamie Beck

6. Плоский дизайн
Еще один мощный тренд последних лет. Сайтам, выполненным в плоском цвете, присуща аккуратность и ясность. Но, в последнее время, появилась новая разновидность плоского дизайна — Semi flat. Это когда весь дизайн выполнен в плоском цвете, и только один элемент имеет тень, градиент или текстурность. Как, правило, этим элементом является кнопка, которой придается объемность или выпуклость для привлечения внимания посетителей.

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

8. Анимация объектов
Возможности современного html5 и css3 позволяют использовать большой арсенал визуальных эффектов на сайте. Это делает взаимодействие со страницей более интересным и увлекательным для посетителя. Так что в новом году мы также увидим самые неожиданные интерактивные микроперемещения объектов, как правило, реагирующие на движение мышки. Возможно мы увидим примеры более сложной анимации.

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

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

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

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

13. Одностраничники
Сайты-одностраничники, посадочные страницы, лендинг пейджи стали неотъемлемой частью современного интернета. Подробнее, что такое лендинг пейдж можно прочитать в статье 20 характерных особенностей современных лендинг пейдж с примерами и Современные Landing Page: история, тренды, перспективы развития. В 2020 году у лендингов будет усиливаться акцент на кнопку, призывающую к действию — заказать, позвонить, записаться и т.д. Все остальное, отвлекающее внимание потенциального посетителя, будет отсекаться.

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

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

16. Инфографика
Графическое представление в виде инфографики все еще популярно и востребовано. Сопровождение текста красивой картинкой или иконкой в совокупности со стильными элементами оформления делают инфографику эстетически привлекательной. Особенно визуально наглядна и интересна сравнительная инфографика — типа было-стало, да-нет, плюсы-минусы, можно-нельзя и т.д. Также с помощью инфографики можно рассказать поэтапную историю или живо представить скучную статистику.

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

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

19. Леттерстакинг
Леттерстакинг (англ. letter stacking) — это текст в квадрате. По сути, это пример сложного творческого решения — нужно представить длинный текст в объеме крохотного пространства. При этом, это должно смотреться красиво и оригинально. В этом году это еще и модно.

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

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

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

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

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

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

Инфографика «Тренды веб-дизайна 2020 года»
Предлагаю вам инфографику, в которой наглядно представлены все тренды и тенденции веб-дизайна. Скачать картинку в большом размере можно по этой ссылке на DeviantArt. В новом окошке откроется страничка на DeviantArt. Там нажмите на слово Download справа от картинки и сохраните картинку на свой компьютер.

Rusability

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

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

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-картинки и синемаграфика

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

В 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. Смелая типографика

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

Цукерберг рекомендует:  Веб-разработка - Тесты на codeaccess.com

Проект: 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 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

Всё полезное для работы креативного веб-дизайнера

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

Собери свою коллекцию бесплатных и платных инструментов Material Design.

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

Присоединяйтесь к команде профессионалов. Ищите вдохновение для своих новых проектов. Создавайте потрясающие приложения и сайты.

Итак, приступаем к обзору.

Часть #1: Бесплатные инструменты Material Design. Что ищет креативный дизайнер и разработчик?

№1. 40+ Бесплатных фонов в стиле материального дизайна

Каждый раз когда мы ищем ресурсы с бесплатными инструментами, мы ожидаем найти их собранными в одном месте. Более 40+ фонов высокого качества в стиле Material Design, помогут в реализации как веб-проектов, так и для печатных программах. Файл доступен как в .jpg, так и .ai форматах. Скачав коллекцию себе, можете поделиться и с другом.

№2. 10 Бесплатных Material Design фонов

Хотите придать уникальности своему дизайну? Оцените 10 классных фонов, разработанных эксклюзивно для проектов Material Design. Разные стили, выбор цветовых решений, размер 5000x3000px. Файлы доступны в 300 Dpi и .jpg форматах.

№3. 30+ Бесплатных Material Design фонов

Данная подборка будет особенно интересна тем, кто ищет геометрические формы Material Design. Итак, набор насчитывает 30 разнообразных решений, доступных в .png и .ai файлах. Используйте по своему усмотрению.

№4. 12 Бесплатных Material Design промо фонов

Отличительная особенность данной коллекции 12 промо фонов состоит в том, что все они находятся под лицензией Creative Common Zero. Отсюда следует, что каждый желающий может применять их как в персональных, так и коммерческих целях, кроме перепродажи, естественно. Фоны идеальны для раскрутки и продвижения товаров. Доступные форматы .png и .jpg.

№5. Бесплатный набор плиточных фонов Material Design

А вы пользуетесь узорчатыми фонами? Очень рекомендую использовать набор бесплатных плиточных фонов в .png, photoshop и illustrator vector форматах. А это означает, что вы в праве легко менять цвета для улучшения дизайна своих проектов.

№6. Бесплатные баннеры Material Design

Ищите подходящие баннеры для своего проекта? Забирайте оригинальные баннеры Material Design и используйте в собственных нуждах. Итак, вы получаете 5 вариантов для редизайна хедеров или отдельных секций для более убедительного посыла в своем проекте.

Бесплатные инструменты Material Design: разработка мобильных приложений

№7. UI kit — Бесплатный набор UI инструментов

Являетесь активным юзером Photoshop и Sketch? Тогда мне есть, что вам предложить. Набор инструментов поможет придать активную нотку вашему проекту по всем правилам Material Design. Создавайте прототипы, новые дизайны, а также разрабатывайте мобильные приложения.

№8. Bank Tag – Бесплатная концепция для дизайна мобильного приложения

Давно собирались создать мобильное приложение для пересылки денег? Рекомендую Bank Tag — набор из 13 чистых Sketch дизайнов разработанных для создания мобильных приложений. Концепция предполагает использование деталей банковского счета.

№9. Do — бесплатный UI-кит для мобильных приложений

Do — это набор экранов, который содержит в себе более 130 потрясающих дизайнов, 10 полных тем и около 250 компонентов. А теперь главное — все они могут перемешиваться и сочетаться друг с другом. В результате, вы создаете уникальное Retina-ready приложение в стиле материального дизайна. В наборе есть всё, что необходимо в форматах Sketch, Photoshop и Craft.

№10. Crystallize — бесплатный набор UI элементов для создания музыкальных приложений

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

№11. Бесплатный набор UI-китов в стиле Material Design

Используйте набор из PSD элементов и запустите собственный проект строго Google требованиям быстрее. Все элементы набора можно легко редактировать. Меняйте дизайн с помощью Photoshop CS6+. В комплект входит бесплатный font family, группированные слоя и векторные формы.

Бесплатные инструменты Material Design: иконки

№12. Google Material Design — коллекция бесплатных иконок

Уверена, что Google Material Design — это маст-хэв инструмент для каждого графического дизайнера. По сути, это zip archive размером в

57MB, в котором собраны контрастные виды иконок. Они находятся в свободном доступе, но не для перепродажи.

№13. Бесплатная коллекция иконок Material Design

Думаете вас не чем удивить? Что скажете про 4000 иконок? Подходит как дизайнерам, так и разработчикам разных платформ. Доступны в различных форматах, цветах и размерах. Загружайте нужный размер иконок, выбирайте форму и используйте в своих проектах. Иконки Material Design впишутся легко в любой интерфейс. Меняйте дизайн с помощью Illustrator, Photoshop или Visual Studio.

№14. Master Set — бесплатный набор графических элементов Material Design

Устали от поисков графических элементов? Master Set — это то, что вам нужно. Это множество графических элементов доступных в .icns, .ico, .png форматах. Создавайте как небольшие, так и проекты средних размеров. Набор служит отличным решением для проектов реальной жизни.

15. Бесплатная коллекция из 1000 иконок в стиле Material Design

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

Бесплатные инструменты Material Design: фреймворки

№16. Materialize — бесплатный фреймворк Material Design

Materialize — это адаптивный фронт-энд фреймворк который придется по душе креативному веб-дизайнеру. По факту, это один из внушительных фрейворков, который вмещает как CSS, так и SCSS файлы, JavaScript, иконки Material Design и Roboto шрифт. Использование фреймворка не требует глубоких знаний в разработке.

№17. Бесплатный фреймворк Material Design Lite

Material Design Lite создан строго по принципам Material Design. Поддерживает иконки Material Design, типографию Roboto, кроссбраузерную совместимость и кроссплатформенность. С его помощью можно создавать гибкие сайты и приложения в стиле минимализм.

№18. Бесплатный фреймворк Material-UI

Данный бесплатный фреймворк использует React компоненты согласно принципам Google. Кстати, в любой момент можно сменить React на синтаксис JavaScript или XML. Вы будете приятно удивлены возможностям фреймворка.

№19. Бесплатный фреймворк LumX

LumX использует хорошо анимированные CSS и JavaScript компоненты. Этот адаптированный фреймворк поможет в создании красивых приложений и сайтах согласно принципам Material Design. Комбинация Sass, AngularJS и немного jQuery помогает делать приложения быстрее и легче.

№20. Бесплатный фреймворк Material Foundation

Предлагаю еще один вариант адаптивного фреймворка, разработанный Zurb Foundation. С его помощью легко создать гибкие сайты и приложения. Он содержит в себе компоненты React, иконки Material Design, типографию, кнопки, карточки, меню, и другие полезности. Не тратьте время на поиски, забирайте уже сегодня.

№21. Бесплатный фреймворк MUI

Данный легковесный фреймворк подходит для создания кроссплатформенных приложений. Фреймфорк можно легко отредактировать с помощью Sass файлов. Не зависит от внешних факторов. Поддерживает Angular, React и Web Components. Mui работает быстрее своих фреймворк-конкурентов. Помогает в создании небольших проектов.

№22. Бесплатный фреймворк Angular Material с набором UI элементов

Являясь одним из популярных решений в веб-разрабоке, фреймворк Angular Material помогает создать проект согласно принципам Material Design. Предлагает расширенные возможности языка разметки с помощью дополнительных директив. Упрощает разработку приложений и проектов благодаря некоторым уникальным функциям.

№23. Bootstrap Material Design — Тема для Bootstrap

Тема Bootstrap Material Design предлагает множество полезностей Bootstrap в комплексе с элементами Material Design. Считаю ее отличным выбором для тех, кто уже знаком с Bootstrap. Предлагает примеры с кодом для каждого из Bootstrap и Material компонентов.

Часть #2: Платные инструменты и ресурсы Material Design: премиум-качество для максимального результата

№24. 1100 Artistic Backgrounds — премиум-бандл фонов и текстур на тему дизайн

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

№25. UTech — Премиум-бандл UI элементов

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

№26. Rainy Season – Премиум-бандл UI элементов интерфейса на художественную тему

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

№27. Statistic Cards – Набор UI элементов интерфейса Bootstrap в стиле минимализм

Продвинутый макет статистики разработан на Bootstrap 4, что предполагает абсолютно гибкий дизайн и легкость в редактировании. Кстати, подробная документация поможет в процессе кастомизации. Набор содержит 5 разноплановых форм, множество цветовых решений и стилей. Как бонус, icomoon icon-fonts входят в комплект.

№28. Tree — Бандл элементов инфографики на тему бизнес-услуги, реклама

Хочу особо выделить оригинальный дизайн премиум-набора Tree. Эксклюзивные 10 вариаций в виде дерева можно использовать для персональных проектов и PowerPoint презентаций. Комплект содержит 4 цветовых вариантов в EPS и AI файлах. Размер можно изменять, элементы редактировать с помощью Adobe Illustrator CS5.

№29. Большой бандл элементов инфографики на тему креативный дизайн

Конечно же каждый дизайнер будет не против обновить свой комплект элементов инфографики таким отличным набором EPS и AI файлов для использования в любых бизнес проектах. Создавайте разнообразные графики, таблицы, иконки, формы и объекты с помощью более 40 популярных элементов инфографики, собранных в данном наборе. Редактируйте вид и размер с помощью Adobe Illustrator CS5. Учтите, Photoshop не применим.

№30. Tonicons – 2000 Бандл векторных иконок на тему компьютеры, интернет

И, напоследок, предлагаю дополнительно набор в 2000 иконок. Выбирайте нужную категорию иконок — кнопочные, плоские, гигантские, и др. Легко редактировать, менять размер, цвет и другие детали. Кстати, набор предлагает 7 видов размеров в png файлах, а 100% векторные PSD файлы — 128х128рх.

Вместо заключения

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

Следите за новинками. Будьте в курсе последних разработок и новшеств в веб-дизайн индустрии.

Есть чем добавить список инструментов и ресурсов? Жду ваших комментариев. Удачи.

25 лучших книг для веб-дизайнера

22 ноября 2011 | Опубликовано в Веб-дизайн | 7 Комментариев »

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

25 лучших книг для веб-дизайнеров и разработчиков по итогам 2011 года

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

Сразу выделим две книги — Adaptive Web Design and Responsive Web Design. Их рекомендовали почти все! Остальные 23, несомненно, тоже заслуживают не меньшего внимания.

1. Adaptive Web Design

Автор: Aaron Gustafson / Аарон Густавсон
Стоимость печатной версии: $22
Стоимость Kindle-версии: £6.45

Обязательная книга для веб-дизайнеров, которые стремятся создавать сайты, эффективно работающие во всез браузерах и на всех платформах, идут в ногу с передовыми технологиями. Книга рассказывает об истории, механизмах и практике применения прогрессивных улучшений.
Джеффри Зельдман, основатель Happy Cog, о книге Густафсона:

«Придуманные Стивеном Шампеоном из he Web Standards Project http://www.webstandards.org/ в начале 2000х, „прогрессивные улучшения“ являются ключевой идеей, исходящей из стандартов веб-дизайна. Как сама идея, так и методы доступны всем. Благодаря прогрессивным улучшениям, мы перестаем проектировать для браузеров и начинаем проектировать для людей. Никто еще не рассказал о всех их преимуществах лучше, понятнее и детальнее, чем Аарон Густафсон. »

2. Responsive Web Design

Автор: Ethan Marcotte / Итан Маркотт
Стоимость печатной версии: $18
Стоимость электронной версии: $9
143 страницы. Пока доступна только на английском и французском.

Как и Adaptive Web Design, книга Макотта реально способна помочь вам в создании современного дизайна, а не укоренять вас в использовании методов вчерашнего дня. Ключевой идеей является сегодняшняя необходимость разрабатывать дизайн одновременно для мобильных браузеров, планшетов и нетбуков, равно как и для широких настольных мониторов. Книга описывает методы и принципы, лежащие в основе такой конструкции, как то: изменяющиеся сетки, подстраивающиеся изображения и media queries.

3. CSS3 for Web Designers

Автор: Дэн Седерхольм / Dan Cederholm
Стоимость печатной версии: $18
Стоимость Kindle-версии: $9
120 страниц. Пока доступна только на английском и французском.

Дэн Седерхольм — автор, знакомый вам по дизайнерским бестселелерам CSS ручной работы / Handcrafted CSS, Пуленепробиваемый Web-дизайн / Bulletproof Web Design и Web Standards Solutions, Special Edition (Friends of ED), основатель небольшой дизайн-студии SimpleBits, сооснователь и дизайнер Dribbble, признанный эксперт в стандартах веб-дизайна. Работал с YouTube, MTV, Google, Yahoo, ESPN, Fast Company, Blogger и другими.

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

4. Designing for the Digital Age

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

«Учтите, что это не чтиво из серии „взять на пляж почитать“. Если у вас есть возможность потратить некоторое время дома на чтение, то стоит погрузиться в эту библию для дизайнеров».

5. DOM Scripting

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

6. Don’t Make Me Think! / Веб-дизайн: книга Стива Круга, или «не заставляйте меня думать!»

Автор: Steve Krug / Стив Круг
Стоимость печатной версии: £14.89
Позаголовок книги «Здравый подход к веб-юзабилити» актуален, как в 2000 г., когда вышло первое издание книги, и в 2005, подарившем нам второе, так остается актуальным и со сей день. «Любой, кто проектирует, программирует, наполняет, владеет или управляет сайтами, обязан прочесть и зазубрить эту книгу», утверждает Зельдман. «Если раньше книги по юзабилити были написаны в духе выговора, поучения и анти-креативности, то Стив рассказывает о юзабилити убедительно, дружелюбно и весело. Я по наивности видел в юзабилити врага дизайна, пока не прочел эту книгу. Она творит чудеса и для маркетологов, и разработчиков, и менеджеров проектов, и контентщиков, да для всех желающих радовать сайтом своих пользователей.»
На Озоне:
русский перевод: цена не указана
оригинал на английском: 2 23080 руб

7. Getting Things Done / Как разобраться с делами

Автор: David Allen / Дэвид Аллен
Стоимость печатной версии: £6.50
На Озоне: цена не указана
Второе название — Как достичь продуктивности без стресса. Русский перевод названия «Как привести дела в порядок» издательства «Вильямс» меня немного пугает, вызывая ассоциации с завещанием:)
Пол Боуг, соучредитель Headscape, говрил об этой проблеме: «Одной из наибольших проблем, с которыми сталкиваются фрилансеры веб-дизайна является стресс. Ведение собственного бизнеса и общение с требовательными клиентами доводит многих фрилансеров до лежания в постели с чувством постоянного беспокойства и совершенной разбитости»
«Книга Аллена предлагает способ организации жизни, обеспечивающей баланс между работой и домом. Хоть подойдет она не каждому, но для меня она, безусловно, изменила многое, позволив чувствовать контроль над моей все возрастающей нагрузкой.»

8. Good Strategy, Bad Strategy

Автор: Richard Rumelt
Стоимость печатной версии: £7.01
Книга Румельта о менеджменте и стратегии отличается от множества подобных изданий тем, что не растягивает повествование в художественной форме на сотни страниц, а, по словам автора, «содержит мнения по ряду вопросов, имеющих основополагающее значение, но нигде не получивших должного освещения. Это книга не совсем для веб, но я бы хотел, чтобы как можно больше специалистов, связанных с веб-инудстрией, прочли ее».

9. Handcrafted CSS: More Bulletproof Web Design

Автор: Dan Cederholm and Ethan Marcotte
Стоимость печатной версии: £17.10
Стоимость Kindle-версии: £15.39
«Если моя книга Designing With Web Standards действует на веб-дизайнеров, как валерьянка на кошек, то Handcrafted CSS — это уже наркотик посильнее,» шутит Зельдман. «Освойте утонченные методы CSS-компоновки, основывающиеся на философии „прогрессивного улучшения“. Создавайте плавающие макеты, поддерживающие сегодняшнее разнообразие устройств с доступом в Интернет. Узнайте методики создания отлично выглядящего приложения, не забивая при этом канал связи пользователя. Наберитесь смелости использовать инновации и узнайте, как убедить ваших клиентов принять их!»

10. JavaScript Enlightenment

Автор: Cody Lindley
Стоимость печатной версии: цветная — $49, ч/б — $29
Стоимость pdf-версии: $15
На своем сайте Линдли много рассказывает о том, чем не является его книга: полным справочником, мануалом для на новичков в программировании и JavaScript; книгой готовых рецептов. Но говорит он и о том, что делает эту книгу просто обязательной для многих из нас: она может превратить вас из пользователя библиотеки JavaScript в JavaScript-разработчика.
Густафсон говорит о ней с востогром:

«Большинство из нас, старожилов, учили JavaScript, разбирая чужой код и методом „научного тыка“, так что мы упустили много чего из основы. В этой книге Коди детально проводит нас через спецификации ECMA, описывая подробно тонкости языка JavaScript. Это заставило меня полюбить JavaScript еще больше, чем прежде».

11. Mobile First / Сперва мобильные

Автор: Luke Wroblewski / Люк Вроблевски
Стоимость печатной версии: $18
Стоимость ebook-версии: $9
Стратегическое руководство по веб-дизайну для мобильных устройств, которое ставит вопросы и дает на них ответы, объясняя, почему нужно сперва разрабатывать мобильную версию и как этого достичь. «Читайте вместе с Responsive Web Design, и вы будете в курсе тенденций веб-дизайна на ближайшие пять лет», — считает Кларк.

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

12. Nudge: Improving Decisions About Health, Wealth and Happiness

Автор: Richard H Thaler and Cass R Sunstein
Стоимость печатной версии: £13.48 в жесткой обложке, £5.99 в мягкой
Аудиокнига: £27.29 на CD, £6.07 для скачивания.
Стоимость Kindle-версии: £5.69

«Книга Nudge не была написана специально для веб-дизайнеров. Однако я считаю, ее обязательно должен прочесть каждый веб-дизайнер», — говорит Боуг. — «Идея книги исходит и того, что психологию можно использовать, чтобы „подтолкнуть“ людей сделать определенный выбор. Хотя книга посвящена тому, как это можно было бы использовать для стимулирования донорства или пенсионных сбережений, эти уроки могут быть применены и к разработке веб-сайта».

13. Rocket Surgery Made Easy

Автор: Steve Krug
Стоимость печатной версии: £15.41
Стоимость Kindle-версии: £13.83
Хотя упомянутая ранее книга Круга «Не заставляйте меня думать» известна шире, Боуг считает книгу Rocket Surgery Made Easy более полезной для веб-дизайнеров.

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

14. Scalable and Modular Architecture for CSS

Автор: Jonathan Snook
Стоимость печатной версии: нет
Стоимость электронной версии: бесплатно, только онлайн
на этом сайте-книге Снук рассказывает, что прячется за термином SMACSS — (произносится как «смэкс»), о средствах для изучения процесса проектирования и переходе от жестких рамок к гибкому процессу мышления, позволяющему подойти последовательно к разработке сайта средствами CSS.
«Джон создал бесплатную, естесственную онлайн-книгу с обсуждениями, в ней содержится множествоотличных идей о проектировании CSS для больших сайтов», считает, Rewis.

15. Seductive Interaction Design / Соблазняющий интерактив в дизайне

Автор: Stephen P Anderson
Стоимость печатной версии: £13.43
Стоимость Kindle-версии: £12.09
Большинство дизайноров бывали в ситуации, когда, создав что-то удивительное и прекрасное, они обнаруживали, что никто этого не замечает. Эта книга докапывается до причин, заставляющих людей балдеть, рассматривая их с точки зрения разработки сайтов и создания интерактива по принципу соблазнения.

«Мне эта книга нравится, потому что она объясняет, как делать дизайн, способный вызывать определенные действия, притом, в ней уделено много внимания моментам психологии» говорит Парментер.

16. Steve Jobs

Автор: Walter Isaacson
Стоимость печатной версии: £11.97
Стоимость Kindle-версии:

Книгу о Стиве Джобсе написал известный в США автор Уолтер Исааксон, на счету которого уже есть ставшие бестселлерами биографии Бенджамина Франклина и Альберта Эйнштейна. Стив Джобс лично попросил Исааксона написать свою биографию через некоторое время после того, как врачи диагностировали ему рак. Книга написана Исааксоном на основе 40 интервью, взятым им у Стива Джобса в течение двух лет. За это же время автор также провел более 100 бесед с друзьями, членами семьи, коллегами и даже конкурентами Стива.
Кларк рекомендует ее, потому что

«нам, профессионалам веб, нужно помнить о необходимости продолжать делать работу, которую мы любим, и никогда не останавливаться».

17. Stunning CSS3

Автор: Zoe Gillenwater
Стоимость печатной версии: £16.94
Стоимость Kindle-версии: £15.25
Больнинство книг по CSS немногим отличаются от расширенных версий справочников. Джилленуотер идет другим путем, помогая понять CSS3 на практических, привлекательных примерах.

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

18. The Designful Company

Автор: Marty Neumeier
Стоимость печатной версии: £10.81
Стоимость Kindle-версии: £9.73
Еще одна альтернативная и очень полезная книга по менеджменту, The Designful Company, утверждает, что хотя большинство руководителей полагаются на двухступенчатый процесс принятия решений — «знаю» и «делаю» — сегодняшний инновационный рынок требует промежуточный шаг, «становление», где «предположения ставятся под сомнение, просчитываются варианты будущего и проходят испытания прототипы».

19. The Elements of Content Strategy

«Мне очень понравилось читать ее», рассказывает с энтузиазмом Снук. «И не принимайте ее краткость за недостаток контента — здесь материал изложен плотно, книга очень содержательная, чего, в общщем-то , и следовало ожидать от книги по стратегии контента!»

20. The Happiness Project

Автор: Gretchen Rubin / Гретхен Рубин
Стоимость печатной версии: £5.49
Стоимость Kindle-версии: £6.99
А вы счастливы? Рубин в один дождливый день поняла, что может быть куда счастливее и приступила к проекту по установке причин и выяснению способов, которые работают для нее. Результатом стали вдумчивые, практические и юмористические истории, которые могли бы вдохновить вас на ваш путь к счастью. Парментер обосновал включение этой книги в наш список так:

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

21. The Thank You Economy / Экономика благодрности

Автор: Gary Vaynerchuk / Гари Вайнерчук
Стоимость печатной версии: £8.50
Стоимость Kindle-версии: £9.99
В книге «Экономика благодарности» предоставлены веские, основанные на фактах доказательства того, что мы перешли в совершенно новую эру ведения бизнеса, и теперь самые большие доходы будут получать не те, кто тратят состояния на рекламные кампании, а организации, способные доказать приоритетность заботы о своих покупателях. Выделиться из большинства и преуспеть в условиях современного рынка смогут те компании и бренды, которые удачно применяют возможности «сарафанного радио» в социальных медиа и могут изменить свою культуру в направлении изучения потребностей клиентов и ориентации на фанов.

22. The Victorian Internet

Автор: Tom Standage
Стоимость печатной версии: €9.74
Стоимость Kindle-версии:
Изданная еще в 1998 году, книга не теряет популярности. Она подмечает сходство современной сети Интернет с телеграфными сетями 19 века: шумиха, скептицизм, хакеры, онлайн-романы и свадьбы, чаты, яростные флейм-споры, переизбыток информации, предсказания неизбежного мира во всем мире, и так далее.

23. Weaving the Web

Автор: Tim Berners-Lee / Тим Бернерс-Ли
Стоимость печатной версии: £58.43
Стоимость подержанной книги: от £1.45
На Озоне: 1 28870 руб.
Эта книга описывает само становление веб, из первых рук. Бернерс-Ли рассказывает вдохновляющую историю, подробно останавливаясь на создании консорциума World Wide Web. Книга была издана давно, но ее легко найти на руках.

24. Web Form Design

Автор: Luke Wroblewski
Стоимость печатной версии: £23.75
Стоимость Kindle-версии: £12.84
Веб-формы, мягко говоря, являются обычным делом. Они часто решают судьбу наиболее важных онлайн-действий: выбора, регистрации и прочих задач, требующих ввода данных, — так справедливо утверждается в рекламе этой книги. Но остается фактом то, что многие онлайн-формы представляют из себя ужасное, затрудняющее любое действие пользователя.

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

25. Where Good Ideas Come From / Откуда берутся хорошие идеи

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

Вот что посоветовали прочесть «сильные мира веб-дизайна». Оригинал статьи. Если вы в чем-то несогласны с ними и хотели бы порекомендовать более полезный материал для изучения — напишите об этом в комментариях. Из ранее опубликованного вас также может заинтересовать статья 16 полезных книг для дизайнеров

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