Что такое веб-дизайн, его основные элементы, этапы и принципы
33
22210218-01-2011
Частенько в оффлайне меня спрашивают «Кто такой веб-дизайнер», обычно я отвечаю, что это человек, который делает сайты. Недавно я задумалась, а так ли это на самом деле. В итоге я решила уточнить этот вопрос и выяснить, что же такое веб-дизайн в широком понимании этого термина, и кого тогда можно назвать веб-дизайнером. Для того, чтобы выяснить это, давайте последовательно рассмотрим этапы, принципы и элементы веб-дизайна.
1. Определение веб-дизайна
Прочитав множество определений веб-дизайна, я остановилась на следующем. Веб-дизайн — это процесс производства веб-сайтов, который включает техническую разработку, структурирование информации, визуальный (графический) дизайн и доставку по сети.
2. Этапы веб-дизайна
Давайте рассмотрим подробнее из каких этапов состоит процесс создания веб-сайта. Детальное понимание процесса создания сайта даст нам возможность определить кто чем занимается на каждом этапе и кого исходя из этого называть веб-дизайнером.
1. Техническое задание (ТЗ)
Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком. Занимается менеджер проекта.
2. Структурирование информации (юзабилити)
Сюда входят форма и организация содержимого сайта. Включает широкий ряд вопросов от продумывания логической структуры веб страниц до выбора наиболее удобных форм подачи информации. Занимается дизайнер, менеджер проекта.
3. Графическое оформление
В графическом редакторе компануется визуальное пространства сайта с помощью графических элементов в качестве украшения или навигации. Собственно дизайн страницы представляет собой графический файл. Выполняется дизайнером.
4. Верстка
На этой стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS трансформируется в код, который можно просматривать с помощью браузера. Выполняется кодером, программистом.
5. Вебмастеринг
На этой стадии осуществляются действия, способствующие распространению и эффективной доставки сайта по сети. Включает размещение на хостинге и поисковую оптимизацию. Выполняется админом, вебмастером.
3. Кто такой веб-дизайнер
Веб-дизайнер — это тот, кто самостоятельно осуществляет запуск сайта и выполняет все этапы создания сайта своими силами. При этом следует понимать, что веб-дизайнер может делегировать сторонним лицам выполнение некоторых этапов, но при этом сам контролирует весь процесс. Да и сам веб-дизайнер должен быть специалистом широкого профиля и разбираться во всех аспектах веб-дизайна.
Итак, мы видим существенную разницу между понятием дизайнер и веб-дизайнер. Дизайнер — это тот, кто разрабатывает юзабилити и графическую составляющую сайта. Я думаю, что у нас эти два понятия слились по причине отсутствия узкой специализации исполнителей. И в основном делается акцент именно на создание графической составляющей сайта, хотя это далеко не все.
4. Элементы веб-дизайна
Элементы веб-дизайна — это те абстрактные материалы, с которыми приходится работать дизайнеру. К основным элементам дизайна относятся: пространство, линия, фигура, цвет, текстура, шрифт, форма, светотень, размер. Именно из них, как из кирпичиков, строится вся композиция дизайна.
Чтобы правильно ими пользоваться, надо знать их характерные свойства, сильные и слабые стороны, поведение в разных ситуациях. Более подробно об элементах дизайна можно прочитать в статье «Основные элементы дизайна, участвующие в создании композиции«, где каждый элемент рассмотрен отдельно.
5. Принципы веб-дизайна
Но чтобы научиться строить здания, недостаточно знать свойства кирпичей. Именно принципы веб-дизайна определяют правила взаимодействия всех элементов. К основным принципам веб-дизайна относятся: баланс, контраст, подчиненность, направление внимания, пропорции, масштаб, ритм, единство.
Фундаментальные принципы дизайна определяют что хорошо и что плохо среди бесчисленного множества сочетаний элементов. Более подробно о принципах дизайна можно прочитать в статье «Основные принципы создания гармоничной композиции в дизайне«, где каждый принцип рассмотрен отдельно.
6. Как научиться веб-дизайну
Меня часто спрашивают, что надо сделать, чтобы научиться веб-дизайну и можно ли научиться дизайнить уже в зрелом возрасте. Во-первых, научиться веб-дизайну можно абсолютно в любом возрасте. Здесь главное не возраст, а наличие желания и терпения учиться. А во-вторых, процесс обучения веб-дизайну практически ничем не отличается от других процессов обучения.
Поэтому для начала неплохо ознакомиться с теоретической частью. Одна толковая книжка даст вам общее представление об изучаемом предмете. Мне, например, в свое время очень помогла книжка Д.Кирсанова «Веб-дизайн». Более подробно о полезных книгах можно почитать в статье «10 самых популярных и полезных книг по дизайну, которые хорошо бы прочесть«.
Но основное в процессе обучения веб-дизайну — это практика. Начинать надо с самых несложных уроков для новичков. Нужны именно простые уроки, потому что когда получается — это дает сильный стимул двигаться дальше. Тренируясь на уроках приобретаются необходимые навыки, которые в дальнейшем необходимо развивать.
Попутно очень полезно смотреть на лучшие образцы дизайнерского творчества. Потом можно попробовать сделать что-то аналогичное своими силами. И всегда надо верить, что у вас все получится! Более подробно своим дизайнерским опытом я поделилась в статье «33 совета начинающим дизайнерам или как не совершать ненужных ошибок«.
Комментариев 33 комментария
@Aurinko:
Спасибо большое! Я сама всегда очень люблю, чтобы в голове ясность была, поэтому и стараюсь прорабатывать досконально ))
Хорошая статейка, спасибо Наташа.
Все расписано подробно и очень доходчиво. Единственное, к чему мог бы придраться — это к фразе:
На этой стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS трансформируется в код, который можно просматривать с помощью браузера. Выполняется кодером, программистом.
Вообще-то совместить движок и верстку — это задача верстальщика, а не программиста.
В остальном же все великолепно!
Я немного не согласен с определением — слишком уж много, судя по этой статье ложится на плечи веб-дизайнера. Это уже веб-разработчик получается.
По-моему в понятие веб-дизайнера совсем не вписываются: верстка и кодинг.
Мне кажется все немного уже с веб-дизайнером (конечно не исключается что веб-дизайнер по совместительству еще и верстальщик): веб-дизайнер — это тот кто специализируется на создании дизайна сайта, его визуального соответствия с внутренним содержимым и красивым, приятном внешнем виде. И не более-того.
Создание структуры сайта и с создание его дизайна это ведь разные вещи. К примеру, человек практически ничего не понимающий в дизайне (не имеющий вкуса), вполне может придумать идею и структуру сайта!
Веб-дизайнер — это тот же дизайнер, креативный-художник, но специализирующийся на дизайне сайтов и веб-приложений, а эта сфера дизайна значительно отличается от остальнй, тут как и везде есть свои тонкости.
Все вышесказанное ИМХО конечно!
категорически не согласна с определением и, соответственно, со всем, что написано ниже (на мой взгляд материал преподается ошибочно именно из-за ошибки в определении).
в данном материале идет описание не веб-дизайнера, а веб-разработчика, или веб-мастера.
Это как если бы вменить в обязанности обычного дизайнера мебели и разработку задания, и покупку материалов для дизайна мебели и конструирование мебели и ее продажу. если речь идет о мастере на все руки с единичными заказами, а не о серьёзном профессионале — тогда еще можно принять.
Но мастер на все руки никогда не создаст полноценного технического задания, никогда не сверстает идеально макеты и никогда не продумает элементарные условия безопасности для сайта и т.п.
если автору хотелось сделать статью о том, чем отличается обычный дизайнер от веб-дизайнера, с удовольствием подскажу пару идей.
тема актуальная, т.к. многие не видят разницу между дизайнером и веб-дизайнером.
@Роман:
Спасибо, Рома!
@ZeroXor:
Спасибо!
«Выполняется кодером, программистом.»
Под кодером я и имела ввиду верстальщика. Просто кодер звучит благозвучнее. А вот по поводу программиста… А как быть с тем, кто делает сайты на флеше, например. Поэтому программиста тоже включила в исполнители 🙂
@Kama:
Я абсолютно согласна, что под все вышеперечисленное лучше подходит определение веб-разработчик или веб-мастер, например. У нас же это подменяется понятием «веб-дизайнер» ))
@Елена:
А по-моему мы еще очень далеки от узкой специализации в понятии веб-дизайн. И именно поэтому еще очень долго дизайнеры будут и кодить, и разрабатывать юзабилити сайта, и собственно делать графику сайта. Так что еще раз повторю, что у нас понятие веб-дизайнер и дизайнер практически срослись из-за отсутствия узкой специализации.
В своей статье я как раз и постаралась обратить на это внимание. Для себя вышеизложенную схему считаю логичной и удобной, и она мне реально помогает определяться с понятиями ))
Наташа, какая ты молодец! Сразу видно организованного и умного человека. Очень хорошую статью написала и отлично все проиллюстрировала. Я поняла, что веб-дизайнер — это очень сложная специальность, надо все уметь и все мочь. И во всем разбираться. Мозги должны быть ясные.
Представляю какой безупречный порядок у тебя в делах!
@Наташа Клевер
мне кажется, что до тех пор пока мы определяем веб-дизайнера, подменяя понятия исходя из текущего состояния и «своего удобства», веб-дизайнеры и будут оставаться «мастерами на все руки». При этом прекрасно понимаем, что то, что они делают не будет качественным на 100%. И даже на 50% не будет.
А запонять интернет «Недосайтами» уже, кажется, хватит. По крайней мере, хватит это рекламировать.
ИМХО
@Maria Trudler:
Маша, спасибо за добрые слова. Не то, чтобы веб-дизайнер очень сложная профессия. Скорее тут надо понимать процесс и быть, что называется «в теме», потому что если сам до конца что-то не понимаешь, то всегда можно нанять специалиста, который в этом разбирается досконально 🙂
@Елена:
Я почему-то так и предполагала, что вы ответите именно в таком ключе — категорично и безапелляционно. Хочу сказать, что правота ваших слов невилируется абсолютно менторским тоном. Обратите на это внимание. Кстати, тоже могу тоже дать вам совет — общайтесь дружелюбно и вас услышат. И еще не поняла кто что рекламирует 🙂
@Наташа, мне жаль, что мои слова были восприняты на личный счет. Это не так. Я в принципе высказала мнение, что неплохо бы создавать качественные продукты и писать именно о том, как это делать и как стать тем, кто их делает. Сложный продукт, коим является веб-сайт не может создаваться качественно, если его делает один человек.
Вы же понимаете, что ваш блог популярен и читается в т.ч. теми, кто хочет стать веб-дизайнером. Ваше мнение для них важно. И высказывая мнение, что они должны делать все, что у вас написано, возможно, вы капельку влияете на их мнение и отводите их от того, чтобы становиться профессионалами в какой-то отдельной области.
В целом, ваше личное мнение мне понятно. В любом случае, за статью спасибо. И за блог в целом.
@Елена:
Елена, очень рада что мы начали разговаривать на одной волне. Я всегда за дружбу и позитив ))
А по сабжу… Веб-дизайнер — это тот, кто делает сайты, а графический дизайнер — это тот, кто занимается графической составляющей сайта. Я исходила именно из этого постулата.
Согласна, путаница в терминологии есть. Я бы тоже веб-дизайнер заменила на веб-мастер или веб-разработчик. Но де-факто сложилось именно так: Веб-дизайнер — это тот, кто делает сайты. И самое интересное, что заказчики исходят именно из этого определения «Ну вы же веб-дизайнер».
А вот по поводу того, что «Сложный продукт, коим является веб-сайт не может создаваться качественно, если его делает один человек.» я согласна наполовину. Если речь идет об амазоне или фейсбуке, то да — здесь нужна команда. Хотя, вон на сайт для ростехнадзора, по-моему выделили около 5 млн руб, а в результате получился «недосайт».
Кстати, большинство качественных западных блогов создаются усилиями одного-двух людей. И мне кажется правильным, что веб-дизайнер (=вебмастер) должен разбираться во всех этапах создания сайта. Можно и нанять специалистов, но контролировать все-равно надо самому.
Я почему-то так и думала, что эту статью будут рьяно комментить))) Наши веб-дизайнеры настолько мощны, что попутно начинают кодить, разрабатывать юзабилити и т.д.
За бугром это понятие, конечно, было бы ошибочным. Но так как у нас всегда один человек выполняет работу за двоих/троих, то я думаю, что мы еще нескоро приблизимся к тому моменту, когда каждый будет заниматься «своим» делом.
А еще улыбнула фраза «веб-сайт не может создаваться качественно, если его делает один человек.» Конечно, для создание монстров аля фейсбук понадобится не один человек. Но с остальными же может справиться один, ну хорошо, или два человека)) Если есть руки и голова, то зачем таланту третьи руки?
Это, конечно, мое ИМХО. Естественно, можно прочитать в какой-нибудь умной книжке, кто такой веб-дизайнер, ну, а можно просто посмотреть глазами на них и на то, что они делают. Возможно, не все. Но я думаю, что многие.
@Aurinko:
А обычно так и происходит при наличии многополярности мнений, и особенно когда нет абсолютно ясного понимания вопроса. В любом случае, даже самая крепкая теория несет в себе элемент субъективизма. И тут уж каждый пользуется тем, что кому удобнее ))
@Наташа Клевер: Во-во))) Я раньше тоже думала иначе, пока своими глазами не увидела, как один человек справляется с работой, которую в общей сумме должны были делать четверо=)) Скажем так, была поражена =)))
отлично написано, легко читается и понятно. побольше бы такого в интернетах. спасибо и так держать)
@ScarfaceDeb:
Спасибо большое за добрые слова! ))
Спасибо Вам, Наташа! Ваш сайт для меня — источник компактной, рационально организованной, самой необходимой информации, излагаемой, к тому же, отличным слогом. И хоть я вряд ли стану веб-дизайнером по причине, что просто не успею, но я получаю огромное удовольствие от самого процесса познания. Спасибо!
@Маргарита:
Вам спасибо за такой роскошный комментарий, написанный великолепным художественным языком! И я тоже получаю истинное удовольствие, читая их ))
Наташа! Я просто в шоке,как здорово у вас на сайте,ну как дома,интересные статьи…..есть чему поучиться……я начинающий пользователь WordPress и пока только пробую делать первые шаги…и не умею даже картинки вставлять….но ваша работа впечатляет….спасибо!!!Теперь есть ориентир…
@Blabberman:
Спасибо большое за добрые слова и, как говорится добро пожаловать! Всегда рада видеть вас здесь. Спрашивайте, общайтесь, у нас здесь очень дружелюбная компания 🙂
PS Чего то не смогла перейти на ваш по ссылке, которую вы указали…
Зайца клёвая («Знатный зверюга!»).)))
@Oracle:
Я бы сказала очень милая картинка. Но то, что зверюга знатный, это точно 🙂
Информация вводит в заблуждение незнающих людей. Предлагаю заменить все фразы «веб-дизайнер» на «веб-разработчик». Это разные вещи и не стоит чтобы люди, и уж тем более, упаси Господи, заказчики, путали эти вещи!
Однако тут всплывает следующий момент. Веб-разработчик, который и рисует, и верстает, и кодит, сео-оптимизирует, а также администрирует сайт обычно посредственность во всем. Т. к. минимум по одному из показателей время-качество он проигрывает.
А вот если веб-разработчик привлекает профессионалов в каждой отдельной отрасли сайтостроения, то это уже как минимум администратор или директор веб-студии.
@Олег Дизус:
Поняла ваше мнение, но все-таки буду придерживаться именно термина веб-дизайнер. Веб-разработчик может запросто не уметь сделать дизайн самостоятельно. Тем более я себя все-таки отношу именно к веб-дизайнерам, а не веб-разработчикам. А заказчикам во избежании путаницы вообще лучше говорить «я графический дизайнер». Ну а тот, кто может окучить все этапы, включая сео, получается веб-мастер ))
Здравствуйте. Статья хорошая. Но по сути заказчику по-барабану термины, ему нужен РЕЗУЛЬТАТ ожидаемый от того кто создает сайты.
Мне, как просто желающему научиться делать сайты, стать веб-дизайнером или веб-разработчиком, вообще не понятно, с чего начинать, за что хвататься..за фотошоп что бы научиться работать с графикой, за просто уроки по фотшопоу и уроки какие, ведь только по урокам можно несколько лет учиться и учиться, за изучение кодов, стилей, верстку, за типографику или что первичнее? Ведь все нужно знать, но вообще-то это же много!
@Натали:
Здесь главное не ставить себе невыполнимых задач. Можно сначала сосредоточиться например, на создании баннеров, логотипов, фонов для твиттера или групп вконткте. Потом можно расширять сферу деятельности и переходить на более сложные вещи, попробовать сделать простенький сайтик или страничку. Ну и так постепенно наращивать свой дизайнерский потенциал ))
Приветствую!
Мне кажется очень много понятий сейчас как-то неправильно трактуются. Лично я вообще не согласен с тем что вы написали) Вы уж простите. Но веб-дизайнер никак не человек, кто и сделает и придумает и зальет и т.д. и т.п. Фрилансер — да, менеджер проекта — частично. Это хорошо если человек умеет все, от а до я, но приравнивать кука к адмиралу, как я считаю, не следует. Веб-дизайнер, это прежде всего специалист по разработке фронт-енда сайта, да он может отверстать, к примеру, через adobe muse, или adobe dreamweaver, но это уже зависит от сложности проекта. Веб-дизайнер, как правило, должен работать взаимодействуя со специалистами по продвижению, верстке, программированию, оптимизации и работе с текстами. Но мы же жадные и умные, вот и скрещиваем все воедино.
@Денис: Поправочка. «Могешь», молодец! Но искажать термины и понятия не стоит, равносильно коверканью Русского языка.
Очень понятно! Большое спасибо!))
Спасибо. Хорошая статья!
Нравится мне, как Вы пишите))) Все четко и понятно. Думаю, что те, кто задаются вопросом, а кто же такой этот дядька веб-дизайнер, прочитав Вашу статью, больше не будут мучить Вас вопросами в оффлайне))) Если бы я не знала что же делает этот загадочный шаман, Ваша статья мне отлично помогла бы в этом! Вы молодец)