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

Далеко не все веб-дизайнеры столь удачливы! К сожалению, некоторым из них приходится создавать сайты, считая каждую копейку, что не всегда означает, что у заказчика снижена планка ожиданий относительно результата деятельности многоопытного веб-дизайнера. В таких случаях вам необходима вся помощь, которую только можно получить. По большей части, веб-разработчики и дизайнеры щедро делятся своими знаниями и достижениями с коллегами. При таком «совместном» подходе ваши коллеги обычно стараются помочь вам в корректировке вашей работы и улучшении ее возможностей, то есть она становится более «вылизанной» и с меньшим количеством «дыр» и, к тому же, являются вашими фокус-группами и контролерами качества. Это означает, что решение довольно большой части проблем можно найти и бесплатно. Таким образом, вы можете залатать много дыр в выделенном вам скудном бюджете, если вы знаете, где что искать. В этой статье я представлю вам все виды свободных (то есть бесплатных) веб-ресурсов, равно как и предупрежу относительно тех ресурсов, которые могут показаться бесплатными, однако, таковыми не являются.

Творческие общины

Для начала я хочу остановиться на ресурсе Creative Commons (CC), который является не совсем источником бесплатного материала, а, скорее, источником лицензий, используемых людьми, предлагающими этот бесплатный материал. По их собственным словам, CC - это «некоммерческая организация, которая предлагает гибкие лицензии авторского права для творческих работ». Вы можете взять лицензию CC, с тем условием, что авторы могут требовать ссылки на их работы, когда вы их используете (условие подлинности) (attribution clause); вы можете ограничить использование вашей работы некоммерческими сторонами; вы можете установить, что любые части вашей работы должны быть выложены на тех же условиях, что и оригинал (условие равноправного наследования) (share-alike clause). Есть и другие пункты, и вы можете их комбинировать. Например, одной из популярных лицензий CC является лицензия равноправного наследования и подлинности (attribution share-alike license).

CC имеет большой успех – количество работ, доступных по лицензиям CC, огромно и возрастает с каждым днем. Литература, графика, музыка и т.д. могут быть доступны по этим лицензиям, и вы свободны в использовании их на своем веб-сайте до тех пор, пока будете следовать ограничениям, о которых говорилось выше. Первым большим шагом в изучении того, как найти бесплатные продукты для веб-дизайна, является изучение того, как искать материалы, предлагаемые по лицензиям CC. Вы можете попасть прямо к источнику, используя поисковую систему CC, которая позволяет воспользоваться всеми прелестями специализированного поиска в таких системах, как Google и Flickr, и бесплатных контент-коллекциях Flickr и DMusic.

Элементы стиля

Отличные таблицы стилей – костяк отличных сайтов – какими, в частности, являются каскадные таблицы стилей (CSS). К сожалению, поддержка многочисленных браузеров исключает использование больших таблиц стилей. Но вы все же можете сэкономить много сил, положившись на бесплатные таблицы стилей, или, по крайней мере, бесплатные модули элементов стиля. Довольно много веб-ресурсов предлагают инструкции по CSS и примеры их использования, однако, я хочу сфокусировать ваше внимание на сайтах, которые я нахожу наиболее содержательными, в смысле материала по CSS, который вы можете легко использовать на вашем сайте. Один из таких сайтов – это A List Apart, который является журналом ведущих веб-специалистов, в особенности его разделы "Code" и "Design". CSS Intensivstation Templates сосредоточены на нескольких ключевых шаблонах макетов, для структурирования вашего сайта.

Самым известным информационным центром по CSS является CSS Zen Garden, но стоит быть осторожным, используя этот ресурс. Проект CSS Zen Garden – это демонстрация всей мощи CSS. CSS – отличный способ отделить содержание от представления, но многие веб-разработчики поначалу избегали CSS, поскольку они не верили в то, что могут добиться с ним тех поразительных эффектов, каких они добивались, используя старомодные приемы HTML, типа таблиц размещения (layout tables) и невидимых изображений. CSS Zen Garden доказывает, что такое восприятие идет в разрез с хорошим стилем. Там есть страница с общедоступным содержанием, и веб-дизайнеры создают свои страницы, которые передают это содержание своим уникальным способом. Они используют хитрые размещения, и прекрасные изображения и цвета, обычно работая вокруг таких тем, как «Подобно морю» или «Музей». CSS Zen Garden не может использоваться как коллекция шаблонов; это понятно из предупреждений, которые можно часто там увидеть:

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

