Профессия веб-дизайнер

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

Определение «веб-дизайн» очень многогранно. Веб-дизайн это процесс создания страниц с последующим размещением в интернете. Но под этим термином скрываются разные по своей сути операции. Это подготовка и обработка изображений, а порой и рисование, это создание понятного и удобного интерфейса, так как современный стиль «web 2.0» подразумевает интерактивность общения в интернете, ориентированность на клиента – посетителя сайта, плюс это ещё и программирование, с помощью которого становится возможной интерактивность.

Естественно, что в больших студиях происходит разделение специализаций при работе над проектом. Большая студия — это уже предприятие. Программисты пишут код, «фотошоперы» готовят изображения, верстальщик объединяет их усилия в html. Чтобы успешно начать работу в большой студии, необходимо набраться опыта, который обычно приобретается в маленьких студиях. А вот в маленьких студиях всю эту работу выполняет обычно один человек. Веб-дизайнер маленькой студии — это квинтэссенция данной профессии.

Если вы решили стать веб-дизайнером, то вам необходимо быть готовым к тому, что почти всю работу придётся делать самому. Если вы владеете приёмами работы в Photoshop, Gimp, Corel, Xara или других программах для создания и обработки растровых и векторных изображений, это будет замечательно! Это будет отлично, но недостаточно. Допустим, вы нарисовали красивую картинку, но сайта, скорее всего, из неё не получится.

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

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

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

Установите на домашний компьютер локальный сервер и попробуйте воспроизвести те же самые эффекты на нём. Никогда не делайте полной копии чужого сайта. Уважайте труд коллег! Если вам нужен какой-нибудь скрипт, найдите бесплатный аналог. Поверьте мне на слово, в сети есть всё и многое – бесплатно. Не качайте чужие картинки, у всех картинок есть авторы, уважайте их труд. А в первую очередь — уважайте себя! Сделайте всё сами и получите +10 опыта :). Не усложняйте свою работу, старайтесь работать проще. Хотя: «Сначала ты делаешь просто и убого, затем сложно и убого. После, поднаторев, сложно и хорошо, а вершина мастерства — просто и гениально».

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

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

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

Наступает пора html-вёрстки. На первых этапах сайтостроения дизайнеры обычно используют специальные программы для вёрстки — визуальные редакторы, которые автоматизируют некоторую часть черновой работы при вёрстке. Я, например, начинал когда-то, давным-давно, с Microsoft FrontPage. Но постепенно приходил к тому, что набросав черновик сайта во FrontPage, затем открывал его в блокноте и вычищал то, что мне не нужно, правил сайт. Теперь всю вёрстку я веду в Notepad++. Визуальный редактор теперь уже не нужен, теперь для меня важнее правильный синтаксис! Вы же, естественно, можете пользоваться визуальным редактором, коих в сети множество, путём проб выбрав для себя наиболее подходящий.

Вот теперь, когда вы сверстали макет, можно на него и посмотреть, чтобы увидеть, как это гениальное творение выглядит и где именно вы «промахнулись». Для этого я использую локальный сервер (Open Server, например). В интернете есть разные варианты, ничего не буду навязывать — Google вам в помощь! Почитайте руководства по установке и использованию, потренируйте техническое полушарие своего мозга, тем более что это очень полезно. Попробуйте разные варианты и выберите тот, который удобнее для вас. «Навороты» не важны, главное — удобство работы.

Запускаете сайт на локальном сервере, используя свой любимый браузер, вычищаете ошибки. Запускаете затем уже нелюбимый браузер и снова вычищаете ошибки. Потом запускаете следующий браузер и так далее… Дело в том, что каждый браузер будет обрабатывать ваш код по-своему. Один что-то умеет лучше, другое хуже. Другой браузер – наоборот. Не обязательно иметь все браузеры мира на своём компьютере. Достаточно установить основной набор: Google Chrome, FireFox, Opera и Internet Explorer. У меня ещё установлен Safari для Windows, так как, несмотря на общее с Google Chrome происхождение Safari некоторые теги обрабатывает по-своему. Это процесс тестирования, который длится до тех пор, пока все браузеры не станут адекватно воспроизводить код, написанный вами. Слово «одинаково» здесь не подойдёт никогда, по моему скромному мнению. Теперь проверьте сайт на «резиновость», хотя бы минимальную. Просмотрите свой сайт не в полном окне браузера, а в окне размером примерно 1024х768 пикселей, так как часто в офисах и на бюджетных компьютерах стоят недорогие дисплеи с набольшим разрешением. Если сайт в таком разрешении вполне красив и удобен, то можно делать следующий шаг.

По окончании тестирования мы переходим к этапу публикации. Вам необходимо иметь аккаунт у какого-нибудь хостера. Ничего плохого про бесплатный хостинг сказать не хочу, а хорошего не могу. Предпочитаю платный хостинг, без назойливой рекламы, с точным указанием всех возможностей, льгот и прочих вкусностей. Но это уже вам решать. На первых порах для экспериментов и бесплатный хостинг подойдёт. Итак, вы закачали сайт на ftp-сервер хостера и показали его миру. Думаете, что это всё? Нет. Как бы тщательно вы ни тестировали свой сайт на локальном сервере, на публичном могут обнаружиться другие глюки. То версия php не та, то css не так обрабатывается… В общем тестируйте сайт ещё раз. И только после полной проверки на публичном сервере сайт можно считать готовым.

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

PS: Я планирую продолжать серию статей про веб-дизайн. Буду иногда выкладывать для скачивания сниппеты и свои наработки, которые уже обкатал на других сайтах. Заходите, читайте, качайте. Будьте любопытными!

PPS: Улыбнись!

Опубликовал Administrator - 26 декабря 2015, 22:41 - 2 просмотра

Теги: #веб-дизайн , #сайт , #профессия веб-дизайнер , #веб дизайнер

Профессия веб-дизайнер

Комментарии