10 концепций дизайна, которые должен знать каждый веб-разработчик

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

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

01. Дизайн не только визуальный

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



как мне избавиться от сетки перспективы в иллюстраторе

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

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

02. Будьте ориентированы на пользователя

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

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

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

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

03. Дизайн в деталях

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

04. При проектировании часто делайте наброски.

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

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

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

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

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

05. Используйте пробелы

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

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

Для вертикального пространства используйте доли размера основного шрифта. Я стараюсь все упрощать и использую шкалу 0,25, но есть несколько других шкал, которые вы можете использовать . Например, если размер основного шрифта составляет 16 пикселей (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Это позволяет выбирать размер шрифта, просто перемещаясь вверх и вниз по шкале, как I хотите шрифт большего или меньшего размера.

Apple очень хорошо использует белое пространство для выделения и демонстрации своей продукции

музыкальное видео с животными в баре
Apple очень хорошо использует белое пространство для выделения и демонстрации своей продукции

06. Сетки - это не просто CSS-фреймворки

Сумасшедший, правда? Сетки впервые нашли свое место в дизайне в том, что сейчас называется Международный типографский стиль .

Сетка должна использоваться для:

  • Создавайте отношения между объектами
  • Обеспечьте базовую систему для визуального выравнивания
  • Помогите создать горизонтальный и вертикальный ритм
  • Помогите создать оптический баланс

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

Дон

Не думайте о сетке как о CSS-фреймворке. Это инструмент дизайна, который следует использовать с определенной целью.

07. Когда все имеет акцент, ничто не делает

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

08. Храните папку с вдохновением.

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

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

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

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

09. Дизайн - это решение проблем.

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

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

анимация слоев фотошопа в After Effects

10. Умейте говорить о дизайне и критиковать его.

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

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

Затем, надеюсь, дизайнер поработает с вами, чтобы найти решение проблемы. Это ваша возможность предложить решение; только не просите сделать логотип больше.

Ресурсы и мастерская

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

Слова: Кайл Фидлер

Кайл Фидлер - дизайнер в Thinkbot, помогающий создавать приложения на Rails и iOS. Он занимался проектированием и разработкой в ​​той или иной форме с момента бума (и краха) доткомов и с тех пор не прекращал.

Эта статья изначально появилась в net magazine Выпуск 244.

Понравилось это? Прочтите это!

Есть отличный совет по дизайну? Делитесь в комментариях!