Совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять (Антуан де Сент-Экзюпери. “Планета людей”, 1939 г.)

Далекой осенью 2005 года с легкой руки издателя Тима О’Рейли в лекцион веб-разработчиков прочно вошел термин Web 2.0. Как и всякий новый термин, он до сих пор остается предметом оживленного обсуждения, в ходе которого определена главная особенность, уже не подвергающаяся сомнению. Придя на смену «старому» Web 1.0, Web 2.0 стал новой моделью существования интернет-сообщества, где рядовой пользователь становится непосредственным участником и создателем содержимого сайта. Отныне приоритетными задачами для разработчиков, стали дружественный интерфейс и простое, но вместе с тем стильное оформление, которые и определили характерные особенности дизайна в стиле Web 2.0.

Рассмотрим, какие же дизайнерские приемы используются чаще всего при разработке сайтов в стиле Web 2.0, так сказать основные особенности стиля.

Ничего лишнего. Простота становится главным приоритетом в дизайне. Отказ от дополнительных декоративных элементов радикально упрощает навигацию и концентрирует внимание пользователя.

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

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

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

Красный – стой, зеленый – иди. Выделенные разным цветом функциональные зоны помогают пользователю оперативно сориентироваться в навигации, основном контенте, ссылочном массиве или другом материале.

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

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

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

Крупнотекстовые вставки. Демократичный дизайн Web 2.0 позволяет использовать заголовки и другие текстовые вставки очень большого размера. Этот прием чаще всего реализуется в виде графического объекта и позволяет легко завладеть вниманием пользователя даже при беглом просмотре страницы.

Яркие цвета. Зеленый, приглушенный оранжевый, голубой, розовый – чаще всего эти светлые сочные тона используются в дизайне Web 2.0, и позволяют обратить внимание посетителя на важные элементы страницы.

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

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

Надеемся, наши рекомендации помогут разработчику учесть основные особенности дизайна в стиле Web 2.0, который сегодня остается не только проявлением моды, но и свидетельством популярности Web 2.0 технологий. Что касается примеров, то в интернете сейчас очень и очень много сервисов, которые могут не только похвастаться соответствующим дизайном, но и предлагают нам функционал в рамках знаменитого Веб 2.0. Много примеров подобных сайтов можно найти в моем блоге Вебдванольные заметки, где я собираю обзоры интернет сервисов и сайтов, полезных для людей. Там уж точно найдете много сайтов с дизайном Веб 2.0. Кстати, если говорить о дизайнах и примерах, то кое-что можно найти в подборке тренды веб-дизайна (в 2009 году, там 3 части), но вообще, если вы активных пользователь интернета, то найти подобные решения не так сложно:

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

P.S. Полезный сайт для работы в интернете – Справочная служба WebMoney – информация и консультации по Вебмани.
Постовой. В интернет магазине Viktory можете купить тренажеры киев, 24 часа в сутки 7 дней в неделю.
Интересная статья для тех, кто хочет завести домашнего питомца – породы кошек с красивыми фотографиями и описанием.

© Дизайн Мания, 2010. | Нет комментариев | Категория Статьи.

Интересные статьи по теме

• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Модные направления веб дизайна в 2009 (часть4) (8)
• Тренды веб-дизайна 2009. Часть2 (6)
• Якоб Нильсен – известный специалист по юзабилити (0)
• Тренды веб-дизайна 2009. Часть3 (7)

С чего начинается разработка любого сайта? Правильно, с идеи, но, что потом? Потом у всех по-разному, кто-то сразу включает свой любимый HTML-редактор, кто-то ищет похожий шаблон и так далее. Подходы у каждого свои, но многие дизайнеры (реже разработчики) часто схожи в одном — они зачастую игнорируют стадию «наброска». В то время как это очень важная стадия – я уже подчеркивали этот момент в статье 6 основных этапов разработки сайта, повторюсь и снова.

Создание наброска (или как его еще иногда называют «каркаса») в перспективе сэкономит массу времени и сил. Сделать набросок гораздо легче чем написать хотя бы базовую часть сайта. Он не содержит деталей, может быть лишен цвета и точных форм. Его задача — показать базовые элементы, и их расположение, то есть, макетирование и верстку. Сделать это может даже ребенок!

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

С помощью чего лучше делать наброски? Я люблю бумагу, поэтому для себя предпочитаю «набросать» что-то на бумаге. Это достаточно быстро и удобно, но есть один недостаток — в процессе креатива, нужно 200 раз что-то менять, перетасовывать, добавлять, а это означает что придется не единожды перерисовать все заново. Поэтому хорошим вариантом является использование специальных программ или веб-сервисов для создания «каркасов». Подобная публикаций идеально бы подошла для Вебдванольных заметок, но коль уж речь о дизайне сайтов, впору разместить ее здесь.

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

Mockingbird

Знакомство с подобными сервисами я начал с Mockingbird. Первое что меня порадовало — он бесплатный. Второе — без проблем работал на любых браузерах Mozilla/Google Chrome/Opera. Третье — в Mockingbird можно создать структуру сайта, что-то вроде сайтмепа. Принцип работы Mockingbird достаточно прост – вы перетаскиваете нужные элементы будущего сайта на страницу, тем самым формируя ее внешний вид. После этого можно показать заказчику или поделиться с друзьями одним кликом, выслав им ссылку.

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

Cacoo

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

Почему Cacoo хорош для таких задач? Сервис содержит богатую библиотеку элементов, то есть, вернее даже множество библиотек (вы можете имитировать даже нарисованный от руки эскиз).  При чем этот сервис не ограничивается одними лишь сайтами, там можно рисовать всякие “сетевые диаграммы” или блок-схемы. Где были разработчики когда я учился в институте – обе задачи периодически возникали, приходилось использовать Word:) На сайте разработчиков Cacoo есть небольшое видео-превью:

Хотя, конечно, лучше потестировать сервис на практике. Мне кажется с Сасоо работать было более удобно и, пожалуй, приятнее чем с Mockingbird. Но, это уже на уровне личных предпочтений, оба сервиса достаточно хороши.

Как и с помощью чего делать наброски — решать вам. Я делаю так – если нужно для себя, рисую на бумаге, если для кого-то, воспользуюсь Сасоо или Mockingbird. И вам, если вы еще не взяли себе за правило создание набросков, очень советую попробовать. Пользу оцените достаточно быстро!

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

© Дизайн Мания, 2010. | Комментариев - 5 | Категория Полезные сайты.

Интересные статьи по теме

• Бейджи в стиле web 2.0 для сайта (3)
• 6 основных этапов разработки сайта (6)
• Оригинальные генераторы бэкграунд (background) (3)
• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)

Последние несколько лет наметились положительные сдвиги в вопросе веб-стандартов. Сейчас уже не тот разброд и шатания что на заре интернета. Браузеры подравниваются в плане совместимости, современные CMS так же в большинстве своем так же прислушиваются к рекомендациям W3C. В общем, потихонечку дело идет к тому что когда-нибудь (возможно через много лет) мы, может быть, будем жить в хорошо стандартизированном и всецело совместимом интернет-мире. Ну, а пока до этого еще далековато, я хочу продолжить разговор о «правилах хорошего тона». В первой части, мы начали этот разговор и выделили так называемые вредные привычки HTML верстки, сегодня предлагаю почитать еще порцию советов по верстке.

Всегда объявляете тип документа (декларируйте DOCTYPE)

Даже если написан грамотный код, ваш сайт может выглядит непонятно как только по той причине, что вы забыли определить DOCTYPE. Потому что при отсутствии DOCTYPE, некоторые браузеры (из соображений обратной совместимости) будет пытаться отобразить вашу страницу как оптимизированную под самые старые версии браузеров (ради справедливости отмечу что некоторые браузеры попытаются трактовать ее так как будто тип документа объявлен).

Некоторые эксперты рекомендуют XHTML 1.0 strict doctype — строгая декларация, которая свидетельствует о том что сайт разработан строго в соответствии с современными веб-стандартами и трактовать его нужно однозначно. Более либеральные веб-мастера посоветуют XHTML 1.0 Transitional doctype, как менее строгий:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Вообще на моей практике пару раз возникали глюки при разработке сайтов из-за этого DOCTYPE и невнимательности – советую всегда при подключении CMS первым делом проверять совпадение  типа документа для верстки и создаваемого сайта. Кстати, недавно об этом писал подробную статью – задаем значение DOCTYPE в TYPO3 CMS.

Используйте осмысленные заголовки (<title>)

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

<title>Дизайн Мания - блог про веб дизайн (web design)</title>

Не забывайте про мета-тэги

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

<meta name="description" content="Дизайн Мания - блог про веб дизайн (web design): красивый сайты, логотипы, бесплатные иконки, шрифты, шаблоны, уроки и рекомендации, верстка и юзабилити." />
<meta name="keywords" content="дизайн мания, веб дизайн, web design, web дизайн, дизайн блог" />

Правильно используйте атрибут Title для ссылок, не забывайте про Alt

Многие веб-мастера вовсе игнорирует атрибут Title для ссылок, аргументируя это тем что главное – «якорь» ссылки. Атрибут Title «усиливает» якорную фразу. Поэтому мало того что он должен быть, он должен быть еще осмысленным, то есть например вместо:

<a href="http://blog.com/all-articles" title="Click Here">Click here.</a>

можно было написать что-то вроде:

<a href="http://blog.com/all-articles" title="A list of all articles.">Click here.</a>

