Как один фронтенд-инженер может заменить команду из двух человек

Думая двумя мыслями

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

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

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

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

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

Одна ночь с вашим проектом

Хорошо, готовы? Здорово! Допустим, вас попросили разработать сайт для miniCloud, многообещающего стартапа, предлагающего индивидуальные решения VPS. С чего начать?

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

Дайте волю своему творчеству: процесс проектирования

Теперь, когда у вас есть несколько идей для воплощения, пришло время приступить к реальному процессу проектирования. Он состоит из трех этапов: 1) эскиз, 2) каркас и 3) графика. Это та часть, где вы позволяете художественной половине мозга делать свое дело и сходите с ума с карандашом, бумагой и фотошопом.

На этом этапе проектирования очень важно, чтобы вы позволили своему «разработчику» держать вас под контролем, чтобы вы не сошли с ума с некоторыми аспектами веб-сайта, которые будет практически невозможно быстро воссоздать с помощью HTML, CSS и jQuery. Если вы попытаетесь заново изобрести браузер, ваш фронтенд-разработчик возненавидит вас за это. А ваш фронтенд-разработчик — вы, помните?

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

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

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

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Каркас : Теперь, когда у нас есть общее представление о том, как будет выглядеть наш сайт, пришло время создать каркасы, которые мы можем показать клиенту. Есть много способов сделать это. В некоторых случаях вы можете полностью пропустить этот шаг, если считаете, что в этом нет необходимости. Лично я использую Photoshop для создания каркаса своей идеи, так как это инструмент, с которым я лучше всего знаком. Существует множество бесплатных наборов каркасов в форматах .EPS или .PSD, которые помогут вам начать работу за считанные секунды, поэтому вам не нужно создавать и рисовать все свои элементы с нуля. Есть также несколько онлайн-решений, если вы хотите избежать Photoshop, но я больше люблю оффлайн. В любом случае, расширяя наш набросок, мы можем создать каркас нашего веб-сайта следующим образом:

1. Графика : это моя любимая часть: преобразование нашего каркаса в красивый веб-сайт. Но не все я. Если вы в первую очередь разработчик и у вас практически нет таланта к дизайну, цветам, типографике и т. д., я бы посоветовал начать с других веб-сайтов для вдохновения в дизайне. Их много, и они полны отличных идей — кто знает, может, внутри вас живет дизайнер, который только и ждет, чтобы выйти наружу? Я считаю полезным иметь папку закладок с веб-сайтами, которые я считаю особенно красивыми или хорошо спроектированными. Пикассо (?) сказал: «Хорошие художники копируют, а великие художники воруют» — это не значит, что вы берете чужой дизайн и наклеиваете на него свою наклейку. Вместо этого черпайте вдохновение в чужой работе и добавляйте к ней свой собственный взгляд и подход.

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

 So, for step three, we take our wireframe and bring it to life: 

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

1. CSS3Ps : бесплатный облачный плагин Photoshop, который преобразует ваши слои в CSS3.
2. Divine Elemente : создает темы WordPress прямо из ваших PSD-файлов. Это отлично подходит для быстрого запуска вашего проекта WordPress. Хотя они говорят «Навыки HTML не требуются», на самом деле вам они понадобятся, если вы хотите получить потрясающие результаты.
3. Тонкие узоры : коллекция бесплатных узоров для использования в ваших проектах, обычно в качестве фона. Подобные детали имеют решающее значение, когда вы пытаетесь превратить свой дизайн из хорошего в потрясающий.

«Нарезать»: внешний процесс

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

На этом этапе пришло время использовать левую, более аналитическую половину вашего мозга.

В мире веб-дизайна мы называем этот процесс «нарезкой». Хотя некоторое время назад этот термин был более точным, до того, как CSS стал основным визуальным строительным блоком Интернета, и вам приходилось вырезать каждый маленький кусочек вашего PSD или PNG и помещать его в ужасные маленькие таблицы, он оставался без дела.

Если вы веб-дизайнер и еще не знаете, как работать с интерфейсом, вам повезло, потому что программированию можно научиться (в отличие от природных способностей к дизайну). Я бы порекомендовал вам инвестировать в некоторые онлайн-видеоуроки, такие как Lynda.com, и пройтись по основам фронтенд-разработки. (Более полный список ресурсов можно найти здесь.) За считанные часы вы перейдете от нуля к чтению кода. И через несколько дней ты сам напишешь. И через пару месяцев вы станете мастером HTML и CSS — тогда вас ничто не остановит, когда дело дойдет до работы по разработке интерфейса.

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

Как только вы освоите дизайн на основе сетки, вы начнете видеть каждую часть своего веб-сайта как набор строк и столбцов. Первое, что я делаю, когда настраиваю свою структуру HTML, прежде чем добавлять какое-либо реальное содержимое или CSS, — это писать в строках, затем в столбцах, затем основные элементы, такие как навигация, за которыми следуют заполнители текста и изображения. Это позволяет вам сначала получить базовую структуру, а затем строить ее. Глядя на этот каркас, мы видим шесть строк:

1. Логотип / Навигация
2. Слайдер изображений
3. Вступительный текст
4. Изображения категории
5. Последние новости / предложения
6. Нижний колонтитул

После того, как мы поместим их в HTML-структуру Bootstrap, у нас будет что-то вроде этого:

Многие базовые веб-сайты используют один и тот же (или похожий) код, и по мере того, как вы будете работать над все большим количеством проектов, вы увидите, что разработка веб-сайта в значительной степени является итеративным процессом, и нет смысла писать один и тот же код на каждой итерации. . Вот почему фреймворки полезны! Создали ли вы свой собственный или решили использовать Bootstrap или Foundation — не имеет значения. Важно то, что вы можете поддерживать его позже и расширять, если это необходимо.

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

Выбор CMS

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

Из всех больших CMS я бы назвал себя евангелистом WordPress: я восхищаюсь ею среди других разработчиков, особенно новичков, из-за ее универсальности, простоты использования, исчерпывающей документации для разработки, большого сообщества, большого количества бесплатных плагинов, и так далее и тому подобное…

Если кто-то скажет вам, что Joomla! лучше, особенно для небольших проектов — тогда они не знают, о чем говорят. В любом случае, не верьте мне на слово: скачайте WordPress и Joomla! начальные темы, взгляните на каждую папку, а затем спросите себя, какую из них вы хотите изучить в своей новой роли внешнего интерфейса?

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

Если ваш проект особенно мал, и вам просто нужна простая CMS, которую можно реализовать без каких-либо навыков программирования, я бы порекомендовал вам использовать CouchCMS. С помощью всего лишь нескольких тегов XHTML вы можете настроить и запустить его за считанные минуты, и даже ваша бабушка будет знать, как его использовать.

Обслуживание вашего веб-сайта

После того, как вы запустили свой веб-сайт и у вас появился еще один довольный клиент, вам остается только поддерживать его. Если вы создали простой HTML-сайт, на котором не будет нового контента, вы, вероятно, закончили.

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

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

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

PS: Вы можете найти PSD шаблона выше и другие классные дизайны в моем портфолио dribbble.