Обо мне

Я веб-дизайнер. Это значит, что я забочусь о том, чтобы вёрстка сайта не разъезжалась в браузерах и сайт выглядел красиво не только снаружи, но и внутри. Моими инструментами являются HTML, CSS и Java Script. Я не хочу отставать от моих коллег и практикую адаптивную вёрстку в своих проектах. Когда мне надоедают цифры, я могу открыть Photoshop или Illustrator, чтобы нарисовать изображения, например, для этого сайта.

далее

Что я умею

  • написание брифа и технического задания по веб-ресурсу;
  • составление проектной документации, регламентирующей сроки, состав и калькуляцию работ;
  • прототипирование интерфейса, разработка информационной архитектуры веб-ресурса;
  • навыки владения программами проектирования (Balsamiq, Mockingbird);
  • опыт работы с модульными сетками;
  • photoshop (уровень изготовление дизайн-макета с учётом вертикального ритма и модульной сетки сайта);
  • flash (уровень изготовления анимированных баннеров);
  • illustrator;
  • html5 (максимальное использование возможностей поддерживающихся в браузерах, кроссбраузерный и кроссплатформенный код);
  • css3 (Sass/SCSS(Compass), LESS, фреймворки: Bootstrap, Foundation) (максимальное использование возможностей поддерживающихся в браузерах);
  • модульная структура кода (БЭМ);
  • использование резиновой и адаптивной вёрстки в проектах;
  • вёрстка e-mail рассылок;
  • Java Script (jQuery, handlebars);
  • Haml;
  • xslt;
  • Template toolkit;
  • Git;
  • Grunt;
  • Jira, Bacecamp.
  • пользователь MAC.

Планирование

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

Дизайн

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

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

Вёрстка

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

Предъявляются следующие требования к изготавливаемым сайтам:

  • валидные HTML и CSS
  • отделение структуры от представления;
  • блочная вёрстка (таблицы используются только для представления табличных данных);
  • вертикальный ритм в типографике;
  • семантически правильная разметка и кросс‐браузерный код;
  • проверка Accessibility и анализ Usability сайта;
  • отсутствие орфографических и пунктуационных ошибок на сайте.

Пример вёрстки анимированного плота

html, body {
  height:100%;
  background: #FAF7F0;

  .wrapper-raft {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26.319444444444%; /* 379px / 1440px */

    @include transform(translate(-50%, -50%));

    img {
      max-width: 100%;

      & + img {
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .raft {
    @include animation(raft 6s infinite ease-in-out);
  }

  @include keyframes(raft) {
    0% {
      @include transform(translate(0, 0));
      @include transition(ease-out);
      @include transform-origin(70%, 70%);
    }

    20% {
      @include transform(translate(-2px, -8px) rotate(-4deg));
    }

    50% {
      @include transform(translate(-1px, 0px) rotate(2deg));
      @include transform-origin(30%, 100%);
    }

    70% {
      @include transform(translate(3px, 10px) rotate(-3deg));
    }

    80% {
      @include transform(translate(16px, 0px) rotate(1deg));
      @include transform-origin(90%, 80%);
    }

    90% {
      @include transform(translate(-4px, 3px) rotate(3deg));
    }

    100% {
      @include transform(translate(0, 0));
      @include transform-origin(30%, 90%);
      @include transition(ease-in);
    }
  }
}

See the Pen Raft Animation by Yaroslav (@zhoock) on CodePen.