О веб-дизайне

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

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

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

Единственное, что мне помогает, это увлечение фотографией. Я с фотоаппаратом не расстаюсь с первого класса школы, сменил за это время целую кучу камер, от простейшей пленочной, до современной цифровой, зеркалки.  Снимаю очень много, занимаюсь обработкой фотографий, в совершенстве знаю photoshop.  Всё это дало мне умение работать с цветом, выстраивать композицию. А главное, что выработало во мне увлечение фотографией – это чувство гармонии.

Поэтому, то чему Вас буду учить я, основано на моём личном опыте и моём личном представлении о том, как должен выглядеть тот или иной сайт. Например, вы сейчас находитесь на сайте webmasters-blog.ru дизайн которого делал я, наверняка, Вы заметили, что я нарушил одно из главных правил хорошего дизайна - тёмный текст на светлом фоне. Но сделал я это вполне сознательно, а не потому, что не знаю этого правила. На моём сайте будет очень много текста, причём, тем кто захочет чему-то у меня научится придётся не просматривать текст по диагонали, а внимательно читать, что утомляет глаза. Читая электронные книги, я долго эксперементировал с цветами на своём планшете и подобрал данную цветовую схему, как оптимальную для длительного чтения. Мои глаза меньше всего устают читая белые буквы на сером фоне, а вот белый фон и черные буквы для чтения на TFT матрице монитора долго не выдержать. В этом и заключается мой подход - эксперименты и собственный взгляд на дизайн против формального следования предписаниям учебников и мнениям корифеев дизайна.

Семь вариантов дизайна для Вашего сайта. 

1 вариант – распределенный или  студийный.

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

Преимущества: уникальность; качество и профессионализм.

Недостатки: цена и продолжительность разработки; нужны специалисты.

2 вариант – программистский.

Дизайн изначально делается в HTML и CSS. Зачастую при помощи обычного Блокнота встроенного в Windows. Этот метод требует не только превосходного знания HTML и CSS но и умения представлять как будет выглядеть сайт, глядя на код страницы. Компиляция страницы в браузере происходит периодически для  контроля над результатом но большая часть работы, обычно делается , что называется в слепую, не видя результата – тегами и их значениями.

Преимущества: уникальность; «чистый», правильный (оптимальный) код; малый размер файлов; быстрая работа сайта в браузере.

Недостатки:  продолжительность разработки; необходимость хорошего владения HTML и CSS.

3 вариант – дизайнерский.

Вся работа над дизайном ведется в визуальном (WYSIWYG) редакторе, многое делается простым перетаскиванием элементов дизайна мышкой. При этом дизайн сразу виден и всё делается совершенно наглядно. Редакторов способных на такое довольно много, степень наглядности у них разная, в некоторых, чтобы сделать дизайн на сайт не нужно знать ни HTML, ни CSS. 

Преимущества:  высокая степень уникальности, скорость разработки, можно не знать языков разметки, всё наглядно и интуитивно просто.

Недостатки: ограниченность дизайна , заранее заложенными визуальными шаблонами, «грязный» код, большой размер файлов (медленное открытие в браузере)

4 вариант – ленивый.

Заказ дизайна у специалиста.

Преимущества: уникальность ; качество и профессионализм; можно ничего не делать, только заплатить и подождать.

Недостатки: дорого.

5 вариант – халявный.

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

Преимущества: бесплатно.

Недостатки: дизайн будет неуникальным (будут сайты близнецы); может не совсем подходить под Ваш, конкретный сайт; возможно наличие внешних ссылок и даже вредоносного кода; код может оказаться «грязным».

6 вариант – дешёвый.

Купить готовый дизайн.

Преимущества: недорого; быстро.

Недостатки:  может не совсем подходить под Ваш конкретный сайт; невысокая степень уникальности; возможно наличие внешних ссылок.

7 вариант – перестроечный.

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

Преимущества: сравнительно быстро; уникализация дизайна без особых познаний в области дизайна и языков разметки (HTML и CSS);  код может оказаться «грязным».

Недостатки: уникальность дизайна будет только частичная; возможно наличие внешних ссылок; масса ограничений по изменению дизайна под себя, обусловленная исходным дизайном ;  код может оказаться «грязным»; какие-то познания по структуре сайтов, а возможно и по CSS всё-таки понадобятся.

 

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

 Автор в google+

Добавить комментарий


Защитный код
Обновить

Группа Вконтакте

Copyright © 2014-2015. Все права защищены.

Копирование допускается только с разрешения автора и обязательной ссылкой на источник.