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

Именно внимание к мелочам отличает качественный продукт от дешевой поделки. У хорошего дорогого сайта есть не только красивый уникальный дизайн, продуманная навигация и неглючная админка, но до его сдачи клиенту вебмастера позаботились и о надежном хостинге, о системе скрытой статистики, о наполнении уникальным иллюстрированным контентом, о seo-оптимизации, о favicon.ico, о карте сайта в xml-формате, о грамотном robots.txt, о человекопонятных адресах страниц и «хлебных крошках», об адекватном переводе кнопочек и надписей на все используемые на сайте языки, о регистрации клиентских почтовых ящиков, о регулярных бэкапах, об обучении клиента и технической поддержке, если он что-то сломает на сайте или захочет заменить морально устаревшие модули системы. И дорогим такой сайт становится он не потому, что его разработчики – люди жадные и копят на квартиру/машину, а потому, что в его создание вложено много труда и времени высококлассных специалистов с хорошим опытом работы, которые знают, что делают.

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

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

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

Многие люди пользуются интернетом с работы. Начальство это редко одобряет, но терпит. И у посетителя вашего «музыкального» сайта могут быть проблемы с шефом, если из динамиков его компьютера вдруг заиграет ваша нетленная мелодия.

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

И наконец: с чего вы решили, что понравившаяся вам музыка понравится и посетителям сайта? Если хотите впарить им эту мелодию – сделайте раздел «Музыка» и разрешите им скачивать ваши песни с отдельной страницы. Пусть в Винампе слушают и проникаются широтой вашего кругозора и тонкостью вкуса. В крайнем случае сделайте маленький проигрыватель на Flash, который запустит проигрывание композиции только в том случае, если посетитель сайта кликнет на специальную кнопку.

Традиционные счетчики предоставляют почти все раскрученные порталы. Наиболее популярными являются системы сбора статистики от liveinternet.ru (в России) и bigmir.net (для Украины). Цветов и вариантов для отображаемой на вашем сайте кнопки существует великое множество. Например, Бигмир предлагает выбрать один из следующих вариантов счетчика:

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

Наиболее популярными системами подсчета статистики со скрытыми счетчиками являются Google Analytics и Яндекс.Метрика. Лично мне больше нравится невидимый счетчик от Яндекса, хотя чаще устанавливают более раскрученную Аналитику от Гугла. Некоторые специалисты по продвижению сайтов считают, что установка обеих систем является существенным плюсом для качественного сайта, т.к. поисковик получает доступ ко всей информации о количестве переходов на сайт с конкурирующего поиска, числу переходов по сайту, времени, проведенном на сайте, прямых заходах и т.п. Тем самым качественный сайт может получить больше переходов с поиска и даже повысить свою авторитетность (траст, PR, тИЦ) в глазах поисковиков. Не смотря на то, поисковики, разработавшие эти системы, старательно открещиваются от этих слухов, они выглядят вполне правдоподобно.

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

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

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

Поначалу я хотел поудалять из портфолио все «устаревшие» и «некрасивые» сайты, сделанные давным-давно, но потом решил оставить. Это же почти история! Пусть будут на последних страницах примеров работ. Дальше третьей страницы все равно никто не долистывает, судя по статистике Яндекс.Метрики.

В процессе обновления вспомнил свой первый сайт, за которые мне и моему одногруппнику заплатили первые деньги. Аж целых 200 долларов! Вот радости-то было . Учитывая, что дело было в далеком 2005 году, а у нас опыта не было никакого, вполне нормальные были деньги.

Сайт был посвящен доставке цветов и букетов по Киеву:

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

