КодВеб | Дизайн База

🎨 Как бы я учил дизайн в 2024, если бы начал заново Видео от опытного дизайнера о том, как бы он изучал дизайн сейчас. К сожалению, сейчас уже недостаточно сделать минимум кейсов для портфолио, после чего идти на биржу. Конкуренция гораздо выше, и заказчики требуют от вас больших компетенций, если вы хотите зарабатывать достойно. Вот об этом и пойдёт речь в видео. 🎨 Дизайн База. Подписаться #Гайды #Figma

👨‍💻 Drag and Drop w/ SortableJS Перенос иконок 🎨 Дизайн База. Подписаться #Codepen #JavaScript

👩‍💻 Califorina — Магазин техники Apple Магазин техники Apple 🟠 Сложность: Средний 🟠 Адаптивность: Есть 🎨 Дизайн База. Подписаться #Codepen #Figma

🎨 Мини-курс «Figma для новичков» Figma по праву считается главным инструментом среди веб- и UX/UI-дизайнеров по всему миру. Самое время научиться основам работы в Фигме по этому подробному курсу. Благодаря данному плейлисту вы познакомитесь с программой Figma. Изучите интерфейс и инструменты Figma. Разберете как работать с масками, слоями и стилями. Получите навыки по работе с текстом в Figma и закрепите все знания на практике, создав первый экран сайта. 🎨 Дизайн База. Подписаться #Курсы #Figma

👩‍💻 HackReels — красивые анимации вашего кода Мощный инструмент для анимации кода в высоком разрешении. Подойдёт для контентмейкеров, имеет ряд тонких настроек для нужного вам результата. Главный минус — прайсинг. За бесплатно можно очень мало, а полная подписка стоит $59 в месяц 😱 Но как вариант побаловаться самое то, я думаю. 🎨 Дизайн База. Подписаться #Cервис #Дизайн

Готовишься к собеседованию в IT? Разбираем для тебя самые актуальные вопросы для подготовки Выбирай направление: 👩‍💻 Frontend 👩‍💻 Python 👩‍💻 Go 👩‍💻 Java 👩‍💻 C/C++ 👩‍💻 C# 👩‍💻 PHP 👩‍💻 QA 📊 SQL 👩‍💻 Git

❔ Как сделать колонки одинаковой высоты с помощью плагина matchHeight? Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item), который будет использоваться при активации плагина: JavaScript:

jQuery(document).ready(function($) {
  $('.item').matchHeight();
});

HTML:

<header>Шапка страницы</header>
  <div class="container">
    <div class="item main">
      <h1>Основной контент</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <aside class="item">
      <h2>Боковая колонка</h2>
      <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    </aside>
  </div>
<footer>Подвал страницы</footer>

CSS:

*{box-sizing:border-box}
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
}
.container:after {
  content:"";
  display: table;
  clear: both;
}
.item {
  background: #EC5A45;
  padding: 30px;
}
.main {
  float: left;
  width: calc(100% - 330px);
}
aside {
  width: 300px;
  float: right;
}
footer {
  padding: 30px 60px;
  background: #80C8A0;
}

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

@media (max-width: 860px) {
  .item {
    height: auto 

!important

;
    float: none;
    width: 100%;
  } 
  .main {
    margin-bottom: 30px;
  }
}

🎨 Дизайн База. Подписаться #Разбор #HTML #CSS

❔ Как сделать градиентные границы и градиентный текст? HTML:

<div class="gradient-all">Градиентные границы и текст</div>

CSS:

.gradient-all {
  font-size: 2em;
  background: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0.3em 0.6em ;
  border: 3px solid transparent;
  border-image: linear-gradient(135deg, #12BCB0 20%, #FABE0E 70%);
  border-image-slice: 1;
}

🎨 Дизайн База. Подписаться #Разбор #HTML #CSS

Господи, да в чём проблема стать фронтендером? Подписался на эти три канала: 👉 Фронтенд 👉 Верстка 👉 Node.JS Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

👩‍💻 GOTRIP Сайт туристического агентства 🟠 Сложность: Средний 🟠 Адаптивность: Нет Исходники 🎨 Дизайн База. Подписаться #Сodepen

🔘 Делаем красивые кнопки в Figma Подробнейший гайд, как делать крутые кнопки во всех мелочах. Радует, что автор не только показывает, как надо, но и указывает на ошибки, то есть как делать не надо 😊 🎨 Дизайн База. Подписаться #Гайды #Figma

📱 Курс по веб-дизайну 2024 (смотреть) Хорошее дополнение, если вы хотели заняться веб-дизайном, но не знали, с чего начать. Десять практических уроков, плюс два обзора профессии веб-дизайнер. Заявляют, что по итогу курса получится свой первый дизайн-проект. Так это или нет — узнайте во время просмотра 👨‍💻 🎨 Дизайн База. Подписаться #Figma #Вебдизайн

🗓 Актуальные тренды дизайна 2025 2024 год пролетел с неимоверной скоростью. С такой же скоростью развивается и современный графический дизайн. Появляются новые тренды, а то, что было актуально еще год назад, уже никого не удивляет. Дизайн — это «лицо» вашей компании и перспектива успешного бизнеса. Как же делать свои работы так, чтобы они соответствовали современным тенденциям? Об этом и поговорим в видео. 🎨 Дизайн База. Подписаться #Разбор

🎨 Делаем контурный свет в Figma Никакого фотошопа, всё делаем внутри Фигмы и наслаждаемся результатом 😊 Меньше чем за 10 минут вы можете по этому гайду добавить на вашу фотографию красивый контурный свет, так что можно будет вставить портрет на любой сайт. Из приятного — автор оставил весь набор исходников в описании, так что вам не придётся искать эффекты для контурного света самим. 🎨 Дизайн База. Подписаться #Гайды #Figma

☃️ 7 файлов в Figma для новогоднего дизайна Зачастую в дизайнерских проектах приходится всё делать с нуля: настраивать градиенты, рисовать паттерны и придумывать шаблонные аватарки для пользователей. Готовые наборы в Figma — отличный способ поскорее сделать работу и превратить макет в готовый продукт. Рассказываем, какие файлы в Figma помогут вам быстрее делать типовые проекты. На все файлы в подборке действует лицензия CC 4.0 — можно использовать в личных и коммерческих проектах, но только с указанием автора оригинального файла. 🎨 Дизайн База. Подписаться #Сервис #Figma

🎨 Делаем эффект лупы в Figma с анимацией Хороший гайд по тому, как сделать интересный элемент дизайна — лупу, которая будет приближать текст на сайте при перетаскивании увеличительного стекла. Ничего на самом деле не приближается, и там просто игра с размером текста и анимациями в прототипировании, но выглядит отлично, кого-нибудь таким способом вы точно удивите 🥰 🎨 Дизайн База. Подписаться #Гайды #Figma

✅ Много людей проголосовало за то, чтобы мы загружали видео-курсы и другие материалы в Телеграм. Желание подписчиков закон, так что мы сделали Архив Базы, куда будем отправлять все полезные материалы с нашей сетки, заходите: https://t.me/+ox-H3_S6ivJkNDhi https://t.me/+ox-H3_S6ivJkNDhi https://t.me/+ox-H3_S6ivJkNDhi

🤔 Разработчикам на заметку: UX-паттерны на сайтах Знать UX-паттерны важно не только дизайнеру, но и разработчику: это помогает писать код эффективнее и избегать лишней работы. Сегодня расскажем о принципах UX на сайтах, разберёмся, зачем это знать разработчику, рассмотрим примеры популярных паттернов и покажем, где можно найти готовые компоненты для своих проектов. 🎨 Дизайн База. Подписаться #Разбор #UXUI

🎨 Объединяем текст и фигуру в Figma Туториал по тому, как делать эффект объединения текста и фигуры. Может пригодиться в создании плакатов и баннеров, например 😊 Пара дополнений от меня, чтобы ваша работа была быстрее, чем у автора видео:

1️⃣ У Unsplash есть одноимённый плагин, в котором вы можете выбрать фотографию, и он сам подгонит её под выбранную форму; 2️⃣ Чтобы не выделять фигуру наугад на шаге объединения, продублируйте слой с текстом, уберите заливку и включите обводку. Этот слой потом можно будет выключить на финальном этапе ;)

🎨 Дизайн База. Подписаться #Гайды #Figma