Содержание
- Главная страница Studio P2MV
- Дизайн корзины интернет-магазина
- 6 сайтов для дизайнеров о шрифтах и типографике
- 14 медиа о веб-дизайне
- Лучшие дизайны интернет-магазинов
- Тобиас ван Шнайдер
- Дизайн главной страницы интернет-магазина
- Простые шрифты и мягкая цветовая палитра
- Главная страница True Ventures
- Главная страница Google Store
- Главная страница Ricky Michiels, 2019
- Найдите референсы
- Дизайн карточки товара на странице интернет-магазина
- Главная страница Anoukia—in Pink
- A Digital Volcano
- Дизайн сайта: подготовка
- Главная страница My 360° Mirror
- Определитесь с целью
- Главная страница Oui Will Agency
- Главная страница Won Hundred
- Лучшие дизайн-студии США
- Главная страница Design in Motion Festival
- Тематическое и функциональное использование
Главная страница Studio P2MV
Перейти на главную страницу https://p2mv.studio/
В мире дизайна все, что сделано во Франции, приобрело славу творчески неординарного бренда. Корпоративный ресурс и портфолио дизайн-студии Poignée из французского города Нант не обманывает это ожидание. Сайт предлагает посетителю оценить необычность каждого элемента оформления:
- логотип из креативно выполненной типографики;
- многозначность презентационного экрана, в котором работы представлены не привычным прямоугольником видео, а как анимированная художественная инсталляция, гармонично сочетающаяся со слоганом;
- журнальная верстка, крупные благородные шрифты с засечками и все это — на чистой черном фоне;
- скроллинг с приятным “доезжающим” parallax-эффектом.
Дизайн корзины интернет-магазина
Расположение, цвет и размер иконки
Корзина может быть скрыта или расположена в шапке сайта, но она должна быть видна с первого взгляда. Пользователь, сканируя глазом страницу, останавливается на ключевых элементах.
Пример расположения корзины в верхнем правом углу на странице сайта с контрастной иконкой:
Расположение корзины
Добавьте также функцию отображения заказа без клика на значок корзины, чтобы пользователь каждый раз не переключался для проверки, добавил он товар или нет.
Пример такой функции: при наведении указателя мыши открывается корзина и пользователь видит товар, который успел положить в корзину:
Пример отображения корзины, когда пользователь наводит курсор мыши
Запомните! Чем меньше кликов, тем быстрее и проще путь клиента, а значит — высока вероятность совершения сделки.
Оформление заказа и покупка
Оформление заказа и покупка должны быть максимально простыми — автоматическое заполнение данных и удобная оплата картой или наличными. Добавляя варианты покупки, вы получаете лояльного клиента.
Пример оформления заказа на сайте Леруа Мерлен:
Пример простого дизайна на странице оформления заказа
6 сайтов для дизайнеров о шрифтах и типографике
- https://ilovetypography.com. Один из лучших ресурсов для тех, кто небезразличен к буквам. На этом сайте вы найдете массу полезных и просто интересных заметок о типографике и том, что с ней связано.
- https://fonts.google.com. Подборка бесплатных шрифтов от Google, которой чаще всего пользуются дизайнеры. Самое полезное — возможность посмотреть, с какими шрифтами чаще всего сочетается выбранный вами вариант.
- https://www.paratype.ru. Отличный сайт с хорошей подборкой шрифтов. Из приятного — можно без особого труда подобрать даже красивый русский шрифт, из печального — большинство шрифтов придется приобретать (но на сайте часто проводятся распродажи).
- https://fontshop.com. Магазин шрифтов, где можно подобрать удачное решение для своего проекта. Но особенно интересен сайт даже не количеством самих шрифтов, а примерами их применения, которые позволяют лучше оценить, насколько выбранный шрифт подходит для вашей задачи.
- https://www.dafont.com. Огромная подборка шрифтов для самых разных задач, а еще — удобный интерфейс и много новинок.
- https://typejournal.ru. Полезный интернет-журнал о типографике и шрифтах.
14 медиа о веб-дизайне
- http://webdesignerwall.com. Сайт посвящен не только созданию дизайна, но и затрагивает темы разработки, верстки, анимации и продвижения.
- http://houseofbuttons.tumblr.com. Здесь можно найти десятки интересных примеров оформления кнопок на сайте (многие с готовой анимацией).
- https://www.webdesignerdepot.com. Еще один информационный сайт для дизайнеров, затрагивающий самые разнообразные сферы, начиная с приемов оформления интерфейса и заканчивая организацией рабочего процесса.
- https://webdesignledger.com. Неплохой ресурс о веб-дизайне, на котором можно найти много различных подборок удачных решений, новые тренды, узнать больше о типографике и элементах дизайна сайтов.
- https://designyoutrust.com. Ежедневная подборка новостей, событий и тенденций в сфере дизайна.
- https://www.creativebloq.com/computer-arts-magazine. Международный интернет-журнал о цифровом искусстве.
- https://say-hi.me. Один из лучших русскоязычных ресурсов, рассказывающий о творчестве для креативных людей.
- https://designpub.ru. Рассказывают о событиях, типографике, дизайн-процессах, иллюстрации и саморазвитии.
«Дизайн-кабак» — сайт о дизайне и о том, что с ним связано
Лучшие дизайны интернет-магазинов
Пример стильного дизайна сайта Nikos Koulis — производителя ювелирных изделий:
- В оформлении прослеживаются четкие линии.
- Простая и стильная структура сайта.
- Кнопка «Открыть» — единственная на странице. Она выделяется, легко читается и открывается на нужной странице.
- Минус в том, что нельзя сразу оформить заказ, можно только оставить заявку на получение стоимости товара.
- Понятная структура главной страницы.
- Сдержанные цвета и яркая кнопка корзины определенно являются отличным решением, так как сразу фиксируют взгляд пользователя.
- Единый шрифт и большой размер букв позволяют увидеть всю важную информацию.
- В карточках товара — подробное описание продукта и его характеристик.
- Оформить заказ можно за несколько минут.
А здесь показан пример UX-разработки — интерактивная покупка велосипеда. Объект изменяется с применением различных составляющих, а также быстро складывается, чем экономит место в квартире.
Тобиас ван Шнайдер
Био: неоднократно отмеченный наградами графический дизайнер родом из Германии. Живёт и работает в Нью-Йорке.
Чем крут: мастерски дизайнит всё — от веба до продуктового дизайна и дизайна кроссовок. Победитель многих фестивалей, судья в жюри Cannes Lions, Hyper Island, Art Directors Club & the FWA, разрабатывает дизайн для Spotify, Red Bull, Google, NASA, BMW, Sony, Fantasy Interactive, Wacom, Toyota. О нём пишут Bloomberg, Wired, The Washington Post, Business Insider, Net Magazine, Computer Arts, FastCompany, Inc. Magazine и другие.
Плакат к кинематографическому шедевру, действие которого происходит в глубоком космосе. Изображение: личный сайт
Wave переносит медитацию в XIX век — с интегрированным мультисенсорным музыкальным подходом. Изображение: личный сайт
Дизайн главной страницы интернет-магазина
Главная страница — это то самое «первое впечатление», о котором мы говорили в начале статьи. Здесь должна быть сконцентрирована полезная и вовлекающая информация.
Почему мы выбрали такие разные сайты:
Шапка сайта, или хедер
В шапку сайта добавляют логотип, номер телефона, адреса офлайн-магазинов, кнопки заявок, меню, поиск и фильтры.
Первый пример оформления — сайт Асконы. Сверху расположена строка с адресами магазинов, с регионом, в котором находится пользователь, ссылкой на новости и часто задаваемыми вопросами.
Ниже идет строка с логотипом, поиском, кнопкой обратного звонка и номером телефона. Также здесь есть иконки для отслеживания заказа и входа в личный кабинет.
На третьей строке поместили каталог с основными категориями товаров и акциями.
Второй пример — сайт Molnio. Здесь другое расположение элементов в шапке: одна строка с логотипом и основными страницами сайта, а также номером телефона компании.
- Каталог с эскизами продукции.
- Оплата и доставка.
- Сервисное обслуживание.
- Контакты.
- Новости.
- Аксессуары и запчасти.
- Поддержка.
Рекламный блок
В этом блоке размещаются акции, специальные предложения и новые коллекции, на которые пользователь должен обратить внимание в первую очередь. В этот модуль, как правило, добавляют от одного до пяти предложений
«Аскона» предлагает сразу шесть предложений на выбор пользователя: варианты оснований кроватей и матрасов, а также товаров для детей.
Рекламный блок на сайте Асконы
На сайте Molnio представлены баннеры с продуктами компании и возможностью взять рассрочку по карте Халва. Также здесь размещается окно обратной связи и перечисляются преимущества продукции.
Оформление блока с баннерами на сайте Molnio
В каталоге на главной странице показывают популярные товары или коллекции. Обычно это небольшая подборка, дублирующая меню.
На сайте Асконы в блок с каталогом добавили хиты продаж и основную продукцию со скидкой:
Оформление раздела каталога на главной странице
У Molnio есть блок с модельным рядом, при переходе в категорию открывается страница с товарами, а ниже представлена галерея фотографий продукции:
Оформление каталога на главной странице сайта
Дизайн галереи фотографий:
Галерея продукции
Хиты продаж и акции
А в блоке «Хиты продаж» размещают популярную продукцию за последнее время. Иногда данный раздел отводится под товары, которые компания не успела продать в прошлом сезоне, и их нужно быстрее реализовать, чтобы освободить склад для новых моделей.
«Аскона» у себя на сайте дублирует блок, который уже был представлен выше в каталоге, но здесь на первом месте стоят подушки и чехлы на матрас.
Пример оформления блока «Хиты продаж»
На главной странице также можно найти акцию для клиентов, оформивших членство в клубе «Любителей здорового сна»:
Пример оформления акции и дополнительного привлечения пользователей
Molnio не добавила на свой сайт акции или хиты продаж
Вместо этого здесь представлен блок с гарантийным обслуживанием, что немаловажно для магазинов с оригинальным продуктом и запчастями
Услуги гарантийного сервиса на сайте
Дополнительная информация
Здесь размещают любую дополнительную информацию, которая может заинтересовать пользователя: история компании, новые товары, волонтерство, приглашение к участию в конференции и тому подобное.
«Аскона» в данном случае разместила блок с новинками:
Блок с новинками на сайте
Molnio, в свою очередь, решила рассказать о компании, оформив ее историю в хронологической последовательности:
Пример оформления блока «О нас»
Блог
В блоге или новостной ленте компании рассказывают пользователям о себе и о возможностях своей продукции — это также помогает продвижению в поисковых системах.
«Аскона» публикует статьи об истории компании и продукции, а также делится советами о том, как правильно спать или какой матрас выбрать для больной спины.
На скриншоте ниже показаны два блока: вверху — история и рассказ о производственных мощностях компании, внизу — новостная лента и статьи.
Блог на главной странице
Футер
Подвал сайта обычно представляет из себя карту из основных страниц и предложений с окном подписки на рассылку и иконками соцсетей.
На сайте Асконы футер расписан очень детально: статьи, каталог, информация для покупателей и партнеров, история, сертификаты и многое другое. Также здесь есть окно для подписки на рассылку.
Оформление футера
У Molnio в футере есть ссылки на социальные сети и на документы о политике конфиденциальности:
Пример оформления футера
Простые шрифты и мягкая цветовая палитра
Токсичные цвета в веб-дизайне перестали быть популярными около пятнадцати лет назад. Теперь дизайнеры перешли к сдержанным пастельным оттенкам, мягким не кричащим цветам. Схема 60-30-10 не теряет свою актуальность: в современном веб-дизайне превалируют нейтральные цвета от белого до бледно серого, для 30 процентов пространства используют более яркий тон, и всего 10 % окрашивают в насыщенный цвет, создавая тем самым призыв к действию.
Веб-разработка теперь вступила в эпоху простой красоты, где предпочтения отдаются большим и простым шрифтам с несколькими мягкими оттенками
Как можно объяснить такую тенденцию? Этот подход имеет смысл, поскольку он фокусирует внимание пользователей исключительно на наиболее важных блоках информации
Мы представили базовый список новых тенденций в дизайне веб-сайтов. Нас самом деле их намного больше, что делает материал слишком обширным для одной статьи. Мы обязательно продолжим рассказывать вам о новейших дизайнерских решениях в веб-разработке на нашем блоге.
Наша команда с удовольствием поможет вам создать адаптивный дизайн сайта, в котором будут внедрены основные тенденции веб-дизайна и эффективные технологии для достижения максимальной оптимизации. Напишите нам на info@stfalcon.com, и мы будем рады помочь!
Главная страница True Ventures
Перейти на главную страницу https://trueventures.com/
Студия Ueno уже была в ТОП-25 студий по версии Awwwards-2018, уже имеет 29 наград ресурса, 13 из них — в номинации “Сайт дня”.
Студия представила новую работу, которую оценили жюри — ресурс для платформы для венчурных предпринимателей True Ventures.
Простой белый фон, черно-белая гамма презентационных роликов и минимум цветовых акцентов. “Ничего лишнего” — меткое описание ресурса. Лишь анимационная деталь в виде маркера, отмечающего акценты — как бы это делал деловой человек, делая пометки в своем рабочем ежедневнике, — создает цепляющий эффект сопричастности у посетителя к тому, что делает платформа — находит людей, способных решить важные проблемы бизнеса.
Главная страница Google Store
Перейти на главную страницу http://store.google.com/
Сложно ожидать от сайта Google Store дизайн, не соответствующий строгим гайдлайнам самой поисковой сети. Неизвестно, как студия BASIC (США) подходила к его разработке — сначала поработав над соответствием требованиям Material Design, а потом добавляя креатив, или наоборот? Итогом оказался магазин, наполненный качественными фото, вызывающими восторг — будь то изображение товара или рекламного атмосферное фото.
Изображения оттеняют функциональные элементы простых форм, стандартные Google-шрифты и фирменный логотип из буквы G то тут, то там. Просто чтобы ненавязчиво напомнить пользователю, на чьем (!) сайте он находится. Это поддержит интеграция с Google-аккаунтом. Даже не надо входить — все уже готово к покупкам!
Главная страница Ricky Michiels, 2019
Перейти на главную страницу https://www.rickymichiels.com/
Наиболее поражающие воображение тенденции предоставляют сайты из сферы шоу-бизнеса. Особое место занимают сайты деятелей и агентств из мира высокой моды. Одним из таких стало портфолио для кастинг-студии Ricky Michiels. Идеи для этого проекта фрилансер-разработчик Jason Bradley почерпнул у глянцевых журналов моды, поместив на главную страницу красочные фешн-фото.
В 2013 году тенденцию дизайна сайтов Веб 2.0 сменила портальная (журнальная) верстка. Круглые линии, реалистичные градиенты и объемные иконки уступили место острым углам, плоскому дизайну, минимализму и чистоте изображения. Истина “все гениальное — просто”, определяющая смысл журнальной верстки, не теряет актуальности и в 2019 году.
Найдите референсы
Визуальная часть сайта — одна из важнейших задач дизайнера, ведь сайт должен быть не только удобным, но и красивым. Нужно подобрать шрифты, главные цвета, подумать над оформлением блоков, организацией информации на странице.
Если вы новичок в дизайне, делать это в одиночку — сомнительное решение. Лучше найти примеры сайтов, которые вам нравятся, и перенять некоторые идеи. Только не перерисовывайте их от шапки до футера — это уже откровенный плагиат.
Подборку референсов вы можете смело показать заказчику. Так вы вместе выберете подходящий стиль, что избавит от ненужных правок в дальнейшем. Найти множество хороших примеров можно на Behance, Awwwards и Pinterest.
Дизайн карточки товара на странице интернет-магазина
Далее разберем карточки товаров на примере двух сайтов: оформление, описание, количество изображений, а также наличие инструкций.
На сайте Асконы карточка товара представлена с подробным описанием:
- Есть хлебные крошки в карточках товаров.
- Справа расположены несколько изображений и 3D модель с наполнением матраса.
- Слева можно выбрать размер и узнать актуальную стоимость продукта.
- Ниже идет описание товара, руководство, характеристики, адреса точек для самовывоза и отзывы. Вся информация оформлена в едином стиле, текст разбит на абзацы.
- После карточки есть разделы с сопутствующими и просмотренными товарами.
Пример хорошего оформления карточки товара
Molnio предлагает минимализм во всем. В карточке товара — только ключевая информация:
- Можно выбрать цвет модели, добавить составляющие элементы и дополнительные опции.
- Миниатюрная кнопка оформления заказа.
- В самом низу страницы располагается руководство по эксплуатации.
- Остальная часть страницы оформлена в стиле главной.
Альтернативный пример оформления карточки с ключевой информацией о продукте
Главная страница Anoukia—in Pink
Перейти на главную страницу https://www.pink.anoukiaperrey.com/
Американская студия Saint Roman совместно с 3D-дизайнером Anoukia Perrey разработали ее портфолио, в котором поместили летний сет ее работ, объединив в коллекцию “Anoukia in Pink”.
Оформление сайта напомнило популярную в сети Инстаграм тенденцию, когда все фото публикуются в единой цветовой гамме. Такие профили запоминается на фоне пестрых и неупорядоченных фотогалерей.
Заимствования пользовательского опыта из социальных сетей уже стали надежным способом сделать свой веб-ресурс запоминающимся, поскольку такой источник вдохновения — проверенный многотысячной аудиторией, и имеет несколько дополнительных бонусов в виде информации об аудитории, которую можно использовать для разработки маркетинговой стратегии сайта.
A Digital Volcano
Сайт лучше открывать через Chrome, Safari или Firefox, поскольку он состоит из качественных тяжелых видео. Для загрузки такого объема информации требуется быстрый браузер. Проверьте сами – https://www.ge.com/digitalvolcano.
Цифровой вулкан – проект, созданный, чтобы информировать людей об угрозе извержения вулкана. Создатели используют научные методы, чтобы научиться предугадывать такие события. Также заинтересованный человек может заглянуть в жерло вулкана не выходя из дома. Нужно просто прокручивать страницу и смотреть.
Сайт предоставляет красочную презентацию проекта, записи кипящей магмы в жерле вулкана, лаконичное объяснение теории, целей, задач проекта. Мы узнаем о нескольких активных вулканах и увидим их извержение.
Дизайн сайта: подготовка
Давайте сразу договоримся — мы будем рассматривать дизайн сайта в первую очередь как функциональный инструмент, и только потом как внешний вид. При разработке дизайна сайта вы должны отталкиваться именно от задач ресурса и того, как людям будет удобнее его использовать. Тогда вы не накрутите лишнего и сделаете юзер-френдли сайт, который будет приносить трафик и конверсии.
Прежде чем разрабатывать дизайн сайта, нужно подготовиться: поставить цели, выбрать его тип и платформу для создания. Разберем каждый шаг подробно.
Постановка целей для будущего сайта
Определяемся с целью, например:
- Цель сайта-портфолио — заявки на сотрудничество. Он должен демонстрировать, как специалист умеет решать задачи бизнеса.
- Цель сайта-магазина — максимальное количество продаж. Ему нужно показывать товары с выгодной стороны и побуждать к покупке.
- Цель сайта-блога — постоянный трафик. С его помощью мы стимулируем читателя потреблять больше контента и делать это регулярно.
Карточка на «Леруа Мерлен» позволяет удобно изучить, сравнить и купить товар
Еще пример — потенциальный заказчик пришел посмотреть ваше портфолио. Он хочет видеть решение конкретных задач: небольшое количество лучших работ и их результативность для бизнеса, отзывы клиентов. У него нет времени листать бесконечную галерею всех ваших работ и читать биографию со времен школьных достижений.
При создании дизайна сайта думайте о людях, которые будут им пользоваться. Они должны плавно и удобно идти по сайту до обозначенной вами цели. Не забывайте, что ваша цель должна совпадать с потребностями ЦА. Наша статья поможет разработать функциональный дизайн сайта — сохраняйте в закладки.
Выбор типа сайта
Когда вы установили для себя цели, можно выбирать тип сайта, для которого нужно создать дизайн. Выбор небольшой: лендинг или многостраничник.
Лендинг, или посадочная страница — это такой моносайт, который посвящен одному предмету и имеет всего один CTA. Например, страница конференции с кнопкой «Зарегистрироваться». Скорее всего, в содержании будет описание конференции, список спикеров и докладов и основные тезисы, почему стоит прийти.
Пример дизайна сайта-лендинга конференции SendPulse и eLama
Лендингом можно обойтись, если у вас один продукт. Такая страница подойдет для продажи вебинаров, консультаций, курсов, одного типа товара. Лендинг также спасет, если есть потребность в сайте, а денег нет — это будет дешевле и быстрее, чем верстать многостраничник. На лендинге можно кратко описать, чем занимается компания, дать контакты или встроить заказ обратного звонка.
Мы составили полную инструкцию, как создать лендинг своими руками с нуля. Забирайте в закладки и создавайте свои лендинги с крутым дизайном.
Выбор платформы для создания сайта
Теперь предстоит выбрать платформу для создания сайта. Конечно, можно заказать разработку сайта под ключ или найти программиста, скооперировать его с дизайнером, заказать самописную платформу и арендовать хостинг для размещения сайта. Тогда ресурс будет полностью управляемым — сможете воплощать любые дизайнерские идеи и делать сайт любой структуры, чего иногда нельзя сделать на готовых CMS. Но вам придется решать все проблемы самостоятельно — закончилась аренда хостинга, полег сервер, поломался код. Этот способ подходит крупным компаниям, у которых есть хорошие бюджеты на создание и поддержку сайта.
Скорее всего, вы предпочтете потратить деньги на продвижение, а не на дизайн и разработку сайта, и это нормально. Есть куча конструкторов, в которых можно создать сайт с любым дизайном, и не надо быть программистом. При этом сайт будет лежать на хостинге сервиса, а это снимает головную боль по поводу аренды и технических проблем.
Мы собрали 12 известных конструкторов, которые подойдут для создания лендингов и многостраничных сайтов. Изучили плюсы и минусы каждого и спросили читателей, каким пользуются они сами.
Главная страница My 360° Mirror
Перейти на главную страницу https://www.my360mirror.com/
Как удачно продать дизайнерское зеркало? Дизайнер Stella Petkova (Болгария) нашла способ, предложив свое видение, каким должен быть дизайн для торгового марки My 360° Mirror, чтобы идея бренда пришлась посетителю по вкусу.
А замысел дизайна пришел прямо из названия: даешь зеркало с обзором на 360° — так покажи его именно вот так, с любой стороны. Презентация товара разворачивается перед посетителем по мере скроллинга. Идея не новая, но неизменно выигрышная для презентации товаров, хоть и связана с хлопотами в подготовке фотоматериала.
Дополняют интерактив красивая цветовая схема: нейтральный серый фон стал отличной подложкой, на которой синие акценты смотрятся наиболее эффектно.
Выводы
Если проследить тенденции, царящие в мире современного веб-дизайна, то вырисовывается следующая картина:
намечается тенденция перехода от лонгридов к одноэкранным сайтам с переходами через клик или скролл, которые были популярны в нулевых. Отличает лишь современную версию Веб 2.0 сокращение контентной части до предельного минимума, и действительно до одного экрана, без скролла вниз — эта функция уже занята под переходы;
parallax-эффект все так же не сдает позиций, являясь классикой для создания wow-эффекта. Разница — в реализации. Не всегда это — простой скролл полотен текста, разделенного окошками с визуальными элементами (видео, фото)
Теперь эффект становится основой для 3D-презентации или полигональной развертки, выступая способом управлять картинкой и углом ее обзора;
музыка и видео все еще добавляются на сайты — где это важно. Иногда наличие такого оформления может замедлять скорость загрузки ресурса
На этот случай дизайнеры придумывают креативную заглушку с элементами интерактива, чтобы пользователь не скучал;
интерактив может стать и способом развлечь посетителя на сайте. Забавные игровые элементы могут присутствовать практически на любом ресурсе — даже на сайте респектабельного дизайнерского бюро, лишь бы приподнятое и веселое настроение, которое они вызывают, было уместным и не входило с в противоречие с тематикой ресурса;
дизайн, достойный наград, может быть выполнен и без особо сложных эффектов
При должном усилии, сайт, разработанный фрилансером, может привлечь внимание жюри. “Вывезти” веб-ресурс может просто следование гайдлайнам Google, без покушения на игру с нормами, какую могут себе позволить маститые дизайн-агентства;
покушение на нормы — при должном уровне мастерства (или смелости) можно нарушить абсолютно все нормы, и попасть в рейтинг
Если знать, какие нарушения придутся публике по душе. в этом поможет глубокое исследование вкусов целевой аудитории и рынка в целом.
Определитесь с целью
Для начала поймите, зачем вашему клиенту нужен сайт. Пусть он ответит на несколько простых вопросов:
- Чему посвящён сайт?
- Какие задачи должен решать?
- Как планируется продвигать сайт?
- Какая у сайта должна быть структура?
- Какой контент планируется размещать?
- Есть ли у клиента готовый брендбук?
Чем подробнее клиент ответит, тем понятнее станет, каким должен быть результат. Лучший вариант — это предложить заполнить бриф одной из ведущих дизайн-студий.
Каким бы странным, длинным и подробным он вам ни показался, заполнение брифа — один из важнейших этапов создания сайта, так как помогает понять и специфику, и сложность проекта. Есть десятки брифов на создание сайтов, но я рекомендую бриф от CreativePeople.
Главная страница Oui Will Agency
Перейти на главную страницу http://www.ouiwill.com/
Еще одно знакомое по рейтингу-2018 дизайн-студий — агентство Oui Will из сан-Диего (США). На этот раз студия представила обновленный собственный сайт, сделав ставку на Parallax-эффект, эффектные презентационные ролики и тонкую, гладкую типографику. Все разделено по экранам, для каждого слогана, ролика или новости — свой экран, никакого соседства. Сайт щедро сдобрен уместной анимацией и, где это возможно, интерактивным взаимодействием с пользователями, при этом, оставляя дух минимализма и сдержанности. Умение сочетать противоположности в очередной раз принесло студии место в рейтингах Awwwards.
Главная страница Won Hundred
Перейти на главную страницу https://wonhundred.com/
Есть тут кто-то, соскучившийся по табличной верстке нулевых? Разработчики SPRING/SUMMER удивили жюри Awwwards, предложив на суд беспрецедентный проект сайта для капсульной коллекции одежды Won Hundred. В этой странице есть все из дизайна девяностых-нулевых: белый фон, однопиксельные границы табличек, в которые вписано главное меню, форма рассылки и карточки товаров. Дополнительный флер гениальности вносят стандартные цвета и типографика, и даже бегущая строка заголовков. Вишенкой на торте выступают рекламные баннеры в лучших традициях WordArt. Нельзя упрекнуть датских разработчиков в хорошем чувстве юмора.
О том, что мы, все-таки, в конце десятых, напоминает интерактивность функциональных элементов. За минутку ностальгии сайт заслуженно получил титул сенсации дня.
Лучшие дизайн-студии США
США считаются меккой дизайнеров и творческих людей, для которых не чужды высокие амбиции. Дизайнеры и разработчики, приезжающие в эту страну, нанимаются на работу в уже существующие студии, чтобы набраться опыта от более старших коллег. Некоторые из них готовы даже пройти многоступенчатые собеседования и конкурсы, чтобы приехать, как приглашенный специалист.
Но тенденция в сфере дизайна такова, что многие европейские студии открывают свои офисы на территории страны возможностей. Расширить уже существующий бизнес — более выгодный путь для завоевания щедрого рынка США. Поэтому многие компании из обзора ТОП дизайн-агентств из США имеют европейские корни.
Watson Design Group, Inc.
Офис компании: Лос-Анджелес, США
Специализация: брендинг, дизайн, мобильная, VR и веб-разработка
Подход Watson DG — прежде чем сесть за работу над проектом, нужно углубиться и изучить проект. Изучается все — поведение пользователей и тенденции рынка, данные и аналитика. Итог этой работы и ложится в основу нового проекта. Никаких чудес — лишь кропотливая работа и исследования. На выходе получается нечто, соединяющее противоречивые ожидания аудитории и возможности продукта самым простым и доступным способом.
Ежедневный труд и опыт сделали команду Watson DG специалистами, услугами которых уже воспользовались Sony, Amazon, студии Paramount, Riot Games, Disney, Universal, Lionsgate, Fox Searchlight, Warner Bros.
ZeroStudios
Офис компании: Нью-Йорк, США
Специализация: брендинг, маркетинг, дизайн
Призвание специалистов ZeroStudios из Нью-Йорка — создавать бренды, которые будут менять жизнь пользователя. Безусловно, к лучшему. В дизайне своих продуктов команда студии использует яркие и модные flat- и material-цвета. Они играют незаметную роль в презентации продуктов, ненавязчиво создавая необходимый настрой у пользователя.
Такое ноу-хау позволяет реализовывать проекты вывода новых марок на рынок, так и успешно проводить кампанию по ребрендингу и репозиционированию продуктов.
Специалисты студии утверждают, что любят работать со стартапами и некоммерческими организациями. Но в портфеле проектов не без гордости демонстрируют совместную работу с Google, Foursquare, Versace, Hillary For America.
Hello Monday
Офис компании: Нью-Йорк, США
Специализация: брендинг, маркетинг, дизайн, разработка
«Продукт должен быть таким, чтобы радовал даже худший день недели!» — решили специалисты студии Hello Monday. К работе над своими проектами команда подходит с юмором и всеми силами старается поднять настроение и вызвать улыбку у пользователя и клиента. «К жизни и к работе нужно относиться с юмором
В понедельник это особенно важно!» — говорят дизайнеры
Студия открылась в 2006 году в датском городе Аархус. Идеи ребят были восприняты публикой на «Ура!», что сподвигло их в скором времени открыть еще два офиса — в Нью-Йорке и Копенгагене.
Юмор и жизнелюбие, с которым подходят к работе Hello Monday, оценили именитые клиенты. Среди них: Warner Bros, National Geographic, Google и Nasa.
Active Theory
Офис компании: Венис, США
Специализация: мобильная и веб-разработка, VR&AR, интерактивные инсталляции
«Мы делаем крутые вещи для крутых ребят!» — с таким лозунгом студия разработки из калифорнийского города Венис уже который год занимает призовые места в рейтингах мира в сфере веб-разработки и дизайна.
В своей работе специалисты Active Theory исповедуют бескомпромиссное качество картинки. Каждый новый сайт, приложение для мобильного или VR — это отдельная реальность со своей особенной системой координат.
Опыт студии в создании новых реальностей пришелся по душе Walt Disney Group. Именно Active Theory стали тем разработчиком, который реализовал виртуальный 3D-проект “Welcome to Hogwarts” по вселенной книг Джоан Роулинг о Гарри Поттере.
Dogstudio
Офис компании: Чикаго, США
Специализация: мобильная и веб-разработка
Проекты студии разработки из Чикаго выделились на общем фоне чем-то любопытно-утонченным. студия скромно называет себя «средней по размеру» по-бельгийски скромно. Первый офис был открыт в Бельгии в незапамятном году, когда начинали работать с маленькими магазинчиками и бутиками.
Второй офис Dogstudio открыли в Чикаго, чтобы быть ближе к своим клиентам из Сан-Франциско, Нью-Йорка, Сиэтла и Лос-Анджелеса. В 2018 году 2 проекта Dogstudio получили номинацию «Сайт года». И это еще не предел.
Главная страница Design in Motion Festival
Перейти на главную страницу https://demofestival.com/
Использовать рекламные афиши и проспекты в качестве источника вдохновения для веб-дизайна — ход беспрецедентно смелый. Но в разработке оформления сайтов тех же мероприятий смелый шаг приобретает оттенки оптимистичного вопроса “Почему бы и нет?”
Именно интернет-афишей и представляется веб-ресурс DEMO Festival (Нидерланды), разработанный агентством Dept (Амстердам). Яркость и насыщенность цветов, вычурность и гипермасштабность типографики прицельно показывают тематику ресурса — реклама массового мероприятия. Иногда и такой ход позволяет позиционировать мероприятие с первого взгляда. Если это произойдет — дальше только дело за техникой и информативным контентом.
Тематическое и функциональное использование
При создании шаблонов просматривайте различные функциональные и тематические категории, такие как веб-сайт начальной загрузки, креативное агентство, дизайн интерьера, онлайн-образование, создание видео, звук музыки, личный блог, стоковое видео, здоровье мебели, веб-сайт электронной коммерции, WordPress для бизнеса, строительная компания, даже для админских шаблонов. Вам нужно начать продавать свои продукты в Интернете или представить свое цифровое агентство или магазин модной одежды с помощью адаптивной woocommerce. Предположим, вы фанат Instagram, новичок или профессиональный фотограф. В этом случае вы можете создать веб-сайт с недавно созданной коллекцией для своего бизнеса или стартапа, или другие малые предприятия будут идеально подходить, для чего вы можете создать творческий блог, даже если у настраиваемого домена есть варианты макета для запуска веб-сайта. Быстрее. Различные варианты макета, созданные аналогично elementor builder, подходят для студии, реализующей идеи веб-сайтов html5.