Дизайн Aleksandr Popov
1 599

Правила создания сайта (алгоритм)

Мозговой штурм всегда дает вдохновение Фото: Мэтью Генри
В закладки

О чем поговорим:

Задача

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

Что мы можем понимать под задачами.

  • какая тема сайта
  • какую информацию будет нести сайт
  • что это будет за сайт (LP, блог или корпоративный)
  • какое УТП (уникальное торговое предложение)
  • сроки

и тому подобно..

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

Исследования

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

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

Персонажи и сценарии

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

Соответственно мы должны понимать кто эти люди и делать сайт для них.

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

Идеи и скетчи

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

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

Прототипирование

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

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

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

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

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

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

Дизайн (типографика, цвет, акценты, система)

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

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

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

Верстка (адаптация, интеграция)

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

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

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

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

Получается Т образный путь развития.

На этом все. Кратко и в общем. С деталями будем разбираться постепенно.

А к чему у вас больше лежит душа, к верстке или дизайну?

#дизайн #верстка

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Aleksandr Popov", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d","\u0432\u0435\u0440\u0441\u0442\u043a\u0430"], "comments": 6, "likes": 16, "favorites": 149, "is_advertisement": false, "subsite_label": "design", "id": 62573, "is_wide": false, "is_ugc": true, "date": "Wed, 27 Mar 2019 00:51:10 +0300" }
Акции банка «Тинькофф»
19,20$
0,04$
{ "id": 62573, "author_id": 275019, "diff_limit": 1000, "urls": {"diff":"\/comments\/62573\/get","add":"\/comments\/62573\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/62573"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

6 комментариев 6 комм.

Популярные

По порядку

Написать комментарий...
3

Есть готовые темы. Берешь и всё.

Ответить
3

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

Ответить
0

Вода. Таких статей сотни

Ответить
0

У вас телега впереди лошади оказалась. Сайт это конечный этап маркетинговой стратегии. Частный случай ее реализации.

Ответить
0

Хорошая статья, особенно на начальном этапе, разложено по полочкам, спасибо)

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }