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

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

Автор: Vaishali Singh, www.yshali.com
перевод - Татьяна Вукс
NunDesign: Материалы для web разработчиков

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

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

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

Можно перейти к некоторым из наиболее очевидных способов удостовериться, что цветовая гамма находится в гармонии с содержанием сайта:

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

Gap Online - пример тщательного подбора цветовой гаммы. Сайт использует монохроматичную сине-серую палитру, которая является очень эффективной для выделения представляемой одежды и моделей. Цвета мягкие, ненасыщенные - и весь проект Gap смотрится и воспринимается легко и ненавязчиво. Оценка: 5

В то время как BigSmart переполнен насыщенными, яркими, контрастными цветовыми комбинациями. Вся эта красочная мишура отвлекает внимание от той информации, которую она призвана донести. Все изображения одежды просто теряются в общем визуальном шуме. Оценка: 2-

Цвета устанавливают идентичность

Цвета сайта и логотип компании должны дополнять друг друга и существовать в одной палитре... Дизайн сайта должен быть спроектирован относительно лого так, чтобы логотип не торчал как воспаленный большой палец. Хорошим примером вышесказанного послужит цветовая гармония между сайтом Beck Interactive и их логотипом . Это тем более важно, что в 99% случаев логотип уже содержит специфические фирменные цвета той или иной организации.

Цветoвая палитра должна соответствовать содержанию сайта Содержание и цвет на сайте должны гармонично дополнять друг друга. Давайте вернемся к Gap Online еще раз: цвета, выбранные для дизайна не отвлекают от процесса получения информации, и это также создает дружественную привлекающую среду.

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

Цвет для групп населения

Цвета должны подбираться в зависимости от аудитории или целевой группы сайта... "The Meaning of Color" от Natalia Khouw обращает внимание на некоторые интересные факты, полученные из академических исследований о восприятии цвета различными группами населения, такие как:

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

Сочетания различных цветов Отдельный цвет сам по себе может быть слишком кричащим или слишком бледным - однако он может быть хорошо обыгран в сочетании с другими цветами. Сочетание черного и серого достаточно тоскливо, но попробуйте добавить к ним оранжевый и БА-БАХ! - получилась славная комбинация. (Совет: На самом деле черный и серый с ЛЮБЫМ другим единым цветом - динамит.)

Цвета и их естественные ассоциации

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

Некоторые общеизвестные цветовые значения/ассоциации:

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

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

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

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

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

Фиолетовый !!! - цвет фантазии, игривости, импульсивности, и мечтательного состояния. В его отрицательном качестве он может ассоциироваться с кошмарами или безумием.

Белый цвет

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

Чем меньше - тем больше Ограничивайте вашу цветовую палитру двумя или тремя главными цветами (полутоновыми вариациями) и небольшими акцентами в некоторых местах. Ограниченные цвета в вебе вообще и и цветовой палитры вашей графики в частности означают меньшие размеры файла, более быструю загрузку и, что наиболее важно, более читаемый и привлекательный сайт... который в конечном итоге приводит к большему успеху в бизнесе. Такие сайты, как WWW. Apple.com, WWW. EddieBauer.com использовали ограниченное цветовое пространство и все же выглядят отчетливыми; даже CoolHomepages главным образом использует 2 цвета, оранжевый и синий.

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

Всемирная Паутина переполнена стерильным дизайном. Сайты компаний Hewlett-Packard, IBM, Dell, Microsoft, и множества других фактически неотличимы друг от друга (у них сходные цветовые схемы и расположение элементов). Можно было бы сказать, что такая однообразность интерфейса делает Сеть более удобной для работы, но в действительности такие сайты не оставляют в памяти пользователей никакого следа и не способны создать положительный контакт со своей аудиторией.

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

Способность выделяться

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

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

Уникальная палитра, основанная на найденных в Природе цветах, может вызволить вас из цветовой унылости World Wide Web (рис.1), помогая создать более запоминающийся веб-сайт. Например, естественная комбинация цветов (рис. 2), использованная при создании макета этого сайта (рис. 3), полностью контрастирует с более "стандартной" версией дизайна этого же сайта (рис. 4). Мягкие цвета достаточно нежны, чтобы быть фоном, но вместе с тем они позволяют достаточно чётко выделить четыре основных информационных области сайта.

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

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

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

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

Рассмотрим два варианта транзакционных форм. Одна использует холодную, пугающую палитру. Другая - более удобна в использовании благодаря применению тёплой и дружелюбной цветовой палитры на основе естественных оттенков. Банковским служащим, постоянно работающим с этим сетевым приложением, наиболее дружественный интерфейс покажется наиболее удобным для работы.

Естественные цвета, помимо всего прочего, вдохновляют. Разнообразие Природы непрерывно предлагает новых идеи и подходы при выборе цветов. Например, цвета, использованные в компании по привлечению туристов в Дублин, оказались вовсе не оранжевым, зелёным и белым цветами ирландского флага, как вы могли бы подумать. Вместо них были использована цветовая комбинация, характерная для морского побережья Ирландии. Такое сочетание цветов является более живым и привлекательным, делая Дублин забавным и эмоционально открытым. Жалко, что эта схема не была использована на всем сайте Дублина, из-за чего он менее ярок и менее привлекателен.

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

Luke Wroblewski - автор замечательной книги "Site-Seeing: A Visual Approach to Web Usability". Он работает в LukeW Interface Designs, и ведет курсы дизайна интерфейсов в Университете шт.Иллинойс в Urbana-Champaign.

Автор : Luke Wroblewski
Источник: webmascon
Перевод - Александр Качанов

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

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

Предположим, что сайт, который вам предстоит построить, должен содержать много текстовой информации. На первой странице клиент желает разместить «что-то особенное». Что это нам даёт?

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

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

Часть «а» представляет собой так называемый splash-screen. Достаточно часто бывает так, что все страницы сайта имеют примерно один и тот же вид, но в нашем случае заказчику хочется разнообразия, которое мы ему и предоставим. Понятно, что на месте серого овала должна быть какая-то оригинальная картинка, на худой конец грамотно выполненный коллаж, имеющий непосредственное отношение к роду деятельности клиентской фирмы. Здесь вы видите только общий контур, который можно изменить тысячью способов. В середине овала располагается логотип, окружённый какими-то пиктограммами с названиями разделов. Теперь замените овал вашим коллажем, нарисуйте оригинальные картинки, соответствующие тематике разделов, подберите шрифт... результат будет совершенно не похож на приведённый выше рисунок, но идея сохранится. Добавлю, что на splash-screen'е обычно даётся описание авторских прав и/или имя студии или дизайнера. Второе -- далеко не всегда.

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

Придумайте ещё несколько вариантов. И если даже они будут отличаться друг от друга только цветом, можно будет СРАВНИВАТЬ, и соответственно у вас -- или у заказчика -- появится отправная точка, что-то, от чего можно будет оттолкнуться при дальнейшем обсуждении.

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

Не стану скрывать, описание одного из возможных подходов вышло довольно-таки убогим, но иначе и не могло быть: человека можно научить перегонять с место на место пикселы в Фотошопе, но даже самый первый шаг в дизайне он может сделать только сам, и первый же самостоятельно сделанный эскиз даст вам чувство уверенности в своих силах. Но не расслабляйтесь: нет гарантии, что первый же ваш шедевр удастся перевести в HTML. ;-)

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

До начала работы загляните в пункт меню File | Preferences. В разделе Display & Cursors установите тип курсора Brush Size для Painting Cursors и Precise для Other Cursors. Если этого не сделать, с функциями наподобие Crop будет затруднительно работать.

Установите разрешение 72 точки на дюйм, этот параметр является стандартным для веб-графики. Если вы захотите создать эскиз с разрешением 600-800 точек на дюйм (такой подход часто встречается у дизайнеров, привыкших работать с печатью) и перед сохранением его в нужном формате уменьшить разрешение до требуемого, имейте в виду, что из этого ничего не выйдет: качество картинки будет безвозвратно потеряно. Фотографические изображения после этой процедуры могут сохранить приемлемое качество, но все построения, основанные на графических примитивах, погибнут.