Согласитесь, что смысла во втором случае побольше. Про атрибут Alt для изображений я вообще молчу – он просто обязателен и может привлечь дополнительный трафик с Google Images.

Пишите код только в нижнем регистре

Всегда используйте нижний регистр. <DIV> – неправильно, <div> – правильно. Это стандартная практика, так удобнее читать код.

Не забывайте закрывать тэги

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

<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>

И если, допустим, для тега IMG закрытие может быть трактовано просто ошибкой валидации, то “неосторожность” со списками и DIV`ами может дорого стоить. Помню раньше некоторые верстальщики любили не закрывать списки LI, что приводило к длительным поискам глюков при подключение то й же TYPO3. Найти незакрытые теги просто – нужно воспользоваться валидатором (см. следующий пункт).

Всегда проверяйте код на валидность

Очень многие веб-мастера игнорируют валидатор W3C. Даже если вы очень опытный и грамотный специалист, все мы где-то ошибаемся, что-то упускаем или забываем. Совсем не обязательно всегда работать с валидатором до фанатизма, но если какие-то ошибки обнаружатся, попытайтесь исправить хотя бы большую часть из них. В одном из блогов, кстати, мы с читателями уже обсуждали валидацию и валидный noindex для seo, где сошлись на мысли, что условие 100%-тной валидности для сайта не является обязательным, просто нужно исправлять явные ошибки.

Пишите чистый аккуратный код

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

Также крайне рекомендуется понимать назначение тех или иных элементов, используя их в нужное время в нужном месте. Например, крайне нежелательно использовать десятки вложенных DIV`ов там, где можно без них обойтись. Некоторые верстальщики лишний раз все усложняют. Для параграфов используйте P, не нужно ставить несколько BR, применяйте blockquote только для цитат и т.п.

Оставляйте комментарии в коде

Не факт что потом над сайтом придется работать именно вам. Даже если работать вам, через год или два очень просто забыть что к чему. Комментарии в коде в этом случае отлично выручат. Главное чтобы с ними не было перебора. Комментирование каждой строки кода — другая крайность. Такая навязчивая «забота» наоборот, мешает разобраться. Все должно быть в меру и там где это нужно.

Используйте условия для фиксов IE

В HTML вы можете использовать специальные условия для определения и работы с браузером Internet Explorer, если в файлах стилей имеются для него персональные правки. Например:

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->

Мало того, что подобные фиксы будут крайне наглядны для других верстальщиков, достаточно легко можно будет убрать с сайта поддержку старых ненужных браузеров по типу IE 6, лишь удалив одну строку.

Используйте ненумерованный список (ul) для навигации

Самое лучшее решение для навигации, которое только можно придумать в HTML верстке – это использование списков UL. Вместе с применением стилей CSS это позволяет создавать красивые, функциональные и наглядные менюшки. Например, что-то вроде этого:

<ul id="main_nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

В стилях прописываем код:

#main_nav { position:absolute; right:30px; top:40px;}
  				 #main_nav li { float:left; margin-left:2px; }
  				 #main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
  				 #main_nav li a.active,
  			#main_nav li a:hover{  background-color:#0b86cb;  }

И получаем:

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

P.S. Постовой. Главное направление деятельности нашей компании – продажа электрокаминов Dimplex от производителей по доступным ценам.
С помощью консультации юриста онлайн как говорит автоадвокат лишение прав можно избежать.
Интернет магазин Линзмастер предлагает контактные линзы с бесплатной доставкой по Киеву и Украине.

© Дизайн Мания, 2010. | 1 комментарий | Категория Верстка.

Интересные статьи по теме

• Вредные привычки HTML верстки (8)
• Уроки верстки – CSS подмена текста картинкой (6)
• Кликабельный логотип или ссылка поверх изображения (28)
• 6 основных этапов разработки сайта (6)
• Как сделать большой фон для сайта через CSS (35)

Стиль гранж (grunge) у веб-мастеров в моде уже достаточно давно. Гранж пришел на смену конфетному, геометрически правильному и стерильному Web 2.0, и во многом является его антагонистом. Хаос (в определенных рамках) вместо порядка (опять же относительного), приглушенные грязные цвета вместо ярких и чистых, неряшливые текстуры — вот основные отличительные черты гранжа.

Считается что стиль гранж в веб-дизайне (так же как в дизайне в целом, одежде и пр.) является частью субкультуры в которую вдохнули жизнь музыкальные коллективы – Nirvana, Pearl Jam и предшествующие Stooges или King Crimson. Веб-дизайн сложно как-то ассоциировать с музыкой или одеждой (поношенная, затертая  одежа из секондхенда), но основа одна — показная неряшливость и небрежность (которая видимо символизирует анархизм?).

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

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

Ну, а теперь, обратимся к тому, ради чего этот пост собственно и затевался. Хороший дизайн в стиле гранж не мыслим без гранжевых текстур. Это неотъемлемый элемент стиля. Часто дизайнеры даже разработку дизайна начинают с того что играются в фотошопе смешиванием различных текстур (например, разных слоев с текстурами с разными режимами наложения). Чтобы у вас тоже было чего смешивать, или безо всякого смешивания использовать в качестве фона ваших гранжевых дизайнов, предлагаю вам небольшую подборку гранжевых текстур:

Grunge Package

Скачать (зеркало) ~ 19 Мб // Источник

Grunge Package — четыре высококачественных текстуры, разрешение 2304х3072, «вес» – 19 MB. Вполне могут подойти для фона какого-либо гранжевого сайта без предварительной обработки.

Colorful Grunge

Скачать (зеркало) ~ 55 Мб // Источник

Colorful Grunge — еще пять текстур в высоком разрешение с deviantart. Каждая текстура с цветным оттенком. Тоже смотрятся весьма здорово и сразу готовы для использования для ваших дизайнов.

Autumn Grunge

Скачать (зеркало) ~ 15 Мб // Источник

Autumn Grunge — «осенний» пакет гранжевых текстур, отлично подойдут для создания «осеннего» настроения, правда, с немного мрачным акцентом.

8 Subtle Grunge Textures

Скачать (зеркало) ~ 39 Мб // Источник

8 Subtle Grunge Textures — набор разноплановых гранжевых текстур. Собственно, это и является главным достоинством «пакета». Все текстуры высокого качества, не очень “грязные”, доступны как светлые изображения, так и весьма темные.

24 High-Res Grunge Texture Pics

150 Мб // Источник

Набор 24 High-Res Grunge Texture Pics содержит 24 яркие и интересные бесплатные текстуры. И хотя весят они немало, думаю, профессиональным дизайнерам, работающим в стиле гранж, могут пригодиться.

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

P.S. Постовой. Предлагаю посетить весьма полезный сайт QuickTUTS где найдете уроки photoshop в большом количестве и на русском языке.
Лучший комфорт! Только лучшие гостиницы Киева! Добро пожаловать в гостиницу «Украина».
Если вам понадобилась порошковая покраска в Москве – обращайтесь в компанию Высокие технологии.

© Дизайн Мания, 2010. | 1 комментарий | Категория Текстуры.

Интересные статьи по теме

• Классические узоры и текстуры для сайта (1)
• Женщины и девушки в векторе (0)
• Девушки клипарт, скачать клипарт женщины (1)
• Якоб Нильсен – известный специалист по юзабилити (0)
• Экшены (actions) для Photoshop – экономия времени (6)

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

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

Обычно рабочий процесс над проектом представляется следующим образом:

• Изучение вопроса;
• Проектирование, разработка концепции;
• Разработка дизайна;
• Создание сайта;
• Запуск сайта;
• Поддержка сайта;

В качестве источника вдохновения была использована эта статья. Давайте рассмотрим каждый этап подробнее.

Изучение вопроса

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

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

Общее проектирование, макетирование

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

Последняя стадия проектирования — создания наброска, каркаса. Его можно сделать на бумаге, можно с помощью специальных программ и сервисов. Если вы работаете с клиентом, обязательно утвердите ваш базовый макет перед тем как двигаться дальше. В принципе, на своей практике, я видел, что “базовые наброски макета” не всегда утверждались. Исключением можно считать лишь разработку логотипов, где важно понимать сразу в каком направлении двигаться. А вот что касается дизайна сайтов, то не все заказчики могли понять что-либо из наброска, как правило определялась основная структура сайта, расположение блоков и цветовое решение. Хотя в какой-то степени это и можно считать “наброском”:)

Разработка дизайна сайта

Пришло время «нарастить на наш каркас мясо». Многие дизайнеры или разработчики сразу начинают с этого этапа, игнорирую «изучение вопроса» и «макетирование». На мой взгляд это не совсем неправильно, точнее сказать, что с подготовительными этапами вам будет работаться гораздо проще и эффективнее – все базовые вопросы и детали решите для себя раньше, сейчас лишь сконцентрировавшись на создании дизайна. Таким образом, изучив предмет и пройдя через этап создания упрощенного макета, вы заранее определите содержимое и потом уже ничего не упустите из вида. Разработка дизайна — это этап определения с формой в которую вы облачите ваше содержимое, это детализация макета.

Обычно такой дизайн создается в Photoshop или другом графическом редакторе. Готовый дизайн должен практически полностью соответствовать конечному продукту (элементы, цвета, картинки, шрифты), разве что текст можно вставить пока постановочный. При этом нужно помнить, что разработка дизайна включает не только основную страницу, нужно разработать также и подстраницы, а может быть и “дополнительные версии” для мобильных устройств или каких-то других специальных целей.

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

Создание сайта

