Этапы работы над сайтом

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

1. Выяснение требований и определения целей создания сайта
2. Разработка технического задания (ТЗ)
3. Разработка дизайна
4. Верстка
5. Программирование
6. Наполнение
7. Запуск

Теперь опишем каждый этап подробнее:

Этап 1. Выяснение требований и определение целей создания сайта.

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

Этап 2. Разработка технического задания.

На этом этапе сотрудники веб-студии будут писать для Вас ТЗ. ТЗ – это документ в котором указаны Ваши требования к сайту и описано, как он будет выглядеть и какой функционал будет содержать. После того как Вы подписали ТЗ, требования менять будет нельзя и сайт будет делаться строго по этому документу.

Этап 3. Разработка дизайна сайта.

После подписания ТЗ начинается разработка дизайна. Дизайн обычно рисуется про прототипу. Прототип – это схема, на которой нарисовано схематично, как будут расположены элементы дизайна на странице сайта. Если делается несколько страниц, непохожих друг на друга, то на каждую страницу рисуют прототип и дизайн. После того как дизайн готов, Вам присылают макет страницы. Здесь можно будет уже видеть, на что реально будет похож сайт. Если есть мелкие правки, то разработчик их делает, но саму структуру расположения элементов на странице менять уже нельзя, после того как вы утвердили прототип. Итог этапа – готовый макет каждой станицы.

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

Этап 5. Программирование.

Здесь устанавливается CMS и реализуются все технические функции сайта, которые были описаны в ТЗ.

Этап 6. Наполнение

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

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

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

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

Для того чтобы сделать сайт современным, не требуется переделывать его «с нуля». В некоторых случаях достаточно доработать проект.

Профессиональная аналитика веб-ресурса четко обозначит все минусы и плюсы проекта, что позволит наиболее эффективно работать над его улучшением.

Новейшие механизмы корректной поисковой оптимизации необходимо закладывать еще на этапе разработки сайта.

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

Как эффективнее продавать товары и услуги при помощи сайта?

Качественный контент – необходимое условие для развития веб-ресурса.

Новейшая система для работы с таргетированным контентом сделает ваш сайт еще более эффективным.

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

Возможно ли создать и поддерживать сайт самостоятельно? Конечно! Однако потребуется обладать немалым талантом и опытом, чтобы совместить в себе навыки дизайнера, верстальщика, веб-аналитика и sozdanie-saita-специалиста, копирайтера и редактора, программиста, системного администратора, интернет-маркетолога и сделать из задумки успешный бизнес-инструмент, приносящий доход. Кроме этого потребуется много свободного времени.

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

Шаг 1. Выбор разработчика сайта

Определиться с веб-разработчиком на деле не так просто. Например, в каталоге «CMS Magazine» содержится около 6 500 студий, занимающихся созданием сайтов, из них более 2 000 располагается в Москве и Московской области, порядка 1 000 – в Санкт-Петербурге и Ленинградской области, сотнями они исчисляются в городах-миллионниках.

Портал «Рейтинг Рунета» предлагает следующий алгоритм, который поможет выбрать веб-разработчика сайта:

1. Четкая формулировка целей и задач проекта.
2. Формирование предварительного спискаиз 10-15 компаний. Основными критериями отбора должны служить: портфолио (не менее 10 качественных сайтов), опыт профессиональной деятельности (от 3-х лет присутствия на рынке), отзывы в Сети, к которым следует относиться с известной долей скепсиса. Целесообразно также включить в критерии выбора дополнительные позиции: системы управления сайтом (CMS), с которыми предпочитает работать агентство (подробно об этом ниже); детализация стоимости услуг и ресурсов, задействованных в разработке; условия гарантийного обслуживания и постпроектной поддержки, так называемый follow-up; состав рабочей и итоговой документации.

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

Шаг 2. Составление технического задания на создание и продвижение сайта

