А как вы проектируете новый сайт\сервис визуально?

Добрый день!
Мне необходимо с полного нуля создать пару сервисов. Соответственно перед началом работы нужно визуально определить:
1) какие будут страницы\разделы
2) какой будет функционал
3) какие-то дополнения (возможно буду их пилить ,возможно нет, но указать стоит)

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

Так вот, интересует, как Вы проектируете визуально проекты? Или никак? Или просто списком пишете что где надо? Моя цель - перед глазами иметь понятную картину сервиса, смотря на которую можно постепенно двигаться, без риска повторения кода, или того, что какой-то раздел окажется лишним, или напротив, что я что-то забуду реализовать. как-то так. Спасибо за помощь)
  • Вопрос задан
  • 2178 просмотров
Решения вопроса 2
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
как Вы проектируете визуально проекты?

блокнот в клеточку
Ответ написан
xmoonlight
@xmoonlight Куратор тега Веб-разработка
https://sitecoder.blogspot.com
Блок схемы тут не подойдут, т.к. слишком массивный проект.
Говорю Вам, как архитектор: Вы - точно ошибаетесь! Блок-схемы - здесь лучший инструмент. Не забывайте про уровни абстракций и drill-down внутрь блока на более низкий уровень абстракции.
Сначала - определяете все взаимодействия топового уровня абстракции, из них - выделяете основные роли. Затем, ставите на схему блоки: каждый блок - это отдельная роль и формируете связи (соединяете стрелками), согласно их взаимодействию и направлениям каждого из взаимодействий.
По клику на каждый блок (drill-down) - "проваливайтесь" на более детальный уровень абстракции (в текущей или новой схеме) и т.д.
Я использую Edraw Free Mind Map
Шаги по проектированию: здесь.
b2cae22bff.jpg
Ответ написан
Пригласить эксперта
Ответы на вопрос 11
@McBernar
Блок-схемы в умелых руках — это очень крутой инструмент.
Ответ написан
DmitryKokorin
@DmitryKokorin
Web-developer
wireframe.cc возможно подойдет, сам иногда пользуюсь. сайт забугорный но разобраться не трудно
Ответ написан
@vanyamba-electronics
В проджект-менеджменте есть такое правило. Если проект слишком дорого нарисовать на бумаге, то выгоднее вложить деньги в рисование фальшивых банкнот. Результат в итоге будет примерно таким же.

Я рисую дизайн сайта в Фотошопе, потом нарезаю его на gif-ки, потом делаю шаблон в HTML и JavaScript.
Ответ написан
lukoie
@lukoie
0 бриф
1 ТЗ
2 вайрфрейм
Ответ написан
scor_davis
@scor_davis
Начинающий фронт-энд разработчик
Adobe XD недавно вышел, если чё
Ответ написан
@Weselkow
Дизайнер иллюстратор
Я пользуюсь Visio, очень прост. Далее наброски блоками в фотошоп.

https://yadi.sk/i/JPDGiBiI3UndQo
Ответ написан
Jeer
@Jeer
уверенный пользователь
Есть три уровня:
Простой - блокнот и карандаш
Средний - неспециализированные проги (пэйнт, фотошоп, кто во что горазд)
Сложный - специализированные проги, например, Adobe XD (требует немного умений)

Позволяет делать прекрасные вещи, когда необходимы какие-нибудь многошаговые мастеры, у которых много шагов/ветвлений, где-то переплетаются и т.д. Например, создание пропуска - много условий, много ветвлений (пешеход/машина, лично/доверенное лицо) у которых свои ветки. Позволяет программисту разжевать сложный алгоритм лучше, чем блок схемы.
Подойдёт так же для создания макетов страниц с переходами, насколько я понял - ваш случай.
Ответ написан
Creo
@Creo
Работодатель
Бальзамик и всегда делаю это в обязательном порядке. Детальное техзадание на разработку и прототипы дизайна избавляют от потери времени, нервов и денег. И делают работу комфортной и продуктивной.
Ответ написан
@koders
инженер
Функциональные/сруктурные схемы - в Visio, wireframes - в Axure
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы