Как стать профессиональным веб дизайнером срок. Веб-дизайн: с чего начать обучение новичку? Бесплатные способы и уроки

1 голос

Здравствуйте уважаемые читатели моего блога. Эта статья предназначена для тех, кто хочет зарабатывать в интернете неплохие деньги, но продолжает искать себя. Чем именно заняться? Как выбрать работу по душе, стать преуспевающим и получать прибыль?

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

1. Почему заниматься дизайном выгодно

Заработок денег может и должен приносить удовольствие. Множество людей каждый день встают спозаранку и отправляются на работу. Я не предлагаю вам отказаться. Совсем нет. Однако, если у вас есть свободное время или желание достичь большего, то вы легко можете найти приятное хобби, за которое вам будут платить деньги.

Слабо верится? Посмотрите сколько предложений ежедневно выкладывается на www.weblancer.net . Это действительно востребовано.

Мастер веб-дизайна, тратя всего 4 часа в день, может получать по 600 – 800 долларов в месяц, от 40 до 54 тысяч рублей!

Это реальное предложение там же.

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

С описанием услуг мало, планета, к сожалению, не ждет пока каждый из вас созреет. Для поиска клиентов придется ходить и общаться с руководителями региональных компаний лично. Убеждать в своей необходимости, отстаивать свое мнение.

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

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

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

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

Однако, опыт – это не все. За дизайн своего первого сайта я заплатил 5 000 рублей, один мой знакомый вложил 10 000. Мы оба не искали умудренных опытом профи, каждому из нас казалось, что бюджет чертовски мал. Цен на тот момент мы не знали и были уверены, что нашли самое лучшее предложение.

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

2. Как искать клиентов

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

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

Что тут говорить, казалось бы, обычный ведущий свадеб из моего города вложил в проект 50 000 рублей. Он сам нашел копирайтера, дизайнера, верстальщика. Он не пошел в фирму, так как его пугали цены, но в итоге заплатил даже больше! Я уже показывал неоднократно, что многие престижные фирмы готовы взяться за дело если им платят 30 000 и считают, что это хороший бюджет. Он заплатил 50…

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

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

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

3. Чем вам предстоит заниматься

Давайте перейдем к более-менее технической стороне вопроса. Что входит в дизайн сайта и ложится на хрупкие плечи мастера:

  • Ему предстоит разработать структуру сайта: понять какие категории (рубрики) будут присутствовать, что и где будет располагаться.

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

  • Создание навигации.
  • Тексты

Какие будут тексты и где они разместятся.

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

Они, как правило, имеют схожую структуру. Как здесь.

Они тоже похожи.

4. Как происходит работа

Сейчас я постараюсь показать вам как работают крупные компании и какие этапы работы ожидают тех, кто хочет заниматься разработкой и продажей дизайна.

4.1. Встреча с заказчиком

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

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

Для начала вы обсуждаете проект. Узнаете, что от вас хотят. Обычно клиент не знает и не понимает, что ему нужно. Он в этом совершенно не виноват, задавать наводящие вопросы – ваша работа.

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

«Нам не нужен . У нас работают опытные менеджеры. Их задача – продавать, сайт должен лишь знакомить клиентов с тем, что есть в нашем магазине».

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

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

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

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

4.2. Разработка прототипа сайта

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

Вот он – дизайн. Все картинки, иконки, категории – все должно быть нарисовано. Точно в таком виде, как впоследствии будет в интернете.

По сути, это и называется веб-дизайном: создание и разработка композиции.

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

«И за это платят?» — спросите вы. Да! И очень неплохие деньги.

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

4.3. Верстка

Превращение рисунка в готовый сайт. Это не так сложно, как может показаться на первый взгляд, многое зависит от программы, помогающий в создании сайта (CMS или движок). Однако, вам придется этому научиться и изучить не один самоучитель по веб-дизайну. Но будьте уверены, это окупится!

5. Как стать дизайнером

Чтобы стать хорошим дизайнером, вам придется какое-то время потратить на обучение. Поверьте, это не только интересно, но и прибыльно! В интернете можно найти уйму книг по web-дизайну. Вот несколько из них:

  • Майк Монтейро «Дизайн – это работа» .

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

Цитата из книги: «Работать ради портфолио – все равно что умереть молодым ради красивого трупа. Никогда не работайте бесплатно».

  • Итан Маркотт «Отзывчивый веб-дизайн» .

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

  • Артемий Лебедев «Ководство» .

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

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

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

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

Рекомендую попробовать вот этот курс: Основы коммерческого веб-дизайна . Есть три бесплатных урока. Курс не такой уж дорогой, рассчитан на новичков, все четко и по делу. Автор раскрыл множество тем, начиная от формулы эффективности и заканчивая секретами web-дизайна. Узнав все более подробно, вам удастся понять нравится вам работать или этот труд утомляет вас.


Онлайн-курс с поддержкой автора – надежная инвестиция в будущую профессию.

«Учиться, учиться и еще раз учиться» - мастер-классы, чтение книг от преуспевающих специалистов сферы – все это необходимо, чтобы стать настоящим профессионалом и зарабатывать большие деньги.

Кажется сложным? Ни сколько! Просто начните. Я уверен, что такая работа подойдет не всем кто прочитает эту статью, но если хотя бы 5 человек после этого действительно решит заняться дизайном, полюбит свою работу и добьется больших успехов, я буду несказанно счастлив.

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

6. Ох, как я сегодня болею…

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

Не удивляйтесь, что мы играли за КПРФ, мы - коммунисты, и обсуждать политические взгляды на Блоге не будем.

Этот турнир был приурочен к открытию в Белогорске спортивного зала школы футбола «Белогорец». Классно, теперь молодые ребята смогут раскрывать свой талант в футбольном мастерстве. Белогорск городок не большой, с населением примерно 80 тыс. человек, поэтому данное событие очень значимо.


Открытие футбольной школы Белогорец
Команды в сборе
Первая игра
Это я кого-то на противоходе поймал
Как фотошопом вставили
В перерыве с капитаном команды и братом обсуждаем тактику игры
Скамейка запасных
Девочки из группы поддержки. К нам задом, к камере передом
Награждение
Мы с Вовкой старые знакомые

Мы разгромили ЛДПРовских ребят и в упорной борьбе уступили единороссам, заняв второе место. Но впечатления остались только позитивные, а положительные эмоции плещут и по сей день, хотя ноги гудят…Ух! Целых два года мячика не касался.

А какой вид спорта предпочитаете вы? И может кто подскажет, что делать, когда после нагрузки болят мышцы?

Его целях и задачах, я получил массу откликов и еще больше вопросов – как стать веб дизайнером? Сколько времени для этого потребуются? Что лучше – очные занятия офф-лайн, или все-таки использование он-лайн ресурсов?

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

Пути получения профессии дизайнера можно разделить на три основные категории:

  • оффлайн учеба в институтах, университетах,
  • самостоятельные занятия с использованием бесплатных ресурсов и специальной литературы,
  • учеба он-лайн на платных курсах, тренингах, семинарах.

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

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

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

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

Учимся сами – плюсы и минусы

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

Однако у такого способа есть ряд существенных недостатков

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

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

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

Учимся у специалиста

Второй вариант – это платные курсы он-лайн, которые ведут профессиональные веб-дизайнеры в сети.

Сегодня таких предложений в сети можно найти достаточно. Процесс учебы на них строится по следующим принципам:

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

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

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

Выбираем обучающую программу

Выделить лучшие предложения на образовательном рынке по веб-дизайну довольно сложно. Большое количество тренингов, представленных сегодня в сети, предлагает различные программы для различного уровня подготовки – от занятий «с нуля», начиная с освоения азов фотошопа, до продвинутого уровня, где осваиваются уже различные нюансы профессии.

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

Чтобы не ошибиться в выборе, следует оценивать варианты по нескольким критериям:

  • стоимость – дешево хорошо не бывает никогда. Не может грамотный, тщательно продуманный продукт, на создание которого уходит достаточно времени и сил, стоить 20 долларов,
  • срок – за месяц веб-дизайнера из вас не сделают, особенно, если вы еще и заняты на основной работе или учебе. Освоение такой профессии требует времени. Хотя, базовые моменты, на которых уже можно будет работать удаленно, получите легко
  • количество студентов в группе — чем меньше, тем лучше (это что касается очного обучения). Если группа будет больше 10-15 человек, преподаватель не сможет уделить нужное время каждому ученику. В случае же обучения через личные кабинеты, количество учеников вообще никакой роли не играет

Всем привет, друзья! В этом материале вы узнаете, что такое веб-дизайн, что такое UI/UX, Wireframing в современном веб-дизайне, рассмотрим базовые правила качественного оформления UI, правильную организацию работы в приложениях для веб-дизайна, рассмотрим, какое значение занимает HTML вёрстка в веб-дизайне и как самостоятельно и правильно обучаться веб-дизайну и развиваться, как веб-дизайнер. Другими словами, друзья - это комплексное руководство крутого веб-дизайнера , которое будет крайне полезно не только начинающим, но и опытным веб-дизайнерам, желающим развиваться профессионально.

Класснуть

Запинить

Часть первая: UX всему голова

Что ещё за UX и какая ещё голова, с недоумением спросите вы? Начнем с сухих и безжизненных определений, затем разберём всё более подробно и на человеческом языке.

UX - дисциплина, изучающая опыт взаимодействия пользователя с продуктом, восприятие и реакцию, возникающую в результате использования.

UX - это понятие, которое применимо не только в веб-дизайне, но и других областях. Давайте копнём поглубже и рассмотрим прмеры из жизни. Опыт взаимодествия - это когда специалист на заводе управлет сложной техникой посредством нажатия пары кнопок, при чем кнопка отключения значительно крупнее; UX - это когда вы срезаете путь до дома тропинкой, хотя есть красивый и чистый тротуар; это когда вы ставите стаканчик с кофе в специальные углубления на панели в салоне вашего авто; это когда педаль тормоза шире педали газа. UX - это когда вы видите ссылки на все используемые материалы урока в описании к моим видео на YouTube и вам не приходится долго искать необходимые файлы. Все это пользовательский опыт взаимодействия. Примеров может быть масса, но суть одна: UX - это способ достижения цели пользователем максимально комфортным способом. И если вы хотите стать крутым веб-дизайнером, да и вообще успешным человеком, вы должны научиться этому.

Давайте для начала посмотрим на картинку. Возможно, это будет для вас шокирующим откровением, но UX - это область, в которую входит как исследование и проектирование, так и визуализация и вёрстка. В результате работы над UX мы должны получить рабочий прототип. Если речь идео о веб-дизайне, таким прототипом является HTML вёрстка. Если взять и вытащить из телефона экран, мы можем увидеть кроме самого экранчика провода, подкладки, клеевые швы. Это и есть интерфейс. Хороший дизайнер разрабатывает интерфейс со всеми потрохами, включая вёрстку. В дальнейшем экран будет подключен к плате телефона (Back-end, PHP, Python, Ruby) или запрограммирован (Front-end, JS). Я понимаю, что кому-то от таких заявлений станет не по себе, особенно старым верстальщикам, для которых вёрстка - это целый мир, отдельная область знаний. Но давайте смотреть на разработку объективно и называть вещи своими именами. А реальность такова, что мы разрабатываем модель, которая в лучшем случае должна пройти тест, и это - ваша задача, как веб-дизайнера. Далее данная модель (HTML вёрстка) может быть непосредственно передана в Back-end разработку или, в случае, если это сложный проект, Front-end разработчику для написания JS кода приложения.

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

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

Трудность создания опыта взаимодействия состоит в необходимости понять потребности пользователей лучше, чем они понимают их сами.
Джесс Гарретт .

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