Реализацию любого проекта предваряет планирование – постановка целей и задач, а также определение путей их решения. Чтобы передать все или часть функций сторонним специалистам, необходимо разработать и согласовать техническое задание (ТЗ), которое будет служить руководством к дальнейшим действиям. Оно обычно включает такие положения как:

1. Глоссарий терминов и определений, которые используются ниже по тексту технического задания. Он необходим, чтобы заказчик и исполнитель одинаково интерпретировали используемые понятия.
2. Описание предмета разработки, назначение веб-сайта, цели его создания, задачи разработки и окупаемость.
3. Комплекс требований к реализации проекта в отношении:
4. структуры веб-сайта и графического представления главной и внутренних страниц;
5. разработки дизайна и порядка утверждения его концепции;
6. системы динамического управления контентом сайта (CMS) и ее функционала (количества и качества модулей), а также численности и уровня квалификации администраторов;
7. системы разграничения прав доступа;
8. информационного обеспечения и наполнения сайта контентом;
9. условий программного и аппаратного обеспечения серверной и клиентской частей;
10. лингвистического обеспечения (возможностей адекватного переключения между заданными языками с любой страницы сайта);
11. эргономики и эстетики (оптимизации под определенные разрешения без полос прокруток и пустых полей, «юзабилити» интерфейса административной части и пр.);
12. стабильности работы при заданных нагрузках, безопасности;
13. условий сдачи-приемки завершенного проекта, включая: соблюдение сроков поэтапного графика работ; форматы и объем передачи материалов информационного наполнения исполнителю; порядок предоставления дистрибутива и переноса сайта на программно-аппаратную платформу, ранее оговоренную с заказчиком; период тестирования и доводки продукта на ресурсах хостинг-провайдера; период бесплатного исправления допущенных программистами багов после приемки проекта.
14. Права и обязанности обеих сторон, в том числе возможность и допустимые пределы изменений/дополнений ТЗ в процессе работы над сайтом, направленных на устранение спорных моментов и улучшение качества будущего продукта. Чем более глубоко ТЗ описывает все аспекты создания сайта, тем меньше возникнет разногласий и точнее будет определена конечная стоимость проекта.

Шаг. 3. Выбор доменного имени

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

Сегодня доменные имена, служащие для идентификации автономных административных областей в иерархии Интернета, получили очень широкое развитие – по состоянию на начало 2015 года в мире зарегистрировано свыше 288 млн имен более чем в 200 географических и в постоянно появляющихся «инновационных» специализированных зонах. Так, существуют домены в национальной географической зоне первого (верхнего) уровня, такие как .ru, .рф, .su, региональные имена сайтов второго уровня – например, msk.ru (Москва), vrn.ru (Воронеж), или указывающие на тип организации, вроде .edu (образование), .gov (правительство).

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

Можно дать еще несколько общих рекомендаций по выбору доменного имени:

• Имя домена должно быть не только уникальным (иначе его не оформить у официального регистратора), но и не схожим с названиями сайтов конкурентов.
• Старайтесь выбрать имя, которое напрямую соотносится с тематикой вашего сайта и часто присутствует в поисковых запросах.
• Выбирайте имя, которое предусматривает однозначное его написание при транскрипции с русского языка. Пример неудачного названия – крикет, cricket, criket, cricet, kricet, kriket, также, не используйте цифры для замены букв;
• Защищайтесь от возможных конкурентов, регистрируя имя в различных доменных зонах одновременно, например в .ru, .рф, .com, .org, .net или .biz.

Шаг. 4. Выбор поставщика хостинга

Хостинг – это пакет услуг, обычно включающий предоставление:

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

Принято различать несколько видов хостинга по типу предоставляемых ресурсов:

