09.07.2011
Как мы делаем сайты?
 |
Многие думают что сайты делаются быстро и просто. Что себестоимость производства крайне низкая и хороший сайт можно сделать за маленькие деньги. Попытаемся описать весь процесс создания сайта - от идеи до воплощения! |
Мы долго думали, как можно ёмко и доходчиво описать процесс создания сайта неподготовленному человеку, исключив специальные термины и не ссылаясь на технологии программирования и верстки. И вот итог – мы опишем процесс создания на нашем собственном сайте!
Попытаемся разделить весь процесс на несколько этапов. Надо понимать, что на каждом этапе над сайтом работают разные специалисты, и только слаженная команд готова сделать качественный продукт.
- Креатив и поиск образов;
- Маркетинговые исследования, ключевая аудитория, поведенческие факторы;
- Рисунки, макеты, иллюстрации, инфографика;
- Верстка макетов;
- Программирование сайта;
- Поиск ошибок, тестирование и отладка;
Креатив и творческий поиск образов
Для начала нам надо понять – зачем нам нужен сайт? Ну, безусловно, скажете вы – для того, чтобы нас нашли будущие клиенты и заказали у нас разработку или продвижение сайта. Правильно! А кто эти клиенты? Различные компании, магазины, предприятия сферы услуг, здоровья и красоты и т.д. У них есть одна особенность – это люди, не профессионалы в области интернет-технологий, поэтому делаем выводы:
- Материалы на сайте должны быть написаны простым и доступным языком – понятны даже для детей;
- Сайт должен быть простым в навигации – меню должно располагаться в видимой части экрана;
- Поскольку мы - веб-студия, то надо чем-то удивить будущих клиентов, придумать какие-то развлекательные, яркие, необычные элементы;
- Ну и интерактивные элементы тоже должны быть «в двух шагах» - клиент должен иметь возможность задать онлайн-вопрос, получить консультацию или заказать обратный звонок;
Таким образом, когда первые цели поставлены, можно начинать проектировать размещение элементов на экране и разрабатывать будущий дизайн сайта.
Для начала рисуем первые наброски дизайна. Нам почему-то хочется, чтобы фоновая подложка сайта была черной, а все элементы текстовой части и меню – белые. Некий контраст. Вот что у нас получилось:
Первый макет нашего сайта
В верхней части и по бокам мы хотим пустить крутиться «карусель» из картинок, которые соответствуют направлениям нашей работы, причем «карусель» должна работать при прокручивании колесом мыши. В центральной части – тексты статей.
Консультируемся с верстальщиком и программистом – проявляются первые проблемы. Верстальщик готов сверстать нашу карусель, но вот программист упорно отказывается описывать повороты картинок в верхних углах, в моменты когда вся эта конструкция будет крутиться. Мотивируя это тем, что сайт будет плохо совместим со старыми версиями браузеров, например Internet Explorer 6.0 а также будет долго загружаться, потому что будет очень много скриптов опять же для многих версий браузеров… Плохо. Думаем дальше. Отказываемся от карусели по бокам и оставляем элементы только вверху страницы. Появилась новая идея! Реализовать главное меню в виде ключевых слов, которые будут ссылками на разные страницы и одновременно представить это в виде графика, который будет показывать как в процессе работы над сайтом, увеличивается его посещаемость и прибыль, которую он приносит владельцам. Нарисовали концепт №2:
Макет №2 - некоторые детали пришлось изменить
Ну что же - получилось что то интересное. Думаем дальше. Нужно добавить различные мелочи, инфографику и перерисовать эскиз для того, чтобы заполнить пустые блоки и чтобы дизайнер мог приступить к рисованию этого макета в электронном варианте. Получился практически законченный эскиз:
Макет №3 - практически законченный вариант
Отдаем все материалы дизайнеру - теперь необходимо нарисовать логотип "Торговые системы". Поскольку в компанию входят несколько подразделений, которые занимаются абсолютно разными видами бизнеса, мы решили в логотипе сократить наименование "Торговые Системы" до "ТС" и добавить ПРОМО – что означало бы продвижение, промо-акции и т.п. Получаем несколько вариантов, но поскольку для сайта мы выбрали темные тона – пробуем поместить логотип на черный фон:
Первые варианты логотипа ТС:ПРОМО
Смотрим первый вариант дизайна главной страницы сайта. Жутковато как-то. Очень темно, нету контраста – черное-белое… Стараемся что-то переделать.
Первый макет сайта
Есть идея – нарисовать края центральных блоков с тенью, как будто это пластиковые карточки лежат на черной глянцевой поверхности. Имитируем поверхность, находим карточки – фотографируем:
Фотографии для прорисовки края центральных блоков
Рисуем пиктограммы для главного меню – картинки должны быть яркие, с отражениями. Они будут перемещаться самостоятельно а также при прокручивании колеса мыши.
Картинки для главного меню
К сожалению фото белых карточек не пригодились, дизайн кажется нам очень темным, пробуем убрать черный фон и попробовать на светлом фоне:
Светлая версия дизайна главной страницы
Чего то не хватает… Не хватает яркости, лета, солнца… Может быть добавить что-то зеленое? Овощи, фрукты? Яблоки! Перерисуем график с ключевыми словами и добавим яркости:
Дополнительные элементы для светлого дизайна
Теперь нам нравится. Собираем шапку сайта из различных блоков:
Уже и не помним какая версия макета - "Шапка" сайта
В центральной части главной страницы решаем разместить блоки с анонсами статей из разных разделов сайта, для этого нужно добавить инфографику. Дополнительно в углу размещаем ссылку «заказать», поскольку каждую из представленных услуг можно купить, а для того чтобы пользователям было удобно получить консультацию – по клику показывается форма, где можно заполнить свои контакты, и мы непременно перезвоним.
Самые важные статьи на сайте анонсированы на главной странице
Собираем все элементы вместе – получилась главная страница сайта:
Практически завершенный макет главной страницы сайта
Верстка макетов
Итак, работа над макетом главной страницы завершена. Теперь отдаем макет верстальщикам, и из одной картинки формате «Adobe Photoshop» макет превращается в огромное количество мелко нарезанных картинок. Добавляются файлы стилей и разметки:
Структура файлов картинок, стилей и разметки
Когда все страницы сайта сверстаны, приступаем к программированию, проектированию базы данных и т.д. Куча кода и прочие непонятные вещи)))
Написание скриптов и проектирование баз данных для хранения информации
Итак, наш сайт практически готов, осталось прописать наименования разделов, вписать служебную информацию для продвижения, написать статьи, вставить иллюстрации.
Вот так сайт выглядит в браузере Google Chrome