Мне неоднократно приходилось наблюдать, как не очень красивые визуально сайты и LP принсили огромные продажи и работали лучше любого заморского Flat интерфейса со стильными иконками и инфографикой. Да да, это были сайты с нелепыми градиентами, огромными кнопками, необработанными фото без ретуши и спрессованными текстовыми блоками. Но они работали. Чудо, скажите вы? Не думаю. Просто дизайнер, который рисовал такой сайт, провел исследование аудитории клиента, просто дизайнер умеет слушать и понимать реальные потребности пользователей продукта, хоть и не обладает особым визуальным вкусом. Или случайно угадал верное направление. Если вы хотите стать по-настоящему крутым веб дизайнером, вы должны иметь 2 блестящие, отполированные стороны одной медали - с одной стороны, вы должны стать хорошим UX специалистом, с другой, вы должны развивать чувство вкуса, чтобы ваши интерфейсы были не только функциональны, но ещё и привлекательны - это UI. Если говорить о том, какой дизайнер лучше - тот, кто рисует с учётом пользовательского опыта, но не красиво или тот, кто рисует изумительные аккуратне интерфейсы, но абсолютно не вникает в проблемы человека, то, однозначно, первый выигрывает. И это понятно, ведь больше денег и клиентов принесет бизнесу именно первый, если говорить простым языком.

Мое скромное мнение: дизайн перестанет существовать ради визуального дизайна, Web 3.0 - это эпоха UX, повышения информативности и удобства.

Задачи UX

Постепенно переходим от теории к практике. Какие же задачи позволяет решить UX?

Главная задача дизайнера - максимально повысить уровень удовлетворенности конечного пользователя от взаимодействия с продуктом. Здесь и далее под продуктом мы будем понимать любой объект взаимодействия с пользователем, будь то реальный продукт, услуга, веб-приложение или веб-сайт.

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

Часть вторая: Исследование

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

Вы должны чётко понимать, ПОЧЕМУ вы создаёте именно такую секцию, именно такие элементы, именно такой порядок на Web странице. Все ваши действия должны быть подкреплены железобетонным основанием. Довольно странно будет звучать объяснение на вопрос "Почему здесь эти круглешочки?" в виде - "Потому, что я где-то увидел такие и решил данную форму применить под ваш выдуманный контент, так как у меня не работает фантазия". Странно, не правда ли?

Right Way - исследование. Исследование - это самый первый шаг дизайнера при работе над любым проектом. Нужно чётко вывести группу пользователей, максимально узнать аудиторию, под которую вы разрабатываете интерфейс, узнать потребности этой аудитории. Конечно, основываясь только на своем личном опыте и своих ощущениях довольно сложно прийти к объективно правильному решению в интерфейсе, ведь вы не беспристрастны по отношению к результату вашего творчества и ваш личный опыт относительно конкретного продукта может быть весьма ограниченным. Тем не менее, если вы хорошо изучили продукт, для которого делаете дизайн сайта, то можете сделать какие-то выводы, принять решения. Самый минимум, который вы просто обязаны сделать, если вы фриансер, работаете один и у вас нет своей команды UX специалистов - изучить текущий опыт бизнеса, накидать портрет среднего потребителя продукта. Например, если вы создаёте посадочную страницу для продажи сельскохозяйственной техники, скорее всего, потенциальные клиенты не ищут особых изысков в визуальном исполнении сайта, их более интересуют каталог продукции, фотографии, сроки и способы дставки именно в их регион, цены и возможные скидки. Последний пункт говорит о том, что проектирование UX очень тесно связано с бизнесом. Это то, о чём обычно не говорят веб-дизайнеры, но думают все.

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

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

Обратите внимание, что правильно охарактеризовав 1-2-3 персоны, вы имеете больше шансов попасть в цель, применительно к огромному количеству людей со схожими ценностями и потребностями в данной тематике. Определив 2-3 (или более) персоны, можно определить задачи, которые посетители смогу решить с помощью вашего интерфейса.

Часть третья: Wireframing, каркасное моделирование

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

Для создания каркаса можно воспользоваться специальным приложением или нарисовать от руки на бумаге в клеточку или в точечку, после чего отсканировать и положить в папку с материалами проекта. Я обычно использую онлайн приложение wireframe.cc, так как можно в реальном времени вносить правки и согласовывать с клиентом. Но иногда и прорабатываю структуру страниц на бумаге, если лень садиться за комп.