1. Виртуальный хостинг (Shared Hosting) – самый недорогой и простой пакет услуг, удачно подходящий для небольших проектов.
2. Виртуальный выделенный сервер (Virtual Private/Dedicated Server, VPS/VDS) – такой пакет услуг расширяет ваши возможности в плане настроек и подходит для сайтов с повышенной посещаемостью.
3. Выделенный сервер (Dedicated Server) – здесь речь идет об аренде физического сервера, принадлежащего хостинг-провайдеру, целиком. Данный тип услуг рассчитан на крупные проекты.
4. Колокация (Colocation) – пакет услуг, обычно включающий предоставление места в стойке дата-центра провайдера для размещения собственного сервера.
5. Облачный хостинг (Cloud VPS, Cloud Hosting) – это относительно молодая услуга, по многим параметрам превосходящая традиционный виртуальный хостинг, хотя пока и более дорогая. Ее суть в том, что ваш сайт размещается в виртуальном объединении множества серверов, установленных в дата-центре провайдера. Это позволяет в очень большом диапазоне и практически мгновенно регулировать вычислительные мощности, динамически распределяя системные ресурсы между сайтами и виртуальными серверами, а значит – обеспечивая бесперебойную работу портала при абсолютно любых нагрузках. Определенной проблемой является невозможность или сложность прогнозирования будущего потребления оплачиваемых ресурсов.

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

Популярность и размер хостеров не обязательно означает, что они предоставляют неизбежно лучший сервис. Иногда относительно новые игроки на рынке хостинга превосходят «гуру» своей более современной ресурсной базой. Поэтому здесь нельзя сделать однозначного вывода – какой хостер лучше. Но следует заранее определиться с бюджетом и набором требуемых услуг. Кстати, некоторые провайдеры бесплатно предоставляют доменное имя на 1-2 года или даже пожизненно.

Общие рекомендации по выбору хостинг-провайдера таковы:

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

Шаг 5. Выбор CMS

Системы управления контентом сайта (Content Management System – CMS) делятся на две большие группы: бесплатные и платные (коробочные). Компания iTrack, занимающаяся составлением рейтингов CMS в Рунете с 2009 года, выделяет также узкоспециализированные системы управления содержимым сайта, например, ориентированные на работу интернет-магазинов. Согласно данным iTrack по состоянию на конец 2014 года после опроса специальным роботом около 5 млн доменов зоны .RU в полный совокупный рейтинг вошли 57 заметных CMS-бренда, из них 23 бесплатные системы, 18 платных тиражных и 16 узкоспециализированных CMS. «Верхушка» общего рейтинга выглядит так:

Соблюдение этого сценария и выдерживание последовательности — некоторая гарантия получения удовлетворительного результата.

Рассмотрим каждый этап.

Основная идея и задача сайта. Одна страница или несколько? Структура сайта, основные блоки.

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

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

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

Сайты конкурентов. Кросс-категории. Вдохновляющие примеры.

Исследование — это способ превратить неорганизованный творческий процесс в технологичную цепочку действий, которые приводят к предсказуемому результату. Подробно мы рассказываем об этом в лекции «Виды исследований». Сейчас остановимся на ключевых моментах.

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

Кросс-категории. Если вы делаете сайт спектакля, посмотрите другие сайты спектаклей. Не находите хороший сайт спектакля, возьмите близкую категорию: сайт оперы или современного танца. Если нужно рассказать о футбольной команде, то можно использовать приемы, найденные на сайте хоккейной команды или регби.

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

Ниже ссылки на ресурсы, где собраны хорошие образцы.

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

Стоимость исследований должна быть меньше, чем стоимости внедрения, иначе лучше проводить «проверку боем» — ставить эксперименты на реальных пользователях.

Исследования не должны значительно тормозить запуск продукта. Лучше довериться видению и запустить актуальный продукт, чем долго исследовать то, что не увидит свет.

Стоит помнить, что большинство исследований направлены в прошлое. Для создания новых идей и новых продуктов иногда лучше воспользоваться интуицией и различными креативными методиками (дизайн-мышление, прорывное мышление, ТРИЗ, латеральное мышление и т. д.)

Что такое прототип. Примеры прототипов. Как рисовать прототип, типовые элементы.

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

Обложка. Линия потолще — заголовок. Тонкие линии — краткое описание. Короткие полоски сверху — меню.

