# Referathelp

Магазин рефератов Referathelp

Demo (opens new window)

Магазин рефератов Referathelp.

# Стэк технологий

  • HTML/CSS
  • Jade(Pug)
  • Stylus
  • PHP
  • MySQL
  • WordPress
  • WooCommerce

# Фичи

  • Формы обратной связи
  • Страница Вопрос-ответ с возможностью выводить релевантные ответы на разных страницах. С помощью шорткодов.
  • Внутренняя оптимизация и перелинковка
  • Семантичная верстка
  • Блог
  • Интернет-магазин

# Бриф

Перед началом работы над проектом я опросил клиента и на основе этого опроса составил бриф в котором перечислил основные этапы работ.

# Перечень работ по созданию сайта:

  • Разработка 3-х концепций дизайна главной страницы
  • Разработка 3-х вариантов логотипа
  • Сбор информации в интернете, анализ сайтов конкурентов
  • Дизайн 5 шаблонов страниц, включая главную страницу, на основе выбранной концепции(Архив, Статичная страница, Страница товара/услуги, Корзина)
  • Проектирование элементов пользовательского интерфейса
  • Проектирование системы навигации по сайту
  • Проектирование дизайна для мобильных устройств
  • Создание 3-х УТП
  • Разработка и интеграция 10 индивидуальных элементов управления сайтом
  • Верстка страниц
  • Интеграция в систему управления сайтом Wordpress(система, позволяющая управлять содержимым сайта посредством удобного интерфейса).
  • Наполнение, предоставленным Клиетом контентом 3 статичных страниц (О компании, Главная страница, Контакты) (не более 200 знаков текста, не считая пробелов, на страницу, 1 видео и 1 изображение)
  • Оптимизация изображений для веб - важно для скорости работы сайта и снижения нагрузки на сервер ...

Полный текст можно посмотреть в примере брифа (opens new window).

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

После утверждения заказчиком брифа и подписания договора я приступил к работе над проектом. Сначала я создал и утвердил у заказчика техническое задание на разработку сайта.

Техническое задание (opens new window)

# Карта сайта

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

Referathelp sitemap

# Контент

Referathelp преимущества

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

# Каркас

Перед началом работы над дизайном сайта были созданы каркасы основных страниц и утверждены у заказчика.

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

# Дизайн

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

# Верстка

После утверждения заказчиком дизайн-макетов, они были сверстаны. Версталось все на шаблонизаторе Jade(Pug) и препроцессоре Stylus.

header.wrapper
  nav.container
    ul.clearfix.main-menu
      li
        a(href="#") Главная
      li
        a(href="#") О нас
      li
        a(href="#") Цены и сроки
      li
        a(href="#") Схема работы
      li
        a(href="#") Услуги
      li
        a(href="#") Преимущества
      li
        a(href="#") Вопрос-ответ
    p +7 905 777 77 77
article.main
  h1 Студенческие работы
  p.main-title-dfn На заказ. Без посредников.
  div
    input(type="text" placeholder="Введите ваш email")
    input(type="submit" value="Заказать")

...
*
  box-sizing border-box
body
  font-family 'Helvetica Neue'
  line-height 1.5
  font-weight lighter
.wrapper
  width 100%
.container
  width 80%
  margin 0 auto
a
  color cornflowerblue
  text-decoration none
  &:hover
    text-decoration underline
.img-blocks
  li
    width 25%
    float left
    a
      display block
      text-align center
      padding 50px 0
      background url(http://lorempixel.com/300/500/business) center / cover no-repeat
      color white
      text-decoration none

...

# Семантичная верстка

При верстке сайта использовались семантические теги.

# Интеграция с WordPress

Верстка была интегрирована в WordPress. Так получилась тема для WordPress.

# WooCommerce

Referathelp магазин готовых работ

На сайте два раздела: работы на заказ и магазин готовых работ.

Для магазина готовых работ я подключил плагин интернет-магазина WooCommerce.

# Система оплаты

Для оплаты работ в магазине я подключил сервис RoboKassa.

# Адаптивность

Referathelp mobile

Сайт адаптирован под три типа устройств: десктоп, планшет и смартфон.

# Слайдер

Referathelp слайдер

Слайдер реализован при помощи плагина Slick slider.

# Обучение

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

# Исходный код на GitHub

Referathelp WordPress theme (opens new window)