Что такое дизайн?

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

Давайте попробуем разобраться.

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

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

Тут человек должен задуматься, и уточнить: "Web-дизайнером, хочу создавать оформление Web-сайтов. Расскажите мне про web-дизайн", - это вполне логично, если учесть, что наш сайт освещает именно вопросы, связанные с Web. С удовольствием, но есть одно небольшое НО...

Путь в Web-дизайнеры.

Web-дизайн - всего лишь отросток такой области как графический дизайн. Фактически все основы Web-дизайн берет от графического дизайна, и если Вы хотите стать профессиональным Web-дизайнером, то без изучения основ и законов графического дизайна Вам не обойтись. Эти основы и законы изучают в художественных ВУЗах 5-6 лет.

Конечно, мы бы не выделяли Web-дизайн, как отдельную отрасль, если бы он не имел своих особенностей, и, безусловно, выбирая ВУЗ, вы должны учесть и это - убедиться, что в основной курс, включен курс лекций о Web-дизайне.

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

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

Графический дизайн. Что это такое?

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

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

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

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

Web-дизайн. В чем отличие?

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

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

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

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

Что особенного в графике, применяемой на web-страничках?

А то, что она имеет свои определенные ограничения, с которыми мы должны считаться и извлекать из этого выгоду.

Для использования в Web применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG, но он пока еще мало распространен и не все браузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.

Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.

Формат GIF поддерживает не более 256 цветов (меньше можно и часто нужно); Использует палитру цветов; Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP и, следовательно, GIF-файлы практически не сжимаются); Поддерживает чересстрочную развертку; Является поточным форматом, т.е. показ картинки начинается во время перекачки; Позволяет назначить любому из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIF-изображений. Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIF-изображений. Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах). Осуществлять задержку между показами изображений и т.д.

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

А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.

Формат JPEG позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов, причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение. Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов. Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством и в процессе загрузки постепенно улучшается.

Пожалуй, это все преимущества формата JPG, и основное его предназначение - хранение изображений фотографического качества.

Всю работу по обработке графики делайте в промежуточном формате.

Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).

Оптимизация графики

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

А с размерами фотографий нужно придерживаться определенного компромисса - не делайте их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не делайте их слишком большими, чтобы время не растянулось в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии, и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией я понимаю фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все Ваши фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.

В этой статье приведены некоторые базовые сведения по применению графики на web-страницах.

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

Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия.

Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.

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

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

Цвет - воспринимаемая сетчаткой глаза область светового спектра, видимая часть света с длинами волн в диапазоне от 400 до 700 нанометров. Определение, конечно же верно, но не передаёт всей важности цвета. Ведь всё, что нас окружает, не имеет в действительности никакой окраски. Просто у всех предметов разная способность отражать и поглощать свет, в результате чего мы видим отражённый телами или средами часть света, но уже с другим спектром.

Важность цвета в нашей жизни поистине огромна. Так же огромна она и в Internet, где всё на этом и держится. Умение правильно использовать цвет является атрибутом профессионализма Web-дизайнеров. Это умение позволяет оформителю правильно задать атмосферу сайта, погрузить посетителя в свой мир. Хороший дизайнер всегда сначала продумывает цветовую схему, потом только начинает создавать графику. Искусство оформления приходит с опытом и всегда зависит от количества экспериментов разработчика. Чем больше цветовых комбинаций Вы переберёте, тем быстрее найдёте лучший вариант для своего сайта. Конечно, при этом следует знать некоторые тонкости этого дела:

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

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

Контрастность

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

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

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

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

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

Синий: мир, спокойствие, спокойствие, устойчивость, гармония, объединение, доверие, истина, доверие, консерватизм, безопасность, чистота, порядок, лояльность, небо, вода, холод, технология, депрессия, подавитель аппетита.

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

Зеленый: природа, среда, здоровая, удачи, восстановление, молодость, бодрость, весна, щедрость, плодородие, ревность, неопытность, зависть, неудача.

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

Серый: безопасность, надежность, интеллект, степенный, скромность, достоинство, завершенность, твердый, консерватор, практический, старость, печаль, сверление

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

Белый: почтение, чистота, простота, чистота, мир, смиренность, точность, невиновность, молодость, рождение, зима, снег, хорошо, стерильность, брак (Западные культуры), смерть (Восточные культуры), холодный, клинический, стерильный.

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

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

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

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

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

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