Web design с чего начать: С чего начать изучение Web-дизайна, как научиться дизайну

Как стать веб-дизайнером – пошаговое руководство — Дизайн на vc.ru

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

60 853 просмотров

Вы читаете перевод статьи “How to become a web designer in 2020 — Everything you need to know”. Над переводом работали: Анастасия Свеженцева и Ольга Жолудова.

Как стать веб-дизайнером

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

Из обзора вы узнаете, чем занимаются веб-дизайнеры, и почему веб-дизайн – классная сфера для работы.

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

А тем, кого интересует развитие бизнеса в сфере веб-дизайна может также пригодится наше исследование на эту тему.

Так что, приступим!

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

Кто такой веб-дизайнер

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

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

Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal. ru

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

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

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

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

Чем занимается веб-дизайнер

Задачи веб-дизайнера отличаются в зависимости от их навыков и условий работы.

Есть три популярных сценария: работа на фрилансе, работа в агентстве, и работа в штате.

Работа на фрилансе

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

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

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

Работа в агентстве

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

На состав проектов по веб-дизайну в агентстве влияет комплект услуг агентства и команда.

Работа в штате

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

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

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

Вот в чем нужно разбираются веб-дизайнеры:

• Графический дизайн. Веб-дизайнеры работают с цветом, шрифтами, фото, иллюстрацией и композицией – все это помогает рассказать захватывающую убедительную историю и вызвать определенные чувства целевой аудитории.
• UX-дизайн и дизайн интерфейсов. Основы UX помогают проектировать сценарии на сайте с учетом нюансов психологии пользователя – такой подход чаще помогает попадать в базовые ожидания клиентов;
• Веб-дизайн заточенный на конверсии.
  Cайт – система, задача которой – продавать. А значит нужно понимать с помощью каких действий можно влиять на конверсию сайта;
• Веб-разработка. Хотя некоторые дизайнеры ограничивают свою работу проектированием сайтов, многие также берут на себя часть кода, особенно интерфейсную разработку.
• Интернет-маркетинг. Веб-дизайнер работает плечом к плечу с диджитал-маркетингом (SEO-профи, SMM-спецы, Копирайтеры и Контент-маркетологи). Фронт работа задает контент, а понимание контекста всегда плюс один к смелости и точности.
• Работа с клиентами и управление проектами. После запуска сайта работа только начинается, развитие сайта – это отдельная большая работа по увеличению конверсии с помощью новых блоков, доработок, создания выразительной графики и запуска новых страниц. А еще здесь много психологических тонкостей по работе с клиентом, которые можно учесть, если подойти грамотно к организации работы.

Конечно, чтобы обеспечить поток клиентов, необязательно быть экспертом во всех этих областях.

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

Forefathers Group, специализируются на веб-дизайне в винтажном стиле. Forefathers Group

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

Чем зажигает профессия веб-дизайнер

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

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

Для опытных веб-дизайнеров работы много всегда.

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

По данным BLS, предложение работы, согласно прогнозам, вырастет на 13% с 2018 по 2028 год, что намного быстрее, чем средний рост в 5% для всех профессий.

Здесь вы сами организуете график работы.

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

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

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

Начать работать веб-дизайнером можно даже без диплома

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

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

Обратная сторона? Веб-дизайн – это жутко переполненный рынок

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

Готовьтесь искать пути, чтобы выделиться среди множества веб-дизайнеров. Banter Snaps, Unsplash

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

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

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

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

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

Ками Макнамара из WebCami Site Design, поделилась с GoDaddy своим опытом в профессии:

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

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

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

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

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

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

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

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

Теория дизайна и визуальный дизайн

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

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

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

Теория цвета. Цвет помогает создавать настроение и задавать настрой у посетителя сайта.

Изучайте психологию цвета, исследуйте влияние сочетаний цветов на чувства.

Визуальный дизайн – это целая наука, в рамках этой статьи нам ее не объять, но вот здесь по ссылкам вы можете найти еще полезной информации:

• Базовые правила современного digital-дизайна
• Основные принципы графического дизайна для недизайнеров
• Короткие UI-советы: как сделать дизайн сайта значительно лучше
• Бесплатный онлайн-курс «Графический дизайн с чего начать – как стать графическим дизайнером»

У графического дизайна и веб-дизайна есть схожие черты. NordWood Themes, Unsplash

Пользовательский опыт (UX)

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

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

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

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

Веб-дизайнерам важно изучать основы UX-дизайна и основы проектирования пользовательского интерфейса (UX / UI):

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

Исследование пользователей (UX/CX-research). В этом хорошо помогает Hotjar, с ним можно изучать тепловые карт, проводить опросы пользователей – все, что нужно чтобы оперативно понять причины поведения и мотивацию посетителей сайта.

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

Информационная архитектура и навигация (IA). Это не сложно, если подойти комплексно. Информационная архитектура – это история о расположении информации на сайте: какие страницы должны быть на сайте, какие пункты должны быть в меню и в каком порядке, какие блоки обязательно должны быть на странице, чтобы пользователи нашли ответ. Сделать ее хорошо можно только применив SEO-анализ и интервью со спецом из предметной области (заказчиком или привлеченным экспертом, который хорошо знает то, о чем сайт). Без анализа поисковых запросов (актуальных интересов пользователей) и сопоставления их с практической экспертизой сайт получится игрушечным, а не приближенным к реальности.

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

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

Веб-дизайн заточенный на конверсии

Компании и клиенты не раскошелятся на тысячи долларов за новый сайт просто потому, что он красивый. Им нужен первоклассный дизайн, чтобы давать результаты для бизнеса – на самом деле, 48% людей указали, что дизайн веб-сайта является фактором №1 в определении доверия к бизнесу.

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

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

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

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

Инструменты дизайна и верстки сайтов. Для дизайнеров, которым важно создавать красивые и функциональные сайты для клиентов, без заморочек в программировании, плагины WordPress, такие как Divi или Beaver Builder, могут быть отличным вариантом. Даже если ваш опыт программирования ограничен, вы все равно можете создавать красивые сайты. Есть также хорошие конструкторы сайтов, такие как Tilda, Readymag и Webflow.

Инструменты графического дизайна. Оперативно создать функциональный и красивый сайт можно командой в Figma и Sketch. А Photoshop теперь снова занял ту позицию для которой родился: разработка уникальной (любой по выразительности) графики бренда без творческих ограничений.

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

Figma хороша для веб-дизайна. Toptal

Веб-разработка и программирование сайтов

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

Знание HTML, CSS и JavaScript, вполне себе плюс для веб-дизайнера, которые планирует влиться в команду веб-разработчиков и быть с ними на одной волне.

Вот что вам нужно знать о веб-разработке:

Основные языки веб-программирования. HTML, CSS и JavaScript – строительные блоки любого сайта.

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

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

Фреймворки фронтенд-разработки. Такие фреймворки, как Bootstrap или Genesis (для дизайнеров WordPress), содержат арсенал компонентов HTML, CSS и JavaScript. Их можно собрать вместе и значительно ускорить процесс веб-разработки, а также обеспечить согласованность и качество проектов.

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

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

Конструкторы Tilda, Webflow, Readymag и GoDaddy Pro как раз помогают в этом.

Какие навыки нужны, чтобы работать на фрилансе

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

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

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

Навыки ведения дел и управления клиентами будут очень кстати. Kobu Agency, Unsplash

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

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

Давайте рассмотрим некоторые ключевые бизнес-навыки и инструменты, которые вам необходимо освоить.

Работа с клиентами и Управление проектами

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

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

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

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

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

Вот что вам нужно знать об управлении клиентами и проектами:

Управление проектами и планирование. Четкий план и его реализация – ключ к успешному проекту веб-дизайна.

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

Basecamp – система управления проектами. Basecamp

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

Copper, Streak, Pipedrive и Мегаплан – отличные легкие и недорогие варианты.

Онбординг клиентов. Здесь вам помогут такие инструменты как Typeform (для сбора данных) и Zapier (чтобы автоматизировать сам процесс).

Учет времени. Когда вы отвечаете за эффективное управление своим временем, вам нужно максимально использовать каждый час. Инструменты учета времени, такие как Harvest, Toggl и Timely, позволяют легко отслеживать, над какими проектами вы работаете, когда и какие проекты наиболее прибыльны.

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

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

Юридические вопросы. Для каждого клиентского проекта вы должны быть уверены, что защищаете себя юридически, в том маловероятном случае, когда проект пойдет не так. LegalZoom упрощает создание LLC, а такие инструменты, как HelloSign, позволяют клиентам легко подписывать контракты и предложения в электронном виде.

Диджитал-маркетинг

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

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

Вот что вам следует знать:

Маркетинг в соцсетях. Социальные сети – самый быстрый способ найти клиентов на веб-дизайн.

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

А такие сервисы как Canva помогут вам шустренько собрать прикольную графику для ваших публикаций.

Buffer может однажды пригодится для автоматизации маркетинга в соцсетях. Buffer

Поисковая оптимизация. Создайте себе сайт, подберите поисковые запросы и начинайте создавать полезные материалы в блоге. Такая стратегия помогает найти дополнительных клиентов.

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

А если у вас WordPress, то такой плагин, как Yoast, уже может помочь с базовой опимизацией.

Коммуникация

И последнее, но не менее важное: важно поддерживать открытые каналы связи с вашими клиентами.

Убедитесь, что клиенты в курсе статуса проектов, вы не забываете собирать отзывы и улучшать ваши процессы работы.

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

Вот несколько инструментов, которые помогут вам управлять общением с клиентами:

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

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

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

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

Где еще больше материалов о дизайне

Статья призвана помочь вам сориентироваться на старте, надеемся большая часть была полезна. Если что, пишите. На связи!

Ещё больше статей о дизайне, а также полезные сервисы можно найти в сообществе на Facebook.

Первые шаги в веб-дизайне

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

Как стать веб-дизайнером – пошаговое руководство — Дизайн на vc.ru

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

60 853 просмотров

Вы читаете перевод статьи “How to become a web designer in 2020 — Everything you need to know”. Над переводом работали: Анастасия Свеженцева и Ольга Жолудова.

Как стать веб-дизайнером

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

Из обзора вы узнаете, чем занимаются веб-дизайнеры, и почему веб-дизайн – классная сфера для работы.

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

А тем, кого интересует развитие бизнеса в сфере веб-дизайна может также пригодится наше исследование на эту тему.

Так что, приступим!

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

Кто такой веб-дизайнер

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

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

Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal. ru

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

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

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

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

Чем занимается веб-дизайнер

Задачи веб-дизайнера отличаются в зависимости от их навыков и условий работы.

Есть три популярных сценария: работа на фрилансе, работа в агентстве, и работа в штате.

Работа на фрилансе

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

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

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

Работа в агентстве

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

На состав проектов по веб-дизайну в агентстве влияет комплект услуг агентства и команда.

Работа в штате

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

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

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

Вот в чем нужно разбираются веб-дизайнеры:

• Графический дизайн. Веб-дизайнеры работают с цветом, шрифтами, фото, иллюстрацией и композицией – все это помогает рассказать захватывающую убедительную историю и вызвать определенные чувства целевой аудитории.
• UX-дизайн и дизайн интерфейсов. Основы UX помогают проектировать сценарии на сайте с учетом нюансов психологии пользователя – такой подход чаще помогает попадать в базовые ожидания клиентов;
• Веб-дизайн заточенный на конверсии. Cайт – система, задача которой – продавать. А значит нужно понимать с помощью каких действий можно влиять на конверсию сайта;
• Веб-разработка. Хотя некоторые дизайнеры ограничивают свою работу проектированием сайтов, многие также берут на себя часть кода, особенно интерфейсную разработку.
• Интернет-маркетинг. Веб-дизайнер работает плечом к плечу с диджитал-маркетингом (SEO-профи, SMM-спецы, Копирайтеры и Контент-маркетологи). Фронт работа задает контент, а понимание контекста всегда плюс один к смелости и точности.
• Работа с клиентами и управление проектами. После запуска сайта работа только начинается, развитие сайта – это отдельная большая работа по увеличению конверсии с помощью новых блоков, доработок, создания выразительной графики и запуска новых страниц. А еще здесь много психологических тонкостей по работе с клиентом, которые можно учесть, если подойти грамотно к организации работы.

Конечно, чтобы обеспечить поток клиентов, необязательно быть экспертом во всех этих областях.

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

Forefathers Group, специализируются на веб-дизайне в винтажном стиле. Forefathers Group

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

Чем зажигает профессия веб-дизайнер

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

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

Для опытных веб-дизайнеров работы много всегда.

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

По данным BLS, предложение работы, согласно прогнозам, вырастет на 13% с 2018 по 2028 год, что намного быстрее, чем средний рост в 5% для всех профессий.

Здесь вы сами организуете график работы.

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

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

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

Начать работать веб-дизайнером можно даже без диплома

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

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

Обратная сторона? Веб-дизайн – это жутко переполненный рынок

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

Готовьтесь искать пути, чтобы выделиться среди множества веб-дизайнеров. Banter Snaps, Unsplash

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

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

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

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

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

Ками Макнамара из WebCami Site Design, поделилась с GoDaddy своим опытом в профессии:

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

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

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

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

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

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

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

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

Теория дизайна и визуальный дизайн

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

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

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

Теория цвета. Цвет помогает создавать настроение и задавать настрой у посетителя сайта.

Изучайте психологию цвета, исследуйте влияние сочетаний цветов на чувства.

Визуальный дизайн – это целая наука, в рамках этой статьи нам ее не объять, но вот здесь по ссылкам вы можете найти еще полезной информации:

• Базовые правила современного digital-дизайна
• Основные принципы графического дизайна для недизайнеров
• Короткие UI-советы: как сделать дизайн сайта значительно лучше
• Бесплатный онлайн-курс «Графический дизайн с чего начать – как стать графическим дизайнером»

У графического дизайна и веб-дизайна есть схожие черты. NordWood Themes, Unsplash

Пользовательский опыт (UX)

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

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

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

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

Веб-дизайнерам важно изучать основы UX-дизайна и основы проектирования пользовательского интерфейса (UX / UI):

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

Исследование пользователей (UX/CX-research). В этом хорошо помогает Hotjar, с ним можно изучать тепловые карт, проводить опросы пользователей – все, что нужно чтобы оперативно понять причины поведения и мотивацию посетителей сайта.

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

Информационная архитектура и навигация (IA). Это не сложно, если подойти комплексно. Информационная архитектура – это история о расположении информации на сайте: какие страницы должны быть на сайте, какие пункты должны быть в меню и в каком порядке, какие блоки обязательно должны быть на странице, чтобы пользователи нашли ответ. Сделать ее хорошо можно только применив SEO-анализ и интервью со спецом из предметной области (заказчиком или привлеченным экспертом, который хорошо знает то, о чем сайт). Без анализа поисковых запросов (актуальных интересов пользователей) и сопоставления их с практической экспертизой сайт получится игрушечным, а не приближенным к реальности.

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

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

Веб-дизайн заточенный на конверсии

Компании и клиенты не раскошелятся на тысячи долларов за новый сайт просто потому, что он красивый. Им нужен первоклассный дизайн, чтобы давать результаты для бизнеса – на самом деле, 48% людей указали, что дизайн веб-сайта является фактором №1 в определении доверия к бизнесу.

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

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

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

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

Инструменты дизайна и верстки сайтов. Для дизайнеров, которым важно создавать красивые и функциональные сайты для клиентов, без заморочек в программировании, плагины WordPress, такие как Divi или Beaver Builder, могут быть отличным вариантом. Даже если ваш опыт программирования ограничен, вы все равно можете создавать красивые сайты. Есть также хорошие конструкторы сайтов, такие как Tilda, Readymag и Webflow.

Инструменты графического дизайна. Оперативно создать функциональный и красивый сайт можно командой в Figma и Sketch. А Photoshop теперь снова занял ту позицию для которой родился: разработка уникальной (любой по выразительности) графики бренда без творческих ограничений.

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

Figma хороша для веб-дизайна. Toptal

Веб-разработка и программирование сайтов

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

Знание HTML, CSS и JavaScript, вполне себе плюс для веб-дизайнера, которые планирует влиться в команду веб-разработчиков и быть с ними на одной волне.

Вот что вам нужно знать о веб-разработке:

Основные языки веб-программирования. HTML, CSS и JavaScript – строительные блоки любого сайта.

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

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

Фреймворки фронтенд-разработки. Такие фреймворки, как Bootstrap или Genesis (для дизайнеров WordPress), содержат арсенал компонентов HTML, CSS и JavaScript. Их можно собрать вместе и значительно ускорить процесс веб-разработки, а также обеспечить согласованность и качество проектов.

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

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

Конструкторы Tilda, Webflow, Readymag и GoDaddy Pro как раз помогают в этом.

Какие навыки нужны, чтобы работать на фрилансе

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

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

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

Навыки ведения дел и управления клиентами будут очень кстати. Kobu Agency, Unsplash

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

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

Давайте рассмотрим некоторые ключевые бизнес-навыки и инструменты, которые вам необходимо освоить.

Работа с клиентами и Управление проектами

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

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

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

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

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

Вот что вам нужно знать об управлении клиентами и проектами:

Управление проектами и планирование. Четкий план и его реализация – ключ к успешному проекту веб-дизайна.

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

Basecamp – система управления проектами. Basecamp

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

Copper, Streak, Pipedrive и Мегаплан – отличные легкие и недорогие варианты.

Онбординг клиентов. Здесь вам помогут такие инструменты как Typeform (для сбора данных) и Zapier (чтобы автоматизировать сам процесс).

Учет времени. Когда вы отвечаете за эффективное управление своим временем, вам нужно максимально использовать каждый час. Инструменты учета времени, такие как Harvest, Toggl и Timely, позволяют легко отслеживать, над какими проектами вы работаете, когда и какие проекты наиболее прибыльны.

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

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

Юридические вопросы. Для каждого клиентского проекта вы должны быть уверены, что защищаете себя юридически, в том маловероятном случае, когда проект пойдет не так. LegalZoom упрощает создание LLC, а такие инструменты, как HelloSign, позволяют клиентам легко подписывать контракты и предложения в электронном виде.

Диджитал-маркетинг

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

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

Вот что вам следует знать:

Маркетинг в соцсетях. Социальные сети – самый быстрый способ найти клиентов на веб-дизайн.

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

А такие сервисы как Canva помогут вам шустренько собрать прикольную графику для ваших публикаций.

Buffer может однажды пригодится для автоматизации маркетинга в соцсетях. Buffer

Поисковая оптимизация. Создайте себе сайт, подберите поисковые запросы и начинайте создавать полезные материалы в блоге. Такая стратегия помогает найти дополнительных клиентов.

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

А если у вас WordPress, то такой плагин, как Yoast, уже может помочь с базовой опимизацией.

Коммуникация

И последнее, но не менее важное: важно поддерживать открытые каналы связи с вашими клиентами.

Убедитесь, что клиенты в курсе статуса проектов, вы не забываете собирать отзывы и улучшать ваши процессы работы.

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

Вот несколько инструментов, которые помогут вам управлять общением с клиентами:

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

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

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

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

Где еще больше материалов о дизайне

Статья призвана помочь вам сориентироваться на старте, надеемся большая часть была полезна. Если что, пишите. На связи!

Ещё больше статей о дизайне, а также полезные сервисы можно найти в сообществе на Facebook.

Первые шаги в веб-дизайне

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

Веб дизайн с чего начать – как стать веб дизайнером самостоятельно

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

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

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

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

Для кого эта статья о веб дизайне?

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

Требования к начинающим веб дизайнерам

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

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

Также, вам пригодятся знания основных языков кодирования, а именно HTML и CSS, об этом мы тоже поговорим.

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

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

Как использовать этот руководство по веб дизайну для начинающих

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

Дизайн в браузере для начинающих

Возможно, знаете, что большинство дизайнеров сначала используют графические редакторы, а уже потом отдают свои проекты кодеру на верстку. Photoshop – это наиболее часто используемый инструмент, но дизайнеры также используют такие программы, как Sketch, GIMP, Inkscape и Illustrator.

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

Рабочий процесс на основе браузера имеет ряд других преимуществ:

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

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

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

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

• Уроки фотошопа
• Курс обучения Adobe Illustrator CC
• Экспресс курс Adobe Illustrator CS6
• Векторная графика

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

Навыки, которые вам понадобятся, чтоб стать веб дизайнером

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

UX / UI дизайн

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

Больше информации об этом можно найти в статье «Что такое UX/UI дизайн на самом деле?»

Эстетические навыки

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

Сочетание шрифтов и типографика

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

Чтоб провести вас «от А до Я», предлагаю просмотреть книгу Эмиля Рудера «Типографика» . Чтение может быть довольно долгим, потому для желающих сразу же приступить к практике – короткое видео по теме, а так же гайд по определению шрифтов по картинке (это если вдруг вы уже нашли хороший пример текста, и хотели бы идентифицировать его шрифт).

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

Многие люди, включая меня, выбирают свои шрифты из Google Web Fonts. Шрифты Google можно «встраивать» в сайт, и это довольно удобно. Более того, можно пользоваться готовыми комбинациями шрифтов:

• Крутые примеры комбинаций шрифтов
• Статья с крутыми сочетаниями шрифтов

Другие подобные примеры можно найти в Интернете.

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

Если Google шрифтов мало, то можно заглянуть на WebDesignerDepot, Fonts-online, и другие сайты.

Теория цвета и цветовые схемы

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

• Сочетание цветов в веб-дизайне
• Flat цвета в веб-дизайне
• Как комбинировать цвета в веб дизайне: Тренды
• Как Использовать Сочетания Цветов в Дизайне Сайта

Из обязательных инструментов – Adobe Color CC

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

Композиция и общая организация

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

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

• Основы композиции сайтов
• Использование «Золотого сечения» и «Правила трех» в веб-дизайне
• Модульные сетки в веб-дизайне

Веб дизайн тренды

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

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

• abduzeedo.com
• behance.net
• noupe.com
• webdesignerwall.com
• flickr.com
• awwwards.com

