The Bricks — фреймворк для создания пользовательского интерфейса

Original author: Adrian
  • Translation


Bricks это бесплатный набор компонентов пользовательского интерфейса. Он предназначен для упрощения создания дизайна и прототипирования будущего сайта. Этот набор позволит вам сэкономить время при разработке веб элементов и станет замечательной основой для создания сайта от дизайна до верстки. Больше не надо тратить время на рисование многочисленных форм, так как они уже включены в этот набор. Просто переместите компонент в свой проект, измените его стиль и пользуйтесь. Это просто, быстро и элегантно.

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

Давайте, для примера, рассмотрим обычное поле ввода. На первый взгляд, это довольно простой UI элемент, но это не так. Поле ввода является некой симфонией, которая содержит множество различных вариантов, например, вид поля при возникновении ошибки, при состоянии успешно выполненной операции, при наведении курсора, при клике на нем. А если вдруг клиент решил заменить прямоугольные формы на формы с закругленными углами? Bricks поможет решить эту проблему, ведь каждое поле ввода является компонентом, который имеет множество настроек.



Папки с текстами, которые используется в компоненте, выделены синим цветом. Если вы захотите поменять заголовки или описание, вы сможете найти их в директории «. Content».

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

Bricks является ядром фреймворка. В ближайшее время мы выпустим к нему крутые дополнения, содержащие дополнительные компоненты. Эти дополнения будут делится на такие категории, как формы, элементы, электронная коммерция и слова.

Видео-презентация




Наши планы


В ближайшее время мы собираемся выпустить для фреймворка 4 дополнения с сотней новых компонентов. Также мы планируем обновить его ядро, добавив в него новые элементы. Для того, чтобы набор существовал и обновлялся, нам нужна ваша помощь. Мы будем рады, если вы сообщите, какие у него есть недостатки. Вы также можете сделать ваши собственные компоненты или добавить конфигурации к существующим и отправить все это нам. Если они нам понравятся, мы включим их в стандартную сборку Bricks’а.

В настоящее время Bricks представлен для дизайнеров в виде PSD файлов для Фотошопа. Мы планируем сверстать элементы набора и дополнений, тем самым создав полноценный фрэймворк для разработчиков.

Презентация на Behance

Скачать

