Дизайн

Веб дизайн примеры – Сайты для дизайнеров — подборка самых полезных

16.12.2017

Содержание

«Как стать веб-дизайнером?» – Яндекс.Знатоки

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

  1. UX – user experience. Проектирование пользовательского опыта. Чтобы всё было удобно, продуманно и логично. UX — это фундамент хорошего дизайна.
  2. UI – user interface. Визуальный дизайн. Чтобы всё было красиво, радовало глаз и вдохновляло. Это графический дизайн, ориентированный на экраны и другие способы мониторинга.

Чтобы научиться UX, следует прочитать несколько книг по этой теме. Я бы начал с книги «Дизайн привычных вещей» Дональда Нормана. Практическая часть UX – создание кликабельных прототипов, которые показывают логику проектируемого интерфейса. Помимо хорошего понимания задач пользователя, нужно знать, что такое дизайн-паттерны и как их применять. Как проводить тестирование дизайна на живых людях.Чтобы научиться UI, следует сделать следующие вещи:

  1. Хорошо изучить графический редактор. Это либо облачный сервис Фигма, либо Скетч. Я выбрал Скетч, но в гонке вооружений он упускает лидерство, потому что скетч-проект это файл, а файлы тяжело синхронизировать в дизайн-команде. Фигма позволяет хранить дизайн-макеты в облаке и синхронизировать их в реальном времени как Google Docs.
  2. Вторая вещь, которую следует сделать — изучить типографику, чтобы понимать, как работать с буквами. Хорошая типографика — основа дизайна интерфейсов. Это знание поможет научиться анализировать дизайн других.
  3. Смотреть много красивых сайтов и анализировать решения других дизайнеров. Регулярно смотреть подборки awwwards.com, behance.netи dribbble.com. Не сидеть в четырёх стенах и смотреть, что люди делают, смотреть документальные фильмы, вроде Гельветики и сериала Abstract: The Art of Design. Коллекционировать удачные образцы в Ноушн и вдохновляться. Копать глубоко: изучать диза

yandex.ru

40+ примеров блестящего дизайна домашних страниц

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

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

Продавцы: примеры домашних страниц сайтов eCommerce

NoBull

Чему мы можем научиться: простая навигация и красивый дизайн могут (и должны) работать вместе. Хорошо организованный набор интерактивных «плиток» делает этот сайт удобным для «сёрфинга».

Lega-Lega

Чему мы можем научиться: это нормально, если вы не показываете посетителям все ваши товары сразу! В то время как большинство интернет-магазинов предлагают одновременно множество товаров (просто посмотрите на Amazon), этот сайт фокусирует внимание пользователя на лучших продуктах, подобранных, возможно, на основе их популярности у клиентов.

Urban Originals

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

Uncrate

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

Scotch and Soda

Чему мы можем научиться: «плиточный» дизайн этой домашней страницы подчеркивает границы между различными областями веб-сайта, в то время как «фирменные» иконки социальных сетей позволяют легко делиться ссылками на контент. Вкладка «Последние публикации» предлагает посетителям больше контента, если они заинтересованы углубиться в пользовательский опыт, предоставляемый сайтом Scotch and Soda.

Подсказка 1: упростите ваш язык

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

Читайте также: 25 примеров великолепного дизайна интернет-магазинов

Профессионалы: примеры домашних страниц графических дизайнеров

Jib

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

Hello Monday

Чему мы можем научиться: этот дизайн, удостоенный приза «Сайт Года» (Site Of The Year) на конкурсе профессиональных веб-дизайнеров и разработчиков AWWWards, фокусируется на общем виде страницы. Минимальный текст хорошо работает в случае этой дизайнерской фирмы, потому что ее конкурентные преимущества лучше всего передаются визуально, но компаниям из других отраслей может потребоваться размещение на главной странице более четко сформулированного ценностного предложения.

Ride for the Brand

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

Andy Patrick Design

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

This is the Brigade

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

Galpin

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

Made by Vadim

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

Art & Code

Чему мы можем научиться: иногда «меньше» значит «лучше». Использование нетрадиционных «всплывающих» иконок, чередующихся «сентенций» и сбалансированной компоновки придает сайту Art & Code ясный и привлекательный внешний вид.

Riley Cran

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

Подсказка 2: упростите ваш дизайн

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

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

Читайте также: Дизайн лендингов: преимущества минимализма с точки зрения психологии восприятия

Бренды: примеры главных страниц компаний-ритейлеров

REI

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