Как стать веб дизайнером: HTML и CSS

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

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

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

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

Выливка на живую

Готовы разместить свой сайт в Интернете? Есть доменное имя (например: mywebsite.com) и хостинг (пространство на компьютере, постоянно подключенном к Интернету или онлайн хостинг, приобретенный у сторонних провайдеров)? Загрузите файлы на хостинг, откиньтесь в кресле, расслабьтесь и …

Что делать после запуска сайта

Поправьте ошибки и допилите то, о чем забыли

“Ах, да, вот это вот… я точно хотел это поправить. ”– С кем не бывает. Почти неизбежно после запуска любого сайта всплывают ошибки. И чем больше сайт, тем больше вероятность, что вы пропустили ошибку или что-то забыли. Для вашего удобства, вот довольно подробный контрольный список-чеклист :

• Что проверить перед запуском сайта

Соберите отзывы

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

Как стать веб дизайнером – итоги

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

А если вы уже готовы опробовать свои навыки на живом проекте, и Вам нужен хороший хостинг – в качестве бонуса, вы можете купить хостинг на год от нашего партнера Inmotion всего за 1$.

Купить хостинг за $1

что изучать и как развиваться?

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

Кому стоит изучать веб-дизайн?

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

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

1. Способность обучаться. Если вы умеете самостоятельно искать ответы на свои вопросы, а также находить, изучать и, самое главное, понимать новый материал, ваш рост в веб-дизайне будет более стремительным.
2. Эмпатия. Умение ставить себя на место другого человека (пользователя вашего будущего сайта), поможет вам создавать проекты, ориентированные на финального потребителя и решающие реальные задачи.
3. Собранность и дисциплинированность. Работа (и обучение) веб-дизайнера с нуля — сложный многошаговый процесс. Иногда что-то может не получаться. Без жёсткого стержня внутри принимать свои недостатки и исправлять ошибки будет немного труднее.

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

Веб-дизайн с нуля: самостоятельно или на курсах?

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

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

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

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

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

Как научиться веб-дизайну с нуля?

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

В отдельной статье на сайте мы разместили наш персональный план «Как стать веб-дизайнером за 5 шагов». Его можно использовать как некий «скелет» для организации дальнейшего обучения.

Курсы веб-дизайна с нуля

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

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

Полезные книги для веб-дизайнера

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

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

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

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

Ководство — Артемий Лебедев. Книга представляет из себя свод правил и принципов, применимых к самым разным областям дизайна. Руководитель самой известной дизайн-студии России рассказывает одновременно о законах композиции, и о том, какие кавычки использовать в макетах. Читать книгу можно с любого места, и в этом её прелесть. Скачать книгу →

Не заставляйте меня думать — Стив Круг. Настоящая кладезь знаний для всех, кто планирует связать свою жизнь с дизайном интерфейсом. Главная мысль автора заключается в том, что интерфейс (сайт или приложение) в руках пользователя не должен быть преградой для решения поставленных задач. И, конечно же, Стив Круг на примерах показывает, как сделать продукт в разы круче. Скачать книгу →

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

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

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

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

YouTube-каналы и уроки

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

Школа #VA. Не будем лукавить и сразу же пригласим вас на наш собственный YouTube-канал. На нём регулярно выходят лекции для начинающих веб-дизайнеров. Мы стараемся рассказывать не только о том, как работать в графических редакторах или сочетать цвета — большое внимание на нашем канале уделяется работе с заказчиками, развитию и организации бизнеса.

Litus Pro. Отличный современный канал с десятками подробных туториалов и насыщенных инструкций. Автор канала имеет за плечами большой опыт и не занимается навязчивой рекламой своих курсов или услуг. Рекомендуем смотреть лекции и одновременно с этим повторять действия автора канала в графическом редакторе.

Блоги и статьи

Ежедневно на свет появляются десятки и сотни полезнейших статей на тему веб-дизайна, интерфейсов, пользовательского поведения и сайтах. Моя персональная рекомендация — установите приложение для комфортного чтения RSS-лент и добавьте в него ваши любимые блоги. Затем тратьте по 20-30 минут в день на чтение новых материалов: взрывной рост и освоение веб-дизайна с нуля обеспечено.

Не знаете, на какие блоги и каналы подписаться? Ловите подборку самых полезных:

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

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

Awdee. Данный интернет-портал является отличным источником вдохновения. На нём периодически публикуются кейсы других дизайнеров и интересные работы как из мира сайтов/интерфейсов, так и из сфера брендинга.

---

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

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

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

Какой компьютер нужен для веб-дизайна?

Я опишу примерные технические характеристики от которых стоит отталкиваться. Это не значит, что если у вас они меньше — то вы не сможете работать веб-дизайнером. Нет. Просто у вас будет «подвисать» и тормозить фотошоп. А иногда, если вы забудете сохранить работу может стоить кучи потерянных часов, а то и целого дня. У меня такое было не раз, так как я начинал с б/у компьютера уровня pentium-3 (кто в теме — тот поймет:)) и «пузатого» 15-дюймового монитора, на котором размывалось изображение из-за того что он уже был очень старый. Итак минимальные технические характеристики компьютера для старта в веб-дизайне:

• Процессор: от 2-х ядерного и выше.
• Оперативная память: от 2 гб и выше.
• Видео-карта: от 256 мб и выше.
• Жесткий диск: в принципе не важно, для работы вам хватит 30 гб. — сейчас с таким маленьким объемом и не производят.

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

Монитор для веб-дизайна:

• 23 дюйма будет самый оптимальный по цене/качеству. Для веб-дизайна чем больше рабочая область тем лучше, вы будете меньше передвигать окна, меньше делать ненужных кликов. За счет этого вы сразу же сможете повысить свой доход. Больше 23 дюймов брать не стоит, так как там цена растет непропорционально выгоде.
• Широкоформатный (этот монитор больше вытянут по горизонтали и на нем удобнее «дизайнить»)
• С матовой поверхностью дисплея. Если вы возьмете с зеркальной — то замучаетесь, потому что любой источник она будет отражать и будет жутко напрягать.

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

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

Минимальный уровень владения компьютером и программами для работы веб-дизайнера:

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

• текстовый редактор (word)
• работа с таблицами (exel)
• браузеры (google chrome, opera, firefox)
• архиваторы (winrar)
• email (почты: mail, google, yandex)
• знать что такое аудио и видео-кодеки (k lite codec pack)
• антивирусы (касперский, dr.web)
• и вообще лучше изучить уроки работы на компьютере

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

• Терпение и усидчивость — далеко не каждый сможет сидеть весь день за компьютером без общения и «движухи». Большинство людей не выдержат такой «пытки» больше 3-х недель.
• Ответственность — вы будете работать за результат. Сделали дизайн — получили деньги. Не сделали — сидите без денег.
• Самодисциплина — многие думаю «О! как это круто — не нужно рано вставать, ехать на работу…» и т.п. Но как только таке люди реально попадают в такую ситуацию, они афигивают от того как сложно самого себя заставить работать.
• Предрасположенность и природные задатки в веб-дизайне: если у вас их нет, то с нынешней конкуренцией будет очень тяжело. Но добиться успеха можно. Просто вложения усилий и отдача будут не оптимальны.
• Любовь к веб-дизайну. Если, рисуя сайты, часы пролетают как минуты, вы забываете поесть — то у вас есть любовь к этому делу. Если во время работы вы то и дело думаете когда будет перерыв, то веб-дизайн — не ваше.

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

• на изучение: 10-20% времени
• на практику и работу: 80-90% времени

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

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

• Будет много ошибок. Будет казаться что вы совершаете 10 ошибок в 9 делах. Это нормально. Так у всех. Главное — старайтесь не повторять ошибки больше 2-х раз. Ну а если повторили — не расстраивайтесь. Это жизнь. Вы — человек. Мы не идеальны и это нормально 😉
• Будет много критики и будет казаться что все не получается, прогресса нет. Как только поймаете такие мысли — идите отдыхать и отрываться. Самое тупое что можно сделать в такой ситуации — это все бросить. Много и хорошо отдыхайте от веб-дизайна — тогда и прогресс заметите 😉
• Первое время будет мало заказов, они будут дешевые и заказчики будут редкостные мудаки — это нормально. Этот этап вы пройдете за 1-3 месяца — дальше будет гораздо лучше.
• Забудьте о деньгах на первые пол года. Если после этой мысли у вас пропало желание заниматься веб-дизайном — то лучше вам этим не заниматься. Первые пол года ваша цель — наработка опыта, портфолио и клиентской базы. Только после этого можете начинать думать о деньгах.
• Постоянно обучайтесь из всех возможных иcтоничков: сайты, форумы, видео на ютуб, курсы, книги и т. д. Собирайте всю информацию и никому не верьте на слово, в том числе и мне. Проверяйте все на практике и берите только то, что нужно вам и нужно в данный момент.

Как начать зарабатывать на дизайне и какой путь выбрать?

Когда начинающий дизайнер становится перед выбором — фриланс, компания или аутсорс, нужно взвесить все «‎за» и «‎против». Место работы стоит выбирать ответственно, учитывая возможности и условия, которые будут вас ждать в будущем. В этой статье Александр Чмыра, Senior Experience Designer в EPAM и тренер в Web Academy, расскажет о специфике разных сфер и проанализирует требования, уровень оплаты и возможности в них для дизайнеров.

Содержание статьи:

• Уровни развития дизайнера
• Какие направления сейчас популярны в веб-дизайне?
• Пути, которые можно выбрать дизайнеру
• Фриланс
• Дизайн-студия
• Стартап
• Продуктовая компания
• Аутсорс
• Что хорошо оплачивается на рынке?

Уровни развития дизайнера

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

Дизайнеров в сфере IT условно можно разделить на категории. Они начинают с позиции Trainee — стажера. Многие путают Trainee с Junior, ошибочно думая, что просто изучив все, они уже станут джуниорами. Но Junior — это уровень, которого нужно достичь. Это человек, который уже хорошо понимает, как делать дизайн. Он умеет работать с такими тулами, как Figma, Photoshop, Sketch и т.д. Возможно, он еще будет работать под присмотром более опытного дизайнера, но база у него уже есть.

Далее идут уровни Middle, Senior. После этого еще возможно развитие до Lead-дизайнера, Principal дизайнера и т.д. Но сегодня мы будем говорить о тех, кто только начинает свой путь — это Trainee и Junior дизайнеры.

Какие требования рынка к начинающему дизайнеру?

• качество и уровень портфолио
• уровень знания английского
• UI навыки — это умение работать с разными тулами (Photoshop, Figma, Sketch). Скорость работы в них, понимание основных принципов визуального дизайна.
• UX навыки включают в себя умение анализировать, изучать и понимать потребности пользователей, вести переговоры с клиентом и т. д.

Какие направления сейчас популярны в веб-дизайне?

В дизайне сейчас есть 2 основных направления: UI и UX. UI (User Interface) — то, что мы видим, приходя на сайт. Это визуализация интерфейсов, это про «‎красиво и удобно»‎. UX (User Experience) — более сложная штука. Она связана с исследованиями и практиками, которые позволяют узнать информацию о пользователе. При помощи таких исследований можно улучшить юзабилити сайта, понять потребности пользователя. Это научно-прикладная вещь.

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

Ближайший курс по направлению: Web Design с нуля

В этой статье мы рассмотрим пути, по которым может пойти дизайнер: 

• работа на фрилансе
• дизайн-студия
• стартап
• продуктовая компания
• аутсорс

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

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

Freelance

Как молодому дизайнеру найти работу на фрилансе?

Вам нужно потратить кучу времени, чтобы заполнить всевозможные аккаунты. LinkedIn — входной билет в сферу IT. Нужно детально заполнить все графы, прикрепить туда портфолио с Behance или Dribble. Еще вы можете подписаться на разные telegram-каналы. Там невысокая оплата, но зато вы сможете прокачать свое портфолио. Еще можно найти заказы на djinni.com, Dou. 

Есть фриланс биржи, главная из них Upwork. Но на Upwork с опытом в один месяц и одной работой в портфолио вас не зарегистрируют. Платформа хочет, к примеру, минимум 1 год опыта и 5 работ в портфолио. О нюансах русскоговорящих бирж расскажу в следующем пункте. Сарафанное радио — тоже вид фриланса, причем очень эффективный. Часто сарафанное радио обеспечивает больше заказов, чем фриланс. Чистый фриланс на бирже требует дополнительных усилий. В сарафанном радио такой нужды нет: вы делаете хорошо один заказ и слава о вас расходиться дальше.

Самое сложное на любой бирже — это заработать первый доллар. 

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

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

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

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

Какие требования у фриланс бирж?

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

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

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

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

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

Требований по UX к начинающим дизайнерам нет. Но если вы выучите базовые вещи про user experience и укажете это, у вас будет огромное преимущество перед представителями Индии, Пакистана и т. д. 

Преимущества Freelance

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

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

3. Работа с командой на фрилансе практически отсутствует. Вы делаете дизайн, который в 8 из 10 случаев дальше никуда не пойдет. Например, вы сделали дизайн сайта, который клиент отнес разработчикам. И здесь они ему объясняют, что дизайн сложно реализовать, называют цену в 2 или 3 тысячи долларов, которые заказчик не готов заплатить. Начинающие дизайнеры часто рисуют фантазию, не имея понятия, какая техническая сложность стоит за реализацией. В этом случае отсутствие работы с командой можно считать плюсом, иначе к дизайнеру были бы вопросы.

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

Дизайн-студия

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

Требования в дизайн-студии

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

UI умения требуются хорошие, поскольку все нужно делать быстро. Скорость — это крутой навык, ведь например, Senior дизайнер может рисовать всего 2 часа в день, а все остальное время заниматься митингами. Причем Junior потратит 8-9 часов и не создаст того, что Senior сделает за час.

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

Преимущества дизайн-студии

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

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

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

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

Стартап

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

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

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

Требования в стартапе

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

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

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

Преимущества стартапа

1. Оплата может быть несоразмерной вашему уровню. В особенности, если вы работаете с западными стартапами.

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

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

4. Улучшение портфолио. Стартап — это не landing page, и редко это e-commerce сайт для продажи чего-то. Обычно это какая-то сложная структура, например, база данных, работа с информацией. Это ценится, особенно если вы подключали работу с клиентом, анализировали конкурентов. Такой проект может стать ключевым в вашем портфолио.

Продуктовая компания

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

Требования в продуктовой компании. 

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

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

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

Преимущества продуктовой компании

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

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

3. Работа с командой — в продуктовой компании вы в этом хорошо прокачаетесь. На этом уровне уже все работают по методологиям Agile, Scrum, Kanban и т. д. 

4. Улучшение портфолио просто фантастическое. Я 1,5 года делал один проект, но при этом было много активностей, связанных с пользователями, исследованиями и принятием решений. Здесь портфолио оформляется совсем по-другому: вы показываете проблемы, информацию, которую собрали, решение. Важно показывать цифры (например, как увеличилась конверсия), ведь так вы говорите о своей ценности для бизнеса.

Аутсорс

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

Требования в аутсорсе

Знание английского must have. В среднем для Junior дизайнера требуется В1/В2. В аутсорсовых компаниях вы чаще общаетесь с англоязычным заказчиком: нужно защищать свои идеи, дизайны, понимать, чего от вас хотят. К тому же вы коммуницируете с англоговорящими разработчиками из разных стран. Руководство таких компаний понимает, что навыки можно подтянуть. Но изучение английского занимает много времени, а никто столько ждать не готов.

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

UX умения тоже требуют. Конечно, редко Junior дизайнеру дадут делать интервью с пользователями или какие-то сложные UХ вещи. Но он должен понимать, что делает его наставник (Senior дизайнер), для чего он это делает, и как это использовать. 

Преимущества аутсорс-компаний

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

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

3. Работа с командой поставлена на очень крутом уровне. В аутсорсовых компаниях занимаются обучением и прокачкой своих людей. Они рассчитывают на ваше длительное пребывание в компании и вкладывают сумасшедшие ресурсы в ваше развитие. У вас будут курсы и ментор — человек, который будет следить за вашим прогрессом.

4. Улучшение портфолио. Тут уже имеет вес имя заказчика. Например, представьте, как повлияет на ваше портфолио опыт работы с Microsoft.

Что хорошо оплачивается на рынке: дизайн презентаций, сайтов или соцсетей?

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

О моем опыте

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

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

 

 

 

 

 

Веб-дизайн для начинающих: простое (но полное) руководство

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

Джефф Карделло

Превосходный веб-дизайн

От 101 до продвинутого уровня узнайте, как создавать сайты в Webflow, из более чем 100 уроков, включая основы HTML и CSS.

Начальный курс

Начальный курс

Бесплатный курс

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

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

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

Блог — отличное место для начала. Это будет хорошим упражнением по дизайну и , вы узнаете, как работает система управления контентом (CMS), что будет важно знать для будущих дизайнов сайтов. Лучше всего — вам не нужно начинать с нуля. Существует множество шаблонов блогов, которые легко собрать воедино.

Шаблоны — ценный инструмент обучения. Наблюдение за тем, как стилизуются и сочетаются элементы HTML, CSS и Javascript, поможет вам глубже понять, что заставляет дизайн работать. Вы можете использовать шаблоны в качестве основы для внесения изменений и настроек.

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

Найдите вдохновение у других дизайнеров

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

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

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

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

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

Ищите источники вдохновения за пределами Интернета

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

Обратите внимание на типографику 

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

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

Пусть изобразительное искусство повлияет на вас

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

Изучение истории искусства еще больше расширит ваши знания в области дизайна.

‍

Изучение различных типов дизайна

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

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

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

‍

Подготовьте контент до начала работы 

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

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

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

Сделайте свой дизайн простым и интуитивно понятным

Будь то текст, навигация или CTA, никто не захочет возиться с вашим дизайном.

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

Понимание основ взаимодействия с пользователем (UX)

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

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

При создании своего первого веб-сайта помните об этих руководящих принципах UX:

• Делайте вещи простыми и интуитивно понятными
• Излагайте концепции в логической последовательности
• Удовлетворяйте потребности вашей аудитории и не поддавайтесь искушению продемонстрировать свои навыки за счет юзабилити
  

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

Понимание основ пользовательского интерфейса (UI)

Если вы новичок в веб-дизайне, вас может смутить разница между UI и UX. Большинство из нас были. Знайте это — это два разных понятия.

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

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

• Функциональность интерактивных элементов должна быть очевидной
• Единообразие должно определять удобство использования — действия должны следовать логическим шаблонам
• Выбор дизайна должен осуществляться с четкой целью

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

Готовы избавиться от страха перед фрилансом?

Знакомство с The Freelancer’s Journey: бесплатный курс, который научит вас преуспевать в качестве внештатного веб-дизайнера — от привлечения клиентов до запуска их веб-сайтов.

Зарегистрируйтесь сейчас

Подпишитесь, чтобы стать инсайдером Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Зарегистрируйтесь сейчас

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

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

Макет

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

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

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

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

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

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

Цвет 

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

Вот несколько простых подходов к выбору цветовой схемы для вашего первого веб-сайта.

Монохромный

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

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

Дополнительный

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

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

Типографика

Webflow поставляется с широким выбором шрифтов и возможностью добавления дополнительных.

‍

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

-Hermann Zapf

Итак, какие правила необходимо знать вам, начинающему дизайнеру?

Типографика сообщает тон

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

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

Шрифты с засечками и шрифты без засечек

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

Ознакомьтесь с различиями между PT Serif и PT Sans (без засечек).

Вот PT Serif:

А вот PT Sans:

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

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

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

Орнамент против практичности

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

Технологии типографики

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

Ознакомьтесь с разделом «Веб-типографика 101», чтобы узнать больше о типографике и о том, как ее можно оформить.

Начните проектировать 

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

Получить отзыв 

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

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

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

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

Webflow делает веб-дизайн доступным для начинающих

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

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

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

20 августа 2019 г.

Веб-дизайн

Поделиться

Рекомендуемые чтения

Веб-дизайн

Веб-дизайн

Веб-дизайн

Подпишитесь на Webflow Inspo

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

Электронная почта

Вы можете отказаться от подписки в любое время, никаких обид. Политика конфиденциальности

Все готово, следите за нашей следующей рассылкой!

К сожалению, адрес электронной почты недействителен. Попробуйте еще раз!

Подробнее о Designer

Designer

Сила CSS, HTML и JavaScript в визуальном холсте.

Взаимодействия

Визуально создавайте взаимодействия и анимацию веб-сайта.

Подробнее о взаимодействиях

CMS

Определите собственную структуру контента и создавайте дизайн с использованием реальных данных.

Подробнее о CMS

Электронная торговля

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

Подробнее об электронной торговле

Редактор

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

Подробнее о Редакторе

Хостинг

Настройте молниеносный управляемый хостинг всего за несколько кликов.

Подробнее о хостинге

Бесплатно, пока вы не будете готовы к запуску

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

Начните — это бесплатно

Преобразование процесса проектирования по телефону

30 советов по изучению веб-дизайна за 30 дней

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

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

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

Более 800 дизайнерских шаблонов веб-сайтов + конструктор с функцией перетаскивания

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

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

Адаптивный дизайн

Интеллектуальная аналитика

Социальные инструменты

Полная свобода дизайна

Инструменты для брендинга и логотипов

Потрясающие шаблоны

Создайте свой сайт бесплатно

1. Запустите веб-сайт

Лучший способ начать изучать веб-дизайн — начать им заниматься. Это совет от Дэвида Кадави, автора книги «Дизайн <для> хакеров».

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

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

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

2. Читайте все, что можете

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

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

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

3. Будьте эффективным коммуникатором

Если вы не умеете красноречиво выражать свои мысли, освежите эти навыки. Большая часть дизайна веб-сайта — это общение.

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

4. Подпишитесь на Tuts+ и Envato Elements

Подумайте о подписке на Envato Elements, которая также дает вам доступ к превосходному учебному ресурсу Tuts+.

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

5. Думайте в HTML

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

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

