• entries
    10
  • comments
    0
  • views
    6,165

1.1 Анализ макета. Руководство верстальщика

Sign in to follow this  
klierik

1,152 views

Вступление

Первое с чем сталкивается верстальщик — макет. Для начала следует проанализировать layout, блоки и элементы макета, что бы оценить время, которое потребуется на его реализацию.

Техническое задание

Требуется сверстать макет дизайна сайта.

В качестве основы использовать Bootstrap последней актуальной версии. Вёрстка должна поддерживать Responsive Web Design и корректно отображается в браузерах, версии которые поддерживает фреймворк. Сетку проекта так же следует использовать из  фреймворка.

Цитата

Я не являюсь пропагандистом Bootstrap, но использую его по следующим причинам:

  • Документация и набор готовых решений "из коробки"
  • Распространённость и лёгкость в использовании

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

Важным критериям для меня, когда приходит новый человек в команду — быстро понять как работает код и уметь его использовать повторно. Мне опыт показал что использование доступных решений в реализации проектов, и последующей их поддержке 3+ лет, благоприятнее влияет на код, нежели придумывать велосипед (я начинал с велосипеда, отвергая готовые решения, пока не начал ломать кости об спицы).

Если у вас велосипед который работает как часики — я рад что у вас это получилось.

Дизайн

Макеты, представленные в рамках проекта, в подавляющем большинстве для Desktop. Задача разработчика опираясь на текущие макеты реализовать Tablet и Mobile версии, учитывая сетку фреймворка. Допускаются незначительные отклонения в реализации, которые не влияют на функциональную часть проекта.

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

Цитата

Последний приведённый абзац не частое явление и, как правило, заказчик стремится контролировать каждый шаг разработчика, что в итоге повышает стоимость работы, так как обсуждение задачи — это так же работа, которая требует времени.
Но, в случае если исполнитель уже мог себя ранее зарекомендовать как специалист, то ситуация, когда исполнитель сам решает "как лучше" в той или иной ситуации, благоприятно влияет на время и стоимость* разработки проекта.

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

Реалии этого мира

Дизайн, который я взял для реализации поставленной задачи, из реального проекта, который разрабатывался в конце 2017 г., за который не было выплачено ни цента. Он был представлен в рамках среды программы Zeplin, потому исходников нет. Но, по сути сам дизайн достаточно простой и даже по предоставленным PNG можно воспроизвести его в разметке.

Поддержка браузеров

Вёрстка должна корректно отображаться и работать в следующих браузерах:

  • Последние 2 версии любого современного браузера
  • В любом браузере, доля которого на рынке более 5% (согласно мировой статистике)
  • Версия iOS 7 и выше

Анализ макета

Когда разработчик, или команда разработчиков, принимают проект то наличие макетов делится на 2 варианта ситуации:

  • Присутствуют все макеты. Они утверждены заказчиком и можно приступать к работе
  • Присутствует лишь часть макетов. Но так как сроки горят, требуется начинать работу уже вчера. Этот вариант сложнее, так как невозможно спрогнозировать как будет видоизменяться UI и, следовательно, каким изменениям будет подвержены блоки страницы. В таких случаях Заказчика больше интересует время, и он согласен жертвовать временем, так как в процессе разработки будут затраты на рефакторинг кода (в лучшем случае) и частичная перепись кода из-за новой логики работы (в худшем случае).

В рамках данного обучения мы будем опираться на первый вариант — есть все макеты для создания вёрстки под Desktop и Mobile.

И так, вопросы технического характера изучены, цель поставлена.

1. Layout's

Давайте определим какими они бывают:

  • Одноколоночный — присутствует одна колонка для размещения контента
  • Двухколоночный — присутствует основная колонка для размещения контента и дополнительная справа\слева для размещения второстепенных блоков
  • Трёхколоночный — присутствует основная колонка для размещения контента и две дополнительных колонки для размещения второстепенных блоков
  • Произвольный/Кастомный — данный тип layout строго не выражен, имеет плавающее расположение блоков и контента. Как правило такой вариант можно увидеть на Landing page. По сути любой вариант layout, который нельзя назвать одним из первых трёх вариантов можно считать произвольным, а его тип каждый может называть по своему. Приведу, на вскидку, несколько вариантов типов layout, которые мне часто встречаются в работе, где его название полностью соответствует смыслу его пользования: popup, modal, print, empty

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

Для начала посмотрим какие layout's представлены в макетах:

Так же обратите внимание что на страницах с максимальной фиксированной шириной присутвуют элементы, которые занимают всю ширину страницы. Это Header и блок под ним, который выступает в роли описания страницы или слайдера (как это показано на домашней странице).

Все остальные макеты дизайна подпадают под один из этих layout's.

Теперь мы знаем структуру страниц и как контент будет размещаться на них. Но, мы сразу будем учитывать на будущее что кол-во layout's может вырости, а значит их создание не должно как либо влиять на контент. Данная часть разметки должна быть самодостаточной, универсальной и легко расширяемой. В общем по этому принципу будет создаваться львиная часть блоков веб-сайта.

2. Блоки и элементы

Если с layout вопрос решается достаточно быстро, то с блоками и элементами этот процесс длиться дольше. А так как "время = деньги", особо много вкладывать времени в это не хотелось бы.

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

2.1 Header и Слайдер

Начнём с домашней страницы — "Customer Flow/All Screens/homepage-customer.png"

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

Скрытый текст

homepage-customer.png 2018-05-01 13-45-32.png

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

2.2 Блоки главной страницы

Опускаемся ниже и видим 4 блока, которые на первый взгляд разные.

Скрытый текст

homepage-customer.png 2018-05-01 13-56-21.png

Но если разборать на примере то станет понятно, что блоки имеют область для Заголовка и Контента, что делает их однотипными. Заголовки "Как работает Aworker" и "Популярные услуги" однотипны

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

Скрытый текст

homepage-customer.png 2018-05-01 14-20-42.png

А дальше по странице ещё более интересная ситуация

Скрытый текст

homepage-customer.png 2018-05-01 14-28-15.png

Как видим на скриншоте в разных блоках один и тот же блок — аватар пользователя. Он, если пробежаться по макетам, встречается в разных комбинациях на разных страницах в разных блоках.

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

Ниже несколько примеров где этот блок отображается

Скрытый текст

customer-contact-list.png 2018-05-01 14-40-41.png

2.3 Блоки на внутренних страницах

Далее давай посмотрим на страницу — "Customer Flow/All Screens/SEO-services.png"

Скрытый текст

SEO-services.png (38 documents, 38 total pages) 2018-05-01 14-52-57.png

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

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

Скрытый текст

SEO-services.png (38 documents, 38 total pages) 2018-05-01 14-56-15.png

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

2.4 Внутренние layout

Ранее мы уже говорили про layout's, но в разрезе общего оформления страницы. Сейчас же мы посмотрим на layout в рамках блока

Скрытый текст

SEO-services.png (38 documents, 38 total pages) 2018-05-01 15-04-07.png

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

Такие конструкцию "тяжелее", по сравнению с обычными layout'ами, которые используются для описания структуры страницы. Связанно это с тем, что описание структуры страницы, как правило, в случае изменения её ширины, из N-колоночного макета видоизменяется в одноколоночный. В случае же с layout'ами внутри блоков, за частую, колонки меняются местами между собой и\или меняют свои размеры.

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

3. Итоги подведём

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

Добра и удачи ?