Сайт, кстати, отлично себя чувствует и сегодня. Даже посещения есть, целых 146 за эти сутки, если верить статистике от Бигмира. Конечно, сейчас предостаточно качественных сайтов на цветочно-подарочную тематику, где можно заказать не только доставку дорогого букета, но даже игрушки из цветов подвезут по указанному адресу в оговоренное время. Но этот сайт стал темой для отдельной статьи не только потому, что он является моим первым проектом и началом моей карьеры как профессионального разработчика сайтов. Помимо всего прочего этот желтенький сайт является примером того, что даже совершенно устаревший веб-сайт, если он сделан более-менее качественно, может быть коммерчески успешным и через 5-10 лет. Качество там, конечно, относительное, но чего вы хотели от студентов за 200 долларов?

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

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

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

1. Первый сайт, который я хочу вам показать, мне очень нравится. Помимо оригинально и ненавязчиво реализованного гида для посетителя из 5ти шагов, подкупают рисованные персонажи, которые разные для каждого шага. Нет лишней информации, в то же время все на месте. Супер!

Адрес сайта: http://armexdesign.ru

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

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

Адрес сайта: http://www.totemcompany.com.ua

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

Адрес сайта: http://www.sparkledesign.com

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

Адрес сайта: http://conus.kiev.ua

5. Сайт киевской веб-студии «Гравитация», которая пока даже не начала свою работу (запуск намечен на апрель 2010 года). Это как раз тот случай, когда дизайн незаметный и нужен только для того, чтобы правильно структурировать имеющуюся информацию. Я считаю, что посетитель любого сайта должен интуитивно понимать, на что ему нужно нажимать и куда он после этого попадет. Получилось это у меня или нет – решать вам, дизайн для этой веб-студии делал я:

Адрес сайта: http://www.gravitacia.com.ua

6. Креативный рисованный дизайн киевского интернет агентства WebKlaster. На данный момент на сайте есть 4 абсолютно разных детально прорисованных шаблона (главная, портфолио, контакты и услуги) на тему «из жизни роботов». Стоит посмотреть:

Адрес сайта: http://webklaster.com.ua

7. Дизайн сайта еще одной старой веб-студии из Киева. В ее портфолио можно найти сайты очень известных представителей крупного бизнеса (БМ Банк Украина, Российский Банк Развития), в то же время дизайн сайта самой веб-студии сложно назвать эффектным и запоминающимся. Кстати, это единственный сайт в обзоре, у которого нет favicon:

Адрес сайта: http://www.activemedia.ua

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

Адрес сайта: http://www.ardas.dp.ua

9. Киевская веб-студия «inVision» недавно также обновила дизайн своего сайта. Новый дизайн одного из самых известных разработчиков бюджетных сайтов выглядит так:

До этого немного устаревший дизайн сайта компании выглядел следующим образом:

Адрес сайта: http://invision.ua

10. Сайт российской компании “Demis group“, предлагающей разработку сайтов в Москве, Санкт-Петербурге, Нижнем Новгороде и Тамбове. Симпатичный дизайн с перегруженной текстом главной страницей. Видимо, seo-специалист компании считает, что это поможет сайту занять более высокие места в поисковой выдаче. А то, что продвижением своего сайта здесь занимаются серьезно, сомнений нет – у сайта компании на данный момент PR=5 и тИЦ=1100:

Адрес сайта: http://www.demis.ru

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

Адрес сайта: http://dvaslona.ru

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

Адрес сайта: http://www.diogenes.ru

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

Адрес сайта: http://evrosite.com.ua

14. Англоязычный сайт украинской компании «FutureVision» ориентирован на западный рынок. Дизайн спокойный и не напрягающий, от оформления колонок я просто в восторге. Стоит учесть, что дизайну более 5 лет и он до сих пор ничуть не устарел:

Адрес сайта: http://futurevision.com.ua

15. Последний сайт этого обзора дизайнов принадлежит московской web-студии «minisol». Он сделан в модном нынче стиле handmade, хотя не могу сказать, что выглядит это очень уж эффектно. Впрочем, я не поклонник этого стиля в веб-дизайне, вероятно, авторам сайта такой дизайн полностью подходит:

Адрес сайта: http://www.minisol.ru

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

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