Кроме того, многие из тех, кто выкладывает свои работы на этот сайт, используют изображения, которые не являются бесплатными. Однако, администраторы сайта требуют, чтобы авторы работ делали свои CSS доступными по некоммерческой лицензии Creative Commons (см. Ресурсы), поэтому копирование CSS скорее всего не повлечет за вами какой-либо ответственности, но, все же, стоит в этом удостовериться, посмотрев заголовки авторского CSS-файла.

В начало

Графика

На профессиональных веб-сайтах используется все многообразие изображений, начиная со значков и маркеров, и заканчивая фотографиями и рисунками художников. Несколько сайтов предлагают графику без платежа за лицензию. Один из проектов, на который вы должны обратить внимание, это Open Clip Art Library (Открытая Библиотека Иллюстраций), коллекция иллюстраций, доступных для скачивания. Изображения здесь варьируются от простых и маленьких до сложных и больших. Большинство из них доступно в формате Масштабируемой Векторной Графики (Scalable Vector Graphics - SVG), который является открытым форматом, базирующемся на XML. Поддержка SVG интернет-браузерами постоянно увеличивается, но он все еще не является универсальным, поэтому в Open Clip Art Library имеются PNG-версии каждого изображения. Вы можете просмотреть или искать изображения прямо на сайте, но вы также можете скачать один из релизов, таким образом вы можете просмотреть изображения в режиме оффлайн. Качество изображений такое же, как и во многих коллекциях изображений, которые можно купить в магазине. Когда мне нужны маркеры, иконки и другие подобные средства выделения, я обычно ищу их в Open Clip Art Library, но, кроме них, есть еще ресурс MaxPower Free Icons, который представляет собой довольно хорошее собрание ссылок на бесплатные коллекции иконок. Говоря о магазинных коллекциях изображений, нельзя не упомянуть, что на многие из них действуют ограничения в использовании, даже несмотря на то, что вы КУПИЛИ эту коллекцию. Некоторые из них требуют дополнительной платы за использование из в коммерческих целях. Поэтому, при покупке такой коллекции, тщательно просмотрите Лицензионные соглашения.

Когда мне нужна фотография, я часто обращаюсь к CC Photo Pool (фото-пул) ресурса Flickr, который я уже упоминал, но также моим обычным источником является Yotophoto, поисковик для фотографий с лицензиями от различных вариантов CC до Публичного Домена (Public Domain). Один из моих любимых ресурсов – это stock.xchng. Этот сайт содержит впечатляющее количество фотографий очень высокого качества и очень хороший поисковый движок. Не все фотографии бесплатны, но, все же, большинство из них являются таковыми. Вы даже можете посмотреть, был ли у фотографии модельный релиз, что может быть важным при принятии вами решения об использовании фотографий с людьми. Меньший по размерам и не такой отшлифованный, но все же очень полезный сайт – это Open Photo, который на котором содержатся только CC-лицензированные фотографии. Также я использую MorgueFile, сайт, схожий с stock.xchng, с подобными же преимуществами поиска и богатым выбором метаданных. Все изображения на MorgueFile подчиняются специальной лицензии, не базирующейся на CC, но не включающей в себя плату за использование в личных или коммерческих целях. Мне нравится ответ на странице часто задаваемых вопросов на MorgueFile относительно того, почему они предоставляют бесплатные изображения:

Этот сайт следует известной традиции всемирной паутины - идее о свободе мыслей и свободе обмена информацией.

В начало

Инструменты дизайна