Sign in to follow this  


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Who's Online   0 Members, 0 Anonymous, 41 Guests (See full list)

    There are no registered users currently online



  • Пишут сейчас

    • Добрый день! Помогите, пожалуйста, мне нужно сделать так, что-бы форма не отправлялась мне на мыло пустая, а чтоб проверялась на пустоту...   <div id="order" class="popup">
              <a href="#" onclick="cart.closeWindow('order', 0)" style="float:right">[Закрыть]</a>
              <h4>Введите данные</h4>         <form id="formToSend">
                  <input id="fio" type="text" placeholder="Имя"  class="text-input" />
                  <input id="city" type="text" placeholder="Район Риги"  class="text-input"/>
                  <input id="phone" type="text" placeholder="Контактный телефон" class="text-input"/>
                  <input id="email" type="text" placeholder="Э-почта" class="text-input" />
                  <input id="inf" type="text" placeholder="Дополнительная информация" class="text-input" />
                  <br>
                      <textarea id="question" placeholder="Адрес доставки"></textarea>
                  <br>
                  <b>Доставка:</b>
                  <br>
                  <select id="delivery">
                      <option value="-">-</option>
                      <option value="С доставкой">ДА. Доставка нужна</option>
                      <option value="Доставка НЕ нужна">НЕТ. Доставка не нужна</option>
                  </select>
              </form>
                  <button class="bbutton" onclick="cart.sendOrder('formToSend,overflw,bsum');">Заказать</button>
          </div>
    • Всем привет.
      Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
      Нужно сделать вот такие штуки http://prntscr.com/nsyswi
      Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
      Буду благодарна за подсказку.
    • Это html     <li><a href="#">Текст</a>
                      <ul>
                              <li><a href="#"</a>Просто Текст</li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#">Просто Текст</a></li>
                              <li><a href="#" >Просто Текст</a></li>
                      </ul>
              </li> Это стили      ul {
              list-style: none; /*убираем маркеры списка*/
              margin: 0; /*убираем отступы*/
              padding-left: 0; /*убираем отступы*/
              margin-top:25px; /*делаем отступ сверху*/
          font-family: 'Slabo 27px', serif;
               height: 50px; /*задаем высоту*/
      }
          a {
              text-decoration: none; /*убираем подчеркивание текста ссылок*/         color:#fff; /*меняем цвет ссылок*/
              padding:0px 15px; /*добавляем отступ*/
              font-family: arial; /*меняем шрифт*/
              line-height:50px; /*ровняем меню по вертикали*/
              display: block;
           /*добавляем бордюр справа*/
              -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
              -o-transition: all 0.3s 0.01s ease;
              -webkit-transition: all 0.3s 0.01s ease;     }
          a:hover {
              background:#D43737;/*добавляем эффект при наведении*/
          }
          li {
              float:left; /*Размещаем список горизонтально для реализации меню*/
              position:relative; /*задаем позицию для позиционирования*/     }             /*Стили для скрытого выпадающего меню*/
                  li > ul {
                          position:absolute;
                          top:25px;
                          display:none;
                  }             /*Делаем скрытую часть видимой*/
                  li:hover > ul {
                      
                          width:2000px;  /*Задаем ширину выпадающего меню*/
                  }
               li:hover > ul > li {
                          float:none; /*Убираем горизонтальное позиционирование*/
                  }
                  div{
                      margin-top:500px; /*Делаем отступ текста вниз*/
                      margin-left: 767px;/*Делаем отступ текста влево*/
                      font-size: 60px;/*Задаем размер текста*/
                      color:#fff;/*меняем цвет текста*/
                  font-family: 'Anton', sans-serif;/*подключаем шрифт*/             }
                  p{
                      color:#fff;/*меняем цвет текста*/
                      font-family: 'Slabo 27px', serif;/*подключаем шрифт*/
                      margin-top:50px;/*Делаем отступ текста вниз*/
                      margin-left: 860px;/*Делаем отступ текста влево*/
                      font-size: 30px;/*Задаем размер текста*/
                  }
          li{
              margin-right: 200px;
              font-family: 'Slabo 27px', serif;
            font-size: 26px;
      }
  • Popular Contributors