Новое для веб-дизайнера за сентябрь 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 — подборка авторских редизайнов популярных сайтов от разных веб-дизайнеров.
    • +128
    • 67,4k
    • 21
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 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;
                              }
                              

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