Today's DDesign

Блог о дизайне и о его трендах

Сначала карандаш, затем вектор

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


Где искать референсы?

Примеры работ можно найти на популярных ресурсах: Pinterest, Dribbble, Behance. Соберите в папку на компьютере необходимые референсы или разместите их около холста. Я, например, сортирую все по папкам и когда появляется новый проект заглядываю в них, возможно пополняю, если в этом есть необходимость.




Что делать после того, как референсы собраны?

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

Мы никогда не будем плохо рисовать иконку на компьютере, мы будем доводить её до ума, что займет много времени. А что если доведенная до ума иконка окажется плохой? Как можно отказаться от иконки, если вы потратили так много сил. А теперь представьте, 4 минуты скетчинга и вы поймете, что данная композиция плоха. Проходит еще 5 минут работы над рисунком и приходит понимание, что перед вами то что нужно. В итоге 9 минут за бумагой против пары часов за компьютером. Что вы выберете?

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

11 плагинов для Sketch

Сегодня я вам расскажу об 11 плагинах для скетча, которые помогут вам работать с Sketch.

1. Justinmind Sketch

Если вы прототипируете красивые пользовательские интерфейсы, то с Justinmind вы сможете экспортировать проекты и создавать прототипы с анимациями и эффектами.

Скачать — https://github.com/vconesa/justinmind-sketch

2. ImageOptim

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

Скачать — https://imageoptim.com/sketch

3. Find & Replace

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

Скачать — https://github.com/thierryc/Sketch-Find-And-Replace

4. Sketch Measure

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

Скачать — http://utom.design/measure/

5. Plant — контроль версий

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

Скачать — https://plantapp.io/

6. Font Awesome — иконочный шрифт

Все просто — иконки из сервиса https://fontawesome.com/.

Скачать — https://github.com/keremciu/sketch-iconfont

7. SortMe

Плагин позволяющий удобно сортировать слои и артбоарды.

Скачать — https://github.com/romashamin/sort-me-sketch

8. Sketchrunner

Удобное расширение, которое ускорит вашу работу.

Скачать — http://sketchrunner.com/

9. Sketch Coneftti

Интересный плагин, который расставляет ваши элементы рандомно, но красиво по всему макету.

Скачать — http://www.sketchconfetti.com/

10. Blender

Плагин, который «смазывает» ваши элементы и делает что-то потрясающее с ними.

Скачать — https://github.com/bunnieabc/Blender

11. Slinky

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

Скачать — https://sketchapphub.com/resource/slinky/

2018   sketch   Плагин

Трудность простого дизайна

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

Сделать сложную идею и преобразовать её во что-то простое очень трудно. В конце концов, как часто мы сталкиваемся с учителями, которые пытаются сформулировать свои учебные планы во что-то, что может понять средний ученик? Требуется творчество, чтобы придумать аллегорию для простых умов. На англоязычном Youtube есть канал CrashCourse https://www.youtube.com/user/crashcourse и там объясняют на пальцах физику и сложные теоремы экономики. Это хороший пример о том, как сложное может быть простым и наоборот. Вы можете попробовать поискать ролики на русском, вот например https://www.youtube.com/watch?v=nhz82_RyhVo

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

Технология еще одна область, в которой мы видим трудность достижения простоты. Возьмите, например, персональный компьютер. Один из первых цифровых компьютеров — ENIAC был изобретен Дж. Преспер Экертом и Джоном Мочли в Университете Пенсильвании. Это была гигантская машина, которая заняла 1800 квадратных футов пространства! Потребовались десятилетия, чтобы уменьшить размер и сложность этой машины по сравнению с тем персональным компьютером, с которым мы знакомы сегодня. Сама основа компьютера, её двоичный код иллюстрирует, как сложно преобразовать комплекс в простой. Он включает в себя бесконечную последовательность кода для получения программ, которые мы видим на экранах наших компьютеров. Код, который в какой-то момент вручную хранился на перфокартах .

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

Дизайн также играет решающую роль в технологии и сегодня мы видим, что его простота все чаще имеет приоритет. Взгляните на Apple. Не секрет, что источником конфликта между его двумя из трех учредителей, Стива Джобсом и Стивом Возняком, было определение приоритетности дизайна по глубине. В то время как Стив Возняк хотел, чтобы Apple II была открытой системой, которая позволила бы модифицировать её другим. Стив Джобс настаивал на структуре закрытой системы, которая предотвратила бы крупные модификации от пользователей. Он хотел систему, которая ограничивала модификацию, потому что он хотел гарантировать надежность и удобство использования Apple для обычного пользователя.

Является ли его предпочтение в закрытой системе хорошим выбором? Эта тема все еще остается предметом дискуссий, но нельзя отрицать, что его настойчивость в том, чтобы поддерживать продукты Apple в основном неизменяемыми, сделала технологию простой и доступной для всех. Просто дайте своей бабушке смартфон на iOS и на Android, и посмотрите с чем она справится быстрее :)

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

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

Горы, конечно же, были тронуты. Начиная с его скромных начал в гараже, Apple теперь стала девятой по величине компанией в мире .

Как мы видели сегодня, для достижения чего-то мощного, точного и присутствующего требуется огромное количество усилий. Простота — это сложно.

10 чит-кодов для проектирования пользовательских интерфейсов

<br><br>

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

Я опросил разных дизайнеров и узнал, как они работают с интерфейсами, а также какие правила используют.

1 Этот текст важный, надо сделать его больше!

