Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт.
Обучение дизайну. Фото. Гламурные галереи |
|
Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт.
Обучение дизайну. Фото. Гламурные галереи |
|
|
 |
 |
|
 |
|
 |
 |
 Про дизайн и web дизайн |
|
 |
 |
 |
|
 |
 |
 Главная Галереи Дизайна (29) |
 |
 |
|
 |
 |
 |
|
|
|
 |
 |
|
|
|
|
 |
Design Doktor volume 2 (сильно сокращенный вариант рукописи) Оглавление:
Часть 3. Годом раньше или после сборки доработать напильником 
Свой первый сайт я написал c нуля. И, не смотря на примитивность работы,
не на шутку этим горжусь. Программа "Блокнот" и учебник по html Э. Шафрана.
Тщательно копируются рекомендуемые теги, выстраивается замысловатая мозаика
непонятных символов. Шаманство! Строчки кода мне мало о чем говорят и это
неудобно. О существовании визуальных html редакторов я еще не знаю и при
открытии странички в браузере немного офигеваю. Красочная куча хлама из
невероятного нагромождения текстов, фотографий и других безвкусных шлакоблоков.
Тогда я первый и последний раз пользовался web клипартом. Результат ошеломляющий.
Я сделал это! Ну, по крайней мере, оно не взорвалось.Интернет был доступной сказкой. Все в нем было интересно и непонятно. Правила общения на форумах, особенности регистрации бесплатных почтовых ящиков. На создание ящика на mail.ru ушло больше часа (тогда я первый и последний раз читал пункты пользовательского соглашения). Но о том, что есть бесплатные почтовые ящики, я узнал позже. А сначала у меня был корпоративный почтовый адрес, и приходящие мне письма читались всеми менеджерами компании - было весело. Это было золотое время, когда я освоил замечательную программу Photoshop 4-й модели и рвался применить на практике полученные знания. Я знакомился с особенностями и секретами html. Искал интересные примеры сайтов. Скачивал понравившиеся страницы, печатал их и разбирался с кодом. Теперь для эффективной работы у меня было все: компьютер, доступ в Интернет, учебники, толстая пачка листов с распечатанным на принтере кодом страниц сайтов и большое желание сделать хороший сайт, по крайней мере, функциональный. Помню, что недолго занимался абстрактными упражнениями. Не прошло и месяца, как знакомый, выступая в роли, клиент менеджера, предложил мне сделать реальный коммерческий сайт - продукт за деньги. Если бы заказчик приблизительно представлял уровень моего знания web технологий, первая наша встреча благополучно стала бы последней. Но заказчик не знал, что я ничего не знал. А я из своей врожденной скромности умолчал о действительном положении вещей, и все остались довольны. Что интересно, ситуация с неосведомленностью заказчика в элементарных понятиях сайтостроительства за прошедшие годы не изменилась ни на пиксель. И этим успешно пользуются разного рода начинающие и не очень "пионеры" от веба. Теперь вспоминая тот эпизод, немного сочувствую заказчикам. Тем, кому лень проверить квалификацию нанимаемого специалиста. Так появляются нефункциональные сайты и несправедливая обида заказчика на все племя web разработчиков.  Совет
заказчику: Внимательно проверяйте компанию или дизайнера-исполнителя насколько
они компетентны. И вы практически никогда не будете разочарованы.
Я взял задание и приступил к работе над своим первым коммерческим проектом. Скажу вам это не то же самое, что делать сайт для себя, особенно если ваш опыт web разработчика равняется нулю. Началось самое интересное. Я понял, что "Блокнот" это не тот редактор, в котором я смогу сверстать даже простую страничку, а значит нужно срочно искать альтернативу. И грея аванс в кармане, я приступил к поискам удобного инструмента. Правильно, отправился за дисками с подходящим софтом. Мне повезло - нашел что искал. Изучив и применив на практике разные html редакторы, я понимаю, что мой выбор это визуальный html редактор Dreamweaver. Тогда это была панацея, но он радует меня и сейчас. При таком количестве ошибок сайт работать не может, но он работал! 7 лет не перестаю удивляться, тому, что его приняли. Ошибки в программировании, ошибки в юзабилити (тогда я не знал этого слова), ошибки в композиции контента (этого слова я тоже не знал) и web дизайне. Была непоколебимая уверенность дилетанта, что все делаю правильно. Был основной критерий - "чтобы IE это показывал". Небольшой
штришок: В то время имела место сейчас незаслуженно подзабытая "война браузеров".
Бодались бесплатный Internet Explorer (IE) и платный Netscape Navigator
(NN). Обе программы были популярны, и соотношение пользователей этих программ
варьировалось 50х50. Сделать сайт, одинаково хорошо отображающийся в обоих
браузерах, было делом непростым даже для опытного разработчика. Об этой
"войне" я тоже не знал. Меня спасло то, что пользовался я Netscape Navigator
(друг поставил, когда настраивал мне компьютер), и сайт тестировал в этом
браузере. А если сайт хорошо выглядел в NN, то в IE он выглядел еще лучше.
Я долго занимался полиграфией и думал, что разработать интерфейс web сайта так же просто как нарисовать картинку на бумаге. Обманчивое сходство web дизайна и графического дизайна ввело в заблуждение. На самом деле эти области дизайна живут по своим законам и отличаются друг от друга как две галактики. Тогда я даже не задумывался об этом. Моей целью было сделать сайт. Заметьте не "лучший сайт" и даже не "хороший сайт", а "просто сайт" т.е. нечто работоспособное и похожее на сайт. Я проектировал сайт, пользуясь полиграфическими приемами. Я мыслил как полиграфист, как промышленный дизайнер, как дизайнер по наружной рекламе, как художник. Как кто угодно, только не так как это нужно для успешного web проекта. На
заметку дизайнеру: Разрабатывая живую интерактивную композицию, предназначенную
для просмотра на мониторах компьютеров, вы должны уметь мыслить определенными
категориями web. Вы должны во всех деталях представлять и уметь прогнозировать
жизнь вашего будущего сайта. Понимать те проблемы, с которыми может столкнуться
ваш продукт в процессе своего существования и уметь предвосхищать такие
проблемы. О бизнес модели странички не было и речи, рисовалась композиция по стандартному (кстати, вполне удачному и работоспособному) шаблону, где основные элементы это "top", " left menu", " body" и "bottom". Такое построение элементов странички является общепринятым и многим привычным унифицированным композиционным стандартом для верстки контента. Об особенностях пиксельных форматов страничек я, разумеется, не имел ни малейшего представления и сделал макет точно в размер экранного разрешения моего монитора, компонуя элементы дизайна сразу в программе верстки. Графику брал из бесплатного клипарта, html не знал в принципе. Шел год 2000. Если и сейчас (начало 2008 г.) в НН нет квалифицированных курсов по обучению web проектированию. Что можно говорить о том времени. Но прекращать работу я не собирался. Неверно выбранная модель странички поначалу задержала мою работу. Я по простоте душевной решил сделать сайт на фреймах. Помучившись и проработав несколько выходных по 10 часов с нулевым результатом, отказался от этой дурацкой идеи. На
заметку дизайнеру: чтобы главная страничка, выполненная в жесткой верстке,
просматривалась на экране обычного CRT монитора c разрешением 1024 x768
пикселя целиком и без полос прокрутки нужно габариты web макета делать равными
955 x 600 пикселей. При резиновой верстке, где горизонтальная величина задается
значением 100%, сумма длин графических элементов по горизонтали не должна
превышать 955 пикселей. Меньше можно, больше - нет. Резиновая верстка, разумеется,
предпочтительнее, т.к. при этом используется вся область монитора.Шапка сайта - картинка с названием компании, буквы объемные. Это убого и в редких случаях объемный шрифт выглядит в web солидно. Если вас посетило непреодолимое желание сделать таким шрифтом заголовок сайта или слоган или еще что-то. Не спешите, успокойтесь, выпейте кофе и подумайте 120 раз. Возможно, обычный шрифт без наворотов и деформаций будет выглядеть правильно, а "красивый" объемный образец шрифта, на разработку которого вы потратили много времени сил и денег, в контексте страницы будет смотреться работой дилетанта. Вряд ли открою большой секрет, если скажу, что шрифты, представленные на сайте в виде графических изображений не индексируются поисковыми системами и соответственно не находятся по поисковым запросам, что не очень хорошо для сайта. Если деваться некуда и пришлось загонять шрифт в графику, проверьте сначала грамматические Ашипки и не забудьте, потом поставить на такой графический элемент альтернативные тексты (alt и title) с ключевым словом или фразой. На
заметку дизайнеру: С недавних пор у пользователей поисковиков типа Яндекс
и Google появилась возможность поиска по изображениям, которые ищутся поисковиками
по альтернативному тексту и по названиям их файлов. Незадолго до начала работы над сайтом я прочитал в одном руководстве, что шрифты в текстовых пунктах меню, расположенных друг над другом, нужно "доводить" так, чтобы сравнять их длины - это называлось почему-то нюансировкой. Никогда так не делайте! Редко когда количество слов и буковок в разных пунктах меню одинаковое. А если вы пытаетесь деформировать пропорции шрифта - вы его портите, забывая, что гарнитура шрифта это законченный проект дизайнера-графика и что постороннее вмешательство в чужой дизайн не проканает без ущерба для этого дизайна ну никак. Это касается и применения выравнивания (justify) к тексту, когда в большинстве случаев слова немилосердно разлетаются, слипаются или растягиваются, оставляя между собой жуткие дыры. Совет
дизайнеру: Лучший вариант графического оформления текстовых пунктов меню
- тематические иконки. Иконки в web это маленькие сюжетные картинки характеризующие,
например, пункт меню. В иконках может быть зашифровано предложение. Например,
иконка форума, на которой изображено несколько человечков читается как "Группа
общающихся между собой людей". Пиктограммы тоже могут украшать и дополнять
текстовые пункты меню, но в отличие от иконок это сильно абстрагированные
изображения, обозначающие, как правило, одно слово. Например, пиктограмма
печати страницы на принтере, изображающая принтер, читается как "Принтер"
или "Печать". Графические кнопки для меню я делал в специальной программе для создания кнопок, считая, это верным решением. Бред конечно. Только созданная вручную в стиле дизайна сайта графическая или текстовая кнопка меню навигации максимально органично впишется в композицию странички. Такой графический элемент улучшит дизайн, обогатив его информативно. У меня получились тогда прямоугольные "батоны" являющиеся ко всему прочему java апплетами, которые я гордо разместил в коде сайта. Меня прикалывало, что они меняли форму при наведении курсора. Когда я принес эскиз странички заказчику и попробовал показать его, открыв на компьютере заказчика, меня ждал сюрприз. На месте графики вылезли крестики "файл не найден", а все потому, что программа верстки прописала абсолютные пути к этим файлам. Но то, что сейчас воспринимается как позор с большой буквы "П" тогда меня нисколько не смутило. Я вообще не понял причину проблемы. Пришлось идти домой и разбираться. Следующий визит к заказчику был удачнее, в этот раз я ограничился неправильно прописанной кодировкой. Что такое кодировка я не знал. И пользуясь html редактором, оставил все настройки по умолчанию. Это была кодировка Western (Latin1). На
заметку дизайнеру: Правильное указание кодировки - очень важный момент в
верстке. В России распространена кодировка сайтов Windows-1251 или KOI-8.
Так исторически сложилось.Преодолев все препятствия, которые сам же и соорудил, я сделал web страничку, которая выглядела в браузере похожей на web страничку. Совет
дизайнеру: Здесь я не пишу о войне браузеров Internet Explorer и Netscape,
которую мне пришлось застать. Потому, что сейчас эта тема не особенно актуальна
и интересна только археологам. Но, для уверенности, что сайт будет выглядеть
как положено у максимального числа пользователей, не ленитесь тестировать
сверстанные странички в различных браузерах и операционных системах. Так
вы будете знать, насколько уродливо он смотрится, например, у пользователей
Linux и возможно внесете в уже готовую верстку изменения, которые если не
исправят положение, то в какой-то степени улучшат визуальный образ вашей
странички. Имейте в виду, что вашу страничку пользователи смотрят под различными
операционными системами, при различных настройках монитора и качестве видеокарт.
В разном настроении, умственном развитии и состоянии наркотического опьянения.
Заказчик не обладал художественным вкусом, и при утверждении дизайна мне чертовски повезло. Но от изучения html меня никто не освобождал. О чем мне напомнил "вражеский" программист, пожелав увидеть максимально адаптированный к web макет. Я тогда его успокоил, дав понять, что вершину моего мастерства он уже видит перед собой. И что раньше чем через год ситуация вряд ли изменится к лучшему. Образ мышления программиста для меня и сейчас остается, мистическим и загадочным. И если есть в мире шаманы - это определенно программисты. Важно:
Стилевое единство - один из признаков грамотного дизайна. Разумеется, можно
каждую страничку обозначить персональным графическим элементом, но такой
элемент должен являться частью общего стиля. В противном случае посетитель
может перестать понимать находится он на вашем сайте или уже случайно перескочил
на другой сайт. Чем больше на сайте оригинальной информации, тем лучше он индексируется и ценнее выглядит для поисковых систем. Все графические изображения на сайте по той же причине должны быть снабжены альтернативным текстом. Будьте внимательны, когда ставите ссылки со страниц своего сайта на страницы чужого. Если чужой сайт не качественный, ваш сайт будет понижен поисковиками в рейтингах. В процессе сеанса одновременной верстки и проектирования на меня снизошло озарение, и я понял основополагающую (возможно я старомоден, но она остается для меня таковой, и сейчас) идею верстки web страниц. Эта идея заключается в одном слове: "Таблица". Это когда все наполнение странички очень удобно размещать в специально созданной для этого фиксированной таблице. Эврика! Переломный момент. Это решало множество проблем и делало web проектирование более простым, понятным и неизмеримо захватывающим. Сайт я в итоге домучил и отдал, тире сбагрил для дальнейшего использования по назначению. Так вполне благополучно для меня завершился мой первый проект, сделанный на заказ. Почему я говорю благополучно для меня? Как вы уже поняли, особой оригинальностью мой дизайн не отличался, несмотря на похвалу заказчика. Но первый шаг был сделан и процесс пошел. А тот сайт еще несколько лет висел в интернете, и заказчик был доволен в течение всего периода висения сайта. На заработанные деньги я выучился и сдал на права. Оглавление:
|
|
|
 |
 |
|
|
 |
|
 |
 |
 |
|
|
 |
 |
|
|
|
