Обо мне

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

далее

У нас в стране веб-дизайнером принято называть человека, который рисует дизайн сайта (по сути это графический дизайнер, а сайты он рисует не потому-что имеет отношение к вебу, а потому-что умеет рисовать), после чего готовый дизайн-макет отдаётся Front-end разработчику, который обычно качая головой по поводу не понимания дизайнером специфики веба начинает ваять из дизайна сайт. Но работы у Front-end разработчика очень много, он должен думать не только о качестве вёрстки, но и о том, как переделать дизайн под нужды пользователя (прототипы то ведь никто предварительно не делал, а разработчик интерфейсов слишком дорогое удовольствие), наладить интеграцию с сервером, о производительности, и ещё куче важных вещей. В итоге получается как в том анекдоте, когда один рыл ямы, другой их закапывал, а третий, который должен был сажать деревья, не вышел на работу. Человек, который должен быть промежуточным звеном между дизайнером и Front-end разработчиком, зачастую отсутствует. Да и кому нужна эта семантика, когда сервер падает каждые выходные. Не до жиру, как говорится.

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

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

На этом этапе разрабатывается Информационная архитектура сайта. Для создания прототипов я использую 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.