Как создаются интернет-проекты

Как создаются интернет-проекты? Сложно ли это? Много ли труда вкладывают разработчики в своё детище? Сейчас мы это увидим. В этой статье рассмотрим классические стадии создания полноценного сайта.

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

В больших и маленьких веб-студиях существует разделение труда. Коллектив состоит из дизайнеров, верстальщиков, программистов, контентщиков (писателей), оптимизаторов, менеджеров. Такое разделение обязанностей позволяет сделать полноценный сайт за несколько дней, так как разработка во всех областях ведётся одновременно несколькими людьми. Главный в студии – менеджер. Именно он ведёт переговоры с клиентами и, собственно, руководит совместной работой специалистов. В мелких студиях из двух-трёх человек в этом плане приходится труднее.

Стоимость сайта от веб-студии исчисляется суммарной зарплатой рабочих за всё время создания сайта, издержек на электроэнергию, аренду и начинается в лучшем случае от 30-40 тысяч рублей. При этом студия работает одновременно с несколькими сайтами. Но есть и люди, которые способны создать сайт в одиночку. Они берут за свою работу в среднем от 5 до 60 тысяч в зависимости от сложности сайта, но при этом, соответственно, работают дольше.

Идея проекта

С чего начинается создание сайта? С идеи. Может это будет личный сайт, может каталог продукции. Именно ваша идея определяет все последующие действия. Но чтобы другой исполнитель мог выполнить именно то, что возникло у Вас в голове, именно Вы должны рассказать ему свои идеи. Если Вы не в состоянии сделать это самостоятельно, боитесь что-либо упустить, то исполнитель может дать Вам заполнить анкету и даже провести своеобразное интервью.

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

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

Прототипирование и дизайн

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

Дизайн должен быть стильным, удобным, информативным. Цветовая схема и формы должны перекликаться с логотипом и фирменным стилем компании. Должны быть тщательно продуманы формы элементов, их размеры и цвет, чтобы вызывать положительные эмоции, заслуживать уважение посетителей, а не отпугивать их какими-нибудь неэстетическими элементами. Думаете, что это просто удовлетворить все капризы пользователей и соблюсти меру?

Для создания качественного дизайна необходимо знать аспекты психологического восприятия цвета и формы предмета, а также интуитивно представлять распространение тени от светового источника при использовании в дизайне «объёмных» изображений, кнопок или пунктов меню, а также дизайнер должен знать основы вёрстки и советоваться с коллективом чтобы случайно не поставить верстальщиков и программистов в тупик невыполнимой задачей.

Вёрстка

Дизайн-макет, созданный художником – это рисунок, а информация веб-страниц представлена в основном в текстовом виде. Вы можете в этом убедиться, если щёлкните в браузере «Вид - Просмотр HTML кода». Да-да, именно в таком виде поступают к нам страницы веб-сайтов. Специальными командами в этом коде указываются размеры шрифтов, цвета, размеры и координаты блоков, расположение текста, изображений на странице. В соответствии с этими командами браузер представляет нам страницу в конечном виде.

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

Подсмотреть за всеми стадиями работы профессиональных верстальщиков, например, можно в специальных видеоуроках на сайте psd2cms.ru.

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

Программирование

Пожалуй, это самая трудная и долгая работа. От этого зависит всё поведение сайта: будет ли вывод последних новостей, будет ли кредитный калькулятор, приём заказов с прямой отправкой на электронную почту курьера или брокера. Будет ли удобная панель управления, позволяющая секретарше добавлять новые разделы, публиковать новости и добавлять товары в каталог, будет ли возможной регистрация клиентов с виртуальными личными кабинетами, будет ли форум, приём платежей через WebMoney или SMS с мобильного телефона?

Таким образом, программная составляющая является в последнее время необходимой частью любого сайта. Это самая важная, хотя и не заметная снаружи вещь, от которой зависит удобство последующего управления сайтом. Проще всего использовать уже готовые бесплатные или платные системы управления контентом (СMS) (Joomla, Drupal, DLE, Bitrix), но часто в них либо включено слишком много лишних, не нужных Вам модулей, либо нет таких, которые необходимы именно Вам. В данном случае лучше создать свою (персональную) СMS для конкретного сайта, чем долго переделывать и дорабатывать чужую.

Сайт «под ключ»

В итоге мы получили несколько этапов создания сайта:

• Разработка технического задания;
• Разработка структуры и графического дизайна; 
• Вёрстка макета языком разметки; 
• Программирование системы управления контентом;
• Наполнение начальными материалами, новостями;
• Продвижение в поисковых системах

Последний пункт необязателен, так как именно к разработке сайта он относится косвенно, да и многие студии «раскруткой» сайтов не занимаются.