Обновите этот навык, чтобы стать успешным фронтенд-разработчиком
Помимо кода, в чем ваш аргумент?
Каждый может программировать. Это так просто, что это делают даже дети. Когда вы все сводите к минимуму, код просто переводит кусочки логики в другой формат. Когда у вас есть общие идеи (циклы, if-else, функции, классы, методы, модули и общие отношения), вы можете создать практически все, что только можете придумать.
Сам код не сложен.
Это крохотные побочные эффекты, которые усложняют задачу.
Для внешнего интерфейса есть дополнительный визуальный слой. Искусство и программирование - это автоматическая связь для многих, но если вы хотите преуспеть как фронтенд-разработчик, вам нужно хотя бы улучшить свои эстетические навыки.
Но в чем разница между эстетикой и искусством?
Разница между эстетикой и искусством
Художественные способности - это умение, которое позволяет вам воссоздавать образы из вашего воображения. Это может быть прямой перевод того, что вы видите. Или это может быть процесс объединения нескольких образов в вашей голове.
Эстетическое мастерство - это способность распознавать визуально приятные узоры и воссоздавать их по мере необходимости.
Не нужно быть художником, чтобы обладать эстетическими навыками.
Вам просто нужно иметь возможность видеть детали, благодаря которым веб-сайт, приложение или программное обеспечение выглядят хорошо.
Что касается эстетики, вам не нужно создавать вещь с нуля. Скорее, речь идет о способности идентифицировать, находить и помещать вещь в нужное место.
Если разбить его на части, эстетика - это скорее композиция. Искусство, напротив, больше склоняется к творчеству.
У концепции эстетики есть две стороны - опыт и стиль.
Оба существуют в тесных отношениях, где одно влияет на другое. Стиль может вызывать конкретное переживание, или переживание может быть достигнуто с помощью определенного стиля. Стиль - это набор взаимосвязанных частей, которые визуально связаны с периодом времени, эмоциями или жанровыми ассоциациями.
Смысл эстетики состоит в том, чтобы составить визуально приятное пространство - будь то в печатном, физическом или цифровом формате - с использованием уже существующих частей. Эстетику можно использовать, чтобы вызвать положительные эмоции при встрече и убедить аудиторию в определенной идее или образе мышления.
Искусство, напротив, можно использовать как инструмент создания эстетики.
Это то, что помогает создавать необходимые детали.
Однако, как разработчикам, нам не всегда нужно изобретать то, что уже существует. Нам просто нужно знать, как собрать все вместе так, чтобы это было наиболее эффективно для наших требований.
В чем ваш аргумент помимо кода?
Эстетика - это то, что часто регулируется областью UX / UI. Но когда дело доходит до фронтенд-разработчика, UX / UI - это то, что поможет выделить вас среди всех остальных, кто умеет программировать.
Это потому, что интерфейс - это больше, чем просто знание того, как подключить API и управлять своими данными. Это возможность преобразовать этот объект JSON во что-то визуально доступное. Вот почему это называется интерфейсом.
Вам не нужно быть художником.
Однако понимание определенных правил, таких как влияние выравнивания, общая визуальная композиция и шаблоны, может помочь вам создавать вещи, которые интуитивно понятны пользователю.
Что касается цифровых продуктов, понимание пользовательских шаблонов и их взаимодействия с определенными визуальными подсказками может повысить эффективность создания дизайна, когда в команде нет графического дизайнера или цифрового дизайнера.
Хотя хорошо иметь структурированный подход к созданию веб-сайтов и приложений, стек дизайнер + интерфейсный разработчик + серверный разработчик не всегда гарантирован.
Небольшие предприятия могут испытывать нехватку персонала или просто не иметь на это бюджета. Или это может быть случай, когда ваш дизайнер придумывает далеко идущий эволюционный революционный дизайн, который, как вы знаете, не сработает - наличие эстетических способностей позволит вам передавать свои мысли и идеи гораздо эффективнее.
Как разработчик, вы должны уметь продавать что-то еще, кроме умения кодировать. Вот пять способов улучшить свои эстетические навыки:
- Практикуйтесь в копировании того, что работает. Это поможет усвоить определенные визуальные шаблоны и позволит вам воссоздавать их на лету, когда это необходимо. Начните с малого на уровне компонентов, а затем продвигайтесь к композитам.
- Практикуйтесь в сборке деталей. Когда у вас будет несколько кусочков в вашем наборе инструментов, сделайте из них быстрые макеты. Не беспокойтесь о подключении к Интернету и тому подобном. Просто создайте форму, страницу входа, простой дизайн корзины и все остальное, о чем вы можете подумать. Дело в том, чтобы выяснить, что работает, а что нет.
- Поупражняйтесь в черно-белом, а затем в цветном. Цвет часто больше отвлекает, чем помогает. Когда вы начинаете с черно-белого изображения, вы можете сосредоточиться на форме и ритме страниц - вы знаете, на интервале, на том, как все выглядит, и на общем потоке вещей. Как только у вас это получится, начинайте играть с цветами.
- Используйте более качественные изображения-заполнители. Изображения добавляют к общему настроению и ощущению того, как передана эстетика. Если вы собираетесь использовать изображения в качестве заполнителей, используйте те, которые соответствуют настроению и чувству, которые вы хотите передать. Не используйте кошек - если только они не выглядят красивыми.
- Правильно изучите CSS. CSS легко подобрать, но он также содержит нюансы. Изучите это правильно и избегайте переопределений. Сделайте его кратким, простым и организованным. Научитесь выполнять рефакторинг в различных шаблонах, таких как DRY, atomic и SMACSS. Это важно, потому что CSS станет частью вашей работы, особенно если вы идете по пути внешнего интерфейса.
Создание эстетической библиотеки
Создание эстетической библиотеки - это один из способов расширить свой визуальный набор инструментов, из которого вы можете быстро рисовать.
Хотя существуют альтернативы, такие как Bootstrap, наличие собственного набора может помочь вам изучить более тонкие детали перевода эстетических идей. Это также делает ваши визуальные компоненты более прозрачными и уводит вас от модификации уже существующих элементов пользовательского интерфейса с помощью вложенных визуальных переопределений.
Быстрый способ создать библиотеку эстетики - через Storybook.
Storybook - это диспетчер компонентов пользовательского интерфейса с открытым исходным кодом, который изолирован от ваших различных фреймворков и библиотек фронтенд-разработки, таких как Angular, Vue и React.
Чтобы создать эстетическую библиотеку, которую вы можете использовать в будущих проектах с помощью Storybook, вам нужно сначала создать пустой проект. Почему? Поскольку интерфейс командной строки Storybook не предназначен для пустых папок, но вы можете прикрепить его к пустому проекту.
Вы можете использовать любой фреймворк или любую библиотеку, но для целей этого руководства я буду использовать Angular в качестве примера.
Создание эстетической библиотеки с помощью Angular + Storybook
Создайте пустой проект Angular с помощью интерфейса командной строки:
ng new storybook-library
Вы можете назвать свой проект как хотите. storybook-library - это просто пример.
Чтобы установить Storybook, войдите в только что созданное приложение Angular и выполните следующую команду:
npx sb init
Если npx у вас не работает, вам нужно обновить npm до 5.2+, а node должен быть с версии 5.6 и выше. Затем вам нужно будет установить npx через npm i -g npx.
После того, как вы установили Storybook, вы можете запустить его, используя следующее:
npm run storybook
Вот и все. Для получения дополнительной информации о том, как писать рассказы и использовать их, перейдите по этой ссылке - Сборник рассказов: написание рассказов.
Последние мысли
Подробное описание того, как работает Сборник рассказов, выходит за рамки предполагаемой задачи этой статьи, и, возможно, скоро я займусь этим должным образом.
Вам не нужно использовать Storybook в качестве основной эстетической библиотеки, но это хороший инструмент, о котором нужно знать для управления большим количеством элементов пользовательского интерфейса.
Чтобы развить эстетическое восприятие, вам необходимо изучить шаблоны дизайна и применить их на практике.
Практикуйтесь в копировании того, что работает.
Практикуйтесь в настройке на основе шаблонов.
Практикуйтесь в соединении различных компонентов дизайна.
В какой-то момент все это обретет смысл, и у вас появятся, казалось бы, естественные способности к эстетике.
Это немного похоже на искусство, но это не так. Эстетика - это набор шаблонов, которые хорошо смотрятся для того времени и цели, для которой он был создан.
Знание того, как реализовать визуально привлекательные интерфейсы без помощи дизайнера, также может улучшить ваше портфолио, особенно когда приходит время искать работу.