Когда вы сталкиваетесь с контентом — вам нужно его форматировать, делая текст больше, чтобы придавать ему большое значение вы не решаете проблему, как например здесь:





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


Итак, как мне улучшить контраст?

  1. Не используйте один вид веса с разными размерами шрифтов для создания контраста и иерархии.
  2. Вместо этого используйте более смелый и более темный стиль для основного контента, или меньше и светлее для вторичного содержимого.
  3. Создайте три типа текстовых цветов, которые варьируются от темного оттенка до светлого (см. Пример ниже). Обычно я использую свой базовый цвет как цвет текста.



  1. Не бойтесь применять большие пробелы в шрифтах к своим элементам (например, заголовок 24px, основной текст 16px, метаданные 10px и т. д.). Большой разрыв = лучший контраст.
  2. Изучите Modularscale — это онлайн-калькулятор, который вы можете использовать для создания лучшей иерархии шрифтов.
  3. Помните, что контраст = размер + вес + цвет.
  4. Наконец, обязательно проверьте коэффициент контрастности. Вы можете использовать этот калькулятор, чтобы это проверить.


2 Не создавайте несколько оттенков черного

Мы все знаем, что использование черного текста (#000) вызывает напряжение для глаз читателей, поэтому наше решение заключается в создании более темных вариантов в качестве альтернативы. Но вместо того, чтобы выбирать цвета трех или более шестизначных значений цвета, мы можем использовать черный цвет с различной непрозрачностью в качестве решения:





В моем примере выше я использовал черный в качестве основного цвета (#000) и уменьшил его непрозрачность в зависимости от того, где он будет применяться (т. е. Первый заголовок, подзаголовок, параграф и т. д.).

3 Сделайте математику для понимания цветов

Большинство из нас плохи в выборе правильных комбинаций цветов, и всякий раз, когда мы видим дизайн с хорошо организованной цветовой палитрой, мы спрашиваем себя: «Как они сделали это?» (Точно так же, как показано ниже):



На самом деле простое сложение и вычитание в Hue, Saturation, Brightness (HSB) будет делать магию (мы будем использовать HSB для этого формула вместо RGB) . Вы можете легко избавиться от скучного белого цвета над цветным фоном и превратить его в работу Пикассо, как показано ниже:





Итак, где же происходит сложение и вычитание в HSB?





На самом деле есть два подхода. Как мы видим, оба варианта имеют один и тот же базовый цвет #B9F4BC (круглый фон), но отличается тем, что касается цвета Папки (Folder) и Полосы (Strip). Когда мы приступаем к магии, всегда помните, что первое число соответствует Hue, затем Saturation и, наконец, Brightness.

Вариант А

В *Dарианте A* мы видим, что мы сохранили значение оттенка 123 во всех формах (круг, папка, полоса), в то время как насыщенность и яркость — это место, где происходит изменение.

Теперь, когда мы фокусируемся на Saturation, которая равна 24 и её Brightness — 96, оба значения изменились, когда мы создали более темный зеленый цвет для папки. Saturation после 24 стал 40 (Прирост на 16) и с Brightness после 96 стало 82 (Меньше на 14), который показывает, что чтобы измененить Saturation, нужно вычесть или прибавить обратно пропорционально Brightness, для того , чтобы создать хороший контраст (или наоборот) . И то же самое произошло с полосой, используя Saturation папок и Brightness в качестве базового значения, мы переместились от 40 до 44 (с шагом +04) и уменьшили с 82 до 75 (уменьшение -07) для Brightness. Таким образом, мы получаем формулу:





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





Вариант B





В *Варианте B* этот же принцип все еще применяется (формула, указанная выше), но значения оттенков изменяются. И термины RGB и CMY, которые мы использовали в различных лекционных материалах, теперь будут иметь для нас смысл.

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

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





Поскольку мы хотим создать более темную вариацию нашего базового цвета #B9F4BC (круглый фон), который должен быть применен в нашем значке Папки, нам нужно переместить наш ползунок в направлении, где расположен ближайший RGB. Но если мы хотим иметь более светлую версию нашей Папки, мы будем перемещать наш ползунок влево, рядом с CMY (в данном случае Yellow).

После того, как мы переместим ползунок, получится это:





Параметры:





Формула получается такая:





4 Используйте интервалы для разделения групп элементов





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

Как говорится в законе о близости:





Из моего примера выше, моя цель — создать разделение между моим названием и его автором, используя большой промежуток между ними, который равен 24px.

5 Используйте цвета для разделения строк





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

6 Забудьте про тень под текстом



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

Используйте наложение градиента с параметром умножение и тогда вы получите отличный эффект.



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


7 Ширина текста


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

Если вы делаете сделали ширину меньше, но увидели большое пространство справа, как ниже:



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




8 Не изобретайте велосипед


То, что делает дизайн непоследовательным — это когда он не основан на компонентах. Это когда вы поняли, что сделали 5 видов карточного интерфейса, 10 кнопок, 5 стилей заголовков и т. д.

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

Вместо того, чтобы изобретать колесо и создавать еще одну карту для Art Group (пример выше), мы можем использовать карточку Слева и заменить её контентом Art Group. Это сэкономит время для дизайнеров, а также сделает интерфейс согласованным.


9 Используйте цвета бренда в качестве акцентов


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

10 Выносите checkbox’ы



Когда вы создаете дизайн такого списка, выносите маркеры, нумерации за контейнер, так информацию воспринимать легче.