Изображения обозначаются перечеркнутыми прямоугольниками. Текст — прямыми линиями.

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

Текст в колонках. Жирные линии — подзаголовки.

Галерея изображений — перечеркнутый прямоугольник и управляющие элементы.

Видео традиционно обозначаем треугольником.

Ключевые особенности — схематичное изображение иконок и текст в колонках.

Отзыв — фотография и текст.

Кнопки и формы изображаются примерно так, как они и выглядят.

Где взять информацию для сайта. Как написать текст для сайта: ключевые пункты. Стиль текста.

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

О новом подходе к подаче информации в интернете, читайте в лекции «Цифровой сторителлинг».

Если вы делаете сайт на заказ, то очень хороший ход — взять интервью у вашего клиента. Включите диктофон и просто поговорите с человеком, задайте вопросы — ничего специфического, просто проявите интерес, выясните, за что вашего заказчика любят клиенты.

Расшифруйте запись сами или наймите исполнителя. Стоит это около 20 рублей за минуту, найти человека можно на youdo.com За небольшую дополнительную плату текст отредактируют, и у вас, наконец, появится буква.

• Напишите короткий текст о себе, своей компании. Это должна быть одна фраза, которая четко и ёмко формулирует, чем вы занимаетесь. Например, Tilda Publishing — сервис, который помогает создать впечатляющий сайт без технических навыков.
• Напишите чуть более развёрнутый текст. Объясните, чем вы занимаетесь. Формулируйте просто — так, как если бы вы рассказывали это приятелю за чашкой кофе — максимально понятным языком.
• Выделите три основных фишки — почему любят вас или ваш продукт.
• Опишите преимущества . Расскажите, с помощью чего ваш продукт решает проблему клиента, дайте детали.
• Подумайте о заголовках . Хороший прием — формальные заголовки типа «Команда», «Контакты» и т. д. поменять на эмоциональные. Например, вместо «Новости» написать «Будь в курсе», вместо «Контакты» — «Скажите привет».
• Возьмите отзывы. Попросите ваших самых лояльных клиентов сказать пару слов о вас. Отлично работает.

• Придумайте три ключевых цифры , люди любят цифры. Но старайтесь, чтобы они были осмысленными, понятными и что-то сообщали пользователю. Избегайте абстрактных величин, типа: обслужили 1000 клиентов, выпили 200 литров кофе, продали 38 000 плюшевых медведей. Хороший пример: 7,5 — средний балл IELTS среди наших выпускников. 3 минуты — копируется фильм с одного устройства на другое при помощи приложения.
• Покажите команду , если она сильная. Личность всегда интересна, реальным людям доверяют больше, чем абстрактной компании.
• Расскажите о партнерах или заказчиках , если ими можно гордиться.
• Укажите специализацию. Если в вашем баре большой выбор крафтового пива, отметьте это отдельно.

Стиль текста. Придерживайтесь информационного стиля. Не растекайтесь мыслью по древу — говорите коротко и только важное. Большой текст никто не читает. Используйте принцип обратной пирамиды — сначала скажите главное, потом добавьте детали. Тут хорошо работает связка заголовок и описание. Заголовок должен привлечь внимание и передать суть, описание — расширить и дополнить сообщение.

Смело убирайте вводные конструкции, избегайте клише и канцеляризмов. Используйте сервис glvrd.ru — он помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю.

Утверждение дизайна с заказчиком. Где взять хорошие фотографии для сайта. Навигация на сайте. Что делать с логотипом. Подбор шрифта и шрифтовых пар. Как сделать сайт стильным.

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

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

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

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

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

Где взять хорошие фотографии. Фотографии — это важно, без них ничего не получится. Нет фотографий — считайте, что нет сайта. Не используйте клипартные фотографии. Рукопожатия бизнесменов и улыбающиеся домохозяйки — вчерашний день, такие фото не работают. Лучше сфотографируйте себя и своих коллег, чем искать готовые картинки по запросу «успешный предприниматель». Наймите фотографа или иллюстратора. Известные иллюстраторы и фотографы стоят дорого, но на рынке много относительно недорогих профессионалов, они с удовольствием для вас поработают, и у вас сразу появится хорошее наполнение для сайта.

