dYPEpK

dYPEpK.markdown

dYPEpK

A Pen by Tatyana on CodePen.

License.

index.html

<div class="content-box">
  <a class="link" href="">Вернуться к резюме</a>
  <h4>Оглавление:</h4>
  <ul>
  <li><a href="#1">Проектирование и дизайн сайтов</a></li>
  <li><a href="#2">Проектирование для Android</a></li>
   <li><a href="#3">Примеры улучшения интерфейсов</a></li>
  </ul>

  <a name="1"></a><h2>Проектирование и дизайн сайтов</h2>
  <h3>Сайт для центра недвижимости “Горизонт”</h3>
  <ul>
  <li>В основе дизайна лежит 4px интерфейсная сетка для облегчения верстки.</li>
  <li>Жители Красноярска по фотографии и тексту быстро поймут, что компания занимается недвижимостью в их городе.</li>
  <li>Заголовок и соседние ссылки призваны продемонстрировать надежность и вызвать доверие.</li>
  <li>Фильтрация недвижимости по типам показывает богатство выбора и масштабы агентства, а также облегчает первоначальный поиск.</li>
  <li>Гибкий фильтр позволяет настроить поиск по своим предпочтениям, а также решает задачу распределения людей на продающих и покупающих.</li>
  </ul>

  <a href="https://img-fotki.yandex.ru/get/30/98340750.0/0_129c47_980bc719_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/30/98340750.0/0_129c47_980bc719_XXL.png" width="490" height="1024" border="0" title="Index.png" alt="Index.png"/></a>


  <h4>Другие страницы:</h4>
  <ul>
  <li><a href="https://img-fotki.yandex.ru/get/3509/98340750.0/0_129c4e_938a4211_orig" target="_blank">Результаты поиска</a></li>
  <li><a href="https://img-fotki.yandex.ru/get/15592/98340750.0/0_129c4c_dbad41fa_orig" target="_blank">Детальное объявление</a></li>
  <li><a href="https://img-fotki.yandex.ru/get/2814/98340750.0/0_129c4d_8dae7186_orig" target="_blank">Детальное объявление, большое фото</a></li>
  </ul>

  <h3>Онлайн-магазин фермерских продуктов “Искона”</h3>
  <ul>
  <li>В основе дизайна лежит 4px интерфейсная сетка для облегчения верстки.</li>
  <li>Главная страница сделана в традициях лендингов. Здесь есть рассказ о превосходном качестве продуктов, витрина магазина, рассказ о команде и социальное доказательство популярности магазина.</li>
  <li>В каталог товаров на главной странице есть три точки входа (категории в верхней части страницы, кнопка “Выбрать продукты” в блоке социального доказательства и ссылка в подвале).</li>
  <li>Для упрощения навигации в правой части экрана всегда находится иконка корзины, а также появлется стрелка наверх.</li>
  </ul>


<a href="https://img-fotki.yandex.ru/get/4004/98340750.0/0_129c74_a244c110_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/4004/98340750.0/0_129c74_a244c110_XXL.png" width="434" height="1024" border="0" title="index-food.png" alt="index-food.png"/></a>


  <h4>Другие страницы:</h4>
  <ul>
  <li><a href="https://img-fotki.yandex.ru/get/9501/98340750.0/0_129c49_467dd986_orig" target="_blank">Магазин товаров</a></li>
  <li><a href="https://img-fotki.yandex.ru/get/9740/98340750.0/0_129c4b_653d523c_orig" target="_blank">Страница детального просмотра товара </a></li>
  </ul>

  <h3>Ипотечный калькулятор</h3>
  <p>Совместная работа над дизайном. Предложение визуального решения для полей ввода и лэйблов. Техническая реализация (верстка). Gif-демонстрация <a href="https://img-fotki.yandex.ru/get/16162/98340750.0/0_129c16_ff0dd840_orig" target="_blank">тут</a>.</p>


  <a href="https://img-fotki.yandex.ru/get/3912/98340750.0/0_129c46_210773fa_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/3912/98340750.0/0_129c46_210773fa_XL.png" width="800" height="467" border="0" title="rmd-design-allocation.png" alt="rmd-design-allocation.png"/></a>

  <a name="2"></a><h2>Проектирование для Android</h2>
  <h3>Katim — приложение для поиска людей, которые катаются на велосипеде рядом в данный момент</h3>
  <p>Проект в разработке. Прилагаю профиль предполагаемого пользователя и файфрейм.</p>
  <h4>Витя, 19 лет</h4>