Совет: не останавливайтесь на одном Wireframe для главной страницы сайта или главного экрана приложения, сделайте несколько набросков расположения структуры. Для главной страницы берите информацию из таблицы персон, отсорируйте цели и ценности по степени важности и эксперементируйте с формой, в которой вы будте представлять информацию посетителям.

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

Часть четвертая: UI, визуализация

После того, как вы основательно проработали UX, создали несколько каркасов и выбрали наиболее привлекательные варианты, можно приступать к визуализации. Визуализация - это прорисовка каркасов, создание единого стиля, оформление контента. Другими словами, мы начинаем работать над UI. Чаще всего для визуализации используется Adobe Photoshop, Sketch.app, Inkscape+Gimp или другие инструменты. Я советую использовать Adobe XD для визуализации и проработки интерактивного графического прототипа. В дальнейшем в наших уроках мы будем использовать только этот инструмент для создания дизайна, так как здесь можно сразу сделать визуализацию и показать, как будет происходить движение пользователей по страницам. Для работы с векторной графикой я использую Inkscape - здесь я создаю иконки и другую необходимую графику, для работы с растровой графикой - лучшее решение, это Adobe Photoshop.

Правила хорошего тона

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

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

  1. Типографика, текст, ссылки

    • Не используйте слишком большие заголовки;
    • Не используйте шрифт меньше 12px;
    • Не делайте слишком маленький или слишком большой межстрочный интервал;
    • Не растягивайте буквы инструментом "Transform", шрифт должен быть естественно пропорциональным;
    • Не используйте больше 3 шрифтов на странице;
    • Не используйте слишком маленький контраст, не печайтайте светло-серым по белому или тёмно-серым по чёрному;
    • Используйте интервал между символами с осторожностью если знаете, что делаете и выбранный шрифт позволяет сделать текст "воздушным" наиболее элегантно;
    • Не делайте слишком маленьких отступов между абзацами, заголовками и элементами, дайте воздуха дизайну;
    • Не используйте капс без необходимости;
    • Не используйте для основных текстовых блоков слишком сложный декоративный шрифт, это должен быть простой и легкочитаемый шрифт какого-либо семейства Sans или Serif (Serif и Slab - если вы знаете, что делаете);
    • Все ссылки, за исключением пунктов навигации, должны быть подчеркнуты. Старайтесь также оформлять ссылки, которые уже были посещены, более темным цветом, в отличие от дефолтного цвета ссылок;
    • Если иерархия сайта содержит более 3-х уровней, не забывайте о хлебных крошках.
  2. Графика, иконки, фотографии

    • Не используйте в дизайне шаблонные фотографии. Лучше сделать самостоятельно, порекомендовать заказчику обратиться к фотографу или найти наиболее "жизненные" фотографии;
    • Не используйте иконки, сделанные из фотографий;
    • Все иконки должны быть выполнены в едином стиле;
    • Не увеличивайте фотографию больше ее оригинального размера;
    • Не масштабируйте графику непропорционально;
    • Не применяйте режимы наложения слоев, отличные от обычного (Normal);
    • Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения - только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
    • Не масштабируйте фотографию до конвертации в смарт объект;
    • Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект;
    • Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
    • В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер - предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
  3. Цвет

    • Не используйте чистые цвета, обязательно старайтесь добиться наиболее приятного оттенка;
    • Не используйте более 2-х акцентных цветов на странице и не более двух темно-серых (или черного) цветов для текста. В идеале - только 1 акцентный цвет и 1 темно-серый/черный для текста. Я использую цвета 111111 - 222222 для основного шрифта на светлом фоне;
    • Старайтесь закрашивать акцентным цветом только те элементы, которые наиболее важны на странице, акцентируйте на них внимание. Это кнопки, стрелочки, галочки важных пунктов, текстовые ссылки, информативные иконки (мелкие иконки типа "логин", "пароль", "почта" и иконки в формах акцентировать не обязательно);
  4. Правила работы в графическом редакторе, организация работы и прочее

    • Называйте слои со смыслом;
    • Старайтесь упорядочивать смысловые блоки и составные элементы интерфейса в группы;
    • Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
    • Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
    • Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;
    • Не создавайте декоративные элементы, если в этом нет практического смысла. Если это имиджевый сайт и нужна красивая картинка, данное правило можно опустить;
    • Придерживайтесь смысловой визуальной иерархии. Почитать про визуальную иерархию ;
    • Используйте правило "внутреннего и внешнего", которое гласит, что расстояния между внутренними элементами блоков должны быть меньше, чем внешнее расстояние между блоками;
    • Не забывайте, что люди чаще всего приходят не на главную страницу сайта, а на внутренние, поэтому продумайте информативные универсальные блоки - шапку, подвал, сайдбары (если есть). Шапка должна быть максимально информативной, но не перенасыщенной. Обязательные элементы: Лого, название проекта, навигация. Поиск по сайту и другие элементы размещаются в зависимости от проекта.
    • Хорошее решение - размещение в футере развернутой навигации или карты сайта со всеми потаенными местами. Футер или подвал - это вообще отдельная тема, достойная отдельной статьи. Постарайтесь продумать подвал до мелочей, старайтесь не делать скудных узких подвалов с логотипом и номером телефона. Здесь опять-же, завист от проекта, но чаще всего футер лучше делать высоким и развернутым. Я очень часто нахожу нужную потаенную информацию именно в подвале и мне нравятся высокие и продуманные подвалы. Не думал, что скажу такое о подвалах.

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