На этом этапе нам нужно «картинку» (детализированный дизайн) превратить в живой сайт. Этот этап у разных веб-мастеров существенно варьируется. Все зависит от того как, на основе чего и для какой CMS (если она предусмотрена) вы пишите код. У опытных мастеров обычно уже есть заготовленные «болванки» HTML/CSS, поэтому после «нарезки» нужных элементов в Photoshop, процесс разметки может занять не так уж и много времени. Не стоит при этом забывать о красивой и правильной HTML верстке.

После написания, отладки, тестирования в различных браузерах, валидации и исправления ошибок, можно переходить к следующему этапу. Кстати, после этого этапа лично я также предоставляю результат работы заказчику для утверждения, если сайт разрабатывается на cms typo3 где необходимо подключать (адаптировать) созданный HTML в админке. Если говорить о вордпресс, то там, скорее всего, лучше сразу создавать шаблон без “предварительной верстки”.

Запуск сайта

Если ваш сайт безупречно «вылизан», безукоризненно работает и всем нравиться, его можно наконец опубликовать. Не забудьте все хорошенько проверить (хорошо иметь на этот случай предстартовый чеклист), после того как закачаете сайт на хостинг по ftp, еще раз тщательно все потестируйте. В принципе, можно заниматься созданием сайта сразу на хостинге – в таком случае, во-первых, не придется осуществлять “переезд сайта” с локального компьютера, во-вторых, все тестируется в реальном режиме в реальных условиях (и настройках хостера), в-третьих, заказчик может следить за процессом выполнения работы.

Поддержка сайта

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

P.S. Постовой. Советую почитать полезную статью каким должен быть блог фрилансера – размышления и реальные советы по ведению подобного проекта.
Приглашаем посетить проект АЙК Обнинск – информационный портал о жизни и новостях Обнинска.
Элитная и качественная косметика и парфюмерия в интернет магазине MakeUp – бесплатная доставка по Украине.

© Дизайн Мания, 2010. | Комментариев - 6 | Категория Статьи.

Интересные статьи по теме

• Инструменты и сервисы для создания набросков дизайна (5)
• Тренды веб-дизайна в 2009 году. Часть1 (13)
• Тренды веб-дизайна 2009. Часть3 (7)
• Типографика для веб (8)
• Полезные советы по HTML верстке. Часть 2 (1)

В дизайне существуют различные техники создания изображений для сайтов, в частности иконок. Применение каждой из них вызвано общей стилистикой проекта – будь то high-tech или стилизация “под старину”. В Дизайн Мании можно найти примеры использования разных стилей, сегодня речь пойдет об иконках, нарисованных от руки. Они отлично подходят для определенного рода проектов, для некоторых и вовсе незаменимы. В любом случае, в ряде случаев они будут предпочтительнее чем поднадоевшие всем иконки в «конфетном» или «веб2нольном» стиле. В связи с этим, предлагаю вашему вниманию пять симпатичных набора нарисованных от руки иконок. Думаю, вам наверняка что-то приглянется:

Artistica Icon Set

Скачать (зеркало) ~ 7 Mb // Источник

Artistica Icon Set – большой набор, состоящий из 60 различных нарисованных от руки иконок, которые разработаны студией Rabotilnica. Иконки самой разной направленности, размеры от 24х24 до 256х256 пикселей, они очень тщательно проработаны и выполнены просто в наивысшем качестве. Имеются форматы иконок PNG, Ico и для Mac (последние 2 можете найти на сайте дизайнеров). Кстати, для коммерческого использования этих рисованных иконок придется заплатить, для личных целей вроде никаких ограничений нет.

Sketch’d up!

Скачать (зеркало) ~ 6 Mb // Источник

Sketch’d up! – Еще одни гигантский набор, включающий социальные иконки, инфо-иконки, иконки для рабочего стола и многое другое. Формат иконок — векторный EPS поэтому вам придется готовить конечные файлы самостоятельно. В наборе представлено 99 иконок.

ColorStroked Freehand Icon Set

Скачать (зеркало) ~ 1 Mb // Источник

ColorStroked Freehand Icon Set — содержит 29 рисованных иконок в формате PNG. Разрешение иконок 150х150 пикселей. Иконки социальные, поэтому ориентированы в первую очередь на блоггеров / веб-мастеров. Исполнение весьма приятное, что-то вроде заштрихованных иконок.

Social Icons Hand Drawn

Скачать (зеркало) ~ 900 Кb // Источник

Social Icons Hand Drawn — набор, содержащий 18 иконок, нарисованных от руки, для популярных социальных сервисов (Твиттер, Фейсбук, Дигг и прочие), как и предыдущий набор, может отлично подойти для вашего блога. В наборе представлены разные типичные размеры от 24х24 до 64х64 пикселей.

Handy

Скачать (зеркало) ~ б,4 Mb // Источник

Handy — качественно сделанные иконки в высоком разрешении (256х256 пикселей), отлично подойдут для блогов, потому что содержат преимущественно социальные иконки, вроде Facebook, Digg и прочее. В комплекте имеются векторные исходники, поэтому вы можете при желании доработать кое-что по собственному вкусу.

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

P.S. Постовой. Интернет компания Интелсиб предлагает комплексное продвижение сайтов в Яндексе по Москве – качественно, доступно и быстро.
Если вы хотите купить контактные линзы в Киеве или Украине – закажите в магазине Linzmaster.
ы приехал в Киев? И хочешь забронировать отель киев. Рекомендуем гостиницу «Русь».

© Дизайн Мания, 2010. | Комментариев - 9 | Категория Иконки.

Интересные статьи по теме

• Социальные иконки из дерева и винтажные в виде марок (5)
• Оригинальные иконки для блога (10)
• Новые RSS иконки для блога (5)
• Набор монохромных векторных иконок (+ исходники) (3)
• Иконки для твиттера (7)

Сегодня в Дизайн Мании гостевой и очень практичный пост от веб-дизайнера Сергей Мишалов, который ведет дизайн блог о своей дизайнерской работе, делится опытом, советами и не только.

Урок на самом деле не сложный и ориентирован на новичков. Пентул (Pen Tool) — подручное средство каждого дизайнера, поэтому рано или поздно вам все равно придется осваивать инструмент. Лучше рано, чем поздно, от малого к большему.

Отрисовка у вас займет примерно 2 часа драгоценного времени, но практика никогда и никому еще не вредила. Целью урока является демонстрация произвольной работы с инструментом “Pen Tool” и дальнейшая обработка созданных форм. Я остановился лишь на “эскизном” варианте, учтите, что всегда можно доводить иллюстрацию до технического предела, не жалейте времени, качество того стоит, главное не переборщить.

Итак, первый этап включает в себя создание примитивных форм, используем исключительно Pen Tool. Буду надеяться, что техника вам уже знакома. Тут не надо торопиться и как можно меньше редактировать точки, чтобы форма в итоге получилась менее “угольной”.

Инструмент той же группы “Convert Point Tool” помогает править форму, зажимаете “Alt” и тяните точки как вам угодно.

1. Создаем общую форму. Наш пример похож на руку или туфлю, если приглядеться. После того как замкнули круг формы, нажимаем правый клик и выбираем “Make selection“

Заливаем поле цветом и двигаемся далее.

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

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

3. Далее рисуем вдавленную узкую часть, которая залита темным цветом, а сверху боковину, красим в цвет посветлее.

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

Вторым этапом является работа с свето тенью. Свет и тени я рисую мягкой кистью белого и черного цвета соответственно.

7. Рисуем засвет кончика крыла, оперируясь на лево-верхний источник света.

8.9.10. По тому же принципу побелил еще несколько частей.

11. Слегка затенил цвет реакторов, подтер мягкой кистью разделительную форму.

12.13.14. Переходим к теням. Затемняем все той же кистью, только черного цвета заднюю часть и еще нескольких мест, смотрите рисунок.

Следующим этапом являются цвет и детали.

15. Рисуем прозрачной кистью 15-20% прозрачности свечение от реактора, рассеянный свет, а где он необходим, аккуратно подтираем непрозрачным ластиком.

16. Рисуем голубой блик. Я применил инструмент “Polygonal Lasso Tool”

И далее размыл края фильтром “Blur > Gaussian blur”.

17. Рисуем такой же блик, только уже, ярче и четче.

18.-24. По тому же принципу и порядку делаем правый реактор.

25. Рисуем рефлекс, падающий от левого реактора на кончик крыла.

26. Дорисовываем фары со всех сторон, можете их акцентировать цветом.

27. Рисуем индикатор батареи.

28. И значек производителя.

Заключительные штрихи. С фоном я заморачиваться не стал, лишь размыл в движении (Blur > Motion Blur) и подогнал все под голубой тон. Вы, как я уже отписывал выше, можете довести иллюстрацию до более серьезного уровня.

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

От лица всех читателей Дизайн Мании также спешку поблагодарить Сергея Мишалова, автора персонального дизайн блог и, как мы видим, хорошего дизайнера по совместительству. Кто бы мог подумать, что из формы больше похоже на обувь получится такой вот летательный аппарат будущего. Как по мне, получилось очень красиво!

P.S. Постовой. Интернет компания Интелсиб предлагает качественное продвижение сайтов в Яндексе по Москве и других регионах.
Новости Обнинска и жизнь города на сайте АЙК Обнинск – социально-информационный портал.
Позаботься о своей красоте ! Лучший spa отель в Ялте. Жемчужина Крыма – гостиница «Ореанда».

© Дизайн Мания, 2010. | Комментариев - 4 | Категория Уроки фотошопа.

Интересные статьи по теме

• Формы для фотошопа (custom Photoshop shapes) (0)
• Создаем обои Windows 7 для рабочего стола (2)
• Экшены (actions) для Photoshop – экономия времени (6)
• Фрактальные кисти для Photoshop (3)
• Уроки верстки – CSS подмена текста картинкой (6)

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

• Обычный поиск изображения в Google Image Search – картинок реально много, можно найти практически что угодно. В поиске картинок гугла есть некоторые опции, позволяющие отбирать изображения по цвету, размеру, качеству.
• Еще одна моя статья бесплатные иллюстрации для блога расскажет где также можно найти картинки кроме поисковиков.
• Ну, и последний вариант – купить изображения.

Понятно, что покупка не сильно дешевый выход, зачастую качественные изображения могут стоить достаточно дорого, тем не менее, выход есть, и называется он – royalty free photos. Это такой вид лицензирования изображений, при котором фотография может продаваться неограниченное количество раз. Хотя при этом все права на фото остаются у его автора, что получает за использование фиксированный (неизменяемый в дальнейшем) гонорар. После оплаты вы сможете использовать картинки как и где захотите.

Не смотря на то, что понятие royalty free все же не означает бесплатные изображения, как я думал, в нем есть ряд существенных преимуществ.

• Небольшая стоимость картинок, как правило $1-$5.
• Простота покупки в фотобанках.
• А также возможность использовать фото несколько раз, о чем я уже сказал выше.
• Огромнейший выбор во всех крупных фотобанках мира – думаю, миллиона royalty free изображений вам хватит вполне.

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

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

Getty Images

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

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

Сохранив эту картинку на компьютер можно будет потом в фотошопе просто отрезать ненужную ее часть. В том же gettyimages есть много фоток, где этот процесс не только не повредит качеству картинки, но и будет вообще незаметен!

Кроме того:

• В некоторых сайтах водяной знак на изображении может быть отображен снизу, а картинка при этом быть доступной в разных фотостоках – совместив обе части в фотошопе вы получите полноценное небольшое изображение:)
• Иногда при наведении в превью фото не имеет никакой защиты.
• Бывает, что при клике на изображении для подробного описания показывают миниатюры до 400-500 пикселей без каких либо водяных знаков (продаже подлежат картинки в полноценном размере).

В общем, все зависит от конкретного фотостока, который сейчас достаточно много. Но, возвращаясь к теме royalty free фоток, предлагаю посетить еще такие сайты.

Jupiter Images

Morgue File

MorgueFile.com

Free Digital Photos

Corbis Images

SXC

Every Stock Photo

Flickr

Stock Vault

Search Creative Commons

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

P.S. Постовой. Если хотите разнообразить свой микроблог, закажите разработку twitter backgrounds у профессионалов.
В блоге SEOшника и финансиста вы узнаете как зарабатывать в сети начинающим без опыта.
Хостинговая компания GigaHost предлагает надежные хостинг в украине – качественно и недорого.

© Дизайн Мания, 2010. | Комментариев - 7 | Категория Полезные сайты.

Интересные статьи по теме

• Инструменты и сервисы для создания набросков дизайна (5)
• Экшены (actions) для Photoshop – экономия времени (6)
• Эксклюзивные твиттер иконки для блога (9)
• Формы для фотошопа (custom Photoshop shapes) (0)
• Флаги стран – картинки, иконки (9)

Давно в Дизайн Мании не было статей по тематике верстки, которая весьма и весьма актуальна для многих вебмастеров. Сегодняшний пост можно назвать в какой-то степени “обучающим” и полезным не только для начинающих верстальщиков, но и бывалых работников, которые не застрахованы от таких простых, но ненужных ошибок при HTML верстке. Вообще правильнее сказать даже не ошибки, а типичные вредные привычки и, то что называется, «плохая школа». Веб-дизайн — такая штука где до сих пор не существует 100% стандартов. Уже одно это является благодатной почвой для того чтобы каждый писал код так как заблагорассудится. Но, исправляться никогда не поздно! Давайте избавимся хотя бы от десяти распространенных пороков. Для каждой из вредных привычек HTML верстки вы также найдете небольшое пояснение, которое поможет понять почему нужно использовать тот или иной вариант.

Размещение блочного элемента внутри строчного

В HTML каждый элемент может быть представлен как строчный или блочный. Каждый тег по своей природе может быть блочным или строчным. Блочные элементы составляют структуру документа, например DIV. Строчный элемент может размещаться внутри блочного, но не наоборот. Собственно, достаточно распространенная ошибка для некоторых начинающих оптимизаторов, которые добавляют ссылки в элементы H1, H2 и т.п. Хорошо, что многие wordpress шаблоны используют правильную HTML верстку.

Отсутствие атрибута ALT для картинок

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

ALT должен описывать картинку, поэтому, использовать его в виде alt=”image” – неправильно. Если ваша картинка используется чисто в декоративных целях, можно оставить атрибут пустым (alt=”"), но присутствовать он должен в любом случае. Следует также заметить, что атрибут alt используется для поиска по картинкам, поэтому при оптимизации сайта данному аспекту нужно уделять отдельное внимание.

Неиспользование списков

Некоторые веб-мастера почему-то избегают использование маркированных списков <ul> (и <ol>) даже там где они нужны. Это не является большой ошибкой, но от оптимального правильного решения тоже далеко. Незачем громоздить нелепые конструкции когда есть специально предназначенные для этого теги.

Использование тегов <b> и <i>

Теги <b> и <i> превращают текст соответственно в написанный жирным (полужирным) и курсивным начертанием. По современным представлениям лучше для этих целей использовать <strong> или <em>. Кстати, говорят, что для продвижение сайтов лучше использовать именно последние обозначения, так как они имеют бОльший вес.

Многократный обрыв строки <br />

Тег <br /> который используется для обрыва строки должен использовать только однократно. Для всего прочего есть абзацы, параграфы и прочее, стиль которых должен быть задан в CSS.

Неправильное перечеркивание

В былые времена использование тегов <s> и <strike> считалось нормой, сегодня они тоже устарели. Поэтому советуем вам взять на вооружение <del> и <ins>.

«Стилизация» строчных элементов в HTML

Все веб-мастера 1000 раз слышали что «оформлять на месте» строчные элементы неправильно. Таким образом теряется смысл семантического веб-дизайна. Если вы не можете задать стили всем элементам в CSS, значит вы не способны на грамотный дизайн.

Добавление или удаление границ в HTML

Тоже самое касается тега <border> для элементов. Эти вопросы должны определяться исключительно таблицей стилей.

Игнорирование заголовков

Нам даны заголовки разных калибров – от <h1> до <h6>. Нужно это использовать! Грамотно разбитый на заголовки текст принесет свои дивиденды — и читателям удобно и поисковым системам нравится (то есть будет полезно при seo оптимизации). Неправильно использовать в качестве заголовков полужирное или жирное начертание.

Мерцающий текст

Помимо того что теги <blink> и <marquee> не является официально одобренными W3, они просто уродуют текст. Есть масса других способов как обратить внимание читателя на тот или иной момент.

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

P.S. Постовой. Обратите внимание на дизайн услуги в интернете по созданию шаблонов, логотипов и других элементов дизайна.
Вы можете скачать бесплатно фильмы на ViMaxFilms.
Вы можете забронировать авиабилеты через агентство «Элит Турс» на украинские и международные рейсы.

© Дизайн Мания, 2010. | Комментариев - 8 | Категория Верстка.

Интересные статьи по теме

• Полезные советы по HTML верстке. Часть 2 (1)
• Уроки верстки – CSS подмена текста картинкой (6)
• Кликабельный логотип или ссылка поверх изображения (28)
• 9 советов по типографике сайта (8)
• 6 основных этапов разработки сайта (6)

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

Чтобы вам не копаться и не искать такие классические узоры и текстуры когда они вам потребуется, я решил сегодня приготовил небольшую подборку. Вообще, классическими их, конечно, называть не совсем правильно. Это слишком грубое определение, потому что среди представленных ниже узоров есть и баррочные, и античные, и готические. Несмотря на то, что это разные стили, я решил что их вполне можно объединить в одну группу. Кстати, для простоты и удобства я объединил все текстуры из поста в один архив, который можете скачать здесь (зеркало) ~ 2,4 Mb.

Итак, классические узоры и текстуры для сайта:

Hand-Drawn Scrolls

Hand-Drawn Scrolls

Antique Engraved

Antique Engraved

Charcoal Demask

Charcoal Demask

Sample Damask

Sample Damask

Grim Lady Patterns

Grim Lady Patterns
(в наборе идет 4 разных узора)

Применение этих узоров думаю большого труда для вас не составит. Часть из представленных паттернов имеет в архиве, как “слитый” в .png узор, так и “исходник” (обычно векторный eps), поэтому у вас есть возможность даже что-то поправить или переделать в файле (если позволяют умения и есть желание). Использовать данные классические текстуры и узоры можно как для персональных, личных так и для коммерческих проектов.

P.S. Постовой. Сайт Карьера в Украине — быстрое решение проблем трудоустройства.
Статья по психологии отношений – научиться любить себя – о самооценке и самокритике.

© Дизайн Мания, 2010. | 1 комментарий | Категория Текстуры.

Интересные статьи по теме

• Формы для фотошопа (custom Photoshop shapes) (0)
• Красивые готические шрифты (4)
• Зимние текстуры: лед, снег и мороз (1)
• Гранж (grunge) текстуры для сайта и дизайна (1)
• Векторные иконки на Хэллоуин (Halloween) (2)