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

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

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

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

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

Шаг 1. Решите, дизайном какого типа вы хотите заниматься

Это ключевой момент, так как не все дизайнеры делают одно и то же или имеют один и тот же набор навыков. Например, некоторые дизайнеры могут писать код (HTML и CSS ), а некоторые нет. Споры о том, какой тип дизайнера «лучше », ведутся уже несколько лет:

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

Важность навыков веб-программирования

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

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

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

Шаг 2. Получите образование

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

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

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

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

Шаг 3. Научитесь использовать лучшие инструменты

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

Инструменты для разработки веб-элементов

Перед тем, как стать веб дизайнером самостоятельно , нужно понять, использование набора инструментов от Adobe является обязательным. Чтобы добиться успеха в веб-дизайне, нужно научиться эффективно использовать такие инструменты, как Adobe Photoshop и Adobe Illustrator . Эти программы необходимы для работы с графическим дизайном:

Инструменты для работы с кодом

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

  • GitHub — полезен для управления версиями, разработки веб-дизайна и совместной работы;
  • Pattern Lab — позволяет разработчикам веб-сайтов создавать динамические данные;
  • Vivaldi Browser — самый настраиваемый браузер для опытных пользователей (то есть: серьезных дизайнеров );
  • Sketch App — инструмент для ускорения и упрощения разработки веб-дизайна.

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

  • Sublime;
  • Textmate;
  • Atom;
  • Brackets.

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

Шаг 4: Станьте более универсальным

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

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

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

  • Большой заголовок, подзаголовок и описание продукта или услуги вашего клиента;
  • Минималистичный дизайн, в котором используются популярные тенденции;
  • Характеризуется высокой производительностью и скоростью загрузки страницы.

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

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

Шаг 5. Решите, где вы хотите работать

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

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

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

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

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

Много ответственности и работы, но и большее вознаграждение

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

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

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

Короче говоря, чтобы стать востребованным веб-дизайнером, недостаточно одних навыков дизайна.

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

Oleander – тема для блога и магазина

Тема WordPress Biz Lady

Coastal – универсальная тема

Architekt – WP бизнес тема

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

Описание профессии веб-дизайнер

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

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

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

Обязательные навыки веб-дизайнера

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

Что нужно знать каждому специалисту

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

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

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

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

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

С чего начать и каков план действий?

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

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

  1. Изучите всю необходимую начальную теорию: виды дизайнов, форматы изображений, цветовые модели, что такое инфографика и типографика и т.д.
  2. Естественно, необходимо освоить графический редактор, такой как Adobe Photoshop. Вам нужно хорошо работать в самой программе и знать, как пользоваться всеми инструментами и функциями. Для этого я рекомендую изучить этот видеокурс .
  3. Также не лишним будет изучить хотя бы основы редактора векторной графики, например Adobe Illustrator или Corel Draw. Сильно углубляться не нужно, но он будет вам полезен.
  4. Сделайте себе дневник, в который будете записывать достижения. Либо создайте специальный архив, куда будете забрасывать свои работы по датам. Лучше вообще создать свой блог (хотя бы чисто для себя, чтобы фиксировать свои достижения)
  5. Пойдите учиться у профессионалов (Курсы, онлайн и оффлайн-школы). Об этом речь пойдет дальше.
  6. Не останавливайтесь и продолжайте развиваться дальше.
  7. Беритесь за любые заказы и первое время не завышайте цену.
  8. Создайте свое портфолио и вот теперь обязательно заведите свой блог с работами, ценами и контактами.

Где обучиться на веб-дизайнера?

Существует как минимум несколько способов, как можно обучиться веб-дизайну.

  • Бесплатные методы
  • Книги
  • Курсы
  • Онлайн-школы и тренинги
  • Оффлайн обучение с преподавателем

Рассмотрим каждый способ по отдельности, чтобы иметь представление, по какому принципу строить свой путь.

Бесплатные способы и уроки

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

  • Как правило, в свобобном доступе нет четкой и структурированной информации. Той или иной тематике уделяется мало времени. Люди «льют воду» и зацикливаются на теории. Все вразброс.
  • На одном источнике вы не найдете всей важной информации, поэтому придется скакать с одного сайта на другой.
  • На разных источниках информация заметно отличается, так как у каждого своя стилистика. После нескольких таких занятий у вас просто будет «Каша в голове».
  • Действительно полезной информации в достаточном объеме довольно мало, так что придется затратить очень много времени на изучение.

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

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

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

Книги

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

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

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

  • Энциклопедия веб-дизайнера (Борис Леонтьев)
  • Веб-дизайн (Дмитрий Кирсанов)
  • Learning Web Design (Дженнифер Робинс)
  • Живая типографика (Александра Короткова) — книга не о дизайне в целом, а о шрифтах и оформлении текста. Обязательна к изучению.
  • Сожги свое портфолио! То, чему не учат в дизайнерских школах — книга написана с нотками юмора, но те 111 советов, что даны внутри нее, реально помогут вам справиться со всеми трудностями в мире веб-дизайна. Подойдет как начинающим, так и продвинутым специалистам.
  • Адаптивный дизайн. Делаем сайты для любых устройств (Тим Кедлек)
  • Современный веб-дизайн (Ю. Сырых)

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

Видеокурсы

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

Лично я выделяю только два минуса для данного метода обучения:

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

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

Онлайн-школы и тренинги

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

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

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

Преимущества школы:

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

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

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

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

Оффлайн обучение

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

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

Даже не знаю, что можно посоветовать в данном случае, так как люди всё таки находятся в разных городах и странах. Но если брать Москву, то я рекомендовал бы пойти в центр «Специалист» при МГТУ им. Баумана . Сертификаты данного центра очень хорошо котируются и ценятся в различных компаниях, и у людей, которые смогли пройти там обучение, будет больше шансов получить хорошую работу.

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

Недостатки и преимущества профессии

У самоц профессии есть как преимущества, так и недостатки.

Среди преимуществ этой творческой профессии следует выделить:

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

Среди недостатков профессии можно выделить:

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

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

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

Сферы деятельности, где нужны веб-дизайнеры

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

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

Сколько получают специалисты

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

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

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

Но эти цифры абстрактные. На деле ценник может быть как ниже, так и выше.

Где веб-дизанерам искать работу или заказы

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

Если речь идёт об опытном человеке, который имеет большой трудовой стаж, то он может найти работу по знакомству. К пример, если в какой-то IT-компании нужно срочно создать ещё один сайт, то HR-менеджер может попробовать найти персонал среди своих знакомых. Это более надёжный и быстрый способ «закрыть» вакансию, нежели отбирать кандидатов в поисках наиболее профессионального сотрудника.

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

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

Но самое главное, никогда не сидите на месте. Для начала разместитесь на биржах фриланса:

  • FL.ru
  • Weblancer.net
  • Work-zilla.com

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

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

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

С уважением, Дмитрий Костин.

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

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

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

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

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

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

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

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

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

Веб-дизайн для начинающих можно изучать с помощью:

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

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

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

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

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

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

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

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

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

Если Вы от рождения не обладаете художественным вкусом, не стоит переживать. Главное - знать основы веб-дизайна, а вкус появится с опытом.

Цвет

По умолчанию цвет монитора черный. Основные цвета - красный, синий и зеленый - добавляются к черному и образуют все остальные цвета. Если сложить три основных цвета, получится белый. Такая цветовая модель называется RGB.

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

Принципы цветового круга

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

контрастные цвета являются взаимно исключающими. То есть, если вы увеличите уровень голубого цвета, это автоматически уменьшит уровень красного. И наоборот;

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

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

Небольшой лайфхак: чтобы быстро подобрать контрастный цвет, можно инвертировать цвет любого растрового элемента с помощью команды Ctrl+I.

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

Форма.

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

Линия может выполнять две функции: соединение и разделение других объектов. Пример соединения:

Пример разделения:

Прямоугольник. В нем важно подобрать пропорции. Наверняка вы слышали про «золотое сечение» - деление отрезка на части таким образом, чтобы отношение меньшей части к большей было таким же, как отношение большей ко всей длине отрезка. Ниже представлен пример, в котором точка C делит отрезок AB так, что AC:AB= CB:AC.

Так вот, принцип «золотого сечения» соблюдается не только на картинах Леонардо да Винчи, но и во всех областях науки и искусства, в том числе, и веб-дизайне. Считается, что «золотое сечение» порождает гармонию. Например, на фотографии важные объекты должны располагаться на расстоянии 3/8 и 5/8 от края, то есть, в важных зрительных центрах.

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

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

Типографика.

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

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

базовый - для основных материалов сайта. Используйте читабельные, простые шрифты с удобным межстрочным интервалом (примерно в 1,5 раза больше высоты символов);

акцидентный - для заголовков. Этот шрифт можно выделить не только размером, но и цветом;

дополнительный - для навигации, важной информации, логотипа меню, цитат и т. д.

На этом пока все. Следующий урок по веб-дизайну будет касаться основ работы с Photoshop.

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

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

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

Всем привет, друзья! В этом материале вы узнаете, что такое веб-дизайн, что такое 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 на улицах и также, думайте, как многие вещи можно было бы сдлать удобнее. Благо, у нас на постсоветском пространстве есть место, где разгуляться на этот счет. Думайте о людях, думайте как люди.