Austeen Beerworks

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

Jaquet Droz

Чему мы можем научиться: страница швейцарского часового дома Jaquet Droz основана на визуализации главной «рабочей лошадки» компании — часах The Bird Repeater. Роскошное изображение в высоком разрешении также привлекает внимание посетителей к продукту — очевидно, самому важному элементу этой страницы.

Grey Goose

Чему мы можем научиться: домашняя страница должна продемонстрировать индивидуальность и эстетику бренда. В случае Gray Goose речь идет об элегантных изображениях с высоким разрешением и «отполированной» композиции страницы. Миссия выполнена.

Toyota

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

Jacqui Co

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

Buffalo Wild Wings

Чему мы можем научиться: перед нами отличный пример веб-страницы, созданной для продвижения имиджа бренда. Цвета, стили дизайна и шрифты совпадают с аналогичными у спортивного клуба Buffalo Wild Wings.

Подсказка 3: создайте пользовательский опыт бренда

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

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

Индустрия развлечений: домашние страницы знаменитостей и средств массовой информации

Clouds over Cuba

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

Pottermore

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

Heath Life

Чему мы можем научиться: на этом сайте без лишней навязчивости представлены несколько интерактивных и визуальных элементов (например, иконки и интеграция с Google Maps). Сайт не только выглядит великолепно, но еще и полезен.

Magic Leap

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

Life and Times

Чему мы можем научиться: если кто-то знает, как развлекать, так это Jay Z. Эклектичный характер персонального сайта воплощает реальный бренд его владельца на этой домашней странице, состоящей из интерактивных «плиток».

TV Safety

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

Подсказка 4: проявляйте креативность

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

Читайте также: 39 примеров оригинального дизайна лендингов

«Технари»: примеры домашних страниц

Rezdy

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

Prezi

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

Function Point

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

CSS Riffle

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

Urban Bound

Чему мы можем научиться: расположение CTA почти по центру на переднем плане, как это делает Urban Bound на своем сайте, является еще одним великолепным примером веб-дизайна, ориентированного на размещение самой важной информации в середине страницы.

Подсказка 5: оптимизируйте для пользователей

Каждый элемент вашего сайта должен разрабатываться для человека, находящегося по другую сторону монитора — посетителя. Существует множество дизайнерских инструментов, которые вы можете использовать для решения этой задачи, включая верстальную сетку (взгляните на страницу Scotch and Soda), иконки и стрелки, указывающие путь взгляду посетителя (это хорошо сделано на сайте Rezdy), и интерактивные элементы для вовлечения читателя (как у Rei).

Читайте также: 15 образцовых примеров мобильного веб-дизайна

Поставщики услуг: главные страницы профессиональных сервисов

Who Is Wildlife

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

Silktricky

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

Sagmeister & Walsh

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

Madwell NYC

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

Woodwork

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

Ryan Edy

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

New Breed

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

Oliver Russell

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

Fancy Rhino

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

Blind Barber

Чему мы можем научиться: этот веб-сайт отлично справляется с тем, чтобы сосредоточить посетителя на самом важном аспекте сайта — кнопке в центре страницы. Данная комбинация заголовка и CTA привлекает внимание и вдохновляет узнать больше об этом загадочном «Слепом парикмахере» (Blind Barber).

Подсказка 6: отойдите на шаг назад

Как только вы закончите дизайн сайта/лендинга, сделайте шаг назад. Спросите себя: пройдет ли ваш сайт блинк-тест? Может ли кто-то, посмотрев на ваш сайт в течение 3–5 секунд, узнать: что у вас за компания, что вы делаете и что вы хотите, чтобы посетитель сделал на вашей странице? Если ответ был «нет», пересмотрите ваши текст и дизайн для того, чтобы с их помощью выделить самое важное.

Вместо заключения: что дальше?

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

Высоких вам конверсий!

По материалам: hubspot.com

12-08-2017

lpgenerator.ru

22 примера отличного дизайна веб-приложений

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

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

Основные нюансы, относящихся к фазе разработки веб-дизайна приложения:

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

