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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пользовательский опыт (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 помогает воплотить все в мельчайших деталях и с мягким поведением и микроанимациями.

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

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

Знание 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 как раз помогают в этом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пользовательский опыт (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 помогает воплотить все в мельчайших деталях и с мягким поведением и микроанимациями.

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

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

Знание 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 как раз помогают в этом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С чего начать работу над дизайном и где брать вдохновение

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

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

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

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

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

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

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

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

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-дизайн»

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

Оплатить участие в мероприятии можно следующими способами:

• Банковской картой на нашем сайте
• Через систему «Расчет» (ЕРИП)
• В отделение банка
• За безналичный расчет путем банковского перевода
• Картой рассрочки Халва до 2 месяцев по Халва Mix и до 9 месяцев по карте Халва Max (подробности на сайте МТБанка)

Мы принимаем платежи по следующим банковским картам:

К оплате принимаются карты международных платежных систем VISA, MasterCard.

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

Ввод данных карточки осуществляется на защищенной авторизационной странице банка. Для оплаты необходимо ввести реквизиты карточки: номер, имя держателя, срок действия и трехзначный код безопасности. Трёхзначный код безопасности (CVV2 для VISA, CVC2 для MasterCard) — это три цифры, находящиеся на обратной стороне карточки. Если карточка поддерживает технологию 3DSecure, для ввода кода безопасности Вы будете перенаправлены на страницу банка, выпустившего карточку.

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

Если услуга была оплачена банковской картой через сайт, то возврат осуществляется на карту, с которой была произведена оплата. Срок поступления денежных средств на карту — от 3 до 30 дней с момента осуществления возврата Продавцом (Исполнителем).

Для оплаты банковской картой через систему «Расчет» (ЕРИП) вам необходимо:

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

Для проведения платежа небоходимо выбрать:

1. Выбрать
   – Пункт “Система “Расчет” (ЕРИП)
   – Образование и развитие
   – Дополнительное образование и развитие
   – Тренинги, семинары, консультации
   – г.Минск
   – ИП Колесень И.Г.
   – Посещение занятий
   – Ввести ФИО ученика и сумму для оплаты
2. Совершить платеж.

Если Вы осуществляете платеж в кассе банка, пожалуйста, сообщите кассиру о необходимости проведения платежа через систему ”Расчет“ (ЕРИП).

Условия возврата

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

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

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

– Если мероприятие не состоится по каким-либо причинам — наш менеджер свяжется с вами для уточнения суммы возврата.

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

10 советов как начать карьеру веб-дизайнера и начать зарабатывать | DesigNonstop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9. Каков механизм выполнения заказа
У меня взаимодействие с заказчиками происходило следующим образом. Сначала я получаю техническое задание (ТЗ) от заказчика. Потом в течение какого-то времени (обычно от трех дней и выше, в зависимости от сложности) выполняю работу и предоставляю заказчику макет сайта в jpeg. Обычно это главная страница, страница поста и вспомогательная страница. Иногда достаточно главной страницы, но об этом надо заранее договориться с клиентом. 
 

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

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

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

с чего начать свою подготовку новичку?

Очень часто приходилось слышать от знакомых – “Слушай, я заинтересовался веб дизайном, с чего бы мне начать?” Сегодня мы дадим часть ответов на этот популярный и важный вопрос 😉 

1. Какие знания нужны?

Вам пригодятся:

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

2. Какие программы придется освоить для начала?

Для начала настроимся на минимализм. Чтобы сделать неплохой дизайн уровня продвинутого дизайнера-новичка, вам буде достаточно знать Photoshop. Однако, для этого программой надо владеть не на уровне новичка 🙂 И поэтому придется потратить время на его изучение. Также, очень советуем начать изучать Sketch.

3. Сколько времени нужно уделять обучению?

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

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

4. Как лучше приобретать практические навыки?

Как бы двузначно это не звучало, но начинать нужно с копирования понравившихся вам сайтов. Но исключительно и только в качестве тренировки! Просто попробуйте сделать также. Сначала, на 99% у вас получится что-то другое, очень не похожее на оригинал. Далее возьмите какую-то бесплатную вордпрессную тему и досконально разберитесь в ее коде. Для чего? Чтобы попробовать управлять элементами дизайна. Этот разобранный код потом вы сможете использовать в качестве скелета для будущих дизайнов 😉

5. О чем важно не забыть?

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

Больше полезных советов на тему ищите в нашей рубрике Туториалы

РЕКОМЕНДУЕМ ПОЧИТАТЬ:

Веб-дизайнерам: с чего начать создание кейса, чтобы заинтересовать клиента | by Школа веб-дизайна WDI | W.D.i дизайн-журнал

Макет в портфолио ничего не рассказывает потенциальному клиенту.

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

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

Эта статья о первом этапе упаковки проекта в кейс — структуре.

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

Хорошая структура выглядит так:

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

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

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

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

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

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

Показать обложку. Показать, что это за проект:

Описать задачу. Написать о том, что хотел заказчик и зачем:

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

Готовый макет. Создать интересную демонстрацию итоговой работы:

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

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

Сначала структура. Потом визуальное повествование.

С любовью, WDi

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

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

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

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

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

Для кого это?

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

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

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

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

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

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

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

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

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

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

Проектируем в браузере

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

должны создаваться в браузере… потому что люди не просматривают веб-страницы в Photoshop

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

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

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

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

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

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

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

Какой образ мышления вам понадобится

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

1. Если они сообразительны, они сначала набросают некоторые идеи на бумаге. Затем они откроют Photoshop. Как любитель, я всегда начинал со второго шага — не делай своих ошибок.
2. Они вложат свое сердце, душу, кровь, пот и слезы в свои лучшие идеи. Эти идеи сформируют законченный и красивый дизайн для домашней страницы (возможно). Затем, если у них есть запрос от начальника или клиента, они могут быстро собрать несколько других вариантов дизайна / макета.
3. Клиент почти неизбежно выберет одну из «низших» концепций по собственным причинам. Даже если это не «вина клиента», может быть очень, очень трудно вернуться и изменить дизайн, который вы уже конкретизировали или «закончили».

Такой подход никому не идет. Итак, первое, что вам нужно знать, это:

Все повторяется

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

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

Но сделайте это правильно, и вы получите фантастическую отдачу от своих вложений.

Вы никогда не перестанете учиться

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

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

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

Содержание превыше всего

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

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

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

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

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

Следствие: типографика в основном — это веб-дизайн

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

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

Вы просматриваете Интернет иначе, чем ваши пользователи.

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

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

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

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

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

Вы что-то продаете

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

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

Необходимые навыки

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

А пока мы начнем с того, что вам нужно знать в первую очередь.

Дизайн пользовательского опыта

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

Конечно, есть ресурсы, которые могут помочь вам начать работу, например What is User Experience Design? Эта всеобъемлющая статья Smashing Magazine охватывает основы UX-дизайна и включает обширный список ссылок на другие ресурсы. Как только вы закончите с этим, не забудьте прочитать «UI vs UX: в чем разница?» Дейна Миллера. (Иногда можно встретить взаимозаменяемые термины «UI (пользовательский интерфейс) дизайн» и «UX-дизайн», и это создает у людей неправильное впечатление.)

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

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

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

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

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

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

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

Типографика

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

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

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

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

Если вы хотите создавать свои собственные пары шрифтов Google, попробуйте The Web Font Combinator.Это инструмент, который позволяет быстро и разумно просматривать комбинации шрифтов. Чтобы получить более продвинутый инструмент планирования типографики, попробуйте Typecast. У него есть бесплатный план, который подойдет большинству начинающих и одиноких дизайнеров. Если вы начинаете работать с другими, и вам действительно нужно , чтобы дать им доступ к редактированию вашего планирования шрифтов, цена совсем неплохая. Typecast также предоставит вам доступ к платным шрифтам, которых нет в библиотеке Google Fonts.

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

И последнее, но не менее важное: прямо здесь, в Webdesigner Depot, есть множество отличных бесплатных и платных шрифтов. У нас также есть много отличных статей по типографике, которые выходят за рамки основ.Поищите шрифты на сайте (некоторые из них находятся в разделе Freebies). Вы можете найти статьи по типографике здесь: https://www.webdesignerdepot.com/category/typography/

Теория цвета

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

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

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

HTML и CSS

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

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

Выучить эти языки достаточно просто. Это самые простые компьютерные языки, которые вы могли когда-либо выучить. Тем не менее, они также обширны, и их можно комбинировать множеством способов для создания множества потрясающих дизайнов. Вам потребуется время, чтобы научиться их правильно использовать. Предлагаю начать с Code Academy. Code Academy — это сайт, на котором вы можете бесплатно изучить HTML и CSS, а также несколько языков программирования.Объяснения просты. Вам предлагаются упражнения по кодированию и отзывы о вашей работе в реальном времени.

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

Базовый JavaScript (необязательно)

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

Что с этим делать? О, такие вещи, как модные слайд-шоу, вызов нового контента без перезагрузки страницы, повышение удобства использования веб-сайта и многое другое! Если вы хотите узнать, как это сделать, моя рекомендация такая же, как и в предыдущем разделе: Code Academy.Они такие классные.

jQuery

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

Если вы ничего из этого не поняли, ничего страшного. Начните с HTML и CSS. Изучите немного обычного JavaScript. Смотри на чужой код … много.Между этим и курсом Code Academy вы начнете разбираться в этом.

Инструменты, которые вам понадобятся

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

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

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

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

Полный набор современных браузеров

Ах, браузер. Вы могли знать его как «Chrome», «Firefox» или, не дай бог, «That Blue‘ E ’Thingy». Ни один из них не совсем одинаковый. У всех есть свои маленькие причуды, и веб-сайты могут выглядеть немного по-разному. Они также могут выглядеть радикально по-разному, в зависимости от того, как был написан код сайта. Вам нужно будет протестировать свой веб-сайт и убедиться, что он правильно выглядит на как можно большем количестве из них.К счастью, возможности браузеров достигли точки, когда веб-сайты начинают выглядеть почти одинаково на каждом из них. По крайней мере, макеты веб-сайтов в целом больше не являются проблемой.

Тем не менее, ключом к обеспечению качества вашей работы является ее тестирование в максимально возможном количестве сред. Если на вашем настольном / портативном компьютере установлена ​​ОС Windows, значит, у вас уже есть Internet Explorer (синий E). По крайней мере, вам понадобятся Firefox и Google Chrome.

На Mac у вас будет Safari, но у вас будут проблемы с запуском Internet Explorer.Это выполнимо, но раздражает. Если на вашем компьютере работает производная Linux, такая как Ubuntu, вы можете протестировать Safari 5 и Internet Explorer 8 и ниже. Следует отметить, что IE 8 и ниже являются наиболее болезненными версиями IE для работы, и они почти не используются. Действительно, Internet Explorer в целом выходит из моды, и с каждым годом им пользуется все меньше людей. Более того, Microsoft выпустит новый браузер вместе с Windows 10 — с Play на Linux.

Мобильные браузеры

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

Word утверждает, что Firefox для iPhone / iPad готовится к выпуску в этом году. Однако вы можете установить Chrome и Opera Mini прямо сейчас.

На устройства Android вы можете установить Chrome, Firefox, Opera и Opera Mini. Никакой любви к сафари, хотя это неудивительно. Apple любит хранить вещи «в семье».

Думаете, это много браузеров для тестирования? Есть еще тонны! Однако их пользовательская база сравнительно невелика.При тестировании в браузерах приходится играть большинству; или сведете себя с ума.

Каркасные инструменты

Ручка и бумага (или приложение для рисования)

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

Приложения для рисования

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

Я делал это раньше. Оно работает. Это круто. Да, и вы получаете около 15 ГБ свободного места для работы. Это веб-интерфейс, поэтому он работает на любой настольной ОС. Похоже, у него нет версии для планшета, что меня разочаровывает. Что ж, всего не может быть.

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

Редактор кода

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

Помните: если кто-то спросит вас о «Vim» или «Emacs», медленно отступайте, не нарушая зрительного контакта. Это твоя единственная защита.

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

Так с чего начать? Я скажу скобки. Он все еще находится в активной разработке, но стабильный. Это бесплатно. Он работает в Windows, Mac и Linux. Он разработан специально для людей, которые проектируют и создают веб-сайты в браузере.

Редактор изображений

Возможно, вы больше не создаете веб-сайты в Photoshop, но вам все равно придется создавать и редактировать отдельные изображения. Будь то фотографии, логотипы или значки, вам что-то понадобится.Опять же, используйте то, что вам подходит. Это может быть Photoshop, GIMP, Paint.Net или одно из приложений Corel.

Локальный сервер (частично опционально)

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

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

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

Ради простоты использования я предлагаю начать с XAMPP. Вы можете установить его на Windows, Mac или Linux, и все готово.

Пример процесса

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

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

Соберите все вместе

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

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

Архитектура содержимого

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

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

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

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

Примечание. Для этого я тоже использовал приложение Google для рисования.

Каркас

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

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

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

Создание плиток стилей (или аналогичный)

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

}

# верхний заголовок a,
# top-header a {
        цвет: #fff;
}

# верхний заголовок,
# et-secondary-nav {
        -webkit-transition: цвет фона 0.4 с, трансформация 0,4 с, непрозрачность 0,4 с легкость выхода;
        -moz-transitions: фоновый цвет 0,4 с, преобразование 0,4 с, непрозрачность 0,4 с, легкость выхода;
        -transistion: background-color 0,4 с, преобразование 0,4 с, непрозрачность 0,4 с, легкость входа;
}

# top-header .container {
        padding-top: 0,75em;
        вес шрифта: 600;
}