Руководство разработчика по веб-дизайну для не-дизайнеров

rukovodstvo razrabotchika po veb dizajnu dlya ne dizajnerov?v=1656561748

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

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

oqhMscYYKfC7BC4SRi7eBsvnUVaUCZzOlxo7

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

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

Дело не в таланте

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

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

Дизайн – это умение, и, как и любые другие навыки, его можно научиться.

CaiScvTDfplQ-vwIKAQvtv8e-awwd9wMTAUD

Выбор правильного инструмента для работы

В программировании вы можете использовать Блокнот и написать программу, которая будет такой же хорошей, как если бы она была написана в полноценной IDE… хотя ваша жизнь может быть достаточно плачевной, и это, вероятно, займет гораздо больше времени. В мире веб-дизайна MS Paint взяла бы на себя роль Блокнота, и, как и Блокнот, мало кто выбирает дизайн с ним… Надеюсь.

pU1EqmUdzzDezkZOzoDTAu1GwpQ8dKyECLhI
  • Sketch, единственный инструмент для MacOS, который, как и React, кажется жестко закодированным в каждом списке вакансий. $99/год.
  • Adobe XD, бесплатный кроссплатформенный инструмент, исполняющий роль Vue. Она имеет меньшее сообщество, но его очень легко начать.
  • Adobe Photoshop, швейцарский нож для любой дизайнерской задачи, известной каждому. Он занял место… Вы уже догадались, jQuery. 9,99 дол. США/мес.

Практически нет разницы, используете ли вы код Sublime или VS для написания программ. Или вы используете React или Vue для интерфейса. Это только вопрос преимуществ. То же касается инструментов проектирования, поскольку каждый из них имеет свои плюсы и минусы.

Я использую Adobe XD. Основная причина для меня заключается в том, что это кроссплатформенность, поэтому я не являюсь заложником экосистемы Apple. Он также поддерживается Adobe, поэтому он будет здесь некоторое время. Лучшим для новичков является то, что с мая 2018 Adobe XD можно бесплатно использовать только с некоторыми ограничениями (на которые вы вряд ли натолкнетесь).

Корректировка своего мышления

Наибольшей проблемой, возникшей в мире веб-дизайна для меня, было изменить свое мышление. Я привык придумывать дизайн, когда кодировал сайт. Во всем был порядок. Поток шел слева направо и сверху вниз. Дело в том, что такой подход делает вас худшим дизайнером.

Инструменты дизайна хаотичны, потому что они заставляют вас проектировать так, будто каждый элемент расположен абсолютно. Примите это изменение. Это даст вам свободу быстро менять вещи и облегчит эксперименты. И это важно, потому что дизайн – это постоянный процесс. Ожидается, что вы многое измените, прежде чем добьетесь замечательного результата.

Изучение инструментов

При кодировании вы используете элементы HTML, такие как divs, spans и inputs, и позволяете браузеру отображать их во что-то визуальное. С помощью инструментов дизайна вы можете пропустить посредника и непосредственно использовать визуальные элементы, такие как фигуры и текст.

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

Инструмент «Прямоугольник».

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

2y3CKLWwGu8EgVir8JwjTiRqMZLvrIk8ulUR

Текстовый инструмент (метка)

Инструмент «Текст», как следует из названия, позволяет создавать текст. Но это не так просто, потому что текстовый инструмент имеет два состояния: одно для однострочного текста, а другое для нескольких абзацев. К счастью, их очень легко научиться правильно использовать.

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

Чтобы создать его, просто щелкните, выбрав инструмент «Текст» и напишите. Как правило, используйте это состояние для всего, что не требует определенной ширины и является одной строчкой. Например, однострочные заголовки и метки.

gGq1dRqeXNvBXpNb4IGzQ7K4Q1fmerBfNPdO

Текстовый инструмент (абзац)

Второе состояние – это текстовый контейнер с определенным размером, который ведет себя как

с определенной шириной или

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

8zvbn97rmkMs5n8419DGfB2fvPOgq-BXjbBA

Выберите инструмент

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

aeVtUcAoaPKGkloLjESzXHcctRzNGGb4RhEk

Инструмент «Линия».

Иногда линия удобна, чтобы разделить части дизайна. Вот почему инструмент «Линия» здесь. Вместо этого можно технически использовать инструменты прямоугольника, но ей, поэтому div можно использовать для чего угодно.

LfZZ73IG2CcCPP-hQKvwTS-ScUCISsInsQlk

Советы и техники дизайна

Макет

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

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

HouX0X2FdRy9EfcIouqDcijoZuxvIp1XKq43

Цвета

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

Для создания визуальной иерархии используйте оттенки основных цветов и цвета текста. Попробуйте более темные или более светлые оттенки для текста, используя цветной фон.

8rw2o2Ub4Krxb3thxO-IFq6OVDfz0asCkRp0

Типография

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

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

oOmDF-bv6qdYzwptaxgv-XnygSPVjs1lO5gO

Разработка домашней страницы (или целевой страницы)

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

После того, как я устанавливаю, что хочу сказать, я обычно ищу вдохновение. Прекрасным ресурсом для этого является land-book.com, огромный каталог отличных целевых страниц, за которые люди могут голосовать. Еще одна отличная страница с вдохновением для дизайна – interfaces.pro, где вы можете фильтровать по таким категориям, как цены, 404 или о нас. Я просто просматриваю, пока не найду достаточно сайтов, которые мне нравятся и соответствуют моему желаемому стилю.

TvNk8LNOUBysBYLyvFD6MQkn7mDGRWBQ215N

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

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

Еда на вынос:

  • Уникальный шрифт делает огромную разницу
  • Графика очень важна, старайтесь использовать хотя бы какую-нибудь иллюстрацию или изображение
  • Соблюдайте визуальную важность, используя несколько цветов. Текста и основных цветов недостаточно.
  • Не используйте слишком широкие контейнеры – около 1100 пикселей достаточно
  • Примите отрицательное пространство
  • Говорите о преимуществах, а не об особенностях
  • Посмотрите вокруг в поисках вдохновения, если вы застряли

Разработка веб-приложения (или информационной панели)

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

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

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

auTuV6Yns5sidXSDFFtV5LhdAkslL1vzoYaK

Фиксированный контейнер

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

Примеры: Twitter, Buffer, DigitalOcean, Netlify, GitHub

Емкость для жидкости

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

Примеры: Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify

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

Еда на вынос:

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

Подведению

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

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

Кроме того, вы первым получите уведомление о моем следующем сообщении, где я расскажу о прогрессе, который я достиг в Sidemail за 69 дней — проект SaaS, над которым я работаю. Он включает такие данные, как количество подписчиков, посещение сайта, расходы и проекты дизайна. Это должно быть само собой разумеющимся, но я гарантирую абсолютно отсутствие спама. У меня даже нет времени на это дерьмо.

Мои электронные письма в Twitter открыты, так что если вы застряли в создании дизайна или у вас есть дополнительные вопросы, не стесняйтесь обращаться ко мне.

Добавить комментарий

Ваш адрес email не будет опубликован.