Но для дизайнера важно тщательно исследовать каждую деталь.

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

  1. PollDaddy, iPlotz, Harvest, Mint, Pulse, Freckle, Wufoo, Donor Tools и CrazyEgg — отличные образцы интерфейсов, которые можно найти в сети.
  2. Jamiq. Этот мониторинговый инструмент разработан для отслеживания страниц поисковых систем и социальных платформ на всех языках.
  3. FreshBooks разрабатывался уже для того, чтобы помочь небольшим бизнес-организациям и фрилансерам с инвойсами и организацией рабочего времени.
  4. CrazyEgg помогает идентифицировать наиболее кликабельные зоны веб-сайта.
  5. Donor Tools созданно, чтобы упростить работу некоммерческих организаций и благотворительных фондов.
  6. Wufoo ускоряет создание веб-формуляров, приглашений, онлайн-опросников и контакт-форм.

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

Среди прочих выдающихся дизайнерских работ можно выделить такие: Artician, Peepnote, Tachyon HTML5 Admin Template, Pixlr, MyClientBase или Admin Panel Template.

Перечисленные образцы веб-дизайна отбирались по ряду критериев:

  • простота,
  • цветовая схема,
  • общий дизайн,
  • юзабилити.

Postmark

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

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

Buffer

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

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

Freshdesk

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

Mint

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

MailChimp

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

Skyclerk

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

Campaign Monitor

Campaign Monitor отличает планировка главной страницы; подача информации на самом высоком уровне. Этот проект оставляет ощущение типичного веб-сервиса, где данные представлены линейно, сопровождаются изображениями и дополняющей графикой, тем не менее в конкретном случае это отлично работает.

Blinksale

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

Proposable

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

SolidShops

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

Hootsuite

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

MyEnergy

Структуру MyEnergy составляет ряд разделов (каждый последующий находится под предыдущим). Традиционный способ объяснить предназначение проекта. Информация подается последовательно; важные аспекты размещены сверху; занятная визуальная эстетика.

Squarespace

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

Zoho

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

123ContactForm

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

Adobe Kuler

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

SnapPage

На сайте SnapPages контент дополнен визуальной динамикой. Все остальное выглядит просто и незамысловато: стандартная схема и серия иллюстраций.

Woopra

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

CrazyEgg

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

Wufoo

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

Zendesk

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

Harvest

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

Итог

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

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

rusability.ru

Арсенал веб-дизайнера / Habr

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

Большие и популярные сайты


Behance — работы лучших дизайнеров со всего мира

Dribbble — множество отличных элементов дизайна

DeviantArt — очень старый и большой ресурс с огромным количеством работ и элементов дизайна.

Блоги


Smashing Magazine  не нуждается в представлении, отличный коллективный блог

Webdesigntuts+

A List Apart Magazine

DesignModo

Premium Pixels

Вдохновение


Designshack

siteInspire

Сервисы


Adobe Kuler  подбор цветовой схемы

When can I use… — проверка совместимости технологий с браузерами

Subtle Patterns — фоновые изображения

Иконки


IconFinder

IconArchive

FindIcons

IconDeposit

FreeIconsWeb

UI и элементы дизайна


Designmoo

Patterntap

365psd

Design Kindle

UX Movement

psdGraphics

Freebiesbooth.com

Best PSD Freebies

Векторные изображения и фото


FreePik

Open Clipart

Pixabay

Free Digital Photos

Every Stock Photo

Free Photos Bank

Studio25

PhotoGen

FreeJPG

TurboPhoto

KaveWall

MorgueFile

A Digital Dreamer

ImageBase

PhotoRack

QVectors

Vecteezy

VectoroPenStock

VectorMadness

Vectorilla

Vector4Free

GraphicsFuel

Great Vectors

WOW Vectors

Vector Portal

Free-Vectors

VectorPile

AllVectors

Vector

Шрифты


Google WebFonts

Dafont

Typecast

Typespiration

Логотипы


LogoInstant

Snaboopie

Фигуры для фотошопа


Shapes4Free

DeviantArt

Кисти для фотошопа


Brusheezy

MyPhotoshopBrushes

QBrushes

PSBrushes

Использованные материалы:


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

habr.com

Разбираемся в трендах веб-дизайна / Habr

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

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

Итак, поехали.

Первая декада XXI века — карамельный веб «2.0»

Выступая на конференции Future of Web Design в Hью-йорке, известный американский дизайнер Elliot Jay Stocks описал «то, что люди подразумевают под визуальным дизайном в стиле веб 2.0», следующими признаками:

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

Эти клише наполняли интернет в основном с 2003 по 2010. Часто технологии не очень поспевали за модой. Вспомним, например, верстку закругленных уголков, которая делалась с помощью картинок. Однако, как видно из этого же примера с уголками, мода подхлестывала технологии.

2011 — скевоморфизм

С начала второго десятилетия XXI века на смену «карамельному» тренду пришел истинно натуралистичный дизайн.

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

Детально прорисованная трехмерная иконка «мусорная корзина» или «кожаный» фон приложения-календаря у iOS того времени — характерные примеры скевоморфизма. Существует и другое толкование этого слова, близкое понятию affordance, однако, здесь мы говорим о скевоморфизме именно как о визуальном стиле.

Черты скевоморфизма в вебе:

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

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

Это в моде и по сей день:

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

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

Но в 2010–2011 году на сцену стиля вышли сразу два конкурента.

2010 — Windows Metro (он же Microsoft design language и Modern UI)

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

Так как и Apple тоже в это время начал вводить элементы минимализма, это быстро стало трендом, захлестнувшим интернет.

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

2011 — Twitter Bootstrap

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

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

Однако существует мнение, что ни тогда, ни сейчас Bootstrap не являлся законодателем мод, а скорее их прямым отражением. В Bootstrap 1.0 применялись градиенты, больше было теней и другого ненавязчивого 3d, характерного для эпохи заката скевоморфизма.

Вот, например, как изменилось модальное окно c кнопками:

Bootstrap 1:

Bootstrap 3:

2012 — Flat Design

Скевоморфизм стал превращаться в ругательное слово, а маятник моды качнулся в другую сторону — в полную силу вошел тренд «плоский дизайн» со следующими визуальными признаками:

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

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

Продолжают активно развиваться тренды, ставшие модными еще в эпоху скевоморфизма:

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

2013 — борьба трендов

Накал страстей в разгар борьбы наступающего плоского и не сдающегося скевоморфного дизайна достиг апогея. Это стало одной из самых обсуждаемых тем в интернете не только среди дизайнеров. Аргентинское агенство In tacto даже выпустило на эту тему игру.

Агентство похвасталось успехами в известном видеоролике.

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

2014 — Google Material Design

Подробнейший стайлгайд от Google впечатляет не столько новизной дизайна, сколько уровнем пиара и масштабом донесения до аудитории. Google действительно удалось стать законодателем мод в дизайне приложений, для которых предназначался стайлгайд. Однако очень быстро появилось и несколько фреймворков Material Design для веба, большая часть которых сделана не в Google (например, вот Material Design в Angular.js).

Как объяснил дизайнер John Weley на конференции Google I/O 2014, в противоположность подходу Microsoft, которые объявляли свой Metro “authentically digital”, Google хотели вернуться к реальному, «нецифровому» миру, найти натуралистичную, в чем-то даже скевоморфную метафору для интерфейса. Однако метафора, которую они выбрали, все же оказалась самым плоским, что было в физическом мире — это бумага.

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

Стиль Google Material Design в целом поддерживает тенденции минимализма, использования ярких цветов и интересной типографики.

Из нового же он привел в моду следующее:

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

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

2014 — IMB Design Language

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

Как сказано в блоге IBM, вдохновляющей идеей для нового дизайна была аналогия с человеческими языками. Язык – это то, что позволяет людям общаться, понимать друг друга и вместе решать задачи. Подобным образом и визуальный язык – design language – призван помочь дизайнерам и разработчикам продуктов «заговорить на одном языке», и между собой, и с пользователями.

IBM Design Language в отличие от Google Material Design не дает рекомендаций по размерам отступов, а задает общефилософский хороший тон в дизайне. Например, есть несколько абзацев о золотом сечении и вариантах сетки, но нет никаких шаблонов и ограничений «вот так будет в стиле IBM, а вот так совсем нет», как это сделано в Material Design. Нежелание дарить ленивым готовые шаблоны авторы стайлгайда объясняют стремлением дать свободу новым идеям. На фоне разговоров о том, что все сайты и приложения стали одинаковыми, звучит заманчиво.

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

Сравните иконки Google Material Design

… и IBM Design Language:

В IBM Design Language большое внимание уделено акценту на пользователя и контент, а также опять-таки анимации. За основу концепции движения взяты бессмертные принципы диснеевской анимации. Кратко, но довольно емко рассказано, в чем секрет притягательности и стильности некоторых приемов. Даются интересные примеры, например, про то, как блок warning при появлении двигается тяжело, с замедлением, своей тяжеловесностью привлекает внимание и создает впечатление важности.

2015, что дальше?

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

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

habr.com

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

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

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

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

Что читать, смотреть и слушать о веб-дизайне

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

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


 

Сайты и блоги

Alistapart.com
Издание о дизайне и разработке.

Awwwards
Подборка лучших работ агентств и веб-студий со всего мира.

Behance
Каталог портфолио дизайнеров.

COLOURlovers
Готовые палитры и примеры сочетания цветов.

CreativeLive
Обучающая платформа с курсами для дизайнеров.

CSS Winner
Подборка лучших сайтов.

Deadsign
Перевод статей о дизайне и диджитал с английского.

Design Shack
Издание о веб-дизайне: статьи, вдохновление, галереи.

Developer.apple.com/design
Гайдлайны Apple для дизайнеров.

Digest MBLTdev
Дайджет статей для разработчиков.

Dribbble
Сообщество и портфолио хороших дизайнеров.

Getpocket команды CreativePeople
Команда CreativePeople сохраняет интересные материалы и делится ими.

Graphiclovedesign.tumblr.com
Лучшие образцы графического дизайна.

Great Apps Timeline
Ретроспектива дизайна самых популярных приложений.

Growth Supply
Подборка бесплатных ресурсов для дизайнера.

Jvetrau.com
Дайджет об интефейсах Юры Ветрова.

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

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

Land-book
Подборка лучших лэндингов.

Marvel
Статьи о дизайне.

Material.io
Ресурс Google для дизайнеров: теория, источники и инструменты для создания диджитал-продуктов.

Mediascunk
Блог Михаила Калашникова о медиа и технологиях.

Muzli
Блог о дизайне.

Nathan Curtis
Блог Натана Кёртиса, основателя UX компании EightShapes.

Osasto.tumblr.com
Лучшие образцы графического дизайна.

Product Hunt
Витрина новых IT продуктов.

Re:Vision
Портфолио дизайнеров. Много хороших работ от дизайнеров из стран СНГ.

SiteInspire
Каталог лучших образцов веб-дизайна.

Sketchapp.me
Статьи о том, как эффективно использовать Sketch.

Tilda Education
Библиотека знаний о веб-дизайне и интернет-маркетинге.

Vc.ru
Издание о о стартапах, растущих бизнесах, новых моделях заработка, неординарных героях со всего мира и технологиях роста.

Underconsideration
Блог о дизайне.

Waitbutwhy.com
Популярные иллюстрированные лонгриды практически обо всем на свете.

Zeldman.com
Новости веб-дизайна.

Блог о дизайне и интерфейсах
Блог Максима Шайхалова, проектировщика интерфейсов.

Дизайн-кабак
Коллективный блог дизайнеров.

Журнал Type.today
Журнал проекта Ильи Рудермана и Юрия Остроменцкого.

Журнал «Шрифт»
Онлайн-издание о шрифте и типографике.

Ководство Артемия Лебедева
Заметки о дизайне, истории важных изобретений, интерфейсах, семиотике и т. д.

Рейтинг Рунета
Конкурс сайтов российского интернета.

Сайт Людвига Быстроновского
Сайт дизайнера и арт-директора: ссылки на публикации и анонсы выступлений.

Советы. Дизайн-бюро Артема Горбунова
Советы о дизайне, верстке, редактировании текста и переговорах с клиентами.

Хабрхабр
Крупнейшее российское IT-сообщество.

 

Рассылки

Speckyboy Design Magazine
Рассылка статей для дизайнеров— о создании интерфейсов, об инструментах, о маркетинге и работе с клиентами. Рекомендует Роман Квартальнов.

Главред
Рассылка о том, как писать полезный текст в информационном стиле. Рекомендует: Максим Смирнов и Дарья Прокуда.

Дизайн-мышление
Еженедельная рассылка-дайджест от проектировщика интерфейсов Лёши Ревы. Рекомендует: Ольга Павлова.

Дизайнерский дайджест
Платная рассылка-дайджест о графическом дизайне от создателя Awdee. Рекомендует: Ольга Павлова.

Интерфейсы без шелухи
Еженедельная рассылка-дайджест Антона Жиянова. Рекомендует: Ольга Павлова.

 

Дизайн-сообщества

CreativeRussia
Сообщество в Slack про дизайн.

Design Thinking Russian Group
Российское сообщество о дизайн-мышлении в фейсбуке.

Russian Prototyping Club
Группа в фейсбуке, где дизайнеры со всей России и делятся полезными ссылками и опытом.

UX club
Группа UX-специалистов в фейсбуке.

UX&UI Intensive
Открытая группа, посвященная интенсиву по UX/UI в Британке. Материалы, статьи, курсы и вакансии для дизайнеров.

UX Ноунеймовая
Обзоры, дайджесты, трансляции по тематике UX-дизайна.

Заметки UX-проектировщика
Полезные статьи, видео, наблюдения по теме дизайна интерфейсов.

Сообщество дизайн-менеджеров в фейсбуке
Группа в фейсбуке, выросла из курса «Дизайн-менеджмент» в Британской Высшей Школе Дизайна.

 

Подкасты и видео

Casey Neistat
Канал Кейси Нейстата, очень популярной личности на YouTube, создателя фильмов, влоггера и сооснователя компании социальных медиа Beme.

Don’t Fear The Internet
Бесплатные видеолекции по азам HTML и CSS.

Google Developers
Канал Google для разработчиков.

Inside Intercom
Подкасты от команды Intercom, в которых эксперты-практики рассказывают о дизайне, стартапах и маркетинге.

Photoshop Tutorials by PHLEARN
Видео-уроки фотошопа для дизайнеров, иллюстраторов и фотографов.

TechCrunch
Канал крупнейшего издания о технологических новинках.

UX Podcast
Грамотный подкаст на узкие темы в сфере UX.

Y Combinator
Канал крупнейшего акселератора стартапов. Эксперты делятся историями становлений компаний.

ZephyrLab
Канал студии ZephyrLab. Истории о дизайне и доклады с конференций — Dribbble, Дизайн-выходные, LeanKanban.

Академия Яндекса
Доклады от дизайнеров Яндекса.

 

Телеграм-каналы

Being Danil Krivoruchko
Канал Данилы Криворучко, дизайнера визуальных эффектов из Нью-Йорка.

Internet9000
Канал Сергея Сурганова, арт-директора «Медузы».

Now How Channel
Ссылки на сайты с хорошим дизайном со всего света.

R.G.B.
Ссылки на дизайн тематику, обычно без пояснений.

TechSparks
Аннотированные ссылки на интересные, полезные и удивительные новости хайтека.

UX-notes
Заметки UX-проектировщика Антона Григорьева.

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

Источник: tilda.education

infogra.ru

ТОП-10 классических стилей в веб-дизайне

Андрей Батурин,

Андрей Батурин

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

Классика

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

Этот стиль веб-дизайна подчиняется достаточно строгим нормам:

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

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

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

Гранж (Хипстерский стиль)

Сейчас он на пике популярности, пока в моде брутальное! Собственно, основные приметы стилистики уже названы. Гранж возник не в веб-дизайне, он пришел из мира музыки и взял оттуда некоторые особенности: небрежность, грубость, некоторую тяжесть. Если весь дизайн web 2.0 построен на гармоничности, четкости, симметричности, то гранж — явный противовес этим тенденциям.

Направление считается нарочито креативным, оно охотно использует темные, натуралистичные оттенки, эстетику урбанизма, грубые текстуры, что-то из hand made.

  • Цветовая гамма: кирпичные, серые, черные, коричневые, песочные, грязно-зеленые тона;
  • Текстуры: кладка, исписанные граффити стены, деним, рогожка, выцветшая бумага;
  • Шрифты: замысловатые, размытые, гротескные, потертые и т. д.

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

Минимализм

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

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

У этого стиля веб-дизайна обширная сфера применения: так оформляют и интернет-магазины, и лендинги, и корпоративные сайты малого или среднего формата. Крупному бизнесу в минимализме, пожалуй, тесно.

Типографика

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

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

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

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

Ретро (Винтаж)

Оба названия имеют одинаковый смысл: в веб-дизайне сайтов, выполненных в таком стиле, обязательно используются какие-либо элементы, имевшие распространение в прошлом.

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

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

Рисованный (эскизный) стиль

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

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

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

Metro (карточный дизайн)

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

Карточный стиль отличает:

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

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

Полигональный

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

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

Flat дизайн

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

Но пока отметим такие его характерные черты:

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

Flat получил большое распространение в разных направлениях бизнеса, в сайтах разных типов.

Organic & Natural

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

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

В этом стиле визуальной составляющей отводится главное место, она перевешивает информативность и контент.

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

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

Другие статьи по тегам

веб-дизайн сайты заказать сайт

на эту тему

Насколько отличатся прототип и конечный дизайн сайта? История веб-дизайна Веб-дизайн 2018 года: тенденции и тренды Когда пора заказать редизайн сайта?

webevolution.ru

Добавить комментарий

Ваш адрес email не будет опубликован.