Создание сайта

1. Создание интернет-магазина

3. ukit.com wordpress

4. Идея и структура сайта
Основная идея и задача сайта.
Одна страница или несколько?
Структура сайта, основные блоки.

5. Подумайте, из каких разделов будет состоять ваш сайт, в чём основная идея и задача.
Например, заказчику нужен сайт для архитектурного бюро. На поверхности понимание, что должны быть
их работы и контакты. Но мы уточняем: а чем бюро отличается от других?
Оказывается, что бюро специализируется на крупных, сложных проектах и является экспертом в таких
заказах. Делаем вывод, что недостаточно просто хороших картинок с подписями, нужен текст — довольно
подробные описания исходных данных, процесса, объяснения и обоснования решений. Также
мы понимаем, что проектов много, но показывать все необходимости нет. Концентрируемся на самых
масштабных. И еще момент, нужно рассказать о людях, объяснить, почему они эксперты в своем деле.
Не уходите в сторону анимации, украшательств и спецэффектов, определите сверх идею, суть — что
затронет посетителя эмоционально, что его впечатлит и вдохновит.

6. Пример
Разработка лендинга для школы дизайна. Страница должна объяснить будущим студентам
и их родителям кто такой дизайнер.
Проблема: Школьники хотят быть дизайнерами, но зачастую не понимают специфику
профессии, какие есть направления в дизайне, чем они отличаются.
Задача: Помочь будущим студентам разобраться в специализациях и понять какая именно
им подходит.
Идея: Что если выделить несколько основных направлений дизайна: интерактивный дизайн,
графический, промышленный и взять интервью у трёх самых крутых представителей? Личные
истории очень эмоциональны и хорошо работают. Рассказать чем они живут, как добились
успеха, добавить классные фотографии. Людям будет интересно прочитать, они для себя
увидят, что это за человек, близок он, вдохновляет ли его образ жизни.

7. Структура

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

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

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

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

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

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

14. Эскиз сайта или прототип
Что такое прототип. Примеры прототипов.
Как рисовать прототип, типовые элементы.

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

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

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

18. Как рисовать прототип
Есть базовый набор стандартных элементов. Текст изображается
прямыми линиями, заголовок рисуем чуть толще. Картинка —
прямоугольник с перечеркнутыми линиями, управляющие элементы —
как маленькие кнопочки. «Шапка» — полоска сверху. Слева, например,
штрих потолще — логотип, а справа пять штрихов — пункты меню.
Совет: не рисуйте прототип слишком большим. Например, на листе А4
ширина окна должна быть 5−6 см. Лучше рисовать компактно
и схематично, а на полях написать комментарии.
Старайтесь рисовать аккуратно — будет легче воспринимать. Обычно
идей много, поэтому сделайте несколько вариантов и потом обсудить
с коллегами, какой лучше.

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

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

