Есть миллион и один способ сделать сайт запоминающимся и классно подобранный акцидентный шрифт – один из них 🔥
Собрал подборку необычных шрифтов, которые способны улучшить любой проект.
Только помните про лицензии👆🏻
Собрал подборку необычных шрифтов, которые способны улучшить любой проект.
Только помните про лицензии👆🏻
❤14👍7🔥6
Задача: создать сайт для клуба единоборств и фитнеса
Решение: это был самый сложный в создании сайт. Здесь нужно было учесть очень много разных факторов и рассказать о самых важных составляющих клуба: направлениях, тренерах и абонементах, а также разместить расписание всех тренировок для мужчин, женщин и детей.
Результат: получили сайт в темных тонах, но за основу брали не черный цвет, а его оттенок, чтобы снизить контрастность. Акцентный цвет для кнопок и элементов – фирменный красный.
На сайте реализованы все необходимые пользователю функции: запись на тренировку, знакомство с тренерами и даже заказ такси в один клик.
#кейс #дизайн #design #сайты
Решение: это был самый сложный в создании сайт. Здесь нужно было учесть очень много разных факторов и рассказать о самых важных составляющих клуба: направлениях, тренерах и абонементах, а также разместить расписание всех тренировок для мужчин, женщин и детей.
Результат: получили сайт в темных тонах, но за основу брали не черный цвет, а его оттенок, чтобы снизить контрастность. Акцентный цвет для кнопок и элементов – фирменный красный.
На сайте реализованы все необходимые пользователю функции: запись на тренировку, знакомство с тренерами и даже заказ такси в один клик.
#кейс #дизайн #design #сайты
🔥12👍2
Работая над макетом, ты можешь попытаться удержать в голове десятки цифр и значений, а можешь просто запустить плагины, которые исправят недочеты
Забирай топ-5 лучших плагинов для Figma, которые наведут красоту в макете за тебя.
И на чьей теперь ты стороне?
Забирай топ-5 лучших плагинов для Figma, которые наведут красоту в макете за тебя.
И на чьей теперь ты стороне?
🔥26👍4
Шрифт побольше, фон поярче
Работая над макетом, ты можешь попытаться удержать в голове десятки цифр и значений, а можешь просто запустить плагины, которые исправят недочеты Забирай топ-5 лучших плагинов для Figma, которые наведут красоту в макете за тебя. И на чьей теперь ты стороне?
Представь себе ситуацию: ты задизайнил бомба пушка ракета-макет, который утвердил заказчик.
Его передали в разработку, а ты получил свою оплату и уехал кутить на Мальдивы(представим, я же сказал).
Внешне к макету никаких претензий, но на поверку, там пиксель в отступе потерян, тут в слоях бардак, а здесь вообще дробные значения.
Вроде не критично, но кто будет все это исправлять?
По факту, макет утверждён и к тебе как к дизайнеру никаких вопросов быть не может, но разработчик почему-то материт тебя «на чем свет стоит». Ведь именно ему теперь проверять каждое значение🥴
Вообще, по-хорошему, такое нужно возвращать дизайнеру, но этого не делать не придётся, если каждый будет ответственно подходить к выполнению своих задач и использовать в работе плагины, которые наводят порядок.
В слоях/ в числах/в жизни
Плагины не только упрощают взаимодействие с макетом, но и непосредственно влияют на отношения в связке заказчик-дизайнер-разработчик⚡️
Ведь нет ничего проще, чем запустить плагины, которые избавляются от дробных чисел, «висячих предлогов» и даже разных отступов в макетах.
Внимательность тоже важна, но на больших проектах за всем не уследишь.
Дизайнер, помни: сегодня ты делаешь классный макет, завтра разработчик рекомендует тебя как крутого спеца.
Наоборот, кстати, тоже работает
Его передали в разработку, а ты получил свою оплату и уехал кутить на Мальдивы
Внешне к макету никаких претензий, но на поверку, там пиксель в отступе потерян, тут в слоях бардак, а здесь вообще дробные значения.
Вроде не критично, но кто будет все это исправлять?
По факту, макет утверждён и к тебе как к дизайнеру никаких вопросов быть не может, но разработчик почему-то материт тебя «на чем свет стоит». Ведь именно ему теперь проверять каждое значение🥴
Вообще, по-хорошему, такое нужно возвращать дизайнеру, но этого не делать не придётся, если каждый будет ответственно подходить к выполнению своих задач и использовать в работе плагины, которые наводят порядок.
В слоях/ в числах/
Плагины не только упрощают взаимодействие с макетом, но и непосредственно влияют на отношения в связке заказчик-дизайнер-разработчик⚡️
Ведь нет ничего проще, чем запустить плагины, которые избавляются от дробных чисел, «висячих предлогов» и даже разных отступов в макетах.
Внимательность тоже важна, но на больших проектах за всем не уследишь.
Дизайнер, помни: сегодня ты делаешь классный макет, завтра разработчик рекомендует тебя как крутого спеца.
🔥22👍3😱2👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Как настроить сетку по bootstrap ?
Bootstrap — это набор готовых инструментов для создания адаптивного дизайна. Его разработали в Twitter.
Общие параметры сетки:
Отступ между колонками (Gutter) – 30 пикселей
Базовая единица – 5 пикселей
Колонки – 12
Количество брейкпоинтов – 5
Что такое брейкпоинты?
Это контрольные точки, где контент перестраивается в зависимости от устройства.
Как построить сетку в Figma по Bootstrap?
Предположим, мы хотим создать сетку для веб-версии сайта.
За основу берем разрешение экрана 1440 на 1024 пикселей.
При этом согласно документации Bootstrap экраны больше 1200 пикселей относятся к ExtraLarge, а ширина контейнера у них – 1140 пикселей.
Настраиваем сетку:
Отступы по краям (Margin) – (1440 - 1140)/2 = 150+15 (cогласно документации Bootstrap, между границей контейнера и колонками требуются отступы по 15 пикселей).
Колонки – 12
Gutter – 30 пикселей
Тип (Type) – Stretch.
Значения для других разрешений в карточках ниже 👇🏻
#дизайн #сетка #bootstrap #design
Bootstrap — это набор готовых инструментов для создания адаптивного дизайна. Его разработали в Twitter.
Общие параметры сетки:
Отступ между колонками (Gutter) – 30 пикселей
Базовая единица – 5 пикселей
Колонки – 12
Количество брейкпоинтов – 5
Что такое брейкпоинты?
Это контрольные точки, где контент перестраивается в зависимости от устройства.
Как построить сетку в Figma по Bootstrap?
Предположим, мы хотим создать сетку для веб-версии сайта.
За основу берем разрешение экрана 1440 на 1024 пикселей.
При этом согласно документации Bootstrap экраны больше 1200 пикселей относятся к ExtraLarge, а ширина контейнера у них – 1140 пикселей.
Настраиваем сетку:
Отступы по краям (Margin) – (1440 - 1140)/2 = 150+15 (cогласно документации Bootstrap, между границей контейнера и колонками требуются отступы по 15 пикселей).
Колонки – 12
Gutter – 30 пикселей
Тип (Type) – Stretch.
Значения для других разрешений в карточках ниже 👇🏻
#дизайн #сетка #bootstrap #design
🔥13❤5👍1