Если у вас есть бизнес, вам нужен сайт. Но я собираюсь угадать, когда вы читаете статью о том, как ее создать, вы, наверное, уже знаете это.
Что вы понимаете, так это то, что при использовании Интернета это довольно простая задача, создание, создание и создание веб-сайта довольно сложно. Вы хотите, чтобы он выглядел красиво. Вы хотите, чтобы он был простым в использовании. Вы хотите, чтобы люди могли найти его в Google. Вы хотите, чтобы это действительно помогло вам конвертировать посетителей в клиентов … Но как вы это делаете? И что еще более важно, как вы это делаете?
Наше окончательное руководство по веб-дизайну проведет вас через процесс получения веб-сайта шаг за шагом:
Содержание статьи
- 1 Что вам нужно знать, чтобы начать —
- 2 Как создать ваш сайт —
- 3 Как создать пользовательский веб-сайт за 7 шагов —
- 4 Готовы ли вы создать идеальный сайт для своего бизнеса? —
Что вам нужно знать, чтобы начать
—
Узнайте, кто есть кто в мире веб-дизайна и разработки
Когда вы создаете логотип для своего бренда, довольно легко нанять одного человека, чтобы сделать работу, и это получится отлично. Это не обязательно, когда вы создаете свой сайт. Хотя есть люди или агентства, которые предлагают комплексное решение, маловероятно, что вы в конечном итоге будете работать с несколькими людьми в своем приключении для создания веб-сайта. Вот несколько персонажей, с которыми вы можете столкнуться в своем путешествии:
Веб-дизайнеры — это, ну, дизайнеры. Они берут ваши идеи и превращают их в красивый (или badass) макет, который показывает, как будет выглядеть ваш будущий сайт. Обычно это делается в Adobe Photoshop или аналогичной графической программе.
Разработчики UX (пользовательский интерфейс) или пользовательский интерфейс сосредоточены на том, как ваш дизайн макета влияет на ваших пользователей. Например, они помогут вам решить, где положить кнопки, чтобы заставить больше людей нажимать на них или как структурировать вашу навигацию, чтобы сделать ваш сайт максимально плавным. (Существует разница между UX и UI. Эта статья объясняет это хорошо.) Зачастую между дизайнерами UX / UI и веб-дизайнерами наблюдается совпадение; если вы хотите сэкономить деньги, не должно быть слишком сложно нанять фрилансера, у которого есть оба набора навыков.
Веб-разработчики также иногда называемые инженерами или кодировщиками, — волшебные люди, которые научились говорить на компьютере. Они принимают красивый (или badass) макет вашего дизайнера и переводят его на язык кодирования, чтобы он отображался в Интернете. Чтобы еще больше усложнить ситуацию, существует много разных языков кодирования, и большинство разработчиков специализируются на одном или нескольких.
Разработчики интерфейсов специализируются на вещах, которые мы видим при просмотре веб-сайта (например, рендеринг изображений, текст, анимация, выпадающие меню, макет страницы и т. Д.).
Разработчики Back end с другой стороны, специализируются на том, что происходит за кулисами, и необходимы, если ваш веб-сайт нуждается в общении с базой данных. (Если у вас будет корзина покупок, профили пользователей или вы хотите загрузить любой контент по своему усмотрению, вам понадобится база данных.)
Специалисты по SEO, контент-стратеги и копиры или авторы контента также могут быть экспертами, с которыми вы хотите ознакомиться при создании своего веб-сайта. Они могут помочь вам понять, что нужно делать на вашем сайте, чтобы помочь нужным людям найти его (через поисковые системы) и решить купить там.
Приобретать доменное имя и хостинг
Так же, как если бы вы открывали бизнес из кирпича и миномета, первое, что вам нужно сделать, когда вы строите сайт, — это арендовать место.
Веб-хостинг — это физическое пространство, в котором будут жить активы вашего сайта. Все эти изображения, текст и базы данных на самом деле требуют физического сервера для их размещения. В то время как вы можете купить свой собственный и положить его в свой офис / дом / гараж, подавляющее большинство людей и предприятий арендует пространство для размещения через компанию. Хостинг (например, аренда) обычно оплачивается ежемесячно. Для большинства предприятий он будет находиться в диапазоне $ 5- $ 20 / month, но может быть намного выше, если у вас есть большие потребности в данных. Вот список рекомендуемых веб-хостинга, но вы можете проверить его у своего веб-разработчика перед покупкой (поскольку у них может быть предпочтительный поставщик).
Ваше доменное имя — это то, что люди печатают в своем браузере, чтобы попасть на ваш сайт (например, 99designs.com). Как правило, это ваше имя. Чтобы получить доменное имя, вы регистрируете его у регистратора домена. Вам придется заплатить небольшую плату (как правило, менее 10 долларов США в год), чтобы купить и сохранить имя. Большинство хостинговых услуг также являются регистраторами доменов; это, как правило, лучший выбор, так как это будет проще всего настроить.
Наконец, вам нужно будет указать ваше доменное имя на свои серверы в котором в основном говорится в Интернете, что, когда кто-то вводит ваш домен в свой браузер, он должен посмотреть на этот серверный склад, чтобы найти правильные фотографии и текст для отображения. Хотя этот процесс не является сложным, он может ввести в заблуждение. Это шаг, на котором вы можете попытаться сделать DIY (команда поддержки на вашем веб-хосте или регистраторе домена может вам помочь), но также может помочь вам ваш веб-разработчик.
Подумайте о структуре и собрайте контент для своего сайта
Ваш веб-дизайнер или разработчик не собирается писать о своей странице на своем веб-сайте или фотографировать ваши товары для вашего магазина. Вам нужно будет предоставить весь контент, а также предоставить общую структуру сайта.
Для структуры вам нужно подумать о том, какие страницы вам нужны, общие включают:
- Главная
- О странице и / или странице контакта
- Блог
- Каталог продуктов
- Страницы отдельных продуктов
- Сроки и условия
- Галерея
- Целевые страницы / маркетинговые страницы для рекламных акций
Каждый из этих типов страниц должен быть выложен и спроектирован, и каждый из них должен будет иметь на нем контент.
Вам необязательно, чтобы контент был завершен на этом этапе процесса, но вам нужно иметь представление о том, какой контент вам нужен на вашем сайте, и о том, как вы его получите. Вам нужно выделить время, чтобы написать копию (или нанять кого-то, чтобы сделать это за вас)? Если вы нанимаете фотографа для фотографирования продукта? Вам нужно будет предоставить все пользовательские изображения (например, ваш логотип или фотографии вашей команды) для сайта, но веб-дизайнер, возможно, поможет вам получить исходные изображения.
Что такое изображение запаса? (И как правильно это использовать.) ->
Pro tip: у вашего дизайнера (особенно, если у них есть опыт UX / UI) могут быть отличные идеи для контента и структуры, о которых вы не думали. Вероятно, стоит обсудить с ними дискуссию в начале процесса.
Определите, какую функциональность вам нужно
Когда кто-то посещает ваш сайт, что вы хотите? Они просто получают информацию о вашем продукте или услуге, например, номер телефона или часы работы? Нужно ли им покупать товары? Их главная цель — читать статьи в блогах или учиться навыкам? Они заполняют форму для цитаты? Должны ли они создавать профили пользователей и загружать их собственную информацию?
Ваши функциональные потребности помогут определить, как вы можете развивать свой сайт и с кем вам нужно работать. Они также окажут огромное влияние на ваш бюджет, поэтому вам нужно будет разобраться, чтобы получить точные котировки.
Поймите, что такое CMS и решите, нужен ли вам один
CMS (система управления контентом) — это база данных и веб приложение. По сути, он позволяет пользователям (например, вы и вашим коллегам / сотрудникам) загружать контент, чтобы перейти на разные части вашего сайта. Если вы хотите регулярно редактировать текст или изменять фотографии на своем веб-сайте, и вы не знаете, как закодировать, вам понадобится CMS!
Там много вариантов CMS. Существуют фантастические готовые варианты для обычных случаев использования (например, WordPress для ведения блога, Shopify для размещения сайта электронной торговли, шесть для создания профиля). Но если вам нужны расширенные функциональные возможности (например, вы надеетесь построить следующий Facebook или Uber или 99designs), вам нужно будет разработать его на заказ.
Как создать ваш сайт
—
Шаблоны сайтов и застройщиков
Платформы для веб-шаблонов DIY в последнее десятилетие взорвались. Вы, наверное, слышали, по крайней мере, пару из них. Популярные имена включают: Squarespace, Shopify, Wix и Weebly. Каждый из них имеет свою специальность (например, Shopify фокусируется на сайтах электронной коммерции) и собственный набор шаблонов, которые вы можете выбрать.
Плюсы :
- Самый дешевый вариант
- Все они CMS, которые позволят вам контролировать, что на вашем сайте
Недостатки :
- Вы ограничены их шаблонами и несколькими настройками (так что ваш сайт будет выглядеть как многие другие, не обязательно будет на бренде, и у вас не будет большого контроля над функциональностью)
Нанять фрилансеров для пользовательского решения
Если вы хотите иметь больше контроля над взглядом и функциональностью вашего сайта, ваш лучший выбор — нанять одного или нескольких фрилансеров, чтобы помочь вам построить его. Это отлично подходит для получения именно того, что вам нужно по разумной цене, но, скорее всего, вам понадобится больше.
Мы рекомендуем искать профили дизайнеров, чтобы найти кого-то, чей стиль соответствует тому, что вы имели в виду. Кроме того, если вы хотите получить много идей дизайна, вы можете начать конкурс веб-дизайна. Мы поможем вам написать краткое описание. Дизайнеры со всего мира прочитают его и отправят вам свои идеи для вашего сайта. Вы даете отзывы, чтобы усовершенствовать дизайн и в конечном итоге выбрать своих фаворитов в качестве победителя.
Имейте в виду, что вам может потребоваться нанять как дизайнера, так и разработчика для вашего проекта, хотя есть некоторые фрилансеры, которые делают оба. Удостоверьтесь, что вы уточняете фронт, чтобы вы могли сэкономить (время и деньги) соответственно.
Доводы :
- Получите именно тот внешний вид и функциональность, которые вы хотите
- Разумные затраты (хотя это, очевидно, зависит от фрилансера и ваших конкретных потребностей)
Недостатки :
- Возможно, вам придется нанять нескольких человек (веб-дизайнер, дизайнер UX / UI, разработчик)
- Требуется больше времени и информации от вас
Нанимать дизайнеров-фрилансеров для гибридного решения
Если вы хотите индивидуальный внешний вид, но не хотите инвестировать в полностью настраиваемую разработку, вам повезло! Можно начать с готового решения шаблонов и настроить его с помощью собственного уникального шаблона.
Один из самых популярных Для этого нужно создать сайт в WordPress. В то время как он начинался как платформа для ведения блога, WordPress стал самой популярной CMS на весь интернет (около 30% всех сайтов). Он полностью настраивается и может расти вместе с вашим бизнесом. Существуют тысячи и тысячи шаблонов, но также можно создать свой собственный, что делает его идеальным гибридным решением.
Вы можете нанять дизайнера темы WordPress для создания красивого, уникального веб-сайта на основе бренда и использовать WordPress для управления функциональными возможностями базы данных.
Обратите внимание, что это также возможно с несколькими другими сайтами шаблонов (например, вы можете создавать собственные шаблоны или изменять существующие для Shopify или Squarespace), поэтому, если вы предпочитаете использовать одну из этих платформ, это также вариант. Обратите внимание, что в любом из этих случаев дизайн все же необходимо преобразовать в код, поэтому убедитесь, что вы спросите, может ли ваш дизайнер это сделать, или знаете, что вам придется нанять разработчика.
Доводы :
- Позволяет вам иметь более расширенную функциональность (которая встроена в такие платформы, как WordPress или Shopify) по более низкой цене
- Вы получите индивидуальный дизайн, чтобы ваш сайт был красивым и по-бренду
Недостатки :
- Вам все равно придется нанимать дизайнера и разработчика
Нанять агентство для пользовательского комплексного решения
Агентства веб-дизайна и развития являются экспертами что они делают. Они не только помогут вам помочь вам принять правильные решения, но они смогут взять вас с каркаса на полностью развитый сайт. Конечно, все это стоит дорого. Это отличный вариант для компаний со сложными потребностями или для тех, для кого стоимость меньше.
Доводы :
- Немногие головные боли; вы работаете с экспертами, которые проведут вас через весь процесс
Недостатки :
- Вероятно, вы посмотрите на высокую цену
Как создать пользовательский веб-сайт за 7 шагов
—
1. Определите, что вам нужно, и нанять дизайнера
Вы получили свое доменное имя? Знаете ли вы, какую функциональность вам нужно? Список страниц, которые вы хотите создать? У вас есть план сбора всего пользовательского контента, необходимого для заполнения вашего сайта?
Awesome! Время нанять дизайнера. Чтобы найти правильный вариант, вам нужно просмотреть портфели. Подумайте о личности вашего бренда и определите, является ли дизайнер стилистическим. (Например, вы хотите что-то острое и современное, или весело и игриво?) Как правило, стоит искать дизайнеров, которые имеют опыт работы в вашей отрасли, или с конкретным типом сайта, который вы ищете. Если вы фотограф, ищите дизайнеров, у которых есть галереи в своем портфолио, если вы продаете товары, ищите того, у кого есть опыт работы с другими компаниями электронной коммерции.
Вот несколько наших любимых веб-дизайнеров:
-
Другой бизнес или реклама
-
Дизайн печати или упаковки
2. Начните с каркасов
Вы бы не взлетели на кросс- дорожная карта страны без карты. Точно так же вы не должны начинать проектирование своего сайта без каркасов. Каркасы — это в основном чертежи, которые показывают, где живет ваша навигационная система, где у вас будут изображения, куда идут кнопки CTA и т. Д.
Начиная с каркасов, это упростит остальную часть процесса. Вы и ваш дизайнер можете обсуждать структуру и вносить изменения в то, что якобы линейные рисунки, а не сложные макеты Photoshop. Это экономит время и деньги.
Вы должны сделать каркасы для всех ваших основных типов страниц (например, ваша домашняя страница, списки продуктов, статьи в блогах и т. Д.).
Если вы создаете пользовательский дизайн на существующем сайте шаблона, вы все равно должны быть каркасом, просто убедитесь, что ваш дизайнер понимает, какие ограничения присущи шаблону.
3. Дизайн внешнего вида
Ваш сайт является домом для вашего бренда в Интернете. Таким образом, ваши дизайнерские решения (от шрифтов до цветов в стиле) должны строиться вокруг этой марки. Если у вас есть руководство по стилю бренда, отправьте его своему дизайнеру. Если вы этого не сделаете, предоставьте им:
- Ваш логотип
- . Цвета вашего бренда (если есть).
- Список шрифтов
- Любые другие стилистические запросы (например, «веселые и дружелюбные» или «темные и роскошные»)
Также неплохо отправить несколько, тщательно отобранных примеров сайтов, которые вам нравятся, с предложением или двумя объяснениями почему вам они нравятся.
С этой информацией дизайнер пойдет и сделает свое дело. Они обычно начинаются с того, что вы говорите, это самая важная страница (для многих это домашняя страница, но это не всегда).
Когда они возвращаются с первым черновиком, ваша очередь давать обратную связь. Обратите внимание на свою первоначальную, висцеральную реакцию на дизайн, но сопротивляйтесь желанию отвечать в течение как минимум 24 часов. Вы хотите дать себе время для переваривания, и вы должны, вероятно, показать его другим заинтересованным лицам, чтобы получить их вклад. Когда вы дадите обратную связь, убедитесь, что она конкретна и понятна.
В зависимости от вашего соглашения с дизайнером вы можете пройти несколько раундов обратной связи, чтобы добраться до окончательного дизайна.
Как дать лучшую обратную сторону дизайна ->
4. Создание шаблонов для всех страниц
После того, как вы получите внешний вид своей самой важной страницы, и предположим, что у вас есть каркасы для всех ваших типов страниц, должно быть довольно просто получить образцы прототипов для всех ваших страниц. Там может быть несколько мелочей, которые нужно настроить, но на данный момент вы и ваш дизайнер надеетесь на одной странице и говорите на одном языке.
Предполагая, что ваш дизайнер не является вашим разработчиком, на этом этапе они должны предоставить вам многоуровневые файлы изображений, которые вы можете использовать для своего разработчика. (Промышленный стандарт — это файлы Adobe Photoshop, хотя Sketch становится все более популярным.)
5. Работайте с разработчиком, чтобы закодировать свой дизайн
При найме веб-разработчика вы хотите сосредоточиться на функциональность. Вы должны сказать разработчику, что хотите, и они должны уметь объяснить (на понятном языке, который вы понимаете, даже если вы не веб-разработчик), как они это сделают.
Если вам нужна CMS, убедитесь, что они сообщают вам, какую платформу они используют или показывают, что и как вы будете контролировать любые изменения, которые вы, возможно, захотите сделать в будущем.
Будьте осторожны, если они не зададут вам много вопросов. Это обычно признак того, что они не задумываются о всех этапах процесса.
Как и дизайнеры, после того, как вы их проинструктируете, разработчики пойдут создать прототип. Они отправят вам черновик, и вы сможете поиграть с ним и дать отзыв.
6. Заполните весь контент
У вас есть полностью функционирующий веб-сайт. Потрясающие! Теперь вам нужно заполнить весь ваш контент, от фотографий сотрудников или продуктов до заголовков и копии тела.
В зависимости от ваших целей, возможно, стоит нанять контент или специалиста по SEO, чтобы помочь с текстом (они могут помочь вам с ранжированием страницы, а также языком, который задает правильный тон, чтобы заставить посетителей конвертировать) или профессиональным фотограф (особенно если вы продаете товар).
7. Тестирование пользователя
Прежде чем вы официально запустите свой сайт, вы захотите получить столько людей, сколько сможете, чтобы поиграть с ним. Слушайте, когда они дают обратную связь и задают вопросы, но сопротивляются стремлению быть защитными.
. Мое общее правило при обращении к обратной связи заключается в том, что если два разных человека (которые не разговаривали друг с другом) дают мне одну и ту же записку, они, вероятно, что-то хотят.
Сделайте все необходимые настройки и запустите свой сайт!
Готовы ли вы создать идеальный сайт для своего бизнеса?
—
Создание сайта — это равные части, вознаграждающие и запугивающие. Есть много аспектов, которые нужно иметь в виду (и для многих, много новых навыков, чтобы учиться на этом пути). Но если вы все сделаете правильно, вы получите продукт, который поможет вашему бизнесу в будущем.
. Моя последняя мысль — напомнить вам, что веб-сайт почти никогда не является проектом с одним проектом. Это то, что может и должно эволюционировать регулярно. Если вы в начале своего путешествия и выбрали сайт шаблона, вы можете перерасти его через год или два, и все в порядке (когда вы это сделаете, у нас есть много замечательных дизайнеров, готовых и желающих помочь обновить вы к пользовательскому решению). Или, вы можете понять, что ваша клиентская база меняется, и вам нужно переименовать. Или технология может измениться, требуя, чтобы вы адаптировались (сейчас все должно быть отзывчивым и мобильным. Через 5 лет кто знает!)
Теперь иди и создай удивительный сайт!
Загрузка...