<ul>
  <li>Живет в Минске, катается на велосипеде время от времени, спонтанно и для удовольствия</li>
  <li>Не любит кататься один</li>
  <li>Друзья и знакомые не всегда могут составить компанию</li>
  <li>Активно пользуется соцсетью Вконтакте</li>
  </ul>
  <ul><b>Хочет:</b>
  <li>Быстро найти человека для совместной велопрогулки</li>
  <li>Этот человек должен быть не очень далеко</li>
  <li>Ищет людей примерно своего возраста</li>
  </ul>
  <h4>Вайфрейм</h4>
  <a href="https://img-fotki.yandex.ru/get/16116/98340750.0/0_129d61_6bfba195_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/16116/98340750.0/0_129d61_6bfba195_XL.jpg" width="800" height="405" border="0" title="VVV_8451-1700-2.jpg" alt="VVV_8451-1700-2.jpg"/></a>

  <a name="3"></a><h2>Примеры улучшения интерфейсов</h2>
  <h3>1.1 Непонятные аббревиатуры</h3>
  <h4>Проблема</h4>
  <p>При создании объявления о продаже автомобильных дисков пользователи спотыкаются об непонятные аббревиатуры. Изначально справка показывалась при наведении на иконки рядом с аббревиатурами.
  </p>
  <h4>Решение</h4>
  <p>Показывать справку при активации инпута. Благодаря этому такие поля стали чаще заполнять и заполнять корректно. Показатели улучшились примерно на 40%. Gif-демонстрация ниже.</p>
  <a class="img" href="https://img-fotki.yandex.ru/get/9650/98340750.0/0_129c1a_763d2a34_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/9650/98340750.0/0_129c1a_763d2a34_orig" width="516" height="391" border="0" title="tooltip-help.gif" alt="tooltip-help.gif"/></a>

  <h3>1.2 Пропадающие объявления</h3>
  <h4>Проблема</h3>
  <p>Пользователи заполняли большую форму, затем нажимали кнопку “Далее”. Они надеялись на публикацию объявления, но оказывались на отдельной странице с авторизацией и регистрацией. Яндекс-метрика говорит, что многие после этого закрывали вкладку. Объявление пропадало, обидно.</p>
  <p>Заказчик попросил показать регистрацию и авторизацию на этой же странице в конце формы. В качестве отправной точки сбросил такое решение:</p>
  <a  href="https://img-fotki.yandex.ru/get/4300/98340750.0/0_129c18_db43725d_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/4300/98340750.0/0_129c18_db43725d_orig.png" width="785" height="173" border="0" title="login-example.png" alt="login-example.png"/></a>
  <h4>Решение</h3>
  <p>Задать человеку простой вопрос и в зависимости от этого показать нужную форму. Сами формы тоже максимально упростили. Пощупать можно <a href="http://www.lot24.by/wheel/create" target="_blank">тут</a>.</p>
  <a href="https://img-fotki.yandex.ru/get/6834/98340750.0/0_129c2c_79718d6c_orig" target="_blank"><img src="https://img-fotki.yandex.ru/get/6834/98340750.0/0_129c2c_79718d6c_orig.png" width="438" height="136" border="0" title="log.png" alt="log.png"/></a>  
  <a class="link" href="">Вернуться к резюме</a>  
</div>

style.css

@import "breakpoint";

body {
  font-size: 16px;
  line-height: 18px;
  font-family: "PT Sans", sans-serif;
  color: #33373a;
  background: #ffffff;
}
.content-box {
  max-width: 760px;
  margin: 0 auto;
}

h2 {
  font-size: 45px;
  line-height: 54px;
  margin: 54px auto 18px;
}
h3 {
  font-size: 32px;
  line-height: 36px;
  margin: 36px auto 18px;
}
h4 {
  font-size: 23px;
  line-height: 36px;
  margin: 18px auto;
}
h5 {
  font-size: 16px;
  line-height: 18px;
  margin: 18px auto;
}
.link {
  display: block;
}
a {
    color: #808080;
}
p, ul, ol, pre, table, blockquote {
  margin: 18px auto;
}
.img {
display: inline-block;
margin: 18px 0;
}
/* Sanitation */
hr {
  border: 1px solid;
  margin: -1px 0;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
b, strong, em, small, code {
  line-height: 1;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub {
  top: 0.4em;
}