2. Не ленится переименовывать слои и давать им осмысленные имена. Если в проекте 5-10 слоев и работать с ним 10 минут, то можно не заморачиваться с именами. Но в сложных макетах может быть пару сотен слоев, а имя слоя Layer 146 ни о чем не скажет через месяц ни вам, ни другому дизайнеру, ни заказчику. Разобраться, конечно, можно, но на этот нудный процесс уходит время и нервы.

3. Группируйте слои Photoshop в папки. Даже если вы строго следуете предыдущему совету и все слои у вас имеют оригинальные названия, нужно обязательно завести привычку группировать слои в папки. А в папках создавать подпапки, тем самым создавая четкую структуру проекта. Более того, названия папок верхнего уровня, которые содержат много других подпапок, лучше писать только прописными буквами. Тогда интуитивно понятно, что папка содержит подкаталоги.

4. Не бойтесь большого количества направляющих в проекте. Направляющие, сетки, линейки – это необходимые строительные леса для любого сложного проекта в Photoshop. Если не ленится их создавать, вы сэкономите много времени на последующем выравнивании и перемещении элементов дизайна. Тем более что комбинация CTRL+H позволяет быстро скрыть или снова отобразить направляющие, а комбинация CTRL+R – скрыть/показать линейки.

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

Например, у меня на отдельном разделе диска существует очень важная папка Work, а в ней содержатся папки текущих клиентов. Каждая папка названа так же, как компания, для которой делается сайт, или так, как пишется их домен. В этой папке, как правило, есть подпапки:

Кроме того, все важные файлы называются по определенной системе. Например, в названии макета дизайна сайта сначала идет название компании или домена, затем тип страницы (главная, каталог, контакты и т.п.), а затем версия дизайна. Выглядит примерно так: gravitacia_portfolio_03.psd.

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

6. Настройте интерфейс Photoshop по своему вкусу. Фотошоп – программа сложная и многоцелевая. Уберите ненужные вам окна и закладки с рабочей области – чем меньше элементов приходится таскать из угла в угол, тем больше экономится времени. Кроме того, знание комбинаций горячих клавиш поможет открывать и прятать ставшие ненужными окна. Например, я вообще не пользуюсь окном Navigator, потому что намного удобнее и быстрее использовать комбинации клавиш CTRL+ALT+НОЛЬ, CTRL+ПЛЮС и CTRL+МИНУС.

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

8. Как можно чаще сохраняйтесь и не ленитесь сохранять промежуточные результаты работы. Привычка жать CTRL+S каждые 5 минут – это очень хорошая привычка. Ничто так не портит настроение, как потерянные 2 часа работы в результате выключения света или сбоя программ. Также нередки ситуации, когда заказчик отменяет собственные изменения в дизайне, а у вас не сохранена предыдущая версия…

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

10. Читайте и выполняйте уроки Photoshop. Например, отличные уроки Фотошопа можно найти на globator.net. Даже если сам результат выполнения урока вам не нужен, его повторение дает знания и опыт, показывает придуманные кем-то оригинальные решения поставленной задачи. Любую работу можно выполнить разными способами, а опыт подскажет, какой способ даст наилучший результат с наименьшими затратами времени и энергии.

11. Купите хороший компьютер или немного обновите старый. Если же все вышеозначеные советы вам никак не помогли быстро освоить компьютерную графику и ускорить работу популярного графического пакета Photoshop, вероятно, вам следует менять свой рабочий компьютер. Или же можно заказать его апгрейд, ремонт компьютеров на дому или в сервисном центре. Вполне возможно, что просто докупив оперативной памяти (которая очень нужна при работе с большими «слоеными» psd-файлами) или «поганяв вирусы» можно добиться существенного прироста производительности рабочей машины.

Удачных вам творческих экспериментов!

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

Прежде всего я решил сделать новую иконку favicon.ico и сохранить ее в форматах BMP и ICO с помощью Photoshop. Я качестве изображения для иконки сайта я использовал черно-белый рисунок мультяшного персонажа Doodlez:

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

Как видно на скрине (его не сложно сделать самому), Total Commander неправильно отображает переименованный в ICO файл BMP. В стандартном окне Windows тоже не все гладко – вокруг переименованного изображения BMP появляется какая-то полурамка:

Теперь посмотрим как три наиболее популярных браузера (Mozilla Firefox 3, Internet Explorer 7 и Opera 9) отображают настоящую иконку favicon.ico в правильном формате ICO и переименованную в ICO с BMP. Сначала скрин с иконкой в формате ICO:

А так браузеры понимают переименованную из BMP иконку favicon.ico:

Как видно на втором скрине, Internet Explorer отказывается воспринимать иконку сайта, переименованную в ICO из BMP. А Mozilla Firefox в заголовке информирует, что открыт файл BMP, а не ICO, хоть и отображает его правильно.

Отсюда вывод: если вы хотите, чтобы все браузеры и программы правильно отображали вашу иконку, не поленитесь сохранить ее в правильном формате ICO. Переименованная из BMP иконка сайта не всегда отображается правильно. Аналогично, если просто переименовать фотографию в формате JPG в GIF, большинство программ просмотра графики покажут фотографию правильно, но переименованное изображение не будет GIF. Это будет просто переименованный файл, потому что конвертация из одного графического формата в другой – процесс намного более сложный, хоть и автоматизированный, чем простое переименование файла.

Post Scriptum:

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

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

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

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

1. Бесплатные шаблоны примитивны и неинтересны

Неверно. Бесплатные шаблоны есть разные, в том числе и достаточно изящные. Просто нужно уметь искать. Например, меня бы вполне устроили такие шаблоны для CMS Joomla.

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

2. Бесплатные шаблоны может использовать кто угодно, они не уникальны

Верно. Но, во-первых, неуникальность дизайна – это не так уж плохо. Сайты богатых компаний могут себе позволить тратить деньги на оригинальный и продуманный дизайн. Кроме того, есть много сферы бизнеса, где уникальный эффектный дизайн просто необходим (дома мод, сайты компьютерных и он-лайн игр, веб-студии и т.д.). Но для большинства компаний веб-сайт – это бизнес-инструмент, еще один способ донести до потенциальных клиентов преимущества своего товара или услуги и заработать на этом денег. Дизайн не является целью, это средство. Посмотрите на сайт amazon.com. Он впечатляет дизайном? Зато впечатляет прибылью.

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

Вы готовы платить за джинсы в 100 раз больше только потому, что таких больше ни у кого нет? А за уникальный автомобиль? Вы готовы жить в доме, построенному по индивидуальному проекту безвестного прораба «за те же деньги»? Если да, тогда реклама «будь крутым, отправь SMS и загрузи уникальный тетрис!!!» рассчитана не только на неокрепшую подростковую психику.

3. Если я закажу уникальный дизайн для своего сайта, такого больше ни у кого не будет

Как бы не так! Уникальный дизайн одного моего сайта неизвестные ламера выкачали через месяц после его установки. Почему ламера? Потому что у них хватило способностей только поменять логотип, на многих страницах клона даже ссылки на оригинал остались.

Помимо воровства дизайна и контента, с которым бороться пока не реально (будем смотреть правде в глаза), есть еще риск, что вам продадут «не совсем уникальный дизайн». Вы разве в курсе, как выглядят все польские сайты? А немецкие? А если шапку немного поменять и блоки местами переставить?

4. Бесплатные шаблоны сверстаны некачественно, там полно ошибок, код устаревший и вообще

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

Качественная «верстка за $20» бывает. Иногда. Но вероятность найти качественный бесплатный шаблон намного выше. В крайнем случае, верстку можно самому подправить или поменять некачественный шаблон. Благо, выбрать есть из чего. И не будет ощущения, что тебя кинули.

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

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

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

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

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

А вот на верстке экономить – себе дороже, хотя покупными ссылками на Блогуне можно раскрутить что угодно. Просто денег придется потратить больше.

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

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

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

7. Бесплатные шаблоны нельзя расширить и усовершенствовать. В нагрузку к бесплатному дизайну вы получаете кучу левых ссылок на порносайты

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

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

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

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

8. Бесплатные шаблоны часто заражены вирусами

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

Но если проверить шаблон перед распаковкой и установкой антивирусом, посмотреть немного код в блокноте, риск подцепить вирус с бесплатным шаблоном будет минимальным.

Пролог

Хотел бы рассказать небольшую историю, которая подойдет как эпиграф к этой статье. Года два назад я искал DVD диск на раскладках. Нужен был сборник дизайнерских программ, в котором, помимо Adobe Photoshop, Adobe Flash, Adobe Dreamweaver и Adobe Illustrator, были бы и CorelDraw, и несколько программ для создания иконок и скриншотов… Лень было искать и скачивать все по отдельности из интернета, а затем записывать на диск.

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

И тут парень засиял. С чувством собственного достоинства и с высоты своего дизайнерского опыта, он мне объяснил, что профессионалы сайты делают в Дримвивере. А остальные программы нужны для понторезов вроде меня. Он был так счастлив от переполнявших его знаний, что мне даже жаль было его прерывать и сообщать, что HTML-верстка сайта в Dreamweaver’е – это всего лишь один из этапов разработки сайта, далеко не первый и не последний.

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

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

С чего начать изучение веб-дизайна?

С установки программы Adobe Photoshop и покупки самоучителя Фотошопа. Знание Фотошопа обязательно для любого дизайнера, это стандарт. Даже если вы планируете в будущем заниматься flash-анимацией или 3D-графикой, без Фотошопа вам не обойтись. Не бывает дизайнеров, которые не могут убрать красные глаза на фотографии или уменьшить ее размер.

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

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

Не нужно покупать толстую книгу больше 1000 страниц – вы ее никогда не дочитаете до конца. То, что «Библия Photoshop» будет стоять на полке, практических знаний вам не добавит. Зайдите в книжный магазин, полистайте все книги, которые там есть. Выберите самую понятную для вас и не самую тонкую.

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

Стоит ли идти на курсы?

Однозначного ответа нет, дело вкуса. Курсы – это экономия времени и усилий, но зато они стоят денег. Выучить любую технологию, в т.ч. и Photoshop, можно самому по самоучителям и статьям в интернете, но времени на это уйдет намного больше. У книги сложно спросить, как сделать «чтоб вот тут вот так было и чтоб вот этого не было». А спросить хочется. Потому лично я советую немного почитать тонкую книгу по Фотошопу, а когда разберетесь, в чем разница между кистью и штампом, когда накопятся вопросы и появятся творческие идеи – идти на курсы. Вложенные в образование деньги всегда окупаются. Кроме того, время – деньги, и чем быстрее вы станете профессиональным веб-дизайнером, тем скорее сможете зарабатывать деньги.

Что учить после Фотошопа?

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

Веб-дизайнеру не обойтись без умения делать анимацию. Способов ее создания довольно много: от традиционной GIF-анимации и Flash, до новой разработки Microsoft Silverlight 2.0, которая в ближайшем будущем должна стать серьезным конкурентом для Adobe Flash. Анимировать изображения можно даже с помощью скриптов и CSS.

Если научиться создавать анимированные баннеры в формате GIF можно за пару дней, прочитав одну-две статьи, то изучение технологий Flash и Silverlight займет несколько месяцев и даже лет. Но результат того стоит. Флэш-аниматоры давно и надолго востребованы на рынке труда, а специалистов, разбирающихся в динамично развивающейся технологии Silverlight, почти нет. Так что без хлеба с маслом они не останутся.