Мифы веб-дизайна

  • Правило трех кликов . Миф. Если пользователь заинтересовался информацией на главной странице, он сделает сколько угодно кликов для того, чтобы добиться цели. Нам просто нужно ему в этом немного помочь - правильно разместить указатели в навигации на нужный материал. Навигация должна быть простой и понятной;
  • Слайдер контента - это хорошее решение. Весьма спорное утверждение. Я очень часто использовал в качестве формы для вывода контента слайдеры, но есть исследования, подтверждающие, что их мало кто листает и что-то мне подсказывает, что это действительно так. Возможно, в ближайшем будущем эффективность слайдеров контента станет мифом;
  • Чтобы сделать качественный дизайн, нужно много работать . Миф. Правильно определив аудиторию, достаточно одной удачной картинки, заголовка и блока текста, чтобы пользователь искренне заинтересовался продуктом. Встречаются ситуации, когда веб-дизайнер вынужден пичкать что попало в интерфейс (куча секций с CTA, таймеры обратного отсчета, заезженные призывы к действию) по требованию заказчика с обвинениями в том, что дизайнер мало поработал. Это смешно и нелепо. К сожалению, это повсеместная особенность владельцев бизнеса и нужно просто уметь грамотно объяснять, что в веб дизайне правило "чем больше, тем лучше" не работает;
  • Дизайн должен быть оригинальным. Это, конечно, хорошо, если у вас есть месяц в запасе, а у клиента толстый кошелек. Но зачастую все не так. Можно потратить бешеные деньги и время на уникальные иллюстрации, оформление, но прийти к тому-же результату, как если бы таких возможностей не было. Проработайте UX и для отличного результата подобные траты времени и денег будут излишни. Зачастую, пользователи, привыкшие к определенному расположению универсальных блоков (шапка с навигацией, подвал) сбиваются с толку, посещая сайты, где всё «оригинально и необычно». Придерживайтесь стандартов в вебе и вам не придется изобретать велосипец. Кроме того, у стартапов зачастую нет ни времени ни средств для экспериментов. Я считаю, что можно сделать лаконичный дизайн с изюмикой, который будет действительно работать и приносить клиентов, не прибегая к визуальным изыскам.

Часть пятая: Верстка

Я считаю, что веб-дизайнер должен уметь верстать. Хотя наверняка найдется много ленивых коллег, которые со мной не согласятся. Обратите внимание, мой канал называется WebDesign Master и даже когда я начинал записывать уроки, довольно четко представлял, что такое веб-дизайн и что в него входит. Конечно, что-то поменялось, что-то осталось неизменным, но я все больше и больше убеждаюсь в том, что такое мировозрение весьма объективно.

Я не силен во Front-end, ведь настоящий Front-end - это глубокий JavaScript, разработка сложной логики интерфейсов для крупных и серьезных проектов. У меня другой склад ума - не программиста, а дизайнера, поэтому принуждать себя к области, которая не нравится смысла не вижу. Но я всегда смогу "оживить" свой дизайн и сделать рабочий HTML прототип на достаточно высоком уровне, если потребуется. И это довольно шикарная опция для веб-дизайнера, ведь ваш ценник, как специалиста, поднимается, как минимум, вдвое. Не стоит бояться осваивать новые горизонты. Верстка - это не сложно.

Если вы хотите освоить верстку и базовые навыки Front-end разработчика, советую:

  1. Понять Основы HTML
  2. Изучить теорию. Советую для этого освоить сайт htmlbook.ru . От начала и до конца, все HTML теги, все CSS свойства
  3. Закрепить знания на практике. Для этого подойдут следующие мои материалы:

Материала по HTML верстке более, чем достаточно, поэтому с версткой всё.

Часть шестая: Самообучение и саморазвитие

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

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

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

  1. Постоянно изучайте работы на ThemeForest - это кладезь современного веб-дизайна. Пытайтесь применить какие-то привлекательные формы отображения контента в ваших работах, но не увлекайтесь и не забывайте о базе - UX, все должно быть в тему;
  2. Будьте постоянным посетителем awwwards.com и смотрите крутые работы, чтобы не расслабляться;-)
  3. Также, для развития чувства вкуса будет полезно периодически изучать хоршие работы на behance.net . Выделяйте время для того, чтобы практиковаться - повторяйте понравившиеся работы на практике в графическом редакторе, но ни в коем случае не публикуйте свои копии где бы то ни было. Это нужно только для практики и саморазвития;
  4. Критикуйте рекламу на улицах вашего города и думайте, как можно сделать лучше;
  5. Критикуйте UX на улицах и также, думайте, как многие вещи можно было бы сдлать удобнее. Благо, у нас на постсоветском пространстве есть место, где разгуляться на этот счет. Думайте о людях, думайте как люди.

От автора: путь веб-дизайнера тернист и сложен. Добиться успеха здесь можно лишь упорством и трудолюбием. Перед тем как ступить на этот путь, у большинства новичков возникает масса вопросов: какими знаниями нужно обладать, поможет ли самостоятельное обучение веб-дизайну и сколько времени оно займет, где приобрести профессиональные навыки, какие программы нужно освоить и т. д. На эти и другие насущные вопросы я попытаюсь ответить в данной статье.

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

Что же такое веб-дизайн?

Современный веб-дизайн - это не просто создание внешнего облика сайта, но и его верстка с использованием CSS и HTML. Готовый макет сайта должен не только соответствовать определенным требованиям, но и корректно обрабатываться всеми известными браузерами.

В дословном переводе web-design означает «конструкцию сети». Процесс создания сайтов включает как творческую, так и техническую составляющие:

стадия технической разработки, которая определяет цель существования сайта, его функции и т. д.;

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

графический дизайн - компоновка макета сайта с помощью графического редактора;

верстка сайта - преобразование графической составляющей сайта в код, с учетом корректности отображения сайта различными браузерами;

вебмастеринг - сайт размещают на хостинге, оптимизируют под поисковики и продвигают по сети.

Если Вы задумали стать web-дизайнером самостоятельно, обучение можно проводить с помощью:

самостоятельного повторения уроков и видеоуроков с тематических сайтов;

чтения литературы по веб-дизайну (книг, журналов, блогов);

развития чувства вкуса путем анализа красивых, функциональных, талантливо разработанных сайтов;

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

развития навыков общения с потенциальными заказчиками и работодателями.

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

Формула успеха

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

Учитесь работать с графическими редакторами до среднего уровня. Причем, речь идет как о векторной, так и о растровой графике. Наиболее распространенными программами по работе с графикой являются Adobe Photoshop, Adobe Illustrator и Corel DRAW. Это не значит, что Вы должны знать абсолютно все инструменты наизусть. Это значит уметь выполнять стоящие перед Вами как веб-дизайнером задачи в кратчайшие сроки.

Разбираетесь с основными понятиями веб-дизайна: баланс, композиция, макет сайта, цветовая палитра, контраст, модульная сетка, текстура, типографика и т. д. В общем, разбираетесь со всем, что связано с созданием дизайна приличного сайта.

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

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

Как держать себя в тонусе?

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

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

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

Сколько времени нужно, чтобы освоить веб-дизайн?

Недавно увидел на форуме сообщение нижеследующего содержания:

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

Открою Вам секрет: настоящий дизайнер должен вести себя как инженер, для которого на первом месте эффективность сайта, а не его красота. Каждый элемент на странице должен выполнять закрепленную за ним роль и соответствовать основной цели сайта. Как вы думаете, какой цели служат большинство сайтов? Правильно, заколачиванию бабла получению прибыли!

Поэтому, если после пары месяцев попыток научится веб-дизайну самостоятельно и занятий Фотошопом у Вас появилась мысль: «Все, я веб-дизайнер и могу делать сайты», отметите ее самым беспощадным образом. Посмотрите с лупой на сайты известных дизайнеров или просто понравившиеся вам сайты. Захотелось все бросить и пойти работать грузчиком? То-то же!

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

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

Всем удачи и хорошего настроения! Подписывайтесь на наши обновления и получайте свежие статьи о веб-дизайне первыми!

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

Как стать веб-дизайнером с нуля и что для этого нужно?

По аналогии с прошлой статьей я сначалу перечислю, что именно вам нужно, чтобы освоить эту профессию:

  1. Научиться работать в программе PhotoShop или любой другой, где возможна работа со слоями. При этом знать PhotoShop от и до не требуется. По статистике, веб-дизайнеры используют всего 10-15% возможностей программы.
  2. Уметь проектировать сайт. То есть перед тем, как рисовать макет, вы должны составлять хотя бы примерный чертеж будущего проекта, это хорошая практика среди веб-дизайнеров, так делают профи, а значит, и вы должны научиться.
  3. Разбираться в том, какие бывают виды дизайнов сайтов. Например, что такое тех. дизайн или flat-дизайн.
  4. Уметь рисовать макеты с адаптивным дизайном. Это означает, что вы рисуете, как будет изменяться сайт на различных разрешениях экранов. Сегодня это почти обязательное требование, потому что все хотят иметь сайт, адаптированный под мобильные устройства.
  5. Разбираться в типах сайтов. Понимать, что для одностраничника подходит то, что абсолютно не подходит для информационного портала.
  6. Находить и применять полезные инструменты в работе. Дизайнер должен научиться использовать различные вспомогательные сервисы, которые упростят ему работу. Например, есть хорошие сервисы для проектирования сайтов, для подбора цветов и т.д.

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

Где обучиться профессии

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

Нетология — альтернатива. По крутости я даже не знаю, кто лучше: Geekbrains или Нетология? Дело в том, что обе площадки зарекомендовали себя очень положительно, уже тысячи людей обучились там и не жалеют об этом. Да, цены у обоих не самые маленькие, но взамен вы получаете обучение от профи. А профи можно стать только в том случае, если вас учит профи. Следующая образовательная программа по веб-дизайну начнется здесь 20 мая. Обе компании активно помогают своим ученикам в поиске работы после того, как они заканчивают обучение.

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

Magisters.org/ — наконец, нашел тут еще один сайт, на котором, кстати, много бесплатных уроков по веб-технологиям. Есть там и курс по Photoshop и рисованию своего первого макета сайта. Поскольку курс объективно круче остальных представленных на сайте, он платный, но стоит всего лишь 1500 рублей. По сравнению с обучением в Нетологии это в 10-12 раз меньше, но и получаете вы меньше, но все же информация все равно качественная и если смотреть уроки, то вы реально сможете нарисовать свой собственный макет.

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