24. Текстовый прототип Текстовый прототип — самый простой способ представить
структуру сайта. Обычно, в текстовый прототип выносятся заголовки разделов, и
общие блоки будущей веб-страницы.
Задача текстовых прототипов — быстро сформировать ключевые блоки
страницы и расположить их в нужном порядке Из минимального
инструментария, потребуется только ручка, бумага или стикеры. Но можно тоже
самое сделать и в текстовых редакторах, программах типа Adobe Photoshop,
Axure RP, Figma, онлайн-сервисе Miro (https://miro.com/) и других.

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

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

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

30. Графический прототип с низкой детализацией Задача прототипа с низкой детализацией —
показать структуру страницы, утвердить расположение и количество элементов, собрать
общую композицию. На этом этапе ничего не должно отвлекать от первоначальной задачи,
поэтому
Вы не увидите изображений, типографики или цветов. Способов реализовать графический
прототип с низкой детализацией множество.
Это может быть текстовый редактор Word, графический редактор Figma, Axure RP или уже
знакомый нам онлайн сервис Miro

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

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

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

36. Статический и интерактивный прототип
В случае со статическим прототипом все просто — это изображение страниц
будущего сайта без взаимосвязи между собой и интерактивных элементов. С
интерактивным прототипом все интереснее. Страницы могут быть взаимосвязаны
между собой гиперссылками, может быть реализована навигация по разделам, а
некоторые элементы могут взаимодействовать с пользователями, получать и
передавать какую-то информацию. Иными словами, интерактивный прототип по
поведению может быть похож на полноценный веб-сайт, за исключением уровня
проработки элементов.
Задача интерактивного прототипа — быстро и дешево протестировать удобство
взаимодействия с сайтом или приложением. Обычно, для этого не требуется
привлекать программистов. Многие задачи решаются благодаря базовым
функциям программ и сервисов. В большинстве случаев, интерактивные
прототипы собираются из макетов с высокой или низкой детализацией в
различных программах. Например, Axure RP, Figma или в онлайн сервисах Marvell
app, InVision, Moqups и других.

38. Нужно ли разрабатывать прототип перед созданием сайта? Как Вы уже поняли,
ответ — да! Нужно. Прежде всего, это сэкономит Вам деньги и время, хотя на
первый взгляд и кажется, что это лишняя дополнительная работа. По своему
опыту могу сказать, что создание и редактирование прототипов, всегда выходит
дешевле, чем сразу заказать разработку дизайна или тем более, создание
сайта.
Все просто, разработка и правка дизайна — задача трудозатратная, а значит
дорогая. На каждое исправление, дизайнер будет тратить больше времени, что
в конечном счете выйдет дольше и дороже, если бы прорабатывали отдельно
прототип и дизайн. Кроме того, прототипы дешевле тестировать. Дешевле, в
смысле стоимости внесения изменений и доработок. А их, в период тестов,
придется делать очень много.

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

40. Прежде всего, ответьте на вопрос: «Почему я хороший?»
Если вы делаете сайт на заказ, то очень хороший ход — взять интервью у вашего
клиента. Включите диктофон и просто поговорите с человеком, задайте вопросы —
ничего специфического, просто проявите интерес, выясните за что вашего заказчика
любят клиенты.
Расшифруйте запись сами или наймите исполнителя. Стоит это около 10 грн. за минуту,
найти человека можно на youdo.com За небольшую дополнительную плату, текст
отредактируют и у вас, наконец, появится буква.

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

42. Как написать текст для сайта
Если вы пишете текст самостоятельно, воспользуйтесь следующей схемой:
Напишите короткий текст о себе, своей компании. Это должна быть одна фраза,
которая четко и ёмко формулирует, чем вы занимаетесь. Например, Тильда — сервис,
который помогает создать впечатляющий сайт без технических навыков.
Напишите чуть более развёрнутый текст. Объясните, чем вы занимаетесь. Пишите
просто — так, как если бы вы рассказывали это приятелю за чашкой кофе —
максимально понятным языком.
Выделите три основных фишки — почему любят вас или ваш продукт.
Опишите преимущества. Расскажите с помощью чего ваш продукт решает проблему
клиента, дайте детали.
Подумайте о заголовках. Хороший прием — формальные заголовки, типа «Команда»,
«Контакты» и т. д. поменять на эмоциональные. Например, вместо «Новости» написать
«Будь в курсе», вместо «Контакты» — «Скажите привет».
Возьмите отзывы. Попросите ваших самых лояльных клиентов сказать пару слов о вас.
Отлично работает.

43. Не пишите избитые фразы, типа: «молодая, динамичная, развивающаяся
команда.»
Придумайте три ключевых цифры, люди любят цифры. Но старайтесь, чтобы
они были осмысленными, понятными и что-то сообщали пользователю.
Избегайте абстрактных величин, типа: обслужили 1000 клиентов, выпили 200
литров кофе, продали 38000 плюшевых медведей. Хороший пример: 7,5 —
средний балл IELTS среди наших выпускников. 3 минуты — копируется фильм
с одного устройства на другое при помощи приложения.
Покажите команду, если она сильная. Личность всегда интересна, реальным
людям доверяют больше, чем абстрактной компании.
Расскажите о партнерах или заказчиках, если ими можно гордиться.
Укажите специализацию. Если в вашем баре большой выбор крафтового пива,
отметьте это отдельно.

44. Стиль текста
Придерживайтесь информационного стиля. Не растекайтесь мыслью
по древу — говорите коротко и только важное. Большой текст никто
не читает. Используйте принцип обратной пирамиды — сначала
скажите главное, потом добавьте детали. Тут хорошо работает связка
заголовок и описание. Заголовок должен привлечь внимание
и передать суть, описание — расширить и дополнить сообщение.
Смело убирайте вводные конструкции, избегайте клише
и канцеляризмов. Готовый текст проверьте с помощью сервиса
glvrd.ru — он помогает очистить текст от словесного мусора,
проверяет на соответствие информационному стилю.

45. Дизайн

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

47. Где взять хорошие изображения
Фотографии — это важно, без них ничего не получится. Нет
фотографий — считайте, что нет сайта. Не используйте клипартные
фотографии. Рукопожатия бизнесменов и улыбающиеся
домохозяйки — вчерашний день, такие фото не работают. Лучше
сфотографируйте себя и своих коллег, чем искать готовые картинки
по запросу «успешный предприниматель».
Наймите фотографа или иллюстратора. Известные иллюстраторы
и фотографы стоят дорого, но на рынке много относительно недорогих
профессионалов, они с удовольствием для вас поработают и у вас
сразу появится хорошее наполнение для сайта.

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

49. Сторонние сервисы
Подписка на рассылку — Mailchimp
Сбор контактных данных — Google Forms
Таймлайн для мероприятий — Timeline.knightlab
Интерактивные карты — Storymap.knightlab
Звук — SoundCloud
Продажа билетов на мероприятие — Timepad
Интерактивные изображения — Thinglink
Обратная связь — Uservoice
Принятие денег —PayPal
В целом — если у вас есть какая-то специфичная функция,
используйте блок «вставка html-кода». Если вам нужен уникальный
элемент, то надо будет заказать его у программистов.

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

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

52. Старайтесь быть аскетичным. Чем проще вы сделаете,
тем меньше будет ошибок и сайт получится стильным.
Используйте фирменные цвета. Но это не значит, что
нужно покрасить все в разные цвета. Наоборот,
соблюдайте правило, что 90% — это черный и белый
и10% какого-то активного цвета. Один дополнительный
цвет — лучший вариант. Три использовать нельзя. Два
очень аккуратно.

54. Публикация сайта
Подключите домен. Для этого в настройках проекта пропишите адрес, а у регистратора,
где был куплен домен, одной строчкой укажите IP.
Не забудьте про статистику. Зарегистрируйтесь на Google Analytics, получите код
и пропишите его в настройках.
Позаботьтесь о том как будет выглядеть ваш сайт при выдаче на поисковых сайтах или
социальных сетях — заполните название сайта и описание. Каждую страницу снабдите
небольшой фотографией, тогда при расшаривании ваша страница будет качественно
оформлена.
Tестирование. Вы сделали сайт, теперь вам нужно получить первые отзывы. Покажите
сайт своим коллегам или друзьям, спросите, что они думают. Отправьте ссылку вашим
клиентам и спросите их мнения.