Пользователь
0,0
рейтинг
4 октября 2012 в 22:44

Разработка → Новое для веб-дизайнера за сентябрь 2012

Сделал небольшую подборку новых полезных материалов для веб-дизайнеров за сентябрь 2012. Надеюсь, будет полезна хабровчанам.

Полезные сервисы


Easel.io — отличный сервис для прототипирования прямо в браузере.



Fluid UI — похожий сервис для прототипирования мобильных приложений.



CSSFilterLab — наглядное применение CSS-фильтров от Adobe.



On/Off FlipSwitch — генератор красивых переключателей на CSS.



Infogr.am — помощник при создании красивой инфографики.



Screenqueri.es — удобный сервис для проверки адаптивного дизайна при разных разрешениях экрана.



Golden Grid System — удобная сетка для тестирования адаптивного дизайна.



Бесплатные плюшки


Jarallax — бесплатная js-библиотека для реализации красивого parallax-эффекта. Пример использования есть на сайте Дубльгиса



tiltShift.js — jquery-плагин для красивого rollover-эффекта.


.
Casper Typeface — очень качественный бесплатный шрифт, автор Михаил Череда.



SlickMap CSS — необычный способ отображение карты сайта, используя CSS.



Отличная подборка UX/UI работ на Pinterest.



Занятное


Uninvitedredesigns.com — подборка авторских редизайнов популярных сайтов от разных веб-дизайнеров.
@grokru
карма
407,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (21)

  • +25
    У меня есть подборки за летние месяцы, делал для себя, если пользователям хабра интересно, могу и их выложить.
    • +4
      Интересно)
    • +2
      Выкладывайте, конечно) Классные сервисы, некоторые вообще вижу в первый раз. Спасибо.
    • +3
      Да, только оформить их советую не как «подборка за летние месяца», а как тематическую подборку по конкретной теме
    • +1
      Конечно выкладывайте! Будем ждать!)
  • +1
    Хорошая статья, спасибо!!!
  • +1
    Сервис с инфографикой — вери гуд! Большое спасибо!
    А есть еще пример таких сервисов, в т.ч. платные?
  • –1
    Можно еще отметить появившийся в сентябре сервис cropme.ru, который сочетает в себе возможности gyazo, онлайн-рисовалки и инструмента для создания бизнес-линчей.
  • +2
    Easel.io — отличный сервис для прототипирования прямо в браузере.
    Да в нём можно сразу дизайн рисовать (есть добавление эффектов, редактирование текста, загрузка изображений) и получить всё в HTML и CSS. Потыкайте демонстрацию! Ещё бы экспорт в многослойные форматы :)
  • 0
    «Golden Grid System — удобная сетка для тестирования адаптивного дизайна» — в первую очередь, сетка для создания, а не только для тестирования. Еще можно было упомянуть, что автор сетки Joni Korpi, создатель less — по-моему, это важно.
    • +1
      Фигню сказал, про создание…
  • +2
    Easel.io — это просто гениально! Мало того, что работает быстрее пресловутого Balsamiq, так ещё и позволяет за пару часов в одно лицо нарисовать несложный, но очень качественный веб-дизайн и экспортировать его в HTML+CSS. Это просто Вау :)

    А ещё там работают все фотошоповские шорткаты)
    • 0
      А что я делаю неправильно с Easel.io что положенный на прямоугольную фигуру текст не экспортируется? Если текст разместить не над фигурой — все хорошо.
      • 0
        Хм, я тоже, видимо что-то делаю неправильно :)
        Похоже на баг. Давайте напишем разработчикам. Вроде бы их всего двое, могут быстро исправить.
        • 0
          Отличная идея!
          Я уже написал. Думаю, мы не единственные столкнувшиеся с этой проблемой — будем надеяться, что поправят.
          • 0
            Думаю, поправят. Ночью они, судя по всему, выкатили обновление — в панели элементов добавились новые!
        • 0
          Возможно кому-нибудь пригодится следующий хак, позволяющий избежать описанной выше неприятности:
          Если текстовое поле вытянуть по ширине примерно на 10px(или больше) за пределы контейнера, то оно нормально экспортируется.

          И кажется самым разумным вариантом — самостоятельно в получившийся экспортированный код добавить необходимые элементы не полагаясь полностью на сервис.
          • 0
            Имеется ввиду за пределы прямоугольника, на котором мы располагаем текст? Спасибо.
            Но будем надеятся, что ребята быстро исправят баг, так как сервис по задумке своей великолепен. Да и код при экспортировании выдает нормальный (на первый взгляд, не тестировал).
  • +1
    остальное здесь
    • 0
      Спасибо за кладезь! :)
      Многое уже знал, но, например moqups.com/ оказался приятным сюрпризом. На удивление, это бесплатный сервис работает быстрее, чем Balsamiq, за который я заплатил 80$ :-)
  • 0
    по поводу On/Off Switch
    нужно его немного допилить, чтоб нормально смотрелся рядом с текстом
    .onoffswitch {
        position: relative; width: 90px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
         /*добавляем:*/
      display: inline-block;
      text-align: left ;/*чтоб не корячило если контейнер имеет text-align:right*/
      /*для  осликов не понимающих vertical-align, делаем центрирование, в зависимости от высоты:*/
      margin-bottom: -5px;
    }
    

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