В процессе создания сайта возникает вопрос зачем нужен дизайн и нужен ли он вообще?
Если посмотреть на сайт Микрософт, то можно сделать вывод, что без дизайна можно очень даже неплохо жить. Но туда люди вынуждены ходить, независимо доставляет это им удовольствие или нет. Это как в поликлинику, а кто придет к вам второй еще раз, если ваш сайт не будет радовать глаз? Эксперты говорят: "Если оформление выдержано в элегантном и уместном стиле, но сайт неудобен в использовании, он обречен на првал." Но с другой стороны: "Если сайт совершенен в удобстве использования, но ему не хватает элегантного и уместного стиля оформления, он обречен на провал." Конечно оригинальное графическое оформление- это не панацея. Для того, чтобы создать успешный сайт, требуется интересный материал, логичная схема навигации и тщательно продуманная архитектура. Кроме того необходимо четкое понимание структуры для того, чтобы привести разрозненные элементы сайта к общему знаменателю и придать ему целостный характер. Дизайн является неотьемлемой частью сложного создания сайта. Относиться к оформлению сайта, как к простому "украшательству" означает рисковать успехом любого сайта.
Подражательный менталитет подтачивает Web-дизайн. Логика такова: "Зачем изобретать велосипед, когда такие сайты, как microsoft.com, ibm.com, доказали свою успешность? Почему бы не скопировать дизайн нескольких знаменитых, часто, посещаемых сайтов в Сети?" Все довольны. Клиенты получают сайт со знакомым оформлением, дизайнеры освоили стиль, с разными оттенками синего, с левой панелью навигации, аккуратный трехцветный, базовый фотографический стиль. И вся коммерческая Сеть выглядит более или менее одинаково. Так в чем проблема, если и посетители, и дизайнеры, казалось бы, довольны? Проблема в том, что посетители на самом деле не довольны. Люди заходят на сайт microsoft.com, не потому, что он хорошо оформлен, а потому, что им приходится делать это-их программное обеспечение опять "полетело". Конечно, есть такие сайты, как yahoo.com которые преуспели частично благодаря удобству своего дизайна. Но не все сайты я вляются поисковыми системами(на самом деле их мало). Понятно, что yahoo.com часто посещаем, он быстро загружается, и по мнению многих прост в использовании. Можно предположить, что Yahoo представляет собой идеально оформленную поисковую систему. Но именно поисковую систему. И что с того? Насколько нужны вашему сайту предметные указатели со ссылками? Неужели трехсекундная загрузка имеет такое значение, что вы откажетесь от использования картинок в формате JPEG? Нет. Не все сайты предназначены для электронной торговли. Не все сайты представляют собой онлайновые журналы. Не все сайты являются поисковыми системами. Для выполнения разных задач требуются различные стили- следовательно, необходимы и разнообразные приемы Web-дизайна.
Почему сайт ibm.com стал выглядеть так, как он выглядит? А история такова. Появляется новое средство информации-Сеть, и IBM обращается к компании, занимающейся печатью, с просьбой оформить корпоративный Web-сайт IBM. Тогда компания, имевшая дело только с печатными средствами информации, выдает в Сеть набор уже готовых печатных материалов IBM(фотографии, копии каталогов), и готово присутствие в Сети. ; " Но они, должно быть, знают, что делают, это же IBM!" И вы копируете ibm.com, другие копируют вас, и вирус печатного оформления распостраняется в сети.
Зачем Сети, где тысячи разнообразных компаний представляют тысячи разных товаров и услуг, выглядеть однородно? На заре своего развития телевидение представляло собой просто радио с телевизионными камерами в студиях. Прдюсерам потребовалось некоторое время, чтобы понять, что ведущий стоя рядом со стиральной машиной, не должен говорить: "Привет, я стою здесь рядом со стиральной машиной". Сколько времени потребовалось Web-дизайнерам, чтобы понять, что нет нужды обозначать ссылки словами "щелкните здесь"? В конечном счете людьми(даже заказчиками) движут чувства. Любой акт успешной коммуникации затрагивает не только ум, но и все человеческое существо - тело, душу и дух. Да, посетители должны суметь воспользоваться сайтом. Но они также должны иметь возможность почувствовать ваш сайт. Сеть не база данных. Сеть является способом коммуникации. Да через Сеть можно передавать различные эмоции, даже со скоростью 56К.
Реалистические текстуры фона. Полезно начинать с уже "состарившихся" обьектов реального мира. Подойдите к обьекту так близко, что сами обьекты станут неразличимы. Начните снимать собственно текстуру - прожилки листа, облупившуюся краску. Для того чтобы еще больше "состарить" картинки, напечатайте их, затем в прямом смысле скомкайте и отсканируйте скомканый листок. Или напишите что-нибудь на них. Или поцарапайте их. Затем обработайте изображение в программе Photoshop, используя шумовые и другие фильтры, чтобы достичь зернистого, потрепанного вида фона. Ели поверх фонового изображения планируется разместить HTML текст, позаботьтесь о том, чтобы оставить для него пустое пространство. Можно использовать многократно повторяющиеся фоновые изображения, которые дают эффект цельной непрерывной текстуры. Создавать такой задний фон несложно. Начните с маленького квадратного изображения текстуры, которую вы хотите использовать в мозаике. Пусть его размер будет 100х100 пикселов. В Adobe Photoshop в меню Filters/Others откройте фильтр Offset. В пункте Undefined Areas выберите вариант Wrap Around. Затем в полях Horizontal и Vertical введите половинные значения размеров изображения по горизонтали и вертикали(50x50) Щелкните OK.
Изображения переднего плана с неровными границами. Секрет создания изображений с неровными границами заключается в том, чтобы выбрать неправильные органические формы, а затем сохранить их в формате прзрачного GIF- изображения, учитывая при этом преобладающий цвет заднего плана. Если в качестве исходного материала вы используете фотографии, выполните следующие действия в Photoshop. 1. Создайте текстурное изображение заднего плана. 2. При помощи "Пипетки" выберите доминирующий цвет текстурного изображения заднего плана. 3. Откройте файл с изображением переднего плана. 4. При помощи инструмента "Ведро с краской" заполните фоновую область изображения переднего плана выбраным цветом. Продолжайте заливку цветом до тех пор, пока не замаскируете фоновую область настолько, насколько это возможно. После завершения работы единственным незамаскированным обьектом должно быть изолированное изображение переднего плана. 5. Выберите инструмент "Волшебный ластик", щелкните по цвету фона, которым вы все закрашивали. Тогда фон станет прозрачным. 6. Сохраните изображение переднего плана в формате прозрачного GIF. Этого же результата можно добиться используя и слои.
Прозрачные анимированные GIF-изображения. GIF-анимацию надо использовать разумно и осторожно. В окне браузера ничто так не привлекает к себе необоснованного внимания, как движение. Независимо от того, какую программу вы использовали для создания анимации, нужно сделать GIF-изображение прозрачным, точно так же как поступали с другими изображениями переднего плана. Возможно даже придется устанавливать прзрачность покадрово. При создании анимации убедитесь, что центральный обьект ни во что не упирается и не выходит за границы картинки. В противном случае после того, как вы настроите прозрачность, центральный обьект будет как будто бы исчезать за невидимыми границами GIF-изображения, тем самым показывая его квадратные очертания. Вам же нужно, чтобы центральный обьект казался ничем не ограниченным. Должно возникать ощущение, что он просто существует на странице и способен передвигаться так, как ему заблагорассудится.
Намеренное использование вертикальной прокрутки. Корпоративный дизайн стремится к тому, чтобы втиснуть как можно больше информации "над сгибом", в той части окна, которую посетитель видит изначально. Однако сейчас использование вертикальной прокрутки является почти нормой. Даже неопытный пользователь знает, что ему, возможно, придется прокрутить страницу, чтобы дойти до самого низа. Так почему бы не поиграть с вертикальной прокруткой? Почему бы не создать длинные страницы, оформив их таким образом, чтобы они зрительно предлагали посетителю прокрутьть немного вниз? Верткально протянутые элементы переднего плана длжны говорить зрителю: "Ты видишь еще не все; внизу есть кое-что еще." Вы не пытаетесь уместить лучшие элементы страницы "над сгибом", напротив центральный обьект начинается в середине экрана и продолжается далее вниз. Можно наверху не располагать никаких ссылок, и посетитель вынужден воспользоваться прокруткой, чтобы найти ссылку, ведущую на следующую страницу. Такая вынужденная прокрутка, возможно, покажется недостатком на коммерческом сайте, но она принуждает посетителя к исследованию, поддерживая его интерес к содержимому сайта.
Начинающие дизайнеры нарочито демонстрируют каждый придуманный элемент, как будто они так интенсивно работали над созданием своих тяжеловесных эффектов и претенциозных трехмерных форм, что просто не могут отодвинуть часть своего проекта на задний план. Лаконичные, выразительные элементы находятся на переднем плане и формируют каркас, в то время как сложные детали на заднем фоне придают всему проекту красоту и богатство звучания. Возможно на первый план вынести массивные и яркие фигуры, в то время как на заднем размещены тонкие, приглушенные схематические линии.
О низкокачественном грандж-дизайне Речь идет об андеграундном неординарном дизайне, который, как бы противостоит сложившейся оформительской культуре, погрязшей по уши в упорядоченных скоординированных композициях. Размеры шрифтов резко различаются в пределах одной композиции. Направления линий намеренно смазаны, из-за чего они размываются, накладываются и пересекаются друг с другом, а текст сам по себе становится видом абстрактного искусства. Шрифты расплываются по краям, неаккуратны и неточны, невероятно похожи на шрифты авангардистских плакатов конца 60-х годов, до появления цифровой печати. Карсон(David Carson) говорит "...если шрифт невидим, то невидима и статья, и тогда ее, возможно, не прочитают, потому что - по крайней мере в случае с этой аудиторией, и я думаю, что не только с этой, но и другими - они предпочтут смотреть телевизор или видео. Вы даете кому-то увесистую страницу, заполненную серым шрифтом, и говорите: "Прочитай этот блестящий рассказ", и большинство людей, скорее всего, скажут: "Не похоже, чтобы это было интересно. Давай попробуем найти что-нибудь более занятное." Я думаю, что если шрифт невидим, он оказывает медвежью услугу действительно хорошей статье." Такие приемы вносят в страницу, посредством шрифтов, некий аналоговый шарм. Большинство страниц выполняется в Photoshop - путем экспериментирования с кистями, совмещения слоев, применения фильтров к отдельным изображениям и включения в готовый коллаж какого-либо удручающего по виду текста. Этот "дизайн" Photoshop затем разрезается на кусочки, сохраняется в формате GIF или JPEG и вновь собирается на Web-странице. Обратите внимание на пятна, неровные шрифты, на линии напоминающие строчную развертку на экране телевизора. Все это должно придать Web-странице более "печатный" вид. В то время, как пятна имитируют дух "аналоговой" печати, линии создают подобие аналогового телевидения.
