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

В большинстве случаев у меня была идея для проекта (или побочного проекта), и мне приходилось полагаться только на свои навыки или развивать новые. Сегодня я расскажу, как я создаю веб-приложение с нуля. От вдохновения к идее, от макета до разработки. Давайте начнем!

Если вы предпочитаете слушать, а не читать, я также снял видео, которое вы можете посмотреть здесь:

Соло-мозговой штурм

Время от времени, когда я чувствую себя более настроенным, у меня появляется куча идей для приложений или веб-сайтов. Честно говоря, большинство этих идей либо неполны, либо непрактичны, либо слишком сложны, либо откровенно плохи. Независимо от того, насколько многообещающими они могут быть, я стараюсь записать большинство из них где-нибудь, я могу еще раз взглянуть позже, вроде ведра с идеями или ящика для предложений, и я просто позволяю им посидеть там некоторое время. Это может быть доска Trello, физическая записная книжка или (мой личный фаворит) документ Notion.

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

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

Это потому, что любая идея может быть полезной, даже если сама по себе малоценна. Идею сегодняшнего дня можно превратить в простой элемент лучшего представления о завтрашнем дне. Полный провал проекта может дать ценную информацию для будущих хороших идей, таких как «Почему это не удалось?». Хранение архива каждой изученной идеи может служить как источником вдохновения, так и подтверждением концепции или просто напоминанием о том, что (не) делать.

Если через пару дней я замечаю, что мой мозг все еще думает об этой идее и о том, как ее можно улучшить, я перемещаю его в столбец «многообещающие» и начинаю искать похожие продукты, чтобы попытаться понять, действительно ли это могло быть жизнеспособным решением. Если я нахожу похожие проекты (также известные как соревнования), я пытаюсь выяснить, чем мой будет отличаться или даже улучшить концепцию. Помните: конкуренция часто означает наличие подтвержденного рынка для вашей идеи.

Что я делаю, так это записываю презентацию. Вы знаете, как будто я собираюсь на аквариуме с акулами, чтобы продать бизнес. Я записываю, для кого эта идея (моя целевая аудитория); почему это имеет значение (зачем пользователям это приложение); и как это будет работать (функции / логика).

На самом деле я не использую аквариум с акулами на поле, но это пригодится, когда я захочу представить другим свою концепцию, или даже для себя, если в конечном итоге я потеряю концентрацию или чувство цели (что иногда случается). Я часто рассказываю друзьям о своих идеях, и они дают мне советы, как их улучшить, как реализовать, или просто рассказывают мне о других похожих продуктах, с которыми они сталкивались.

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

Когда я достаточно взволнован, чтобы переместить идею в столбец «многообещающие», я перехожу к следующему шагу: проектированию!

Вайрфрейминг

Я использую Sketch в качестве инструмента дизайна, но обычно не знаю, что буду делать, когда открою пустой холст.

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

Мой источник вдохновения для всего, что связано с дизайном приложений, - это dribbble.com.

Я ищу проекты в той же категории, что и моя идея (например, «приложение для приготовления пищи», «приложение для дизайна интерьера», «музыкальное приложение» и т. Д.), И пытаюсь представить базовый макет, который подошел бы моему гипотетическому приложению.

Будет ли у него основная навигация вверху главной страницы? Будет ли на нем баннер с изображением героя? Сколько текста по сравнению с пустым пространством он будет отображать? Я хочу начать со страницы домашней страницы или с самого приложения?

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

Я использую бесконечную книгу, которая позволяет стирать чернила маркера и повторно использовать страницы. Также неплохо просто стирать ошибки во время рисования.

Далее мы немного займемся управлением проектами.

Отслеживание функций

Теперь, когда у меня есть смутное представление о том, где что-то будет размещено на экране, я записываю все функции, которые я хочу реализовать. Я стараюсь быть максимально конкретным. Из чего состоит функция; все нюансы; возможные проблемы, а иногда и детали реализации.

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

Все это будет направлять меня в будущем, когда мне нужно будет представить, как это будет выглядеть, а также поможет мне отслеживать работу, которую еще предстоит выполнить или определить приоритеты.

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

Конструирование на холсте

Я начинаю с создания артборда шириной 1440 пикселей. Здесь будет размещена наша настольная версия страницы.

Теперь нам нужно выяснить, как будет выглядеть наш пользовательский интерфейс. Чтобы придумать базовый стиль, который мне нравится, я просматриваю Dribbble в поисках более конкретных элементов пользовательского интерфейса (например, «навигация по приложению», «кнопка веб-приложения», «цветовая схема», «комплект пользовательского интерфейса», «веб-раздел», «форма приложения»). ). Я сохраняю кучу сообщений пользовательского интерфейса, которые мне нравятся, и когда у меня есть приличное количество, самое время выбрать из них детали, которые мне нравятся, и придумать свои собственные. Раньше я не знал, сколько было достаточно, когда дело касалось идей пользовательского интерфейса, которые мне нравились, и в итоге я сэкономил слишком много, что заставило меня почувствовать себя подавленным, когда пришло время выбирать. Итак, теперь я стараюсь придерживаться 3-5 примеров на каждый элемент пользовательского интерфейса, прежде чем двигаться дальше.

После выбора цветовой темы и базового стиля пользовательского интерфейса я пытаюсь найти наиболее подходящий шрифт для проекта. Это может показаться простым, но это может быть так же сложно, как и выбор остальных элементов приложения. Выбранные вами шрифты будут частью характера приложения и того, какую индивидуальность я хочу передать. Я хочу выглядеть более формально? Может быть, подойдет более классический шрифт с засечками. Будет ли он содержать большие заголовки перед графикой? Возможно, сильный яркий шрифт для заголовков и более читаемый для больших фрагментов текста.

Честно говоря, меня почти никогда не вдохновляет эта задача, поэтому я просто ищу что-то вроде «лучшие бесплатные веб-шрифты 20XX» или просто просматриваю шрифты Google (google.com/fonts), если я хочу, чтобы все было проще.

Теперь, когда у нас есть первая страница, которая будет служить основой для нашего пользовательского интерфейса, я обычно переключаю передачи и переключаюсь на то, что мне нравится больше всего: программирование!

Код

Я визуально мыслящий. Мне нравится иметь визуальные подсказки и указания на то, над чем я собираюсь работать. Вот почему я создаю свои собственные мокапы, вместо того, чтобы с головой окунуться в разработку. Однако моя самая большая страсть - это часть реализации кода. Из-за этого, вместо того, чтобы делать весь процесс проектирования заранее, я переключаюсь между проектированием и программированием, когда работаю над своими проектами. Закончив дизайн страницы, я ее программирую. Пока я занимаюсь этим, я пробую разные вещи, например, добавляю анимацию или на месте настраиваю мобильный / планшетный ПК. Это помогает мне не скучать на любом этапе проекта или того хуже: выгорать 🔥

Если я создаю что-то с относительно сложной логикой, я использую React, а для настройки своих проектов я использую create react app, чтобы я мог сосредоточиться на продукте, а не беспокоиться об инструментах и ​​исходном шаблоне проекта. Таким образом, все настроено для меня автоматически, и я могу сразу приступить к работе.

Я начинаю с компонента App (поскольку он обычно является основным контейнером приложения для реагирования), а затем следую за спецификациями макетов страница за страницей, раздел за разделом.

После некоторого времени программирования у меня в конце концов заканчиваются готовые макеты, и мне приходится возвращаться к разработке новых страниц, и цикл повторяется до тех пор, пока у меня не будет готовый продукт. Если мне нужно выполнить собственное внутреннее программирование (чего я боюсь), я просто включаю его в процесс как еще один шаг в цикле.

Последние мысли

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

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

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