Некоторые веб-дизайнеры и фирмы предлагают инструменты интерактивно, для помощи другим и для увеличения своего сообщества. Наиболее распространенным является инструмент цветовых схем (color scheme tool), который позволяет вам выбрать наиболее эстетически приятное сочетание цветов для вашего сайта. Я и сам, конечно, не обладаю идеальными глазами для подбора цветов, поэтому я очень благодарен таким сайтам, как Color Scheme Generator на Wellstyled.com. Другой сайт, который предлагает много вариантов подбора цветовых схем, это SiteProCentral.com's HTML Color Code Combination Chooser.

Один из самых популярных веб-браузеров – также и один из самых изворотливых. Веб-дизайнеры долго сражались с особенностями Microsoft Internet Explorer 5 и 6, включая различия между версиями для Windows и Macintosh. Microsoft работает над 7-й версией своего браузера, которая обещает быть более соответствующей стандартам, а пока Дин Эдвардс (Dean Edwards) разработал решение на JavaScript. Цитирую сайт:

Библиотека JavaScript позволит IE работать в соответствии со стандартами. Она исправляет многие проблемы с CSS и позволяет прозрачным PNG правильно работать под IE5 и IE6.

Когда вы проектируете веб сайт, нельзя забывать и об аудитории Macintosh. Если для вас покупка Mac для тестирования вашего сайта – не вариант, тогда вы должны быть благодарны Дэниэлу Вайну (Daniel Vine) за то, что он создал iCapture. На этом сайте вы можете задать URL и получить PNG-изображение того, как ваш сайт выглядит в браузере Safari на Mac. Эдвардс, в свою очередь, предлагает ieCapture, который позволяет вам увидеть, как выглядит ваш сайт в IE7 beta для Macintosh.

В начало

Целые веб-макеты и шаблоны

Иногда, даже со всей полученной помощью от из указанных выше источников, я терплю поражение при сборе непобедимой веб-страницы. Я могу захотеть получить все сразу целиком, и, к счастью, есть несколько мест, где можно найти бесплатные полностраничные макеты с шаблонами HTML (и часто XHTML), графикой, таблицами стилей, подсветкой и многим другим. Open Web Design содержит почти две тысячи законченных шаблонов различного качества. Там есть система оценок, и иногда даже соревнования среди дизайнеров, проводимые в целях увеличения коллекции. Open Source Web Design – еще один подобный сайт такого же масштаба.

В начало

Резюме

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

Ресурсы

Научиться

• Оригинал статьи Get free stuff for web design.
  
  
• Многие современные ресурсы для веб-дизайнеров основываются на Каскадных Таблицах Стилей (Cascading Stylesheets - CSS). Просмотрите то множество статей о CSS, что есть в зоне веб-архитектуры developerWorks. Также обратите внимание на обширный ресурс CSS Wiki.
  
  
• Изучите больше об SVG в инструкции "Введение в Масштабируемую Векторную Графику," ("Introduction to Scalable Vector Graphics")"), которая научит вас, как использовать векторную графику.
  
  
• Будьте в курсе последних событий в современных технологиях, в этом вам поможет developerWorks technical events and Webcasts.
  
  
• Посетите developerWorks Web Architecture zone для получения большего количества статей, инструкций и ссылок на ресурсы, которые специализируются на веб-технологиях.
  
  

Получить продукты и технологии

• Ищите работы, предлагаемые по лицензиям Creative Commons. Используйте поисковик Creative Commons, который включает ссылки на множество других сайтов – коллекций CC-контента, включая Flickr's Creative Commons pool). Желающие узнать больше о технических аспектах работы Creative Commons следует обратить внимание на статью автора "Живой XML: творческие общины" ("Thinking XML: The commons of creativity") (май 2003 года).
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Примите участие в блогах developerWorks, и влейтесь в сообщество developerWorks.
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Творческие общины
• Элементы стиля
• Графика
• Инструменты дизайна
• Целые веб-макеты и шаблоны
• Резюме
• Ресурсы
• Об авторе
• Комментарии