6. Играйте с кодом в Codeacademy

Хотя HTML — хорошее начало, вы можете выучить практически любой язык программирования в Codeacademy. Бесплатный набор инструментов научит вас программировать с помощью интерактивных занятий и игр.

Вы можете выбрать курс Codeacademy, где и когда он вам нужен, а также начинать и останавливать его по мере необходимости. Выберите предмет для изучения — веб-разработка, программирование, наука о данных — или язык, на котором нужно сосредоточиться — HTML и CSS (отличное место для начала), Python, Java, SQL, Ruby и другие.

7. Научитесь понимать CSS

CSS или каскадные таблицы стилей определяют представление документа, написанного на HTML, XML или SVG.

Как определено Mozilla

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

У Mozilla также есть отличная коллекция ресурсов CSS для начала работы с подробным описанием того, как работает CSS, включая селекторы и свойства, написание правил CSS, применение CSS к HTML, как указывать длину, цвет и другие единицы измерения в CSS, каскад и наследование, основы блочной модели и отладку CSS. Затем модули переходят к объяснению стилей текста и полей.

8. Примените свои дизайнерские навыки в Интернете

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

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

9. Обратите внимание на сайты, которые вам нравятся

Обратите внимание на сайты, которые вам нравятся. Что в них вас привлекает? (И как научиться воспроизводить эти элементы?) Обратите внимание на:

• Типография
• Навигация
• Использование изображений и пространства
• Дизайн форм
• Эффекты анимации и прокрутки
• Цвет

10. Нарисовать каркас

Wireframing — это мозговой штурм веб-дизайнера.

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

Не знаете, как создать каркас? У Digital Telepathy есть руководство по передовым методам, которое поможет вам учиться.

11. Найдите время, чтобы изучить Sketch

Sketch — это инструмент векторного рисования для Mac, который упрощает создание элементов дизайна. Многие дизайнеры обращаются к Sketch для создания элементов пользовательского интерфейса и повторяющихся блоков дизайна.

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

12. Будьте в курсе технологий

AI, VR, AR, 360-градусное видео, боты.

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

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

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

13. Освойтесь с SEO

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

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

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

14. Играйте с конструктором сайтов

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

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

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

15. Найдите наставника

Есть ли кто-то, с кем вы работаете, кем вы восхищаетесь как веб-дизайнером? Пригласите их на обед и расспросите их об отрасли.

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

16. Присоединяйтесь к сообществу CodePen

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

Вот еще немного от основателей сайта: «CodePen — это социальная среда разработки. По сути, он позволяет вам писать код в браузере и видеть его результаты по мере сборки. Полезный и освобождающий инструмент для разработчиков с любыми навыками, особенно для тех, кто учится программировать. Мы фокусируемся в первую очередь на интерфейсных языках, таких как HTML, CSS, JavaScript, и синтаксисе предварительной обработки, которые превращаются в эти вещи».

17. Возьмите урок

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

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

18. Хотите что-нибудь сделать? Гуглите

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

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

19. Обратите внимание на взаимодействие с пользователем

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

Вот как Interaction Design Foundation описывает UX-дизайн:

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

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

20. Обратите внимание на тенденции дизайна

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

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

21. Создать без цвета

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

Возможно, это не всегда верно, но это отличная отправная точка.

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

22. Научитесь любить шрифты Google

Google Fonts — ваш друг.

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

Ограничение состоит в том, что вы можете работать только с тем, что есть в библиотеке Google Fonts. Но если постараться, то можно найти что-то, что подойдет практически для любого проекта. Это сэкономит вам много времени в долгосрочной перспективе.

23. Разберите комплект пользовательского интерфейса

Загрузите пользовательский интерфейс или набор значков и разберите их.

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

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

Затем попробуйте создать или настроить один или два элемента самостоятельно.

24. Станьте типографом

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

Начните с книги Эллен Луптон «Думая шрифтом». (Есть также одноименная книга.) Луптон — авторитет в области типографики, и ее информация мгновенно заставит вас думать как типограф.

25. Перейти к JavaScript

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

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

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

26. Обновите свой портфель

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

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

27. Испытайте себя

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

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

28. Максимизируйте свой опыт

Иди и займись дизайном. Вы должны начать разрабатывать веб-сайты, чтобы стать веб-дизайнером.

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

Чего ты ждешь? Перестаньте откладывать.

29. Запросить обратную связь

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

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

30.

Продолжайте учиться новому

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

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

Полное руководство по началу работы в веб-дизайне

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

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

Для дизайнеров среди нас: вы когда-нибудь говорили кому-нибудь «Я разрабатываю веб-сайты» и испытывали этот холодный ужас, когда они отвечали: «Круто! Ты можешь научить меня, как это делать?» Я имею в виду, объяснить, насколько трудным может быть дизайн, сложно. Это особенно верно, когда человек, спрашивающий, мало знает о компьютерах. Многие люди просто предполагают, что вы щелкаете и перетаскиваете все на экран, может быть, как в PowerPoint. Я скажу вам это бесплатно: опция PowerPoint для экспорта «веб-страниц» не помогла. Мы здесь, чтобы помочь вам исправить эту ошибку. В следующий раз, когда кто-то спросит вас, как создавать веб-сайты, укажите здесь.

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

 

Для кого это?

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

«Минимальные требования»… низкие. Если вы знаете, что такое папки и текстовые файлы, вы можете начать. Это так просто

«Минимальные требования» для людей, которые хотят разработать свой первый веб-сайт, невелики. Если вы знаете, что такое папки и текстовые файлы, вы можете начать. Это так просто.

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

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

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

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

Как пользоваться этим руководством

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

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

Мы разрабатываем в браузере

Возможно, вы просматривали Интернет и заметили, что многие люди сначала используют графические редакторы для разработки своих веб-сайтов. Они кодируют дизайн после или поручают это сделать кому-то другому. Чаще всего используется Photoshop, но люди также используют такие программы, как Sketch, GIMP, Inkscape и Illustrator.

веб-сайты должны быть разработаны в браузере… потому что люди не просматривают веб-страницы в Photoshop

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

Кроме того, рабочий процесс на основе браузера имеет ряд других преимуществ:

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

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

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

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

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

 

Образ мышления, который вам понадобится

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

1. Если они сообразительны, они сначала набросают несколько идей на бумаге. Затем они откроют Photoshop. Будучи любителем, я всегда начинал со второго шага — не повторяйте моих ошибок.
2. Они вложат свое сердце, душу, кровь, пот и слезы в свои лучшие идеи. Эти идеи сформируют завершенный и красивый дизайн главной страницы (вероятно). Затем, если у них есть начальник или клиент, который запрашивает это, они могут быстро собрать несколько других вариантов дизайна/макета.
3. Клиент почти неизбежно выберет одну из «низших» концепций по своим собственным причинам. Даже если это не «вина клиента», может быть очень и очень сложно вернуться и изменить дизайн, который вы уже конкретизировали или «закончили».

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

Все повторяется

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

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

Делайте все правильно, и вы получите фантастическую отдачу от своих инвестиций.

Вы никогда не перестанете учиться

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

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

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

Содержание важнее всего

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

Первый шаг в разработке веб-сайта — это… контент веб-сайта… Он нужен вам в первую очередь. Это не подлежит обсуждению

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

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

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

Следствие: типографика в основном это веб-дизайн

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

Поэтому само собой разумеется, что типографика является наиболее важной дисциплиной эстетического дизайна, которую необходимо освоить. Если люди могут 90 024 прочитать 90 025 ваш контент, вы — золотой человек. Не поймите меня неправильно, все дисциплины дизайна важны; но начните с типографики. Красивый текст унесет вас далеко.

Вы просматриваете Интернет не так, как ваши пользователи

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

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

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

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

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

Вы что-то продаете

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

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

 

Навыки, которые вам понадобятся

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

А пока начнем с того, что вам нужно знать.

Дизайн взаимодействия с пользователем

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

Конечно, есть ресурсы, которые могут помочь вам начать работу, например, что такое дизайн взаимодействия с пользователем? Эта всеобъемлющая статья журнала Smashing Magazine охватывает основы UX-дизайна и включает в себя обширный список ссылок на другие ресурсы. Как только вы закончите с этим, обязательно прочитайте UI vs UX: в чем разница? Дейна Миллера. (Иногда вы будете видеть такие термины, как «дизайн пользовательского интерфейса» и «дизайн UX», используемые взаимозаменяемо, и это производит неправильное впечатление.) Вайрфрейминг — это процесс, во время которого вы можете сначала набросать некоторые очень простые идеи макета на бумаге и ручке. Ручка и бумага или программа для рисования на планшете идеально подходят для быстрых и грубых концепций, с которыми вы будете работать.

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

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

Эстетические навыки

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

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

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

Типографика

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

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

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

После того, как вы изучили правила типографики, вы можете попробовать подобрать шрифты для своего проекта. Есть много хороших бесплатных, так что осмотритесь. Многие люди, в том числе и я, выбирают шрифты в Google Web Fonts. Шрифты Google позволяют напрямую «встраивать» шрифты для использования на вашем веб-сайте, так что это удобно. Более того, некоторые замечательные дизайнеры составили списки комбинаций шрифтов, которые вы можете попробовать:

• Топ-5 рекомендуемых комбинаций шрифтов Google
• 8 удивительных комбинаций шрифтов Google 10 еще более удивительных Google
• комбинации WebFont, которые стоит попробовать сегодня
• Еще 10 отличных комбинаций шрифтов Google, которые вы можете скопировать

Если вы хотите создать свои собственные пары шрифтов Google, воспользуйтесь The Web Font Combinator. Это инструмент, который позволяет быстро просмотреть комбинации шрифтов разумным образом. Для более продвинутого инструмента планирования типографики попробуйте Typecast. У него есть бесплатный план, который подойдет большинству начинающих и дизайнеров-одиночек. Если вы начинаете работать с другими, и вы на самом деле нужно предоставить им доступ для редактирования к планированию вашего шрифта, цены совсем не плохие. Typecast также предоставит вам доступ к платным шрифтам, которых нет в библиотеке Google Fonts.

Еще одно место для поиска веб-шрифтов: Font Squirrel. Font Squirrel имеет обширную библиотеку бесплатных шрифтов для использования на веб-сайтах. В отличие от Google, встраивать их не так удобно. Вам придется сделать это самостоятельно. Если вы хотите узнать, как это сделать, вот отличное руководство. Однако прежде чем вы это сделаете, вы можете пропустить вперед и сначала изучить некоторые основы HTML и CSS.

И последнее, но не менее важное: здесь, в Webdesigner Depot, есть множество великолепных шрифтов, бесплатных и платных. У нас также есть много отличных статей о типографике, которые выходят за рамки основ. Поищите на сайте шрифты (некоторые из них находятся в разделе Freebies). Вы можете найти статьи по типографике здесь: https://www.webdesignerdepot.com/category/typography/

Теория цвета

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

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

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

HTML и CSS

HTML означает «язык гипертекстовой разметки». Каждый веб-сайт, на который вы когда-либо смотрели, сделан из HTML. HTML — это то, что сообщает вашему веб-браузеру, просматривает ли он обычный текст, изображение, ссылку, видео и так далее. Затем ваш браузер преобразует это в то, что вы видите на экране.

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

Выучить эти языки достаточно просто. Это самые простые компьютерные языки, которые вы когда-либо изучали. Тем не менее, они также обширны и могут комбинироваться множеством способов для создания множества потрясающих дизайнов. Вам понадобится некоторое время, чтобы научиться правильно их использовать. Я предлагаю начать с Code Academy. Code Academy — это сайт, на котором вы можете бесплатно изучить HTML и CSS, а также несколько языков программирования. Объяснения остаются простыми. Вам предоставляются упражнения по кодированию и живая обратная связь о вашей работе.

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

Базовый JavaScript (необязательно)

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

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

jQuery

Примечание: Code Academy также научит вас использовать jQuery, если вы того пожелаете. jQuery — это, по сути, библиотека вещей, которые другие люди уже создали с помощью JavaScript. Он упрощает использование JavaScript на веб-страницах, упрощая выбор контента и управление им.

Если вы ничего из этого не поняли, ничего страшного. Начните с HTML и CSS. Изучите немного обычного JavaScript. Посмотрите на код других людей… много. Между этим и курсом Code Academy вы начнете в этом разбираться.

 

Инструменты, которые вам понадобятся

Программное обеспечение может быть деликатной темой: некоторые люди клянутся одним графическим редактором, а другие проповедуют хорошие новости о своем любимом текстовом редакторе. Третьи будут кричать: «Нет! Вы все ошибаетесь!» Снова и снова идут аргументы. Иногда они могут быть довольно интенсивными; но вы можете смело игнорировать большую часть этого.

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

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

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

Полный набор современных браузеров

Ах, браузер. Возможно, вы знаете его как «Chrome», или «Firefox», или, не дай Бог, «Эта синяя штуковина с буквой «E». Ни один из них не похож на другой. У всех них есть свои маленькие причуды, и веб-сайты могут выглядеть немного по-разному. Они также могут выглядеть совершенно по-разному, в зависимости от того, как был закодирован веб-сайт. Вам нужно будет протестировать свой веб-сайт и убедиться, что он выглядит правильно на как можно большем количестве из них. К счастью, возможности браузеров достигли такого уровня, когда веб-сайты в каждом из них начинают выглядеть почти одинаково. По крайней мере, макеты веб-сайтов в целом больше не являются проблемой.

Тем не менее, ключом к обеспечению качества вашей работы является тестирование ее в как можно большем количестве сред. Если ваш настольный/портативный компьютер работает под управлением Windows, то у вас уже есть Internet Explorer (Blue E). Вам также понадобятся Firefox и Google Chrome, по крайней мере.

На Mac у вас будет Safari, но у вас будут проблемы с запуском Internet Explorer. Это выполнимо, но раздражает. Если на вашем компьютере установлена ​​производная от Linux, такая как Ubuntu, вы можете протестировать Safari 5 и Internet Explorer 8 и более ранние версии. Следует отметить, что IE 8 и более ранние версии являются наиболее болезненными для работы версиями IE и почти не используются. Действительно, Internet Explorer в целом теряет популярность, и с каждым годом им пользуется все меньше людей. Более того, вместе с Windows 10 Microsoft выпустит новый браузер — с Play для Linux.

Мобильные браузеры

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

Word сообщает, что Firefox для iPhone/iPad готовится к выпуску в этом году. Однако вы можете установить Chrome и Opera Mini прямо сейчас.

На устройства Android можно установить Chrome, Firefox, Opera и Opera Mini. Никакой любви к сафари, хотя это и неудивительно. Apple любит держать вещи «в семье».

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

Каркасные инструменты

Ручка и бумага (или приложение для рисования)

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

Приложения для рисования

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

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

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

Редактор кода

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

Помните: если кто-то спросит вас о Vim или Emacs, медленно отойдите, не прерывая зрительного контакта. Это ваша единственная защита.

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

Итак, с чего начать? Я собираюсь сказать скобки. Он все еще находится в активной разработке, но он стабилен. Это бесплатно. Он работает на Windows, Mac и Linux. Он разработан специально для людей, которые проектируют и создают веб-сайты в браузере.

Редактор изображений

Возможно, вы больше не будете создавать веб-сайты в Photoshop, но вам все равно придется создавать и редактировать отдельные изображения. Будь то фотографии, логотипы или значки, вам что-то понадобится. Опять же, используйте то, что работает для вас. Это может быть Photoshop, GIMP, Paint.Net или одно из приложений Corel.

Локальный сервер (полудополнительно)

Наконец, вы можете установить веб-сервер на свой персональный компьютер. Веб-сервер обычно используется, чтобы сообщить Интернету: «Проверьте! Здесь есть сайт». По сути, веб-сервер дает каждому разрешение просматривать определенные файлы, составляющие ваш веб-сайт.

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

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

Для простоты использования скажу начать с XAMPP. Вы можете установить его на Windows, Mac или Linux, и все готово.

 

Пример процесса

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

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

Соберите свой контент вместе

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

Если вы пишете контент для себя, я предлагаю прочитать почти все, что написано на CopyBlogger. У них есть многолетние советы о том, как писать хороший контент для Интернета.

Архитектура контента

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

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

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

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

Примечание. Для этого я также использовал приложение Google для рисования.

Wireframing

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

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

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

Создание плиток стилей (или эквивалентных)

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

Плитки стилей — отличный способ сделать это. Вот объяснение того, что такое Style Tiles, прямо с официального сайта:

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

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

Кодирование

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

Текстовый редактор Brackets, на который я ссылался выше, имеет отличную функцию для этой части. Нажмите кнопку «Live Preview» в правой части окна Brackets, и он запустит для вас окно браузера. (Для этого вам необходимо установить Google Chrome.) Окно браузера будет обновляться в реальном времени с любыми внесенными вами изменениями.

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

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

Тестирование

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

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

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

Запуск

Готовы разместить свой веб-сайт в Интернете? Есть доменное имя (пример: mywebsite.com) и хостинг (место на компьютере, постоянно подключенном к интернету)? Загрузите эти файлы, расслабьтесь, расслабьтесь и…

 

Чем заняться после запуска

Исправьте то, что вы забыли.

Ой. Верно. Эта штука… ты хотел исправить это перед запуском. Как ты это забыл? Я имею в виду давай!

Это случается со всеми. Почти неизбежно возникают ошибки после запуска. Чем больше ваш сайт, тем больше вероятность, что вы что-то пропустили или забыли. Для вашего удобства вот довольно подробный контрольный список перед запуском: http://boagworld.com/mobile-web/pre-launch-checklist/

Задайте вопросы

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

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

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

Получите обратную связь

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

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

Сделайте все сначала

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

Эй, я же сказал, что работы много.

 

Избранное изображение, пространство для веб-дизайна через Shutterstock.

Советы по веб-дизайну для начинающих — все, что я хотел бы знать, когда начинал — Smashing Magazine

• 22 мин. чтения
• Вдохновение, интервью, Сообщество, Карьера, Рабочий процесс
• Поделиться в Твиттере, LinkedIn

Об авторе

Роб Боуэн — штатный писатель Web Hosting Geeks, давний дизайнер-фрилансер, а также начинающий видеооператор и режиссер, чей творческий голос и работы могут… Больше о Роберт ↬

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

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

Дополнительная литература на SmashingMag:

• Путь к тому, чтобы стать профессиональным веб-дизайнером-фрилансером
• Сообщество веб-дизайнеров предлагает советы новичкам
• Адаптивный веб-дизайн: что это такое и как его использовать
  

Больше после прыжка! Продолжить чтение можно ниже ↓

Приступая к работе

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

Просто сделай это

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

• Что бы это ни было, сделайте это сейчас.
• Хватит читать #smtips и займитесь созданием чего-то, что доставляет сообщение.
• Хватит откладывать и уже начинай!
• Самый страшный момент всегда наступает прямо перед началом.
• Бойся, все равно делай, ошибайся, повторяй.
• Хватит бездельничать; просто начни.
• Не раздумывай.

Начните с карандаша и бумаги

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

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

• Начните с ручки и бумаги, а не с мыши и клавиатуры.
• Лучшие идеи рождаются на бумаге.
• Всегда начинайте с карандаша и чистого листа бумаги. Это лучший способ получить лучший дизайн.
• Мой лучший совет по дизайну: забудьте о Mac, ПК и приложениях и начните работу с бумаги с хорошим острым карандашом.
• Используйте карандаш и бумагу, чтобы создать концепцию, прежде чем использовать компьютер.
• Всегда начинайте дизайн на бумаге. В набросках есть сила.
• Наброски ваших идей в начале проекта действительно могут помочь сформировать хороший дизайн.
• Всегда начинайте с бумаги.
• Делайте наброски на бумаге, а не в программе для проектирования, чтобы не ограничивать свои идеи текущими технологическими возможностями.
• При проектировании для Интернета придерживайтесь старой школы; сначала планируйте и прототипируйте свой пользовательский интерфейс и функциональность на бумаге.
• Выключите компьютер и вернитесь к основам; Вы не можете превзойти первоначальные наброски, сделанные старыми добрыми ручкой и бумагой.
• Совет дизайнера: начните с ручки и бумаги и обращайтесь к программе только тогда, когда точно знаете, что собираетесь делать.
• Когда я проектирую, мне нравится рисовать идеи на большом листе бумаги и описывать функциональность того, что я пытаюсь создать.

Крайние сроки

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

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

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

ПОЦЕЛУЙ

Самым частым ответом, который мы получили от наших подписчиков в Твиттере, был извечный совет «будь проще, глупец». KISS предлагается во многих отраслях, а в области дизайна это звучит как никогда актуально. Дизайн — это динамичное и коммуникативное поле, в котором бесчисленные элементы объединяются, чтобы передать предполагаемое сообщение. Тем не менее, чем больше вы добавляете к дизайну, тем более загроможденным он становится и тем больше вероятность того, что сообщение будет запутанным. Итак, постарайтесь создать максимально простую презентацию, которая будет эффективно общаться.

• Будь проще, тупица.
• Просто всегда лучше. Сделайте это видимым, а не визуальным.
• Работа дизайнера заключается в том, чтобы общаться максимально простым способом.
• Правило трех — мое любимое правило для лаконичных дизайнов: используйте три шрифта (макс.), три изображения и три цвета.
• Мой любимый совет дизайнеров — следовать принципу KISS: будь проще, тупица!
• Чистота, ясность и лаконичность полезнее, чем кричащий и загроможденный! Избавьтесь от беспорядка и сделайте его потрясающим.
• Делайте дизайн простым, чтобы люди сосредоточились на содержании.
• Просто и понятно!
• Для хорошего дизайна я предлагаю использовать не более двух шрифтов и несколько цветов, чтобы упростить его и избежать путаницы.
• Не усложняйте дизайн. Бритва Оккама говорит, что самое простое объяснение, скорее всего, правильное.
• Делать простое сложным — обычное дело. Делать сложное простым — удивительно простым — это и есть творчество. Это дизайн.
• Если он не служит цели, заберите его. В конце концов, лишняя графика служит только отвлечению внимания.

Белое пространство

Мы получили еще один популярный ответ, и он подпадает под K.I.S.S. зонтик — был о белом пространстве. Белое пространство действительно важно и, кажется, ускользает от многих дизайнеров, которые чувствуют необходимость чем-то заполнить каждый доступный дюйм. Тем не менее, многое можно сказать об использовании пустого пространства и отказе от дизайнерского греха ненужного беспорядка. Пустое пространство дает элементам страницы — и, соответственно, тем, кто просматривает страницу — пространство для дыхания. Загроможденные дизайны кажутся неудобными, поэтому добавьте пустое пространство, чтобы снять это напряжение.

• Пустое пространство может быть столь же (или даже более) эффективным, чем изображения. Эффективно используйте пустое пространство.
• «Хороший дизайн — это как можно меньше дизайна». (Дитер Рэмс)
• Чем меньше, тем лучше.
• Лучший совет по дизайну, который я когда-либо слышал, был «сокращать, уменьшать, уменьшать». Когда тебе больше нечего взять с собой, тогда ты понимаешь, что с тобой покончено.
• Используйте белое пространство и глубокие гармоничные цвета.
• Не бойтесь пробелов.
• Не забывайте о пробеле и следуйте указаниям.
• Пустое пространство — такой же элемент дизайна, как и содержание.
• Старайтесь не загромождать страницу слишком большим количеством изображений, фонов и ярких шрифтов. Будь проще.
• Пробел не потерян.
• Не думайте, что вам нужно заполнить все доступное пространство; зубрежка во всех формах средств массовой информации, полных бесполезных фактов, не принесет вам никакой пользы.
• Белое пространство — ваш друг, а не враг.

Цвет

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

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

Кривая обучения

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

• Никогда не прекращайте обучение.
• Обучение подобно горизонту: оно безгранично (китайская пословица). Это относится к дизайну, я чувствую.
• Никогда не переставай учиться.
• Развивайте свою страсть к обучению.
• Стремитесь узнавать что-то новое и расширяйте границы с каждым новым проектом.

Внимание к пользователю

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

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

• Создайте эстетически привлекательный дизайн, но не за счет удобства использования.
• Неважно, насколько хорош дизайн; если он не работает и его нельзя найти, он довольно бесполезен.
• Думайте как целевой пользователь.
• Функция перед формой!
• Все проекты начинаются с анализа аудитории. Если вы не знаете, для кого проектируете, как вы можете знать, что они получат его ?
• Не стоит недооценивать пользователей.
• Проектируйте с мыслью о клиенте, но для конечного пользователя. В конце концов, все будут счастливы.
• Это может быть скучно, но вот мой совет: форма следует за функцией! Это хороший дизайн, если пользователь может достичь того, чего он хочет, и так, как он этого хочет.
• Сначала подумайте о пользователе, а затем проектируйте соответствующим образом.
• Пользовательский опыт превыше всего. Если это не применимо, это бесполезно.
• Понимание — ключ к созданию простых и удобных дизайнов. Поймите пользователей, почему дизайна и бизнес-целей.

Сохраняйте… Часто!

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

• Чаще используйте Command + S.
• SOS: чаще спасайся, тупица.
• Простой дизайн и не забывайте часто сохранять свою работу.
• Не забывайте почаще сохранять свою работу.
• Сохраняйте файлы раньше и чаще.
• Никогда не забывайте сохранять. Это самый простой и полезный совет, который я могу дать.
• Ваш дизайнерский талант не сравнится с системным сбоем или компьютерным сбоем. Всегда сохраняйте и создавайте резервные копии своих цифровых шедевров… часто!

Вдохновение

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

• Помните, дизайнерское вдохновение может прийти в любое время, даже когда вы находитесь в душе или в туалете, так что не волнуйтесь, если вас ударят.
• Не проектируйте в вакууме. Черпайте вдохновение у других, как в Интернете, так и лично.
• Всегда носите с собой блокнот; никогда не знаешь, когда придет вдохновение.
• Вдохновение приходит от того, что вы меньше всего ожидаете, так что держите ухо востро.
• Поглоти мир глазами.
• Не воруйте и не копируйте творчество других, но вдохновляйтесь им.
• Берите с собой блокнот везде (кровать, ванна, туалет…).

Уходи!

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

• Отвлекитесь от работы и повеселитесь, чтобы восстановить энергию и вдохновение.
• Вдохновение редко можно найти на вашем столе.
• Не ограничивайте свое вдохновение Интернетом. Сходите в библиотеку, на фотопрогулку или понаблюдайте за людьми с блокнотом и ручкой.
• Вдохновение приходит от природы, а не от поиска картинок в Google.

Не форсируйте это

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

• Пусть течет; не пытайтесь сильно, или это будет выглядеть суетливо.
• Не старайся так сильно. Он просто придет к вам и будет выглядеть намного лучше.
• Когда вы застряли, просто отойдите от проекта на некоторое время, а затем вернитесь к работе с новыми мыслями и свежим взглядом.
• Если вам трудно генерировать идеи, сделайте перерыв, затем просмотрите @smashingmag и дайте вдохновению завладеть вами.

Макет

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

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

Сетка

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

• Всегда проектируйте в формате сетки; это никогда не терпит неудачу. Будьте организованы.
• Создайте прочную основу, используя возможности модульной сетки, прежде чем перейти к дизайну произвольной формы. Это более интуитивно!
• Невидимая сетка: то, что вы не видите, так же важно, как и то, что вы делаете.
• Всегда используйте сетку. Тогда обязательно сломайте его.
• Ваши проекты не будут выглядеть правильно, пока вы не разберетесь в сетке.
• При макетировании страницы не полагайтесь на волю случая. Всегда используйте сетку.
• Использовать сетку. Это не ограничивает вас; это помогает вам принимать решения.
• Следите за сеткой.

Визуальная иерархия

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

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

Советы от посторонних

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

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

Типографика

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

• Белый текст на темном фоне выглядит круто, но его невозможно прочитать.
• Всегда используйте хороший шрифт, например Helvetica, и не используйте Arial. Если вы дизайнер, инвестируйте в несколько убойных шрифтов.
• Никогда не подчеркивайте текст.
• Правильный шрифт выделит ваш дизайн.
• Убедитесь, что ваш веб-сайт по-прежнему работает, когда пользователи увеличивают шрифты. Это огромная (и часто упускаемая из виду) проблема, которая ломает сайты.
• Получите действительно хорошие навыки в типографике. Это отличает любителей от профессионалов.
• Ваш шрифт может быть изменен и искажен браузерами, плохими мониторами и поисковыми системами. Планируйте это.

Оригинальность

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

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

Доверяйте своим инстинктам

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

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

Сделайте перерыв

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

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

Спи спокойно

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

• Больше спать.
• Выспитесь.
• Если у вас есть возможность посоветоваться со своей подушкой, сделайте это! Утро вечера мудрее.

Еще немного в дорогу

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

• Перестаньте думать о «кампании» и начните думать о «разговоре».
• Оптимизируйте свой рабочий процесс для элементов, которые вы повторно используете: предустановки, действия, настраиваемые панели и макеты сетки экономят часы времени.
• У дизайна есть 56 секунд, чтобы привлечь чье-то внимание. Слайд-шоу с кнопками призыва к действию решает эту проблему.
• Дизайн для удовлетворения потребностей клиента, а не для того, чтобы оставаться в своей зоне комфорта.
• Даже линия в один пиксель может изменить впечатление от дизайна.
• Творчество означает позволять себе делать ошибки. Дизайн означает знание того, какие ошибки следует сохранять.
• Литература может помочь вашему дизайну. Инвестируйте в отличные книги, такие как The Non-Designer’s Design Book и The Smashing Book .
• Задавайте правильные вопросы.
• Сгиба нет.
• Дизайн, как и любовь, заключается в деталях. Внимание к деталям может превратить дизайн из нормального в потрясающий.
• Будьте увлечены каждым своим дизайном. Эта страсть будет иметь значение
• Если вы сделаете все жирным, ничего не будет жирным.
• Тратьте половину своего времени на обучение, половину на дела и половину на обучение. Затем отдохните.
• Идентичность — это согласованность. Не забудьте выровнять изображения, сообщения, цвета и шрифты на всех носителях дизайна.
• Независимо от того, сколько времени ушло на создание, дизайн и производство вашего веб-сайта, если есть какие-либо сомнения в том, что он будет работать, начните сначала или не запустите его.
• Подумайте, прежде чем начать. Если вы этого не сделаете, вы уже потерпели неудачу.
• word-wrap — самое полезное свойство CSS, которое дизайнеры игнорируют: word-wrap: break-word; .
• «Будьте последовательны»: главный совет по дизайну.
• Дизайн с учетом кода. Знайте возможности и ограничения XHTML, Flash, JavaScript и CSS.
• Всегда следуйте четырем основным принципам дерьма: контраст, повторение, выравнивание, близость.
• Обучите своего клиента, обучите его еще немного, а затем обучите его еще больше! Неосведомленный клиент — огромное препятствие на пути вашего дизайна.
• Не останавливайтесь на вопросе. Ответить.
• Ваши лучшие инструменты аналоговые: ручка, бумага, ластик, линейка, кофе, конечные пользователи и точки зрения других людей.
• Цель не в том, чтобы жить вечно, а в том, чтобы создать что-то, что будет жить вечно.
• Неудача не является конечной точкой. На самом деле это отправная точка.

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

Ссылки и тому подобное

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

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

Как найти работу веб-дизайнера: полное руководство

Онлайн-школа кодирования и дизайна с A

Войти

Скотт Моррис

Почти все, что вам нужно знать, чтобы начать новую карьеру в веб-дизайне.

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

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

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

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

Содержание

1. Кто такой веб-дизайнер и чем он занимается?
2. Навыки, необходимые для начала работы
3. Зарплата 101: Что вы можете ожидать от работы в веб-дизайне?
4. Получение вашей первой работы в области веб-дизайна
5. Фриланс в качестве веб-дизайнера
6. Как освоить продвинутые навыки
7. Заключительные мысли

Подходит ли вам технология? Пройдите наш 3-минутный тест!

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

Веб-дизайнер: определение

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

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

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

MediaBistro определяет это (очаровательно) следующим образом:

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

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

• Дизайн веб-страниц или целых веб-сайтов
• Разработка навигации по сайту
• Моделирование ориентированных на мобильные устройства и/или адаптивных веб-сайтов, которые хорошо выглядят на экранах всех размеров
• Кодирование страниц или сайтов с использованием HTML и/или стилизация этих проектов с помощью таблиц стилей и CSS (это все чаще становится частью роли, хотя и не универсальной — см. следующий раздел о навыках)
• Управление проектом, включая надзор за командами и/или клиентами

(наверх)

2: Какие навыки вам нужны, чтобы стать веб-дизайнером? И как их выучить?

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

• Принципы компоновки и навигации
• Цвет и типографика
• Программное обеспечение для дизайна, такое как Adobe Photoshop, Illustrator и Sketch
• Подходы, методы и программное обеспечение для создания каркасов/прототипов
• HTML и CSS*
• Javascript*

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