Автор фреймворка — maDByte
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 48

    –2
    Совместимо ли с Twitter Bootstrap?

    И не хотите разработку перенесли на github?
      +2
      А, прошу прощения, не заметил что топик — перевод…
        0
        Скинул ссылку автору фреймворка, думаю, он ответит на ваш вопрос.
          0
          Скинул ссылку на пост автору фреймворка, думаю, он ответит на ваш вопрос.
        • UFO just landed and posted this here
            +20
            Первый раз слышу чтоб .psd называли фреймворком.

            Видимо, веб-дизайнеры не отстают от своих собратьев по цеху — от нас веб-разработчиков, в любви к модным словечками, типа «фреймворк».
              +2
              Имхо, фреймворком называть такие вещи неправильно, как минимум чтобы не путать термины разных областях.

              Я бы назвал это UI Kit
                –1
                Я не осуждаю правильно или неправильно. Это дело веб-дизайнеров, а я, как программист, стараюсь как можно меньше лезть в их работу, включая обсуждение их терминологии.

                В данном случае я просто очень удивлен, т.к. никогда не слышал использования слова «фреймворк» в таком значении.
                0
                «В настоящее время Bricks представлен для дизайнеров в виде PSD файлов для Фотошопа. Мы планируем сверстать элементы набора и дополнений, тем самым создав полноценный фрэймворк для разработчиков.»
                  +1
                  Вообще-то это и есть фреймворк, это слово имеет более общее понятие и используется не только в программировании.
                  0
                  Вот только потом это заметил :(
                +3
                The button below is activated only after you tweet.

                Как же все помешались на твиттерной рекламе =) скоро дойдет до того, что раздавать файлы будут только фолловерам, проверками, и прочими ухищрениями.
                  0
                  Как написано в оригинале статьи, ваш твит это маленькое спасибо за их большую работу :)
                    +4
                    да уж… у меня к примеру вообще нет твитера.
                    надеюсь кому-нибудь помогу, чтобы не пришлось смотреть сорс страницы, как мне, чтобы найти линк для скачивания :)
                    Прямой линк на скачивание The Bricks — designmodo.com/wp-content/plugins/download-monitor/download.php?id=42
                      +1
                        +1
                        Не лучшая идея складывать файлы в DB для публичной раздачи.

                        Ожидайте в ближайший день первое китайское предупреждение от команды Dropbox и блокировку публичного шаринга на 3 дня =)
                          +3
                          оно и понятно, идея только это не моя, а автора the bricks :)
                        0
                        спасибо, друг
                      +8
                      Пока это psd — это всего лишь один из сотен сборников UI, которых можно скачать на каждом углу. И, кстати, далеко не самый лучший.
                        0
                        А вот, кстати, прошу вас, без всякой иронии, дать ссылки на пару аналогов, которые на ваш взгляд являются как раз самыми лучшими.
                          +4
                          Комментатор выше наверное не правильно выразился, но в целом его мысль не лишена сути.

                          А что же до сборников UI. Вот вам пачка ссылок. Хотя поработав с парой таких, я пришел к выводу что создавать свое удобней и быстрее чем делать и изменять на базе чужих
                            +14
                            63 Free PSD UI Kits for Quick MockUp

                            И о боже, вы не поверите, уже есть целые ресурсы посвященные бесплатным китам с UI. Например freeuikits.com (и это без всякой иронии), удивился когда пошел искать для вас ссылки по запросу «Free psd UI»

                              –2
                              На счёт развалов с различными ресурсами — это понятно, не отрицаю, что аналогов — много. Но я интересовался в том смысле, что хочется увидеть нечто, что является «самым лучшим» по сравнению с The Bricks.
                                +3
                                А что такое The Bricks? это обычный пресет/комплект заготовок разложенный по папочкам и не более того. Всего он не предусмотрит, при растягивании форм — вся прелесть скругленного края сойдет на нет.

                                Лучшим решением является создание Actions, точнее не так, лучшим решением делать все индивидуально. Вы простите за прямоту, но дизайнер это тот, кому не нужны примеры, его фантазия представляет себе разницу между прямоугольной формой и скругленной и он сам решает какой стиль он будет создавать, а не будет опираться на пресет. С другой стороны всем нам нужны «упрощалки» жизни особенно если постоянно делаешь одно и тоже.

                                А в таком случае мы возвращаемся к Actions

                                1. В плане скорости и удобства работы — это UI сэты, точнее их стили, применяемые к генерируемым формам. При условии что вы не умеете рисовать свои стили.

                                2. Создать свои Actions к формам, и стилям, и радоваться жизни.
                                Данное мероприятие от силы потратит 1 ваш день, но у вас будут формы под разные разрешения, под разный Font-Size, с разными скруглениями краев, и прочее что не включено в комплект Топика. И до конца жизни вы будете счастливым обладателем «мегакомплекта», который за всю вашу карьеру сэкономит ни один час времени, будет занимать пару килобайт, и который так же можно дописывать при расширении функционала. А не ковыряться в тоннах слоев.
                                  +1
                                  Про actions хорошая идея. Но встречаются ли такие actions где-то на развалах, чтоб можно было посмотреть как у других, взять что-то за основу и потом, как вы и предложили, допиливать под себя?
                                    0
                                    за основу вы можете взять Action создающий сетку 960px
                                    Взять сетки и Actions вы можете здесь
                                    1. Сгенерировать сетку, которую вы чаще всего используете.
                                    2. F9 — Создать Set — Создать Action — Record.
                                    3. Создать Rounded Shape с разным скруглением краев и размеров под сетку.
                                    4. Создать разных стилей, тем же Action или Style.

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

                                    Скачать простой Action для создания инпутов и кнопок на 2 колонки с скруглением 5,7 и 10 px (4Kb). как отправная точка. Сделано за 5 минут, остальное дело за вами

                                    Вот как это выглядит.



                                0
                                Thr Bricks отличается от этих сетов тем, что для того, чтобы посмотреть как будет выглядеть определенный элемент в том или ином виде, достаточно просто переключить слои, что получается на много быстрее, чем редактировать все в ручную, как нам бы пришлось это делать в остальных многочисленных наборах.
                                0
                                Это не первый наш UI Kit:

                                Impressionist UI
                                Dark Amber
                                Pandora for iOS
                                Futurico
                                  0
                                  Вы не один рисуете эти киты?
                                0
                                Лучшие или нет — это вкусовщина. Наша цель сделать в итоге вэб фреймворк который можно будет настраивать под себя и юзать сотни компонентов
                                  +4
                                  Я согласен, это дело вкуса. Но пока это PSD — я не понимаю зачем этот релиз на хабре. Таких UI kit ну просто невероятно много, особенного в нем невероятно мало, давайте ещё к каждому новому клипарту релизы писать.
                                    0
                                    А в вы не против если я попробую это дело сверстать и результат в сети выложить?
                                      0
                                      The Bricks is licensed under a Creative Commons Attribution 3.0 Unported (CC BY 3.0).


                                      Нашел)
                                  +2
                                  $('.downloadButton').addClass('active').attr('href', 'http://designmodo.com/wp-content/plugins/download-monitor/download.php?id=42'); // File download link
                                    +28
                                    Это всего лишь psd :(

                                    По заголовку и первому абзацу подумал, что это html&css фраймворк.
                                      +2
                                      Я тоже так подумал =)
                                        0
                                        а может что-то подскажет уже готовые фреймфорки из онлайн-доступных без инсталляций?
                                          0
                                          Я использую Bootstrap
                                            0
                                            Я его уже рассматриваю, спасибо за наводку. Он считается лучшим? Или есть альтернативы?
                                              +1
                                              Честно говоря, не люблю пользоваться превосходными степенями в оценке технологий… мне он просто нравится!
                                              Если хотите еще что-то, то есть HTML Kickstart
                                              Мне нравится использовать SCSS, так что я еще и Compass использую =)
                                                0
                                                Спасибо, буду пробовать.
                                        +2
                                        Мало того! Читая дальше я думал что тут есть генератор html\css\js… Но и тут меня на******…
                                        0
                                        Можно помечтать? :)

                                        Было бы волшебно, если The Bricks или другой крутой PSD UI Kits имел html&css основу аналогично Bootstrap от Твиттера.
                                        Один готовит прототипы близкие к дизайну, что бы протестиировать и согласовать с заказчиком / рабочей группой. Второй, после согласований, быстро воплощает их в качественную рабочую версию. Это было бы awesome!

                                        А вдруг есть подобное?)
                                          0
                                          Мы работаем над этим. В итоге это будет фреймворк для программистов
                                          Подобное — Твиттер бутстрэп
                                            0
                                            а чтобы без фотошопа? типа gimp?
                                          +3
                                          Когда я вижу навязывание «Твитните чтобы скачать», я специально лезу в код. Это хуже рекламы с порно.
                                            +3
                                            Разочарован. Подобных бесплатных UI можно найти вагон и маленькую тележку. Хотелось увидеть фрэймворк, или хотя бы что то его напоминающее. Сейчас же это похоже на «Я хочу создать новую ОС. Пока её нет, но я могу дать вам эти классные обои для рабочего стола!»
                                              0
                                              Выглядит, конечно, красиво. Я уже даже пожалел что начал разработку на Twitter Bootstrap, а потом успокоился )

                                              Only users with full accounts can post comments. Log in, please.