Выбирая размер картинки, принимайте во внимание разрешение экранов посетителей сайта (если вы работаете при 1600х1200, это ещё ничего не значит: обязательно посмотрите, как выглядит ваш рисунок при меньшем разрешении). Минимальной величиной, которую стоит принимать в расчёт, на сегодняшний день является разрешение 800х600, соответственно с вычетом правой полосы прокрутки ширина рабочей области эскиза должна быть не более 750-ти пикселов. Вертикальный размер для начала сделайте равным 500 пикселам. Понятно, что реальная высота страниц с текстом может быть значительно больше, но для тестового параграфа, призванного показать, как будут выглядеть заголовки, собственно текст и все обрамляющие его элементы дизайна, этого достаточно. Если вы делаете эскиз сплэш-скрина или любой другой страницы, которая должна уместиться в рабочую область браузера без полос прокрутки, этого даже слишком много... что, впрочем, касается и ширины.

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

Несколько слов о форматах графических файлов. Изображения, состоящие из граф. примитивов и использующие ограниченную палитру, нужно сохранять в формате GIF, позволяющем вручную определить количество цветов. То же относится к прозрачным картинкам: пункт меню File | Export позволяет добиться нужного эффекта при условии использования формата GIF89A. Фотографические изображения обычно сохраняют в формате JPEG (для этого удобно пользоваться функцией File | Save for Web). Если ваш эскиз включает в себя оба типа графики, картинку всегда можно разрезать на несколько частей, сохранить их в различных форматах и потом объединить в одно изображение в HTML-файле с помощью табличной вёрстки.

Осталось сказать несколько слов о тексте.

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

Правило первое: Чёрные буквы на белом фоне -- это нормально. Тёмные буквы на светлом фоне -- это приемлемо. Светлые буквы на тёмном фоне -- ваша концепция дизайна должна быть очень ценной, чтобы требовать такого сочетания цветов! Белые/синие/зелёные/красные буквы на чёрном фоне -- попытка не засчитана, попробуйте ещё раз.

Правило второе: Количество символов в строке не должно превышать 60-65. Учтите это, особенно если вы делаете «резиновый» дизайн, при котором ширина колонок таблиц (в том числе и той колонки, которая содержит текст) изменяется в зависимости от ширины окна браузера. Строка с большим количеством знаков не будет читаться.

Правило третье: Каждый параграф текста должен быть отделён от прочих элементов страницы полями цвета фона. Текст, «наезжающий» на границы колонки, в которой он расположен, не читается.

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

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

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

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

Как появился на свет этот сайт Для сайта «Artefact» я сделал всего два эскиза. Первый -- для страницы, на которую вы попадаете по адресу http://artefact.cns.ru.

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

Кстати, сейчас графическая часть сайта организована несколько иначе: вместо того, чтобы «нарезать» оглавление на много маленьких картинок, я сохранил его как один GIF-файл, использовав для расстановки сылок технологию Image Map, о которой мы поговорим в одном из уроков, посвящённых HTML.

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

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

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

автор: Кейт Робинсон (D. Keith Robinson) перевод: Максим Россомахин

Веб-дизайн и смежные с ним дисциплины всё ещё относительно молоды и все еще находятся на стадии развития. Мне часто задают один и тот же вопрос: "Как стать веб-дизайнером?". Ответ не прост. Существует множество различных способов стать профессиональным веб-дизайнером, и каждый столь же индивидуален, сколь непохожи люди, составляющие сообщество веб-дизайна.

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

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

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

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

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

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

Вам понадобится обширная программа обучения, акцентированная на основы и умения работать с программами вообще, а не с каким-то конкретными программами. Опасайтесь курсов, обещающих вас обучить только Flash-у или Dreamweaver-у. Эти навыки конечно тоже могут оказаться полезными, но ещё полезнее овладеть основами разметки и навыками работы с людьми. А конкретную программу можно изучить и позднее. Мне приходилось сталкиваться со многими курсами обучения, и на мой взгляд большинство из них страдали этим недостатком.

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

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

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

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

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

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

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