Не менее перспективной и денежной является область 3D-анимации. Моделирование трехмерных объектов с помощью программ Autodesk 3ds Max и Maya все чаще применяется при создании серьезных сайтов. Хорошие специалисты в 3D-моделировании и анимации учатся годами, так что на высокооплачиваемую работу после прочтения пары уроков или даже целой книги рассчитывать не стоит.

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

Нет идеального графического формата. В то же время важно научиться использовать преимущества того или иного формата для конкретной задачи, минимизируя влияние его недостатков.

Растровые (точечные) изображения

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP. Это привычные нам фотографии, иконки и рисунки, которые состоят из точек (пикселей, растров).

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

При увеличении размера файлов растровой графики теряется четкость изображения, становятся заметными отдельные пиксели, из которых состоит картинка. Самым популярным пакетом для обработки растровой графики является, конечно же, Adobe Photoshop (PSD).

Растровый формат GIF, позволяет создавать анимацию. Правда, она проще и дольше загружается, чем flash, зато сделать gif-анимацию, как правило, намного легче.

Векторная графика: рисунки с помощью кривых

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

Векторные изображения легко редактировать. Все изображение или его часть можно трансформировать без потери качества. Графические программы, такие как Adobe Illustrator и Corel Draw, позволяют создавать векторные рисунки с помощью разнообразных инструментов по рисованию линий, как плавных, так и ломаных. Возможность рисования и редактирования многоугольников, эллипсов, стрелок и прочих графических примитивов всех размеров и расцветок позволяет дизайнерам создавать логотипы, иконки, визитки, персонажей и другую сложную графику, но реалистичности фотографий добиться практически невозможно.

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

Основные форматы векторной графики и программы по их созданию: Adobe Illustrator (AI, EPS), Corel Draw (CDR), Adobe Flash (FLA, SWF). К программам, создающим векторные изображения для интернета, также можно отнести новую разработку Microsoft Silverlight 2, аналог Adobe Flash CS4.

Современные программы обработки изображений позволяют смешивать векторный и растровый тип графики в одном файле. В Adobe Illustrator или Corel Draw можно экспортировать JPEG-фотографию или GIF-логотип, а в Photoshop вставлять векторные изображения в виде смарт-объектов.

Форматы AI, CDR, FLA и PSD в определенной степени являются промежуточными для веб-дизайна – браузеры не умеют отображать такую графику. Дизайн сайта сначала создается либо в Photoshop в формате PSD, либо во Flash в формате FLA (без помощи Illustrator или CorelDraw редко обходится) и только потом графика преобразовывается в интернет-форматы.

Зачем веб-дизайнеру векторные графические форматы

Веб-дизайнеры, кроме флэшеров, в основном, работают с растровой графикой. Дизайнер создает макет веб-сайта в Фотошопе, используя полученные от заказчика или найденные в интернете файлы других точечных форматов: фотографии и текстуры в JPEG, иконки и персонажей в PNG, флажки и логотипы в GIF. Макет сайта сохраняется в фотошоповском растровом формате PSD, потому что он сохраняет графику без сжатия и искажений. Заказчику показывается превью макета в формате JPEG или PNG, а после утверждения дизайна макет передается верстальщику в формате PSD. И уже после HTML-верстки сайт представляет собой совокупность картинок, формат и размер которых определяется характером графики. Безграмотно сохранять фотографии в GIF, а логотипы в JPEG. Важно четко понимать разницу между форматами и научиться пользоваться сильными сторонами каждого способа представления графики. Тогда картинки будут четкими, реалистичными и загружаться будут максимально быстро.

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

Научиться хотя бы азам работы в векторных пакетах веб-дизайнеру необходимо. Логотипы для сайтов в большинстве случаев заказчик предоставляет в CDR, AI или EPS. Кроме того веб-дизайнерам часто приходится делать флеш-баннеры, анимировать шапки сайтов, делать буклеты и визитки. Чем больше освоенных инструментов, чем больше знаний, тем больше вариантов решения поставленной задачи, тем меньше будет потрачено времени, тем лучше будет результат и тем больше можно заработать денег.

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