Рубрика «дизайн» - 69

Советов новичкам про то, как начать карьеру дизайнера, в интернете масса. Гораздо интереснее становится, когда понимаешь, что уже не готов просто рисовать картинки. Наш бывший коллега Павел Батурин, который 2,5 года работал в AT Consulting на проекте «Электронное правительство», рассказал, почему важно уметь продавать свою работу, как с нуля организовать отдел и поделился другими практическими советами, которые помогут тем, кто достиг потолка в дизайнерской профессии.

Как быть, когда запутался в текстурах - 1


Читать полностью »

В 2003 году три студента Хельсинского университета приняли участие в конкурсе Nokia и HP на разработку мобильных игр на Assembly и победили с проектом King of the Cabbage World. Затем они основали компанию Relude, а игру продали студии Sumea. Команда работала над играми на J2ME, разрабатывала Burnout, Need for Speed и SWAT. В 2005 году Relude получила первый раунд инвестиций от бизнес-ангела и сменила название на Rovio Mobile.

В 2009 году у Rovio были деньги на создание одной игры. И они сделали это! Подобно Square с «Последней фантазией», Rovio сделали Angry Birds, обеспечившую прибыль компании в следующие годы.

image
Читать полностью »

image

Что такое Framer ?

Framer это программа для создания прототипов, в которой прототип создается сразу в коде, на языке CoffeeScript, который компилируется в JavaScript.

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

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

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

Для работы с Framer достаточно нарисовать прототип в Sketch или Photoshop и придумать взаимодействие между слоями. Также здесь можно создавать свои слои, анимировать и менять их свойства.

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

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

Для создания данной анимации нужно знать 4 вещи: Layer, State, Event, Animation.
Читать полностью »

Есть такой динозавр — ICQ. Вспомнили тот самый звук входящего сообщения? О да! Еще мне сразу вспомнилась учеба в универе: именно тогда я застал расцвет этого мессенджера. Правда, самим клиентом я пользовался другим, кажется, это был QIP. Сейчас уже точно и не вспомню. У Аськи был слишком навороченный интерфейс, мой молодой мозг не мог с ним справиться. А еще были крутые номера, которыми все хвастались. Точнее хвастались количеством цифр в нем. У моего соседа по общаге был 5-значный. И это было круто.

Возвращаем к жизни Аську (ICQ). Мнение дизайнера - 1

А теперь к делу. Недавно Mail.ru решили организовать конкурс на дизайн мобильного приложения этого клиента. Я решил поучаствовать. Что из этого вышло, смотрите дальше.
Читать полностью »

Как освежить логотип с минимальными потерями? Об этом вы узнаете из нашей подборки. Все способы научно доказаны и подкреплены реальными примерами!
image
Читать полностью »

Дети обсудили недетские вопросы дизайна - 1

Дизайн-студия DataArt провела мастер-класс по дизайну интерфейсов для детей коллег. Каждый дизайнер знает, как важно в работе мыслить с позиции конечного пользователя, но как подготовить мастер-класс для компании детей от 6 до 15 лет?

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

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

image Читать полностью »

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

Цвет в дизайне - 1

Базовый цветовой круг пригодится в выборе наиболее подходящего сочетания цвета (или поможет гармонично совместить между собой определенные оттенки). Он изображает базовые и известные еще со школы правила смешивания основных цветов: красного, синего и желтого. Если смешать красный и желтый — получится оранжевый, синий и желтый дадут зеленый, а красный с синим — фиолетовый. Оранжевый, зеленый и фиолетовый — это вторичные цвета. Третичные цвета, как красно-фиолетовый и фиолетово-синий, получены от смешивания основных с вторичными.

Читать полностью »

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

Triangle

Примесь triangle (которую дизайнеры Sagi предпочитают называть «chupchick»), добавляет к всплывающей подсказке треугольник. И tooltips становится похожим на диалоговое окно. Но triangle также может использоваться в качестве автономного элемента.

/* 
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-left: $size solid $color;
  }
}

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js