30.03.16 
2596 
Начало повествования заканчивается на том, что сайтостроитель, вооруженный и подготовленный, стоит на рубеже перед необъятным океаном творческих возможностей, взлетов и падений, побед и огорчений, воодушевления и подавленности. В начале творческого созидания…
В одном блоге была интересная заметка "Не будите программиста". А идея в том, что творчество в этой сфере – это погружение в виртуальную реальность, подобную сну. Это погружение в определенный "поток сознания", от непрерывности и качества которого зависит выходной результат.
Прежде чем появится что-то, что можно увидеть и "пощупать", в этом виртуальном мире, то есть в мыслительном потоке сайтостроителя, должны сформироваться более-менее понятные очертания желаемого.
Шаг первый – каркас сайта. Есть несколько подходов. Можно, например, пытаться все делать сходу, вспоминая примеры из интернета и строить элемент за элементом, не имея целостного представления о том, как должен выглядеть конечный результат.
А можно, обуздав нетерпение, взять ручку или карандаш, или прямо в графическом редакторе (при наличии достаточного опыта), попытаться как можно полнее и точнее, до самой мельчайшей детали, проработать макет будущего сайта.
- фиксированный или "резиновый". Есть мнение, что именно резиновый шаблон наиболее полно раскрывает дух интернета – максимальная свобода и заполнение всего пространства экрана. Минусы – придется смириться с изменяющимся позиционированием элементов; пожертвовать красотой продуманного позиционирования для сохранения целостности и приемлемости внешнего вида сайта на экранах различных размеров. Кроме того, нужно будет, в ряде случаев, применять особые приемы привлечения внимания к конкретным единичным элементам, поскольку экран будет полностью заполнен. Продумывается смещение элементов при изменении размера экрана.
Фиксированный шаблон позволяет в полной мере проявить красоту композиционной составляющей и максимально приблизиться к желаемому виду. Стоит отметить, что многие серьезные новостные ресурсы, несмотря на востребованность свободных площадей, отказались от резинового дизайна – например, Лента.ру.
- определение информационных блоков и их структурного расположения. Одно-двух-трех и более колоночный дизайн, определение расположения и количества меню, возможная "резиновость" некоторых колонок, размерность всех блоков. Для фиксированного сайта в целом представляется оптимальным размер от 960px до 1000px.
Основной процесс происходит в "потоке сознания", откуда выуживаются более-менее готовые решения, либо происходит параллельное "додумывание" в процессе прорисовки.
Понятно, что идеального варианта сразу не получится – какие-то элементы будут изменяться/убираться/добавляться, и это надо учитывать при разработке каркаса. Кроме того, свои коррективы будет вносить сам сайт в процессе своей жизни.
Можно сказать, что существует прямая зависимость между временем, затраченным на продумывание структуры сайта и его "циклом жизни". Когда внутреннее чувство подсказывает, что все продумано и сделано, как надо, и дальнейший прогресс маловероятен, переходится к следующему шагу.
Шаг второй – собственно дизайн. Основная цветовая гамма, дополнительные цвета, переходы и визуализация (вид представления (например, для элементов меню – картинка, текст, кнопка), объемность, тени; взаиморазделение и гармонизация по восприятию). При разработке структуры мы получили план-каркас со взаимным расположением элементов; при дизайне все расцвечивается, придается оптимальная, с позиций юзабилити, т.е. удобства пользования, форма, с учетом внешней привлекательности и "приятности" сайта. Определяется цвет и размер текста, заголовков, ссылок, используемые шрифты и прочее.
В результате должна получиться законченная картинка первой страницы (морды) сайта. В случае различия в представлении разных страниц сайта, процесс повторяется.
В случае использования логотипа, сюда же относится его разработка: размер, представление, логическая обоснованность и взаимоувязка элементов, цветовые решения. Логотип должен быть тщательно проработан и соответствовать требованиям (см. ссылку).
Шаг третий – перенос картинки в графический редактор (если она еще не там) и нарезка. Очень удобен в этом плане "Фотошоп" или бесплатные аналоги GIMP и другие – 20 бесплатных графических редакторов.
Что значит "нарезка" – отделение единичных или составных элементов из общей картинки в качестве самостоятельных объектов.
Шаг четвертый – верстка. То есть, имея перед собой картинку, как должен выглядеть сайт, с помощью прописывания (задания) соответствующих стилей в css и нарезанных объектов, создается полный аналог в виде html файла. Или прописываются стили прямо в html коде и потом переносятся в файл css.
Шаг пятый – "натягивание" шаблона на движок, с учетом особенностей той или иной cms. Или движка на шаблон – динамические и статические элементы должны находиться/появляться в соответствующих местах в надлежащем виде и оформлении.
После это проводится аудит сайта- подчистка кода и прогон по самым используемым браузерам. Кроссбраузерность должна обеспечивать приемлемую "одинаковость" отображения и функционирования сайта.
Бесплатный курс по основам HTML
Нет комментариев к этой статье.