Delirium Сделать сайт. Погружение 

Дата публикации  Дата изменения30.03.16  КомментарииНет   Просмотры783

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

В одном блоге была интересная заметка "Не будите программиста". А идея в том, что творчество в этой сфере – это погружение в виртуальную реальность, подобную сну. Это погружение в определенный "поток сознания", от непрерывности и качества которого зависит выходной результат.

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

Шаг первый – каркас сайта. Есть несколько подходов. Можно, например, пытаться все делать сходу, вспоминая примеры из интернета и строить элемент за элементом, не имея целостного представления о том, как должен выглядеть конечный результат.
А можно, обуздав нетерпение, взять ручку или карандаш, или прямо в графическом редакторе (при наличии достаточного опыта), попытаться как можно полнее и точнее, до самой мельчайшей детали, проработать макет будущего сайта.

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

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

  • определение информационных блоков и их структурного расположения. Одно-двух-трех и более колоночный дизайн, определение расположения и количества меню, возможная "резиновость" некоторых колонок, размерность всех блоков. Для фиксированного сайта в целом представляется оптимальным размер от 960px до 1000px.

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

Понятно, что идеального варианта сразу не получится – какие-то элементы будут изменяться/убираться/добавляться, и это надо учитывать при разработке каркаса. Кроме того, свои коррективы будет вносить сам сайт в процессе своей жизни.

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

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

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

Шаг третий – перенос картинки в графический редактор (если она еще не там) и нарезка. Очень удобен в этом плане "Фотошоп" или бесплатные аналоги GIMP и другие – 20 бесплатных графических редакторов.
Что значит "нарезка" – отделение единичных или составных элементов из общей картинки в качестве самостоятельных объектов.

Шаг четвертый – верстка. То есть, имея перед собой картинку, как должен выглядеть сайт, с помощью прописывания (задания) соответствующих стилей в css и нарезанных объектов, создается полный аналог в виде html файла. Или прописываются стили прямо в html коде и потом переносятся в файл css.

Шаг пятый – "натягивание" шаблона на движок, с учетом особенностей той или иной cms. Или движка на шаблон – динамические и статические элементы должны находиться/появляться в соответствующих местах в надлежащем виде и оформлении.

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

ПерейтиБесплатный курс по основам HTMLПерейти
Бесплатный курс по основам HTML

 

Бесплатные курсы

Категории

Теги: , , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые