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

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

21 031 просмотров

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

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

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

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

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

Кстати. Вдохновившись историей автора, я тоже упаковала свою статью на тему: как стать 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 году я зарегистрировалась как предприниматель и и за год до окончания курсов у меня появился первый настоящий клиент. Получив сертификат, я начала работать волонтером в общественных группах и организациях в моем районе. Это и привело к увеличению количества платящих клиентов, работу я делала хорошо и меня рекомендовали друзьям».

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

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

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

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

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

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

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

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

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

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

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

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

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

У графического дизайна и веб-дизайна есть схожие черты. 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 вы будете всегда в курсе того, что сейчас лучше всего предпринять, чтобы увеличить поток клиентов (к примеру поработать с текущими клиентами и найти точки выхода на новых).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

что читать и где учиться? — статьи на Skillbox

История веб-дизайна начиналась в 1990 году, когда британский учёный Тим Бернерс-Ли разработал язык HTML (англ. HyperText Markup Language) — язык гипертекстовой разметки. С его помощью 6 августа 1991 года команда Бернерса-Ли сделала первый в мире сайт — http://info.cern.ch.

Главная страница первого в мире сайта info.cern.ch

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

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

Поисковик Yahoo! в 1993-м выглядел такВ 1997-м сайт Apple был далек от минимализма, который прославил компаниюСайт, посвященный истории и развитию интернета в 1996 году

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

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

Настоящий веб-дизайн, близкий к тому, который мы знаем сегодня, появился в период с 1994 по 1998 год. Тогда интернет-технологии совершили бешеный рывок вперёд.

1994

Первая версия браузера Opera.

1995

Появились Internet Explorer 1, JavaScript и PHP.

1996

CSS и запуск технологии Flash, которую стали использовать для векторной графики, игр и мультимедиа.

1997

Релиз Internet Explorer 3 и HTML 4.0 — в мире уже 100 млн пользователей.

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

• Разрешение мониторов увеличилось до 800×600 пикселей.
• Мониторы стали отображать 256 цветов и оттенков, что привело к появлению сайтов с салатовым текстом на синем фоне.
• Первая типографика: на сайтах появились веб-шрифты Times New Roman и Courier New.
• Первая баннерная реклама, видеоплееры, анимированные GIF-изображения и цветные кнопки с 3D-эффектом.

Один из первых сайтов Рунета — tema.ru — сохранился в неизменном виде с 1995 года

Как стать веб-дизайнером: истории 4 женщин :: Здоровье :: РБК Стиль

Юлия Семенова, 27 лет, Москва

«Меня зовут Юля, мне 27 лет. Последние три года я разрабатываю дизайн сайтов под ключ: создание стиля, дизайна, продвижение. Я делаю так, чтобы продукт работал.

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

Начать свой путь в дизайне мне очень помог супруг, который знал о моей мечте. Он придумал хитрость: периодически говорил, что у него на работе проводится конкурс (давал мне задания, чтобы я рисовала). Первые мои работы были просто вырви глаз, но муж всегда меня поддерживал. Со временем стала чувствовать себя увереннее, начала выполнять различные заказы. Бралась абсолютно за все: рисовала визитки, верстала журналы, изучала Illustrator и Photoshop. Даже поработала в нескольких веб-студиях. Потом мне попался YouDo.com — онлайн-сервис по подбору исполнителей различных услуг. В то время сервис активно развивался и очень помог мне.

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

После ухода в декрет у меня появилось больше свободного времени и желания развиваться. С помощью заказов, которые я находила на YouDo, я набивала руку и расширяла портфолио. Ведь если ты работаешь на фрилансе, то нужно уметь конкурировать с такими же, как ты, заинтересовывать клиента своим предложением и обращать на себя внимание. Отклик на интересное предложение нельзя оставлять в виде короткой фразы: «Готов выполнить». Так тебя никто не заметит. Нужно быть ярким. Можно придумать какой-нибудь креатив, предложить подарок, создать интригу. Главное — искренность, честность и оригинальность.

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

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

Регина Аминова, 37 лет, Уфа

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

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

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

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

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

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

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

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

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

Анна Антоненко, 33 года, Москва

«Я занимаюсь дизайном уже 13 лет. Не скажу, что планировала строить карьеру именно в этом направлении, но так решила жизнь.

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

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

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

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

На будущее у меня уже очень много планов. Еще в 2006 году появилась идея создать собственный магазин онлайн-шаблонов. За годы работы накопилось множество различных дизайнов, которые я делала для себя. Это помогало мне оттачивать навыки или учиться новому. Сейчас таких шаблонов у меня уже более 400, пока я размещаю их в личном блоге, но думаю перенести на отдельный ресурс. Кроме веб-дизайна я пробую себя в компьютерной графике, живописи и рисовании (оно меня успокаивает)».

Дарья Калиненко, 27 лет, Москва

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

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

Спустя полгода подруга написала мне: «Ты же окончила курсы дизайна? Моей маме нужен логотип для ее магазина». Так я получила свой первый заказ, который принес мне деньги. Не могла поверить в то, что мне доверили такую работу, казалось, что я сплю и что это происходит не со мной. Логотип я, конечно же, нарисовала позорнейший. Заказчица осталась довольной, но вот использовала ли она его потом, к сожалению, не знаю. Для меня, на самом деле, тогда это было не так важно, и заработанное не стало толчком — дизайн вновь отошел на второй план.

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

способы изучения для начинающих — Lemarbet

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

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

Так много вариантов!

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

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

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

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

Лучшие книги для изучения веб-дизайна

Основные технологии, которые нужно освоить начинающим, чтобы работать с большинством задач при создании сайта, – HTML и CSS. Не лишним будет, конечно, Java Script и PHP, но это уже вторая ступенька. Кстати, если освоитесь с первыми двумя языками веб-разработки, с остальными будет уже гораздо проще.

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

Джереми Кит. “HTML5 для веб-дизайнеров”

Настольная книга для тех, кто хочет освоить стандарты последней версии HTML, разобравшись при этом с особенностями данного языка в целом. Семантическая разработка и создание доступных интерфейсов – два направления, за которыми будущее. И данная книга позволит вам научиться этому в полной мере. И стоит отметить, что «Манн, Иванов и Фербер» — одно из самых авторитетных издательств на просторах СНГ. Так что их книги однозначно стоит рекомендовать.

Дэн Сидерхолм. “CSS3 для веб-дизайнеров”

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

Автор — Дэн Сидерхолм – практикующий веб-дизайнер, который прошел путь от фрилансера и владельца небольшой студии до разработчика в штате таких всемирно известных компаний, как Google и Yahoo.

Дженнифер Роббинс. “HTML5, CSS3 и JavaScript. Исчерпывающее руководство”

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

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

Стив Круг. “Web-дизайн, или Не заставляйте меня думать”

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

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

Тим Кедлек. “Адаптивный дизайн. Делаем сайты для любых устройств”

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

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

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

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

Платформы для онлайн-обучения

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

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

Одна из ведущих платформ в области онлайн-образования мирового уровня, которая работает по схеме ежемесячной подписки. Основные направления обучения – языки верстки и веб-разработки (HTML, CSS, Javascript), а также создание iOS-приложений, в частности на основе набирающего популярности Swift.

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

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

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

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

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

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

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

Другие способы на заметку

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

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

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

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

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

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

• Автор: Владимир Федоричак

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UX / UI дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Из обязательных инструментов – 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

Как освоить веб-дизайн, если ты в этом ничего не смыслишь? — Дизайн студия ApelsIn design

05.12.2017

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

С чего начать?

Первым вашим шагом к освоению новой профессии должна стать работа с графическим редактором. Тут вы можете самостоятельно выбрать инструмент: Adobe Photoshop, Adobe Illustrator, Corel DRAW, After effect, Sketch. Тут стоить освоить не только векторную графику, но и растровую. Оптимальный вариант – начинать обучение, работая с продукцией Adobe. В идеале, если вы хотите стать действительно универсальным и действительно профессионалом, освоить все вышеперечисленные продукты. Ограничивать себя Adobe стоит лишь в тех случаях, когда в вашем распоряжении слишком мало времени.

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

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

Обязательно ли знать HTML и CSS для дизайна?

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

Многие дизайнеры до сих пор считают, что можно и уместно используют технологии Flash. “Старая школа” дизайна — это, конечно же, хорошо, вот только конечный продукт должен быть таким, чтобы его корректно отображал любой браузер. Технологии Flash на сегодняшний день является слишком увесистой, так что браузеры, на которых не установлен соответствующий плагин, попросту не будут отображать то, над чем вы так трудились. Мы обучаем работе с более современными инструментам, которые будут использоваться активно ещё длительное время.

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

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

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

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

что такое дизайн студия

как создать дизайн сайта в фотошопе

веб дизайн что сдавать

учиться самому или на курсах — Дизайн студия ApelsIn design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В Компьютерной Академии ШАГ web-дизайн является значительным блоком большого курса «Компьютерная Графика и Дизайн », который направлен на обучение дизайну и компьютерной графике с нуля. Ребята начинают с самых основ – плоской графики и макетирования, а заканчивают трехмерной анимацией. За время обучения они проходят все этапы изучения дизайна и становятся универсальными дизайнерами и могут выбрать то, чем им больше нравиться заниматься: web-дизайн, 3D-дизайн, рекламный дизайн и полиграфия.

Каждый студент Академии получает в подарок курс английского языка в подарок. После 4 семестра можно записаться на дополнительный и бесплатный курс «UI\UX design».

Хочешь научиться дизайну? Поступай к нам → https://itstep. dp. ua/design/

как оформить дизайн сайта

дизайн студия как организовать

веб дизайн куда поступать

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

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

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

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

Шаг 1: Примите решение и составьте планы

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

Шаг 2. Получите базовые знания о веб-дизайне

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

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

Люди часто неправильно понимают значение веб-дизайна.

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

Визуальное + взаимодействие = веб-дизайн

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

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

Помните: веб-дизайн — это дизайн, а не кодирование и разработка интерфейса или серверной части.

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

2. Что такое процесс веб-дизайна?

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

Вам необходимо соблюдать основные этапы процесса веб-дизайна. Это:

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

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

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

• Создание карты сайта и каркаса

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

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

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

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

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

Шаг 3. Начало обучения

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

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

• Как сделать так, чтобы веб-сайт выглядел хорошо?
• Как сделать так, чтобы сайт работал хорошо?

Вам нужно будет изучить , как проектировать интерфейсы (типографика, навигация, изображения, пространство, анимация, цвета и т. Д.), , как кодировать их на языке веб-разработки (HTML, CSS, Python, SQL, Ruby или JavaScript), а также оптимизировать ваш сайт для поисковых систем .

1. Читайте учебники по веб-дизайну

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

2. Читайте блоги о веб-дизайне

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

3. Учитесь с содержанием PDF

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

4. Учитесь у профессионалов

Следите за веб-дизайнерами, у которых вы стремитесь учиться, на сайтах социальных сетей, таких как Twitter, Dribbble, Behance, Github и других платформах, где они активны. Прочтите их сообщения, нажмите кнопку «Мне нравится» для тех, которые вам нравятся, и прокомментируйте, если хотите добавить точку или задать вопрос.Если вам повезет, вы сможете найти себе наставника в онлайн-сообществе или группе. Но не беспокойте их и воспринимайте их помощь как должное.

Веб-дизайнеры, за которыми вы можете подписаться:

5. Учитесь из видеоуроков по веб-дизайну

В Интернете доступно множество видеороликов на Youtube. Сократите время просмотра забавных материалов и используйте Youtube для изучения веб-дизайна. Здесь я рекомендую 5 самых популярных видеоуроков. Наслаждайтесь просмотром.

• Руководство по веб-дизайну для новичков на 2018 год — часть 1 из 2

• Руководство по веб-разработке для начинающих 2018/2019 — как создать веб-сайт

• Учебник по дизайну веб-сайтов для начинающих

• HTML CSS Учебник для начинающих — Учебники по веб-разработке для начинающих

• Полное руководство по HTML и CSS для начинающих

6.Учитесь на онлайн-курсах

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

Изучите веб-разработку с бесплатными онлайн-курсами и МООК от Университета Джона Хопкинса, Мичиганского университета, Университета К.Ю. Лёвена, Калифорнийского университета, Беркли и других ведущих университетов мира.

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

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

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

Узнайте, как программировать, от разработчиков Google.

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

Больше мест для онлайн-курсов по веб-дизайну ：

7. Изучите основы HTML и CSS

У вас может возникнуть вопрос, зачем мне изучать HTML? Как правило, можно использовать приложение для веб-дизайна, например Dreamweaver. Но в настоящее время большинство веб-сайтов основаны на адаптивном HTML5 , а CSS — это оболочка веб-сайта. Современный дизайн веб-сайтов невозможен без CSS. Изучение основ HTML и CSS поможет вам прогрессировать в веб-дизайне.

Ресурсы для изучения HTML и CSS ：

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

8. Изучите JavaScript

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

Ресурсы для изучения Javascript:

9. Узнайте об элементах веб-дизайна

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

1 ） Типографика

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

Ресурсы для изучения веб-типографики:

2) Анимация и преобразования

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

3) Цветовая схема

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

4) Шрифты

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

5） Макет

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

6) Графика

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

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

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

10. Изучите основы создания каркасов / прототипов.

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

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

11. Изучите инструменты веб-дизайна

Photoshop — инструмент дизайна пользовательского интерфейса

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

Dreamweaver — инструмент веб-разработки

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

Mockplus — инструмент для создания прототипов

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

12. Обучение с помощью конструктора веб-сайтов

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

Конструкторы сайтов, вы можете попробовать:

13.Изучите SEO

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

14. Изучите тенденции дизайна

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

Шаг 4: Начните с каркаса

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

Шаг 5: Используйте то, что вы узнали, для создания веб-сайта

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

Шаг 6: Запросите отзывы и внесите улучшения

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

Часто задаваемые вопросы по изучению веб-дизайна ：

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

Обучение веб-дизайну — это непрерывный процесс, но его можно освоить за месяцы.Обычно на изучение HTML, CSS и основ JavaScript уходит 5 месяцев. Вам также нужно потратить время на инструменты дизайна, такие как Photoshop, Sketch и Mockplus.

Кроме того, вы должны понимать веб-стандарты, принципы дизайна, дизайн UX / UI, кроссбраузерность и скорость реагирования. На изучение всего этого у вас уйдет от 3 до 4 месяцев.

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

2. Могу ли я стать веб-дизайнером без ученой степени?

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

3. Что я могу делать после прохождения курса веб-дизайна?

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

4. Есть ли будущее у веб-дизайна?

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

Согласно Руководству по зарплате Creative Group 2019, интерфейсный веб-разработчик является одной из самых высокооплачиваемых должностей в творческой и маркетинговой сфере, наряду с UX-дизайнерами, исследователями пользовательского опыта, копирайтерами и т. Д. Согласно Glassdoor, веб-разработчикам получают зарплату от 41,6 тыс. до 78,3 тыс. долларов в год, а согласно PayScale им предлагают 16 долларов.4к- 34,6к в год. Средняя зарплата веб-дизайнера составляет около 49 693 долларов.

5. Легко ли веб-дизайн?

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

Заключение

Если вы хотите изучить веб-дизайн самостоятельно, в приведенной выше информации есть все необходимое для начала.Перестаньте тратить свое время на Facebook или Twitter, «ища ответы». Хотя вы можете создать сообщество дизайнеров на этих платформах, вы не можете стать веб-дизайнером, бесцельно проводя время. Итак, присядьте и начните учиться. Никогда не отказывайтесь от обучения и удачи вам!

Самоучка и формальное образование

Эта страница может содержать ссылки на наших спонсоров или партнерские ссылки. Учить больше.

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

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

Плюсы самоучки

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

Фото: Роналду Феррейра

Более уместно в быстро меняющейся отрасли

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

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

Меньшая стоимость

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

Меньшие требования ко времени

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

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

Может работать, пока учишься

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

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

Опыт реального мира

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

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

Комфорт

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

Плюсы формального образования

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

Степень

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

Прочная основа знаний

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

Структура

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

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

Возможна помощь с трудоустройством

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

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

Дополнительные возможности

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

Мое мнение

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

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

Что вам нужно выучить

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

Теория дизайна

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

HTML и CSS

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

Удобство использования

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

Программное обеспечение Adobe

Photoshop и Illustrator в значительной степени необходимы для работы в отрасли. Изучите Photoshop и Learn Illustrator здесь.

Ресурсы для самостоятельного обучения

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

Книги / электронные книги

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

Онлайн-курсы и обучение

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

Удеми

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

SitePoint Premium

SitePoint Premium — это обучающая платформа на Sitepoint. Вы можете получить доступ ко всем электронным книгам Sitepoint, а также к множеству видеокурсов (более 5000 видео). У них есть курсы и книги практически обо всем, что вам нужно или нужно изучить, связанное с веб-дизайном. Членство доступно за 99 долларов в год.

Обучение веб-разработке

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

Линда

Lynda.com — отличный источник обучающих онлайн-видео. В настоящее время они предлагают более 4500 различных курсов по различным темам, таким как дизайн, разработка, фотография, бизнес, а также курсы по программному обеспечению.Цены начинаются с 19,99 долларов в месяц после 10-дневной бесплатной пробной версии.

Домик на дереве

Treehouse — это сайт, который предлагает образовательный контент по веб-дизайну, программированию, разработке для iOS, Android и бизнесу. Он предлагает базовый контент, подходящий для начинающих, а также предлагает более сложные учебные пособия и курсы с более подробным описанием. У них есть планы по цене 25 долларов в месяц и 49 долларов в месяц. Оба плана предлагают доступ к более чем 1000 видео образовательных материалов.

Тутов +

Tuts + — популярный блог и сеть премиального контента от Envato. Хотя большая часть содержимого блогов на их сайтах, таких как учебные пособия по графическому дизайну и иллюстрации и учебные пособия по коду, бесплатна, они действительно предлагают участникам широкий спектр учебных пособий премиум-класса. В качестве участника вы можете получить доступ к учебным пособиям по веб-дизайну и разработке, учебным материалам по Photoshop, учебным материалам по Illustrator, учебным материалам по фотографии и многому другому. Стоимость членства составляет 15 долларов в месяц после 10-дневной бесплатной пробной версии.

Поезд простой

Train Simple предлагает углубленные онлайн-курсы по веб-дизайну и продуктам Adobe. Вы можете получить доступ к часам и часам этих видеокурсов за 15 долларов в месяц или 150/180 долларов в год.

Поделитесь своим опытом и мнениями

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

Руководство для начинающих: как научиться веб-дизайну дома | Винсент Ся

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

Визуализация + взаимодействие = ядро ​​веб-дизайна

Многие молодые дизайнеры часто неправильно понимают концепцию веб-дизайна, веб-дизайн — это дизайн, а не кодирование и разработка интерфейса.Конечно, было бы здорово, если бы вы знали какой-нибудь язык программирования (HTML, CSS, Java), но вы не можете углубиться в разработку интерфейса, это не ядро ​​веб-дизайна. Веб-дизайн предназначен для решения проблем связи между пользователями и информацией веб-страницы.

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

Изучить дизайн макета

Изучить принципы цвета

Освоить базовые знания дизайна взаимодействия

Придется овладеть PS и другим инструментом макета веб-интерфейса

Понять базовый язык кодирования (HTML, CSS)

Знаком с продуктом компании и группой пользователей

По крайней мере, владею одним из интерфейсных программ редактирования кода, я хотел бы порекомендовать Dreamweaver

Знать о SEO

Макет, цвет, графика, шрифт, контент

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

1. HTML и CSS: проектирование и создание веб-сайтов

2. Изучение веб-дизайна: руководство для начинающих

3. Не заставляйте меня думать: здравый подход к юзабилити в Интернете

4. Изучение веб-дизайна Pages Functional

5. Проектирование с использованием веб-стандартов

Treehouse

Lynda

Udemy

1. Smashing Magazine

2. Блог Mockplus

3. Webdesigner Depot

4. Webdesignledger

6.Взлом UI

7. 1stwebdesigner

8. WEBAPPERS

1. W3Schools

Чтобы выучить базовый язык программирования, он включает ： HTML и CSS с простым языком, чтобы научить вас.

2. Google Code University

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

3.Code Avengers

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

30 дней для изучения HTML и CSS

Руководство по HTML и CSS для новичков

Не бойтесь Интернета

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

Мой путь к тому, чтобы стать веб-разработчиком с нуля без степени CS (и чему я научился из…

Сергей Гарсиа

Во-первых, позвольте мне представиться. Меня зовут Сергей Гарсия, я штатный фронтенд-разработчик с 2-летним опытом. В то время я работал фронтенд-разработчиком как в консалтинговой фирме Forbes 500, так и в небольшой компании.

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

Я никогда не писал о своем опыте, несмотря на всю помощь, которую я получил от замечательных ресурсов, таких как Medium, Stack Overflow и программные субреддиты Reddit. Итак, сегодня я решил это изменить. Сегодня я собираюсь рассказать вам, что пошло правильно, а что нет, так что если вы отправитесь в это путешествие, вам повезет больше, чем мне.

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

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

Итак, без лишних слов, приступим!

Получение основ

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

• JavaScript
• HTML и CSS
• Препроцессоры CSS (Less & Sass)
• Адаптивный дизайн
• AngularJS
• Шаблоны проектирования
• Git
• NodeJS
• Средства выполнения задач

Вот как это произошло.

Javascript

Я начал свое путешествие с изучения JavaScript с помощью CodeSchool (платно) и Codecademy (бесплатно). Если вы не знаете об этом, это отличные веб-сайты, которые позволяют вам научиться программировать, кодируя код в браузере.

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

Когда я усвоил основы, я приступил к созданию более прочной основы JavaScript, прочитав книгу Хавербеке «Красноречивый Javascript: современное введение в программирование» (бесплатно).

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

Вы также можете при желании изучить jQuery (хотя я пока не рекомендую изучать его — подробнее об этом позже). Вы можете изучить его, пройдя курс «Попробуйте jQuery» от CodeSchool.

HTML и CSS

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

Вы также можете легко переключить это на что-то вроде курса Codecademy по HTML и CSS и по-прежнему получать аналогичные результаты. Или, если вы готовы принять вызов, курс Udacity «Введение в HTML и CSS» будет гораздо более полным и немного более сложным.

Бонус : Если вы можете достать книгу Джона Дакетта HTML и CSS: Дизайн и создание веб-сайтов , это также отличная отправная точка для изучения HTML и CSS (с небольшим количеством веб-дизайна).У него высокий рейтинг (4,7 балла из 5 на Amazon), он предлагает хорошее введение в мир веб-разработки. Это красивая книга благодаря чистому дизайну с большими буквами и красочными страницами. Я часто возвращаюсь к нему, чтобы просто полюбоваться.

Less / Sass

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

Сейчас есть 2 основных транспилятора CSS: без и Sass . Sass является более популярным, но я обнаружил, что сначала изучить Less проще, в основном потому, что для использования Sass на вашем компьютере также требуется установка Ruby, что мне не нравилось.

Вы можете получить быстрый, но полный обзор Less с помощью онлайн-компилятора Less от WinLess и примеров кода, чтобы увидеть, как ваш код Less превратится в CSS. Вы также можете попробовать Sass в Интернете с помощью SassMeister (хотя в нем нет примеров кода).

Неважно, выучите ли вы сначала Less или Sass. Они очень похожи, поэтому, узнав одно, вы почти сразу узнаете и другое. Вы можете найти отличное быстрое сравнение между Less и Sass в статье Шелби Моулден «Сравнение LESS и SASS».

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

Изначально я узнал об адаптивном дизайне и Bootstrap, используя путь HTML и CSS от Codeschool, но недавно я обнаружил, что курс Udacity от Google по основам адаптивного веб-дизайна фантастически охватывает основы и не только в гораздо более полной манере, чем Codeschool сделала.

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

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

AngularJS

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

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

Затем я приступил к изучению AngularJS через Codeschool. Учитывая мой положительный опыт в курсах JavaScript и CSS, я ожидал не меньше, чем отличный курс. Я ошибался. Курс был провальным с самого начала, поскольку алгоритм, используемый для проверки правильности кода примера, иногда не работал правильно и отмечал ваше явно правильное решение как неправильное. Были даже случаи, когда все, что требовалось для исправления неисправной системы проверки, — это обновление страницы. Что касается содержания курса, то оно тоже было не лучшим.Он хорошо объяснил основные компоненты приложения AngularJS, но ужасно справился с их интеграцией в реальное приложение, оставив у меня гораздо больше вопросов, чем я начал.

После некоторых поисков на форумах я наткнулся на Egghead.io (бесплатно / платно), где мне повезло больше. Материал их курса был намного чище, лаконичнее и полнее, что способствовало гораздо лучшему восприятию. Не говоря уже о том, что помимо курсов у них есть небольшие уроки по 2–5 минут, которые охватывают важные темы.(Например: что такое контроллер? Что такое фильтр? Что такое $ scope?) Это действительно упрощает понимание основ. У них также есть некоторые видео, которые требуют оплаты, но обычно это те, которые охватывают более сложные угловые темы, которые вам не понадобятся позже. Я прошел их курс по основам AngularJS и был полностью удовлетворен результатами (а также стал большим поклонником курсов Egghead.io в процессе).

Шаблоны проектирования

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

Я нашел 2 лучших источника, чтобы узнать об этом, — это шаблоны дизайна JavaScript от doFactory и шаблоны дизайна на JavaScript Эдди Османи. Мне показалось, что doFactory намного проще для понимания, в то время как книга Адди Османи была намного более полной.

Chrome DevTools

Chrome — один из самых мощных инструментов для веб-разработчика. Чем раньше вы овладеете им, тем больше времени сможете сэкономить позже. Бесплатный курс Codeschool «Изучите и освоите Chrome DevTools» отлично их знакомит.

Git (Контроль версий)

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

Мне показалось, что бесплатный курс «Попробовать Github» от CodeSchool — это удобный способ начать работу. Обучение Atlassian Git превосходно помогло охватить более сложные доступные команды. Программа Git Learning Path от Codeschool также отлично подходит для изучения основ Git.

NodeJS

Вскоре я узнал, что базовое понимание NodeJS очень поможет мне в моем стремлении стать веб-разработчиком (подробнее об этом скоро).

Я попробовал курсы Codeschool на Node, но обнаружил, что им действительно не хватает содержания.Я обнаружил, что NodeSchool.io гораздо лучший учитель в понимании основ, и это было весело! Мне понравился практический подход, который он предлагал, который был похож на Codeschool и Codecademy — с дополнительным улучшением, заключающимся в том, что я действительно использовал NodeJS.

Task Runners (Grunt & Gulp)

Grunt и Gulp стали для меня большим сюрпризом, поскольку я понятия не имел, что такие инструменты вообще существуют — но я очень рад, что они есть! По сути, эти средства запуска задач позволяют автоматизировать общие задачи.Например, помните Less / Sass? Обычно вам придется вручную запускать компилятор CSS каждый раз, когда вы вносите в него изменения для компиляции CSS, а затем обновляете браузер. Используя средство запуска задач, вы можете настроить его так, чтобы он следил за вашими файлами Less / Sass на предмет изменений, и, когда он обнаруживает изменение, компилирует ваш CSS и автоматически обновляет браузер. Это очень полезно для сокращения времени разработки.

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

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

Я считаю курсы Scotch.io по Grunt и Gulp одними из лучших.

Проблемы, с которыми я столкнулся на своей первой работе

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

Должен сказать, над своим первым проектом я очень нервничал. Это включало создание повторно используемых веб-компонентов с помощью HTML, CSS и JavaScript, а также Bootstrap, Sass, Grunt в качестве инструментов. T

Поначалу я обнаружил две самые большие ошибки:

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

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

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

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

Мне много раз хотелось знать, как на самом деле работает Angular, но было страшно смотреть на документацию.

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

Другой проблемой, с которой я столкнулся год спустя, было то, насколько быстро продвигается веб-разработка. Я только что освоил AngularJS и Grunt и чувствовал себя гордым и могущественным, но вскоре обнаружил, что Gulp и ReactJS уже не за горами.А через год после их изучения Webpack начал набирать популярность, и мне пришлось изучить это тоже. Как вы понимаете, большая часть меня была разочарована тем, как быстро некоторые из моих знаний устарели. Но вскоре мой коллега просветил меня, рассказав мне кое-что, что навсегда изменило мое восприятие библиотек и фреймворков:

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

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

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

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

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

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

Часто бывает хорошей идеей создать простой пример приложения Hello World, чтобы вы могли увидеть, что предлагает фреймворк. Тогда можно двигаться дальше. Но обычно вам следует сосредоточиться на том, что лучше всего соответствует потребностям вашего проекта. Поначалу это может быть сложно, но, к счастью, существуют отличные места, такие как Stack Overflow, Medium и Reddit, где вы можете найти полезные обсуждения между фреймворками и выяснить, какие из них лучше всего подходят для ваших конкретных случаев использования.

Идем дальше

В последующие годы я продолжал постоянно улучшать следующие способы

JavaScript

После того, как вы закончите Eloquent JavaScript, довольно легко сказать и почувствовать, что вы освоили JavaScript, но затем приходит You Don Не знаю JS, и он вас полностью разрушает (или, по крайней мере, для меня). Эта серия книг (кстати, бесплатная) была упомянута мне несколько раз несколькими старшими веб-разработчиками в офисе как книга , которую нужно прочитать, и только пока я ее не прочту, я могу сказать, что полностью знаю JavaScript.Они были правы, поскольку страница за страницей мне постоянно приходило в голову, насколько действительно сложным был JavaScript на самом деле, а также многие, многие распространенные ошибки, которые могут возникнуть у неопытных и опытных людей, не имеющих надлежащего понимания JavaScript.

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

• JavaScript, Лучшие части: потрясающий доклад Д.Крокфорд, который говорит о самых больших недостатках JavaScript, это «Foot Guns», и о том, как использовать их в качестве сильных сторон.
• Два столпа JavaScript: солидная статья известного писателя среднего уровня JavaScript Эрика Эллиотта, в которой рассказывается о двух основных столпах JavaScript: прототипическое наследование и функциональное программирование.

Как только вы глубоко поймете JavaScript, переходите к ECMASCript 2015 ( также известный как ES6), последний и текущий стандарт JavaScript.Статья журнала Smashing Magazine «ECMAScript 6 (ES6): Что нового в следующей версии JavaScript» — отличный краткий обзор того, что нового в ES6. Вы можете попробовать ES6 в браузере с помощью онлайн-транспилятора Babel.

CSS

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

• SMACSS: масштабируемая и модульная архитектура для CSS.Гибкое руководство по разработке малых и больших сайтов.
• БЭМ: методология, которая помогает создавать компоненты многократного использования и совместное использование кода во внешнем интерфейсе.

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

Вам также следует сосредоточиться на производительности вашего CSS. Статья журнала Smashing Magazine «Управление оптимизацией производительности мобильных устройств» и статья HTML5 Rocks «Высокопроизводительная анимация» отлично справились с этой задачей.Быстрое прочтение обеих статей должно дать вам прочную основу.

JavaScript Bundlers

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

Двумя крупнейшими игроками на данный момент являются:

• Browserify: позволяет вам запрашивать модули в браузере, объединяя все ваши зависимости.
• Webpack: в основном Browserify на стероидах.Сложнее настроить и настроить.

Мини-курс Scotch.io «Начало работы с Browserify» может дать вам начало работы с browserify, а статья Дэвида Фокса Пауэлла «Почему никто не может написать простой учебник по Webpack?» — отличное и интересное введение в webpack.

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

ReactJS

ReactJS быстро набирает популярность и, похоже, не замедляется — до такой степени, что люди спрашивают: «Убивает ли React Angular?»

Scotch.io Learning React.js: Getting Started and Concepts дает исчерпывающий обзор React. Как только вы разберетесь с этим, продолжите курс Egghead.io по основам React, где вы создадите полностью работающее приложение ReactJS, а затем перенесете его на синтаксис ES6.Вы можете продолжить работу с официальной документацией ReactJS, которая очень хорошо сделана и позволит вам полностью освоить ее.

Поскольку React — это только представление, настоятельно рекомендуется изучить Redux. На мой взгляд, большинство курсов по Redux немного сложны, но CSS Tricks Повышение уровня с помощью React: Redux действительно обеспечивает отличный баланс между простотой и информативностью при начале работы с Redux.

Возможно, вы уже слышали о Flux на этом этапе, но если вам интересно, почему вы должны использовать Redux вместо Flux, ознакомьтесь с вопросом о переполнении стека. Зачем использовать Redux вместо Facebook Flux? на что ответил создатель Redux!

Оглядываясь назад на свои ошибки и то, что я узнал

Я сделал много ошибок за 2 года изучения веб-разработки.В целом, я думаю, что моей самой большой ошибкой было то, что я не освоил основы, прежде чем перейти к библиотекам и фреймворкам. Думаю, это применимо почти ко всем языкам программирования, но, на мой взгляд, еще больше применимо к JavaScript. Это связано с тем, что во многих отношениях JavaScript является сломанным языком и содержит множество «Foot Guns» (вы должны были слышать об этом, если смотрели доклад Д. Крокфорда о «JavaScript, лучшие части», о котором я упоминал ранее). Они могут сделать жизнь невыносимо трудной, если вы не понимаете их полностью.

Я вспоминаю, как однажды застрял в проблеме AngularJS с $ scope, на отладку которой у меня ушло 3 дня, и я обнаружил, что это даже не проблема AngularJS, а проблема JavaScript, которую я вызвал сам из-за того, что не понял, как этот работает.

Clean Code

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

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

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

jQuery

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

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

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

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

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

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

Курсы

Что касается учебных материалов; в то время как многие курсы CodeSchool были выдающимися (ветвь HTML и CSS была особенно фантастической), даже если некоторые из их курсов по фреймворкам были немного плоскими (AngularJS, BackboneJS и т. д.).

Я также прошел довольно много курсов Pluralsight, о которых не упомянул, потому что по прошествии всего этого времени я пришел к выводу, что выбор их пути обучения в целом плохая идея и ненадежный .Поскольку их курсы создаются учителями, которые (на мой взгляд) не всегда очень хороши в преподавании, я обнаружил, что качество их курсов сильно колеблется, поскольку их стандарты качества не существуют. У меня были курсы, на которых даже человек, читавший курс, звучал так, как будто он засыпает. И, честно говоря, мне не хватает концентрации внимания, чтобы продолжать уделять внимание 6–10-часовым курсам — и многие из них длятся так долго, если не дольше.

Я потратил 80–100 часов на обучение Pluralsight и, честно говоря, хочу вернуть себе значительную часть этого.Не поймите меня неправильно, у меня было несколько замечательных курсов по Pluralsight, но их внимание к количеству, а не качеству действительно заставило меня зря тратить время. Я мог бы узнать гораздо больше, если бы проходил курсы из лучших источников, таких как Egghead.io и CodeSchool, где они ценят большее качество количества.

Единственная причина, по которой я мог когда-либо думать о том, чтобы кто-то использовал Pluralsight, — это пройти курс, которого нет на других веб-сайтах, по какой-то более непонятной технологии (например, Installshield или Xamarin), или пройти несколько очень конкретных курсов, которые, как они знают, были очень хорошими. получены и рассмотрены (например, Основы Angular Джона Папы).

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

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

Изучив там пути обучения HTML, CSS и JavaScript, я вижу, что вы легко можете получить основу практически для всего.Не верите мне? Просто посмотрите на их обучающие треки и скажите мне, что это не так уж здорово. Конечно, это немного дороже — 30 долларов в месяц, но, на мой взгляд, оно того стоит. (Я плачу за это прямо сейчас, чтобы изучить WordPress, так как он мне нужен для внештатного проекта, а материал отличный).

Несколько слов о платных курсах

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

Да, есть ужасные платные учебные курсы, от которых я бы не советовал, поскольку их ценностное предложение сомнительно (см. Pluralsight), но другие, такие как Egghead.io, CodeSchool и Team Treehouse, предлагают отличную отдачу, несмотря на их относительно дорогая ежемесячная подписка (25-30 долларов в месяц).Кроме того, все они имеют бесплатные 7–15-дневные пробные версии, поэтому вы можете увидеть, какой из них лучше всего подходит для вас.

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

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

Секрет успеха

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

• Любите то, что вы делаете. Это просто самая важная характеристика из всех. Если вам не нравится то, что вы делаете (будь то стили CSS или JavaScript), это действительно проявится в том, что вы делаете.Те, кто увлечены своим делом, часто явно выделяются из толпы.
• Будьте щедры и поделитесь своими знаниями . Очень легко сохранить в секрете найденный вами новый прием CSS / JavaScript, решающий проблемы проекта, но, пожалуйста, не делайте этого. Люди, которые больше всего делятся своими знаниями, часто оказываются наиболее ценными, поскольку их можно поместить в любую команду и значительно улучшить ее качество.
• Всегда ищите новые вещи .Большинство успешных разработчиков, которых я встречал, разделяют эту общую черту. Будь то чтение блогов, проведение много времени в обсуждениях, связанных с программированием, или даже обсуждение того, что нового в веб-разработке, во время обеденных перерывов. Постоянный поиск чего-то нового позволяет лучшим разработчикам всегда быть впереди всех.

Кратчайший маршрут

Уф, на написание этой статьи потребовалось время (6 часов и счет). Мы почти закончили! Вы можете спросить: «Хорошо, классная история, но каков самый быстрый путь?» Итак, вот оно.

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

Javascript

1. Программа обучения Javascript CodeSchool или Treehouse (платная) ИЛИ Курс Codecademy Javascript
2. Eloquent JavaScript
3. Вы не знаете JS
4. JS: правильный путь
5. Изучите ES6 от Egghead.io

HTML & CSS

1. Курс обучения HTML и CSS в CodeSchool или Treehouse (платный) ИЛИ HTML и CSS: Дизайн и создание веб-сайтов от Джона Дакета ИЛИ Курс Codecademy по HTML и CSS.
2. Особенности специфичности CSS с помощью приемов CSS
3. Изучите макет CSS
4. SMACSS
5. 9 основных принципов адаптивного веб-дизайна от Front
6. Основы адаптивного веб-дизайна от Google на Udacity (возьмите, если вы не использовали обучение в CodeSchool или Treehouse path)
7. Управление оптимизацией производительности мобильных устройств с помощью Smashing Magazine ИЛИ Оптимизация рендеринга в браузере и оптимизация производительности веб-сайтов с помощью Google на Udacity
8. Основы Интернета с помощью Google

Инструменты разработчика

1. Изучите и освоите инструменты разработки с помощью CodeSchool
2. Изучите Git с помощью Codecademy и Попробуйте Github от Codeschool
3. Введение в команды Linux от Smashing Magazine
4. Легко автоматизируйте свои задачи с помощью Gulp.js от Scotch.io

AngularJS

1. Проектные решения в AngularJS от разработчиков Google (Введение в AngularJS)
2. Основы AngularJS от Egghead.io
3. Руководство по стилям Angular от Джона Папы
4. Создание одностраничного приложения Todo с Node и Angular (MEAN) от Scotch.io
5. Структура приложения AngularJS от Egghead.io (платный) ИЛИ Scotch.io’s Angular Courses

ReactJS

1. Изучение React.js: начало работы и концепции от Scotch.io
2. Введение в webpack от Egghead.io
3. Основы React от Egghead.io
4. Повышение уровня с помощью React: Redux с помощью CSS-приемов

Back End

1. Учебники по NodeJS от NodeSchool.io
2. Как я объяснил REST to моя жена
3. Создание одностраничного приложения Todo с Node и Angular от Scotch.io (Node, ExpressJS, MongoDB, Angular, REST) ​​

Бонус: ресурсы

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

• Веб-дизайн за 4 минуты. Очень креативный и оригинальный интерактивный учебник, который научит вас основам веб-дизайна.
• Награды. Ищете вдохновение для веб-дизайна? Не смотрите дальше.
• «Почему найм — это так сложно с технической точки зрения», Эрик Эллиотт. Здесь Эрик отлично справляется с описанием того, как на удивление сложно найти хороших разработчиков и как им стать.
• Мега-сравнение систем баз данных NoSQL, Кристоф Ковач. Это превосходное сравнение самых популярных систем баз данных NoSQL.MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, они и многие другие — все здесь.
• XSS Игра. Ошибки межсайтового скриптинга (XSS) — один из наиболее распространенных и опасных типов уязвимостей в веб-приложениях. Используя этот замечательный ресурс, вы можете узнать, как находить и использовать ошибки XSS, а также как предотвратить их появление в вашем веб-приложении.
• Как написать неподдерживаемый код. Веселая статья о том, как , а не — пишут поддерживаемый чистый код.

Бонус: Мои инструменты

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

• Jetbrains Webstorm: полнофункциональная IDE для веб-разработки. (Мой выбор редактора) Платный, но предлагает бесплатную лицензию на 1 год для студентов.
• Atom.io: сильно расширяемый текстовый редактор с функциями, подобными IDE, конкурирующими с Webstorm. Бесплатно.
• Sublime Text: Молниеносный текстовый редактор с поддержкой плагинов и эстетичным внешним видом.(Обычно я устанавливаю Webstorm / Atom в качестве IDE для серьезной работы, а Sublime Text — для быстрого редактирования файлов.)
• caniuse.com: Поддержка браузером критически важна для веб-сайтов, и это ресурс №1 для выяснения того, какие функции поддерживаются какой версией браузера и какие есть.
• Cloud 9: облачная среда разработки и IDE с поддержкой Git, работающая в Linux. Отлично подходит для удаленного программирования и тестирования NodeJS или других серверных вещей без необходимости устанавливать что-либо на свой компьютер.
• CodePen, Plunker и JSFiddle: отличные облачные интерфейсные площадки, которые позволяют создавать быстрые демонстрации HTML / CSS / JS, которыми вы можете поделиться, или поработайте позже, если создадите бесплатную учетную запись.CodePen часто лучше всего подходит для вещей, связанных с CSS, из-за его минималистичного интерфейса и множества функций, связанных с CSS, Plunker для демонстраций JavaScript из-за его мощных функций JS и JSFiddle для демонстраций, которые вы хотите сотрудничать с другими в реальном времени благодаря живому редактору. совместное использование функции совместной работы.
• Vanilla List: репозиторий подключаемых модулей и библиотек JavaScript, использующих только обычный JavaScript (что означает, что для работы не требуются библиотеки, такие как jQuery)
• YouMightNotNeedjQuery: Вероятно, вы этого не сделаете.Посмотреть на себя.
• PublicAPI: Вы когда-нибудь задумывались, какие существуют общедоступные API? Не смотрите дальше!
• Gravit.io: облачное приложение для дизайна, конкурирующее с Adobe Illustrator. (Бесплатно!) Полезно для быстрых макетов и веб-дизайна.
• Adobe Kuler: Веб-приложение, которое поможет вам создать гармоничные цветовые комбинации для любого веб-сайта. Также есть витрина «Изучить» цветовых палитр, созданных другими дизайнерами, а также система ранжирования, которая поможет вас вдохновить.
• Назовите этот цвет: прекратите тратить много времени на выяснение того, как назвать свои цветовые переменные в less / sass, и просто используйте их законное имя в этом веб-приложении

Заключение

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

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

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

Надеюсь, это было полезно для вас, ребята, до следующего раза, Best!

Март ’18 Обновление : Для тех, кому интересно, чем я занимался, вот быстрое обновление статуса!

https: // medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca

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

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

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

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

1. Создайте веб-сайт

Лучший способ начать изучать веб-дизайн — это начать им заниматься. Это совет Дэвида Кадави, автора книги Design Hackers.

Я рекомендую вам завести блог. Я начал вести блог, чтобы иметь площадку для веб-дизайна, а 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 — это инструмент векторной графики для 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 It

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Fonts — ваш друг.

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

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

23. Разобрать UI Kit

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

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

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

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

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

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

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

25. Перейти в JavaScript

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

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

В

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

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

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

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

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

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

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

28. Получите максимум впечатлений

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

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

Чего вы ждете? Прекратите откладывать на потом.

29. Попросите отзыв

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

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

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

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

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

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

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

Зачем изучать веб-разработку в Интернете

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

Этот список должен помочь.

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

Подпишитесь на наш канал Youtube

1. Team Treehouse

Team Treehouse — один из ведущих онлайн-ресурсов для обучения веб-разработке.С базовыми планами от 25 долларов в месяц вы можете получить доступ к видео-курсам под руководством экспертов и интерактивным практическим занятиям.

Они даже предлагают программу Techdegree, которая поможет вам начать новую карьеру всего за 3–12 месяцев. Помимо обучения практическим навыкам, программа также помогает создать готовое к работе портфолио. Их метод обучения включает использование видео, интерактивных викторин и задач по написанию кода.

2. Lynda.com + LinkedIn Learning

Lynda.com существует уже некоторое время. Теперь все курсы Linda.com объединены с аналитикой LinkedIn для более персонализированного обучения. Вместо того, чтобы проводить вас через конкретный курс, сайт предлагает ошеломляющее количество курсов в различных областях, включая почти тысячу курсов по веб-разработке. Каждый курс разбит на серию видеороликов, которые при необходимости сопровождаются пошаговыми примерами и образцами кода. Таким образом, вы можете легко приступить к изучению практически всего в своем собственном темпе.Вы получаете неограниченный доступ за 29 долларов в месяц.

3. Удеми

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

4. Codeacademy

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

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

5. MDN Web Docs (бесплатно)

MDN Web Docs — ценный онлайн-ресурс, созданный открытым сообществом разработчиков, который регулярно обновляется сотрудниками Mozilla, Apple, Google и Microsoft.Вы можете легко найти то, что ищете, и найти прагматичные объяснения от надежных профессионалов. Они даже включают в себя целые уроки для изучения веб-разработки.

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

6. Проект Odin (бесплатно)

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

7. Coursera

Coursera — крупнейший провайдер MOOC (массовые открытые онлайн-курсы). Coursera на самом деле сотрудничает с ведущими университетами (такими как Стэнфорд, Принстон и Йель), чтобы предоставить вам доступ к онлайн-курсам высокого уровня.Вы можете получить ученые степени в самых разных областях, включая компьютерные науки. Эта модель больше ориентирована на систему фиксированных курсов, требующих зачисления. Обычно вы можете начать курс с 7-дневной бесплатной пробной версии, но для продолжения необходимо будет внести ежемесячную плату.

8. Кодовые войны

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

9. WPsessions

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

10. Школа кодов (теперь Pluralsight)

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

Другие места для изучения веб-разработки

Очень сложно сузить этот список до 10, так что вот еще несколько ресурсов, которые вы можете проверить.

Последние мысли

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

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

Ура!

Как быстро научиться веб-дизайну в 2020 году (5-этапный процесс)

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

Это не значит, что много работы не потребуется. Это просто означает, что это намного проще , чем было раньше.

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

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

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

То есть, если вы на самом деле следуете процессу до T.

1) Выберите инструмент для веб-дизайна

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

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

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

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

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

Weebly

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

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

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

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

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

В конце концов, когда мои знания, опыт и навыки улучшились, я перерос Weebly и перешел на WordPress + Elementor.

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

Wix

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

Что касается их продукта, судя по моему ограниченному опыту, он отлично работает.

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

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

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

Squarespace

Наверняка вы уже все знаете об этих парнях. Их везде .

Подкасты, YouTube, блоги, рекламные щиты, телевидение, радио, в душе… Где бы вы ни были, Squarespace найдет вас .

Я лично считаю, что у Squarespace очень ограниченная и скучная эстетика своих шаблонов веб-сайтов. Это действительно сводит меня с ума.

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

Но у них в углу есть Идрис Эльба, так что… Я ПРОДАН.

Shopify

Если вы занимаетесь электронной коммерцией, Shopify — это то, что вам нужно.

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

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

Можно даже утверждать, что они были первопроходцами в области дропшиппинга. (спасибо за чел. дропшиппинга в моей рекламе на YouTube, ПОКУПКА)

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

Если вашей основной клиентурой будут предприятия электронной коммерции, вы просто не можете игнорировать Shopify.

WordPress

WordPress — король веб-сайтов. Настолько, что более 30% всех веб-сайтов работают на WordPress.

И не зря.

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

Это, конечно, связано с повышенной сложностью.

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

Кроме того, существует несколько плагинов CMS, которые делают создание веб-сайтов с помощью WordPress более простым и увлекательным.Давайте посмотрим на эти варианты.

WordPress + Элемент

Elementor изменил правила игры для дизайнеров WordPress. И индустрия веб-дизайна в целом.

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

Если это еще не очевидно, WordPress + Elementor — это то, что я использую для создания всего моего веб-сайта в наши дни.

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

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

WordPress + Строитель бобров

Я никогда раньше не использовал Beaver Builder, но слышал о нем хорошие отзывы.

И что мне особенно нравится в нем, так это то, что он крошечный. Beaver Builder состоит из 3 парней, которые просто делают то, что им нравится.Я полностью согласен с этим.

Вы можете утверждать, что Строитель Бобров — это элементор OG. Это было намного раньше, и его основополагающие принципы очень похожи.

Elementor просто построен на основе Beaver Builder… и сделал что-то лучше.

Студент становится мастером…

WordPress + Divi

Теперь DIVI существует немного дольше.

До Beaver Builder и Elementor Divi популяризировала идею интеграции более простой CMS поверх WordPress.

Но некоторые возразят, что Диви в наши дни стал чем-то вроде динозавра. Со временем он постепенно разрастался ненужными «функциями» и интеграциями.

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

2) Использовать ВСЕ контент вокруг этого инструмента

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

Блоги, YouTube, подкасты, книги, курсы и многое другое доступны для вашего потребления. Многое бесплатно.

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

Блоги Weebly и YouTube

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

Блоги Wix и YouTube

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

Блоги Squarespace и ютуберы

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

Shopify блоги и YouTube

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

• Официальный блог Shopify
• Официальный канал Shopify на YouTube
• (Есть много, МНОЖЕСТВО блоггеров Shopify и пользователей YouTube.Проблема в том, что большинство из них полностью сосредоточено на прямой поставке или печати на футболках, а не на веб-дизайне Shopify. Если вы знаете, что порекомендуете, дайте мне знать, и я добавлю его сюда!)

WordPress блогов и YouTube

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

WordPress + блоги Elementor и YouTube

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

WordPress + блоги Beaver Builder и YouTube

Вот несколько ресурсов, которые помогут вам начать работу с Beaver Builder:

WordPress + блоги Divi и YouTube

Вот несколько ресурсов, которые помогут вам начать работу с Divi (от Elegant Themes):

3) Выберите нишу веб-дизайна

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

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

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

Пора дать волю творческим сокам!

Когда дело доходит до ниш веб-дизайна, в основном есть две категории:

1. Ниши персонажей
2. Отраслевые ниши

Все еще не уверены? Вот несколько идей для вас:

Ниши для персонажей

• Быстро
• Доступный
• Премиум
• Легкий
• Мобильный
• Простой
• Комплекс
• Минималистский
• Анимированный
• 3D
• VR

Промышленные ниши

• Рестораны
• Стоматологи
• Оптометристы
• Спортзалы
• Ландшафтный дизайн
• Сантехники
• Кровельщики
• Серферы
• Блогеры
• Влиятельные лица в социальных сетях
• Стартапов
• школ
• Бухгалтеры
• Очистители
• и так далее…

И отсюда вы можете занять еще большую нишу.

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

Вы создаете сайты для ресторанов? Или вы создаете сайты для китайских ресторанов?

Сайты для влиятельных лиц в социальных сетях? Или сайты для Instagram влиятельных лиц?

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

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

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

Некоторые примеры:

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

Возможности безграничны!

4) Практика, практика, практика

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

Пришло время приступить к работе .

Когда кто-то решает, что хочет научиться играть на гитаре, он не ожидает, что в одночасье станет Джими Хендриксом.

Так почему же так много потенциальных веб-дизайнеров так нетерпеливы?

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

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

Один из простейших способов попрактиковаться и, возможно, даже заработать несколько долларов, — это использовать Google Maps для поиска клиентов веб-сайтов.

1. Зайдите на Google Maps и найдите свой район. Затем найдите все рестораны, стоматологические кабинеты, розничные магазины, маникюрные салоны и парикмахерские и просмотрите их профили.
2. В нем вы найдете ссылку на их сайт. (Или вы вообще не найдете ссылку, что еще лучше. Это означает, что у них даже нет , у них веб-сайта!)
3. Если их сайт — мусор, извлеките с него как можно больше контента, а затем перестройте его для них. Нет, я не шучу.
4. Затем, когда вы закончите, отправьте им по электронной почте ссылку на их совершенно новый веб-сайт и попросите их отзывы.
5. Если им это нравится, продайте им.

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

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

5) Продайте себя как эксперта в этом инструменте / нише

Это та часть, которую большинство из вас будет ненавидеть больше всего. Я знаю, что.

Продажи.

Одно дело — иметь навыки и опыт, но суметь убедить других в том, что они у вас есть, — совсем другое дело.

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

Обычно это происходит потому, что они не тратили достаточно времени на создание истории своего бренда…

Расскажите свою историю

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

Почему они должны работать с вы ? Что принесет вам ? Кто вы ?

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

Рассказывать увлекательную историю и интегрировать ее в свой бренд — один из наиболее важных способов выделиться среди конкурентов.

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

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

Создайте это портфолио

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

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

По правде говоря, вам, вероятно, придется поработать бесплатно или с большой скидкой. Это избавляет от риска нанять нового веб-дизайнера.

Предлагая свои услуги веб-дизайна бесплатно, вы выполняете 6 задач:

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

Поверьте мне, во всем этом есть лот ценности.

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

Наконец, выполните действие

Поздравляю! Вы дочитали до конца поста. (что, честно говоря, много, учитывая, как мало люди читают в наши дни)

Итак, вот ваш план из 5 шагов по изучению веб-дизайна быстро :

1. Выберите конструктор сайтов
2. Использовать весь контент о конструкторе веб-сайтов
3. Выберите нишу веб-дизайна
4. Практика, практика, практика
5. Продайте себя как эксперта в своей нише / застройщика

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

Я не хочу слышать никаких оправданий, К?

Я закончил говорить. Приступим к работе! ????

Часто задаваемые вопросы

Часто задаваемые вопросы об изучении веб-дизайна.

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

Хм, я полагаю, ты не особо обращал внимание, а? Следуйте этому плану из 5 шагов: 1) Выберите свой любимый конструктор сайтов. 2) Используйте все блоги и каналы YouTube, которые вы можете найти об этом конструкторе веб-сайтов. 3) Выберите нишу для своего бизнеса в области веб-дизайна. 4) Практика, практика, практика. 5) Продайте себя как эксперта в своей нише / конструкторе сайтов.

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

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

Какая средняя зарплата веб-дизайнера?

По состоянию на 2019 год средняя зарплата веб-дизайнера в Канаде составляет около 45000 долларов. Но это варьируется во всем мире, и тем более, если у вас есть собственный бизнес по веб-дизайну в качестве фрилансера. СОВЕТ ОТ ПРОФЕССИОНАЛА: вам лучше работать фрилансером и начинать собственный бизнес в области веб-дизайна. ????

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

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

Является ли веб-дизайн хорошим выбором для образа жизни цифрового кочевника?

АБСОЛЮТНО. Настолько, что я написал целый пост о том, почему веб-дизайн — идеальный выбор для цифровых кочевников.

.

No related posts.