Автор: Разбивка простого приложения, от дизайна пользовательского интерфейса до развертывания, показывает, почему программирование — волшебный инструмент для дизайнеров.
Figma, Adobe XD, Photoshop, Wacom Tablet, альбом для рисования… все инструменты для интерфейсов и веб-дизайнеров, да? Уделите 2 минуты и попытайтесь вспомнить, почему вы хотите стать дизайнером и почему вам нравится создавать вещи.
Скорее всего, это потому, что вам нравится творить; ты творческий человек. Возможно, в детстве вы начали с художественного опыта, а затем направили эту творческую энергию на решение проблем, продолжая выражать ее визуально: вы стали дизайнером, творческим человеком, решающим проблемы.
Сегодня я попытаюсь показать вам, что программирование — это недооцененный инструмент для выражения вашего творческого мышления по решению проблем путем создания настоящего генератора SVG с нуля. Итак, давайте займемся этим!
Шаг 1: Не поймите идею; решить задачу
Мы не вдавались здесь в глубокие бизнес-соображения, но увидеть проблемы, с которыми вы сталкиваетесь, и решить их самостоятельно — отличный способ начать.
Во время работы с клиентом мне понадобилось несколько SVG-волн для иллюстраций. Итак, я начал искать генератор волн: существовало множество генераторов волнистых красочных волн с параметрическими входами, но не было простого, идеального генератора синусоидальных волн. Я решил нарисовать его в своем математическом инструменте GeoGebra , а затем экспортировать в SVG.
Хорошо, но не быстро. И нам нравится выполнять свою работу быстро. Но подождите… Почему бы нам не создать идеальный генератор синусоидальных волн? Без уравнений и скучных математических программ, только кривая и кнопка экспорта. Вы поняли, теперь давайте спроектируем его.
Советы: если вы ищете проблему, поищите мемы в своей области. Они всегда показывают глубокую, болезненную, известную проблему.
Шаг 2. Разработайте максимально простое решение
Два главных правила: Первое правило – подумайте, кто им будет пользоваться; второе правило: предсказать, чего они ожидают от того, как это работает. Так кто? Фронтенд-разработчики. Чего они ждут? Кривая, которую можно редактировать с помощью прямой обратной связи и кнопки экспорта.
Каркасный дизайн
Высококачественный дизайн
Шаг 3: Создайте это по-настоящему
Для дизайнера совершенно нормально остановиться на втором шаге. Но представьте, если бы вы могли построить то, что задумали! Вы уже знаете, что можете создать все, что захотите.
Вы можете рассматривать кодирование как способ перевода вашего пользовательского интерфейса, который наверняка закончится приложением .com, которым сможет пользоваться каждый. Вот почему «лучшие языки» не имеют значения; программирование — это всего лишь инструмент для выражения вашего творчества и создания чего-то для других. И мне как дизайнеру, творческому человеку это может показаться… интересным.
Пользовательский интерфейс для функционального приложения
Любой интерфейс веб-приложения можно перевести из дизайна пользовательского интерфейса в код с помощью HTML/CSS/JS. Вот как мы можем увидеть роль каждого из этих трех «языков»:
HTML: Мне нужна кнопка.
CSS: я хочу, чтобы моя кнопка выглядела закругленной.
ДШ: Я хочу, чтобы что-то произошло, когда я нажму на кнопку.
Для создания нашего приложения я буду использовать Svelte. Svelte — это компилятор JavaScript, который позволяет нам использовать все эти три «языка» в одном месте. Итак, давайте посмотрим, как код может преобразовать наш пользовательский интерфейс в функциональные вещи.
HTML-код кнопки
«Привет, веб-браузер, я хочу, чтобы кнопка с именем «exportButton» и все в функции с именем «downloadSVGpath» выполнялись, когда кто-то нажимает на кнопку 🙂 Спасибо»
Код кнопки в стиле CSS
«Привет, веб-браузер, я хочу, чтобы вы применили эти правила стиля к моей базовой HTML-кнопке: мне нужен красивый закругленный угол размером 16 пикселей, указатель мыши при наведении на него курсора, мне не нужны какие-либо границы, но я хочу крутой цвет градиент в качестве цвета фона. Затем я хочу, чтобы шрифт внутри кнопки имел цвет #fcfcfc и использовал шрифт Inter (жирный, пожалуйста). Как и в моем дизайне Figma, я также хочу центрировать кнопку и добавить отступы. Да, и добавьте легкую тень 🙂 Спасибо».
Рисование функции кривой SVG
«Эй, веб-браузер, каждый раз, когда наш ползунок перемещается, я хочу запускать эту функцию: я хочу, чтобы ты нарисовал кривую внутри рамки, которую я определил в своем HTML-коде. Я также хочу, чтобы моя кривая выглядела закругленной на каждом конце и имела цвет и ширину, которые я определил внутри переменных. Параметры функции синуса вы возьмете из сохраненных значений ползунков. Наконец, пока ваша переменная x не достигла полной ширины по оси x нашего кадра, вы определите положение точки оси Y уравнения синуса и нарисуете кривую 🙂 Спасибо».
Краткое содержание
- Программирование — это всего лишь инструмент, который позволяет нам переводить наши очень наглядные метафоры во что-то, что каждый может использовать. Как это круто?!
- Программирование помогает нам представить цели нашего дизайна и заставляет заглянуть за пределы визуального диапазона: как моя кнопка должна работать? Как это выглядит при наведении? Как мое всплывающее окно может быть разработано для мобильных устройств?
- Программирование позволяет нам создать странную идею, которую мы разработали «просто для развлечения», вместо того, чтобы помещать кейс по дизайну в наше портфолио под тегом «личный проект».
- Кодирование показывает нам, сколько работы требуется для достижения того, что мы задумали. Таким образом, мы можем лучше понимать потребности, проблемы и проблемы наших клиентов-дизайнеров и управление ресурсами.
- Кодирование является гибким. Вы можете идеально воспроизвести пиксель веб-сайта Netflix с помощью чистого HTML/CSS, Vue Framework или любого другого веб-фреймворка.
