Что нужно знать начинающему веб дизайнеру

1. Браузер

Главное, что должен понимать веб-дизайнер при создании самого крутого и умопомрочительного дизайна — это то, что не все, что вы рисуете в графическом редакторе (будь то photoshop или illustrator, или еще что. ) можно воплотить в жизнь и сделать это кроссбраузерным.

2. Части, блоки веб-сайта

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

Для начала хотел бы обратить внимание на слойность нашего макета.

Нашу страничку можно разбить на несколько логических частей:

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

3. Отступы, форматирование текста

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

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

Всегда используйте напрявляющие, на картинке вы видите, есть направляющие, есть отступы везде по 20px, есть раздельные слои для нашего текста.

Я наблюдал в своей практике, когда дизайнер делал столбики пробелами и «ентерами», очень не приятная картина.

4. Элементы интерфейса

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

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

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

Мне очень нравится Flat Design, поэтому картинка вот такая:

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

5. Картинки, фоны, градиенты

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

Вообще, что делает программист с вашим макетом, вы думали об этом? Он его кромсает. В прямом смысле слова.

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

В заключении: некоторые замечания, советы, выводы

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

P.S.: это моя первая статья, не судите строго. Всем спасибо за внимание!

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

Читайте также:  Как в инстаграмме посмотреть личные сообщения

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

Путь до уровня профессионала непрост, но результат того стоит. Советуем запастись терпением, трудолюбием, ведь научиться нам предстоит многому.

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

С чего начать новичку

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

  • Научитесь работать с графическими редакторами.

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

Также будет полезно разобраться в следующем:

  1. Illustrator – поможет при создании иконок, а также логотипов;
  2. UX и UI дизайн – знание основ поможет создать удобный интерфейс;
  3. HTML, CSS – понимание языков программирования служит помощником для оптимизации графики в полноценный элемент сайта.

Но на этом обучение не заканчивается, а только начинается.

  • Всё свободное время рисуйте.

Особенно, если вы без опыта, важно перерисовывать работы других дизайнеров, известные бренды и их сайты.

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

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

  • Развивайте в себе художественный вкус.

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

  • Не зацикливайтесь на чём-то одном.

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

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

  • Создайте качественное портфолио.

Подробнее об этом читайте в инструкции — как сделать портфолио web-дизайнеру (ссылка будет позже).

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

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

Для этого лучше пользоваться Skype. Это нужно для того, чтобы лучше понять желания человека. Важно выяснить, что именно хочет в результате видеть работодатель. Попросите заказчика показать сайты, которые ему нравятся, а также расспросите о том, чего быть не должно. Тщательно изучите техническое задание (ТЗ) и, если что-то неясно, то обязательно уточните. Обсудите сроки выполнения.

Составляющие удачного проекта

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

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

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

  • Он уважает время пользователя.

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

  • Он имеет обратную связь.
Читайте также:  Как отметить в комментах человека в инстаграме

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

  • Он наполнен интересным контентом.

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

Как без специального образования добиться успеха?

  • Обучайтесь.

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

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

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

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

  • Когда вы обзаведётесь необходимыми знаниями по использованию тех или иных программ, то вам, как новичку, будет мегаполезно выполнить следующее задание:

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

  • Практика – это хорошо, но без теории и «разжёвывания» информации нам с вами не обойтись. Поэтому рекомендуем изучать различные видеоуроки и статьи.

Для примера можно посмотреть этот сайт: egraphic.ru.

  • Также можно поступить намного проще. А именно скачать PSD другого опытного дизайнера и создать самому макет по примеру. Так вы довольно быстро войдёте в курс дела.

Пример, где можно скачать: freebiesbug.com.

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

  • Пользуйтесь различными онлайн-программами.

К примеру, для создания баннеров подойдёт bannerovich.ru, логотипов — logaster.ru и т. д.

Заключение

Мы с вами разобрали некоторые шаги, которые приблизят вас к освоению web-дизайна. Время на самостоятельное обучение с нуля обычно занимает 5 — 6 месяцев. Это всё сугубо индивидуально и зависит от возможностей и способностей самого человека.

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

Желаем вам успешных начинаний! Всего вам доброго!

Дата публикации: 2016-07-19

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

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

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

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

Веб-дизайнер должен уметь найти золотую середину между «удобно», «красиво» и «то, как видит это заказчик». А это довольно-таки непростая задача.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

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

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

Читайте также:  Car play mazda cx 5

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

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

Что входит в обязанности веб-дизайнера?

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

разработка дизайна сайтов и отдельных веб-страниц, решающих конкретные задачи клиентов;

проектирование макетов будущих веб-сайтов либо отдельных веб-страниц;

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

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

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

создание логотипов, фирменного стиля брендов и компаний;

выполнение верстки сайтов;

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

настройка и персонализация CMS.

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

Какие существуют требования к веб-дизайнеру?

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

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

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

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

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

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

Что должен знать веб-дизайнер?

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

высокий уровень знаний графических редакторов Photoshop, CorelDraw, Illustrator (чем шире спектр, тем больше возможностей);

умение работать с Flash-анимацией;

владение программами для верстки, а также HTML и CSS на базовом уровне.

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

знать основные принципы юзабилити сайтов;

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

понимать особенности функционирования Android и iOS;

иметь навыки работы с инфографикой.

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Оставьте ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *