Рубрика «дизайн сайта»

Геймификация — это использование игровых механик в неигровых ситуациях и продуктах. Элементы игры все плотнее входят в нашу повседневную жизнь. Например, мы можем делать покупки в каком-то одном супермаркете только потому, что нам надо собрать коллекцию героев из «Звездных войн» или все время платим картой mastercard чтобы заработать баллы. Геймификация позволяет улучшить поведенческие факторы вашего сайта и вовлечь пользователя. Собственно поэтому мы и решили немного добавить фана и в наш продукт — клавиатурный тренажер Ratatype.

Немного истории

В 2013 году был создан англоязычный клавиатурный тренажер Ratatype, ориентированный на Америку.

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

Каждый курс на Ratatype состоит из нескольких уроков (в разных языках разное количество уроков, минимальное в английском — 15). А каждый урок содержит несколько упражнений от 5 до 23.

Как мы пришли к геймификации

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

А так прошел упражнение, увидел свою скорость и количество ошибок, но почему-то не получил все звезды. Значит, можно улучшить результат и перепроходишь упражнение еще раз.
С идеей определились, теперь надо было продумать механику и решить, какое количество звезд использовать.
Читать полностью »

Общий принцип — Не делай брак.
Не бери брак. Не передавай брак.
Тойота.

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

«Почти» по сетке

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

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

Читать полностью »

image

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

Как правило, разработчики останавливается на вариантах, которые проверены временем и более-менее на слуху, вроде Avocode или Zeplin. Однако я стараюсь не упускать возможности попробовать и менее известные программы в поисках оптимального соотношения цены-качества и, если повезет, интересных решений. В этой статье речь пойдет о Sketchode — плагине для Sketch, релиз которого состоялся этой весной, и моем опыте работы с ним. Удачном или неудачном — разберемся по ходу дела.
Читать полностью »

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

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

Продажи через интернет очень похожи на продажи в реальности. Мысленно выстройте цепочку действий, шагов, которые вы проходите вместе с клиентом до того как он скажет «Я согласен! Беру» Читать полностью »

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

image

Читать полностью »

Как бесплатно проверить сайт на ошибки дизайна, которые мешают продавать - 1

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

Сложный способ:

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

А теперь простой:
Читать полностью »

Договоры вашей студии не работают. Ищем выход из ситуации - 1

Когда мы имеем дело с фрилансером и хотим поручить ему создать программу или дизайн, тексты для сайта или другой продукт (будем для краткости называть этот результат интеллектуальным продуктом), то мы придерживаемся одного правила. При работе с фрилансером лучше заключать не договор подряда или оказания услуг, а договор авторского заказа (ссылка на старый пост с примером договора). Этот вид договоров подразумевает создание результата интеллектуальной деятельности, обеспечивает возникновение у Заказчика прав на интеллектуальный продукт и адекватно отражает суть отношений между сторонами договора. Ведь для заказчика не принципиально, сколько времени потратил исполнитель и в каких муках создавался продукт. Важно, чтобы в итоге результат отвечал требованиям Заказчика и права на него переходили от автора к плательщику. Иными словами – мы платим не за процесс, а за результат.Читать полностью »

Лицом об стену: мрачные ошибки дизайна и юзабилити сайта - 1

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

Знакомая ситуация?

Сайт компании, от которого раздирает зевота. Интернет-магазин, где на заполнение формы заказа уходит полчаса. Лендинг с сочными картинками, КОТОРЫЙ ВОТ ТАК ОРЕТ на посетителей и тикает фальшивым таймером акции. Все они совершают банальные, но распространенные ошибки. Это ошибки дизайна, в широком смысле слова: проблемы «общения» между интерфейсом и человеком.
Читать полностью »

Студия веб-дизайна WebProfy (Kokoc Group) разработала дизайн сайта Фестиваля «Всероссийский День ходьбы», который впервые прошел в стране по инициативе Олимпийского комитета России 3 октября 2015 года.

WebProfy сделал шаг - 1Читать полностью »

Революция «плоского дизайна» продолжает набирать обороты с момента, как он был представлен на платформе Windows Phone в 2010 году. Не сложно понять почему: интерфейс с таким дизайном кажется более интуитивным, хорошо подходит для адаптивных элементов, современных фреймворков и при грамотном исполнении привлекательно выглядит.
Flat design начал существовать в противовес повсеместному скевоморфичному стилю, но с тех пор стал гораздо большим, чем просто «Вариантом Б».

Изначально flat был исключительно двумерным с тотальной ориентацией на минимализм. В современном flat 2.о используются тени, градиент и другие элементы, которые делают его «почти плоским».

image
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js