Один из трендов современного веба — «плоский» дизайн, частью которого является флэт-иллюстрация. Иллюстрация отлично справляется с двумя функциями: она информативна (информацию удобно и легко воспринимать) и украшает проект, задает ему стиль. Подробнее читайте в лекциях:

Логотип должен быть горизонтальным. Вертикальные логотипы в вебе работают плохо. Как правило, логотип располагается в меню, а оно не должно занимать много места на экране. Если логотипа у вас нет, то просто напишите название проекта каким-то не системным шрифтом, типа Proxima или Futura. Не мучайтесь, не заморачивайтесь с логотипом, если у вас ограниченный бюджет. Сейчас это не так важно, как общее впечатление от сайта. Подумайте лучше о фотографиях и общем стиле.

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

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

Самое верное — взять разные гарнитуры из одного семейства, например PT sans и PT serif

Традиционное сочетание: шрифт без засечек для заголовков и с засечками для текста. Proxima Nova и PT serif

Иногда, в качестве приема, шрифт с засечками используют для заголовков. Georgia и Roboto

Open Sans и Georgia

Общий стиль и аккуратность. После того, как вы оформили все блоки, посмотрите, чтобы сайт выглядел приятно и аккуратно. Выровняйте отступы, сделайте заголовки единообразными, проверьте, что размер шрифта в тексте везде одинаковый. Убедитесь, что на сайте достаточно свободного пространства.

Убедитесь, что на странице достаточно «воздуха» — вокруг текста и картинок есть пространство, они не слипаются и не мешают друг другу.

Если используете дополнительные цвета, делайте это очень аккуратно.

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

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

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

Современные инструменты для создания сайта. Этапы технической реализации. Что убивает ваш дизайн.

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

Традиционный процесс технической реализации состоит из следующих этапов:

HTML верстка. Верстальщик сначала в текстовом редакторе пишет код с помощью языка разметки HTML, а затем оформляет код с помощью каскадных таблиц стилей CSS. В результате вы получаете макет в html формате. Его еще нельзя редактировать, но уже можно открыть в браузере.

Интеграция верстки в систему управления сайтом (CMS). Эту задачу выполняет программист. Верстка превращается в шаблоны, которые можно наполнять и редактировать. Готов сайт, который можно поддерживать. Весь функционал готов.

Наиболее популярные CMS: WordPress, Bitrix, Drupal, Joomla.

Наполнение сайта контентом. Как правило, окончательное наполнение осуществляет контент-менеджер — сотрудник клиента, который в дальнейшем будет поддерживать сайт. Наполнение происходит с помощью админки системы управления сайтом через визуальные редакторы («визивиги», WYSIWYG — What You See Is What You Get).

Нужно быть готовым к тому, что на каждом этапе качество вашего дизайна будет теряться. Вы получили идеальную картинку на макете и чем больше у вас энергии и решимости, тем меньше потеряется в процессе реализации. Если нет сил, макет станет на 40% хуже. Если энергии очень много, то потеря будет 5%. Но в любом случае нужно настроиться, что потери будут.

На что обратить внимание, чтобы сохранить исходное качество дизайна

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

Интеграция. Во время интеграции часто выясняется, что какие-то решения просто невозможно реализовать технически.

Наполнение контентом. Сайт невозможно прорисовать от начала и до конца. Поэтому дизайнер подбирает и ставит фотографии и тексты только как образец. Например, заказчик продает деревянные дома. Дизайнер нарисовал страницу дома, поставил текст, качественные фотографии. Но таких страниц может быть 150. И если контент-менеджер неквалифицированный, то фотографии могут быть плохо обработаны, криво кадрированы. Это портит весь вид.

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

«>