Макc

Макc

Руководитель отдела дизайна

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

Статьи автора Макc

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

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

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

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

10 самых распространенных ошибок веб-дизайна

10 самых распространенных ошибок веб-дизайна

10 самых распространенных ошибок веб-дизайна

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

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

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

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

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

5 примеров «плоского» веб-дизайна

5 примеров «плоского» веб-дизайна

5 примеров плоских веб-дизайнов

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

Примеры дизайна веб-интерфейса

Примеры дизайна веб-интерфейса

Примеры дизайна веб-интерфейса

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

Дизайн MVP для стартапов

Дизайн MVP для стартапов

Дизайн MVP для стартапов

Вопросы вроде «У меня есть отличная идея для стартапа. Что делать дальше?» появляются на Quora и reddit ежедневно. В большинстве случаев их авторам советуют один и тот же подход: крештест идеи →​ создание ​MVP​ ​ →​ обработка фидбека от пользователей​ →​ ​пивот​ или продолжение движения выбранным курсом, а также питчинг идеи инвесторам.

Примеры хорошего дизайна веб-сайтов

Примеры хорошего дизайна веб-сайтов

Примеры дизайна хороших сайтов

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

Советы по успешному дизайну сайта

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

1.

К примеру, вот сайт компании Tessemae, продающей ароматизаторы:

Яркий сайт, продающий ароматизаторы

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

А вот пример из сферы услуг - современный сайт архитектурно-дизайнерского бюро Kephart:

Сайт архитектурной компании

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

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

  1. Знайте, кто ваши пользователи (сайт, предоставляющий инструменты для математического моделирования, будет отличаться от интернет-магазина, продающего модную одежду).
  2. Используйте уже известные пользователям шаблоны (если они не понимают, как пользоваться вашей инновационной системой навигации, есть шанс, что они не обратят особого внимания на тщательно подобранный контент).
  3. Создайте четкую визуальную иерархию: покажите пользователям, какая информация является наиболее важной, и отделите текстовые блоки друг от друга, чтобы пользователи могли легко их просканировать.
  4. Не усложняйте. Если есть более простой способ сделать что-то - придерживайтесь его.

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

Интерфейс списка дел

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

Например, на сайте Starbucks используются корпоративные оттенки зеленого и черного - цвета напитка, который компания продает в 67 странах и территориях по всему миру:

Пример сайта кофейни

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

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

  1. Ясно ли, кто является владельцем сайта?
  2. Является ли логотип компании достаточно заметным?
  3. Полна ли контактная информация? Почтовый адрес, часы работы, номера телефонов и электронная почта должны быть легко находимы.
  4. Есть ли раздел с информацией о сотрудниках компании? Расскажите посетителям больше о вашей команде, это поможет установить связь еще до фактического контакта.
  5. Есть ли отзывы клиентов и портфолио?
  6. Что известно об истории компании? Как давно она работает на рынке? Кто является основателем? Кто ее инвесторы? Каковы цели компании?
  7. Каковы условия гарантии и замены? Условия использования и политика конфиденциальности?

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

.

Футер сайта бытовой электроники

Цены также четко отображаются, что способствует укреплению доверия.

Последние тенденции в дизайне сайтов

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

Отзывчивость

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

Пример отзывчивого сайта для продажи фотографий

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

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

.

Пример плоского дизайна

Использование видео и анимации

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

Веб-сайт с видео на фоне

Распространенное использование шаблонов пользовательского интерфейса

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

Типичная форма для регистрации в социальных сетях

Чтобы понять, стоит ли обращать внимание на ту или иную тенденцию, спросите себя:

  1. Ухудшит ли это понимание целей сайта?
  2. Сделает ли новый дизайн навигацию более сложной?
  3. Не помешает ли он пользователям пользоваться сайтом? (Например, сделает процесс регистрации или оставления отзывов менее простым.)
  4. Не повлияет ли он на восприятие бренда?

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

Мы, студия stfalcon.com, разрабатываем веб-сайты и мобильные приложения для того, чтобы ваши клиенты были довольны. Не стесняйтесь контакт с нами уже сегодня!

Ресурсы для дизайнеров логотипов

Ресурсы для дизайнеров логотипов

Ресурсы для дизайнеров логотипов

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

Code’n’Coffee #21 Design

Code’n’Coffee #21 Design

Code’n’Coffee #21 Design

Уже второй раз студия stfalcon.com принимала у себя ивент Code’n’Coffee, посвященный исключительно дизайну. Докладчики поделились полезной информацией для продвинутых специалистов и советами для новичков, заставив участников задуматься о различных аспектах работы дизайнера.