• Навыки тайм-менеджмента/управления проектами
• Отношения с клиентами/коммуникативные навыки
• Знание лучших практик цифрового маркетинга

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

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

(наверх)

3. Зарплата веб-дизайнера: на что вы можете рассчитывать, работая веб-дизайнером?

По данным Действительно, по состоянию на январь 2019 года средняя зарплата веб-дизайнера в США составляет 46 346 долларов (23,30 доллара в час).

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

📌 Связано: что *точно* такое визуальный дизайн?

Чтобы определить, на что вы можете разумно рассчитывать в качестве веб-дизайнера, инструмент Glassdoor «Знай свою ценность» — это отличный способ ввести конкретные данные о ваших личных обстоятельствах для расчета вероятной Требования заработной платы). Вы также можете узнать, как рассчитать свою ставку за внештатную работу по веб-дизайну.

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

• 5 идеальных технических вакансий для креативщиков (о которых вы, вероятно, не думали раньше)
• 11 высокооплачиваемых вакансий в сфере технологий — опыт не требуется/a>

(наверх)

Подходит ли вам технология? Пройдите наш 3-минутный тест!

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

4.

Как найти свою первую работу веб-дизайнера начального уровня

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

Шаг 1. Создание фиктивных проектов

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

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

Шаг 2: Убедитесь, что ваше портфолио выглядит соответствующе

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

Шаг 3. Совершенствуйте презентацию в лифте

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

Шаг 4: Не забудьте персональное сопроводительное письмо и резюме

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

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

Шаг 5. Ищите вакансии, не требующие слишком большого опыта, но не бойтесь подавать заявки, если они требуются уровня веб-дизайна, так что начните с него. Тем не менее, несколько советов: пусть вас не останавливает такое требование, как «2-3 года опыта работы в сфере». Женщины с меньшей вероятностью претендуют на должности, если они не на 100% квалифицированы, но мужчины делают это постоянно. Если вы можете доказать, что вы подходите для команды и активно учитесь (например, вы научились веб-дизайну в свободное время с помощью онлайн-курса Skillcrush), эти требования могут быть не такими уж высокими.0024 требовал

в конце концов.

Бонусные чтения

Эти шаги помогут вам начать работу. Вот еще несколько ресурсов:

• 8 Притворных проектов для добавления в портфолио веб-дизайна, когда вы только начинаете
• 9 навыков, которые нужны каждому успешному веб-дизайнеру, и как их освоить
• 9 профессий, на которые вы способны, если знаете только HTML и CSS

(наверх)

5. Фриланс в качестве веб-дизайнера

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

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

На сегодняшний день Smashing Magazine предлагает лучшее руководство по началу работы для веб-дизайнера-фрилансера. Здесь также есть руководство по настройке ставок для веб-дизайнера (и веб-разработчика).

(наверх)

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

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

Но есть и другие направления. Веб-дизайнеры все чаще изучают роли в UX/UI (User Experience — один из наших самых популярных курсов в Skillcrush!).

(наверх)

7. Заключительные мысли

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

(наверх)

Подходит ли вам технология? Пройдите наш 3-минутный тест!

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

Скотт Моррис

Скотт Моррис — штатный писатель Skillcrush и продюсер контента. Как и все члены команды Skillcrush, он работает удаленно (в его случае из Напы, Калифорния). Он считает, что контент, который стоит прочитать (и который ваша аудитория может найти!) создает бренды, за которыми следят люди. У него есть опыт написания статей на такие темы, как работа и технологии, цифровой маркетинг, карьерные повороты, гендерное равенство, воспитание детей и популярная культура. Прежде чем начать свою карьеру в качестве писателя и контент-маркетолога, он провел 10 лет в качестве полноценного родителя своих дочерей Вероники и Афины.

(Вернуться к началу.)

Похожие сообщения

Как научиться веб-дизайну

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

Есть три основных способа научиться веб-дизайну.

1. Делая . Люди учатся, фактически создавая веб-сайты.
2. С помощью интернет-ресурсов . Каждый в какой-то момент находит ответы в Интернете о том, как создавать веб-сайты.
3. Читая . Этот меня удивил. Большинство дизайнеров говорят, что они изучают веб-дизайн частично, читая книги.

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

1. Изучение веб-дизайна на практике

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

Посмотрите, как работают другие веб-сайты

Начнем с того, что большинство веб-страниц в Интернете написаны, по крайней мере частично, в формате HTML. Чтобы увидеть HTML, который создает эту страницу, вам нужно «Просмотреть исходный код» в браузере, который вы используете. Попробуйте использовать Cmd/Ctrl-U (для Firefox), нажмите Cmd/Ctrl-Alt/Opt-U (для Chrome), и если вы используете Internet Explorer, вам действительно нужно спросить себя, является ли веб-дизайн правильным карьерным путем. для тебя.

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

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

Текст здесь

показывает начало и конец тега абзаца с косой чертой (/), предшествующей закрывающему тегу. Другие теги не работают в паре, например, тег изображения закрывается сам по себе jpg" /> указывает браузеру отображать изображение с определенным веб-адресом в качестве источника ( src ).

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

Упражнение: Выделите весь исходный код этой страницы в документ NotePad (ПК) или TextEdit (Mac) и сохраните его на свой компьютер как «test.html» или что-то в этом роде. Откройте этот файл в браузере, и он должен выглядеть точно так же, как онлайн-версия. Теперь отключите подключение к Интернету и посмотрите, как выглядит тестовая страница. Совсем другое, да? Попробуйте разобраться, почему.

Ремесленные инструменты

Пока вы делаете это, вам понадобятся определенные инструменты.

• Несколько браузеров и смартфонов . Попробуйте протестировать свои собственные сайты в разных браузерах и на разных телефонах (здесь вы начнете давнюю ненависть к Internet Explorer).
• Текстовый редактор . Вы можете использовать базовый NotePad (ПК) или TextEdit (Mac), Coda (Mac) или Dreamweaver — не используйте Dreamweaver в визуальном режиме, просто работайте над кодом, вам нужно понимать, как это работает под капот.
• Валидатор . Проверяйте свои веб-страницы с помощью HTML Validator и CSS Validator (используйте подключаемый модуль браузера, такой как Web Developer for Chrome, чтобы быстро вызвать их).
• Инструменты разработчика Chrome и Firebug для Firefox . Эти инструменты помогут вам понять CSS и JavaScript, которые, если вы думали, что HTML сложный, требуют некоторого понимания.
• Редакторы графики и изображений . Центральное место в веб-дизайне занимают редакторы изображений, такие как Photoshop или Fireworks. Это довольно дорого, но есть GIMP и множество онлайн-редакторов изображений, если вы только начинаете.

Создание собственных статических HTML-сайтов

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

Хотя веб-сайты, которые вы в конечном итоге создадите, вряд ли будут созданы из файлов HTML, крайне важно, чтобы вы сначала поняли, как создавать статические HTML-сайты, прежде чем вы сможете начать использовать PHP и/или системы управления контентом (CMS) для создания HTML.

Создание собственных веб-сайтов с помощью CMS

Большинство веб-сайтов создаются с помощью CMS — программного обеспечения, которое может создавать HTML-страницы в рамках заданных шаблонов. Лучшими из них являются WordPress, Joomla и Drupal, но есть множество более легких CMS с открытым исходным кодом, с которыми вы можете поэкспериментировать, они научат вас тому, как PHP и другие CMS, ASP, используются для создания веб-сайтов.

Используйте MAMP (Mac) или WAMP (Windows) на своем компьютере для локального запуска этих систем, чтобы вы могли хорошо понять, как они работают.

Использование графических редакторов

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

Займитесь дизайном

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

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

2. Интернет-ресурсы

Когда людям нужны ответы, они идут в Интернет и «гуглят» или ищут на YouTube. Веб-дизайн ничем не отличается. Есть много ресурсов, которые помогут вам в Интернете. Прежде всего, это W3 Schools, которые веб-дизайнеры называют лучшим онлайн-ресурсом для самообучения, а также Tizag. Некоторые люди рекомендуют Lynda.com, хотя лично я им не пользовался.

Блоги

Существует множество отличных дизайнерских блогов. Есть большие, которые могут вам помочь, такие как SmashingMagazine, WebDesignerDepot, 1stWebDesigner и сеть Envato.

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

• CSS Tricks Криса Кольера — это прекрасно выглядящий адаптивный веб-сайт, который также содержит отличную информацию и хитрости веб-дизайна
• Veerle Pieters имеет отличные учебные пособия по Photoshop и Illustrator в блоге Veerle
• Дэвид Эйри — это человек, за которым я некоторое время следил в его собственном одноименном блоге LogoDesignLove и IdentityDesigned. Среди прочего, Дэвида интересует всеобъемлющая идентичность организаций.
• Крис Спунер многому научил меня с помощью руководств в своем блоге SpoonGraphics, а также информации и вдохновения на Line25
• Чудесно оформленный сайт Abduzeedo Фабио Сассо предлагает большое вдохновение и необычность.
• N.Design Studio Ника Ла и WebDesignerWall содержат фантастическую информацию и огромное вдохновение.

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

Форумы

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

Мне нравятся Estetica Design Forum, DesignForums.co.uk и Designer,s Talk. Есть Digital Point и Sitepoint для более широкого круга запросов, отличный форум WordPress и форум Warrior для интернет-маркетинга.

3. Книги

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

• Создайте свой собственный веб-сайт с помощью HTML и CSS 3-е (третье) издание Яна Ллойда — это книга Sitepoint, которую я прочитал много лет назад. В то время это действительно помогло мне, поскольку фокусировалось на лучших практиках веб-дизайна. Убедитесь, что вы покупаете актуальную версию (на данный момент третья версия, которая включает в себя многое из HTML5).
• CSS: The Missing Manual by David Sawyer McFarland включает пояснения, примеры и пошаговые руководства. Эта книга особенно рекомендуется, так как она знакомит вас с CSS и содержит много информации о CSS3.
• «Принципы красивого веб-дизайна», 2-е издание Джейсона Берда, утверждает, что дизайн — это навык, которому можно научиться, и учит вас фундаментальным принципам дизайна.
• Учебное пособие по цветовому дизайну: практическое руководство по использованию цвета в графическом дизайне от AdamsMorioka (редактор) содержит жизненно важную информацию, необходимую для творческого и эффективного применения цвета в дизайнерских работах.
• Не заставляйте меня думать: подход к юзабилити в Интернете, основанный на здравом смысле, 2-е издание Стива Круга. Немедленная классика по удобству использования в Интернете, наполненная идеями и практическими советами.
• Реализация: Более разумный, быстрый и простой способ создания успешного веб-приложения от 37 Signals может заключаться в создании веб-приложений, а не сайтов, но у него есть такой чудесный способ упростить веб-процессы, что я нашел его таким полезным для чтения.
• «Копаемся в WordPress» Криса Койера и Джеффа Старра настоятельно рекомендуется как отличная книга по WordPress. Доступен в формате PDF (удобен для копирования кода), а также в физической версии.

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

Что

вы можете сделать

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

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