Веб-приложения: от идеи до запуска

Оригинал

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

1. Идея

Скорее всего ты найдёшь яркую идею, стоя под душем, моя посуду или выгуливая собаку. Идея — это всего 2 предложения: проблема и твоё решение. Так или иначе, создавая приложение для уже имеющегося клиента, можно пропустить этот шаг, т.к. у тебя скорее уже есть постановка задачи.

2. Исследование

Теперь, когда ты нашёл идею, пора приступить к исследованию. Существует ли уже твоя идея? На кого ты собираешься ориентироваться? Есть ли рынок для этой идеи? Неплохая мысль: создать вымышленного пользователя — эдакого персонажа, на примере которого можно пройти последующие шаги. Сделав так, ты всегда сможешь спросить себя, понравится ли ему то и поймет ли он это.

3. Мозговой штурм

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

4. Концепция

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

5. Информационная архитектура и структура

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

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

6. Справочник дизайна и взаимодействия с пользователем

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

Справочник взаимодействия с пользователем — это что-то типа справочника дизайна, но он определяет не визуальное представление, а скорее, то, как будет происходить взаимодействияе приложения с пользователем. Например, формы — будет них клиентская валидация или нет? Согласно Роберта Хокмана мл. (Robert Hoekman Jr.), каждый интерфейсный элемент должен быть прописан на бумаге словно сценарий, прежде чем он будет создан.

7. Дизайн

Пока мы не начали с этим пунктом: теперь самое время выложить в онлайн страничку, где любопытные гики смогут подписаться на бета-тестирование сайта!

Теперь, когда готовы наброски всех страниц сайта и справочник дизайна, собственно дизайн пойдет очень гладко. Возможно, имеет смысл сразу писать XHTML/CSS, минуя этап Фотошопа, потому что можно заглядывать в наброски страниц и справочники.

8. Программирование

Берём справочник взаимодействия с пользователем и начинаем создавать UML. Либо, если ты, как и я, не большой любитель UML, засучиваем рукава и начинаем кодить. Программирование станет теперь очень простым занятием, поскольку ты видишь в справочнике взаимодействия, как всё должно работать. И не забудь добавить AJAX, если хочешь впечатлить своих друзей ;-)

9. Пригласи бета-тестеров

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

10. Запуск

Большой День. Устрой «бум», добавив анонс своего проекта на digg, reddit и wikio — и пусть начнётся веселуха! Или веселуха уже закончилась, и ты планируешь следующее веб-приложение?

Все про українське ІТ в телеграмі — підписуйтеся на канал DOU