Интерфейсные заготовки для веб-дизайнера

Интерфейсные заготовки для веб-дизайнера

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

Yahoo! Design Stencil Kit v1.0

Итак, первым номером у нас пойдут стенсилы Yahoo. Приятно, что они предоставлены во всех распространенных форматах: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), Adobe Photoshop (PNG),  Fireworks Common Library, Axure, InDesign (лицензия Creative Commons Attribution 2.5). Тут тебе и болванки баннеров стандартных размеров, и элементы пользовательского интерфейса и такие распространенные элементы сайтов как наборы номеров страниц.

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

 

Advertising stencils
Баннеры


Календари


Карусели для картинок (кстати, как это по-русски называется?)


Таблица и диаграммы


Слайдеры и переключатели


Элементы управления для форм


Менюшки и кнопки


Мобильники


Айфончик отдельно


Деревья, переход по страницам, алфавитные указатели (увы, только латиница)


Элементы управления Макоси и Висты


Текст


Экраны разных форматов

стенсилы навигационных табов
Табы для навигации

стенсилы диалоговых окон
Диалоговые окна

 

Designerstoolbox

Дизайнертулбокс — это довольно большой сборник самых разных вещей, помогающих дизайнеру жить. В контексте сегодняшнего разговора особого внимания заслуживает раздел Web Browser Elements. В нем вы найдете элементы пользовательского интерфейса и браузерные окна разных размеров для следующих браузеров: Mac OS X: Safari, Mac OS X: Firefox, Windows Vista: IE, Windows Vista: Firefox, Windows XP: IE, Windows XP: Firefox.

Как это выглядит:

Windows Vista IE Web Browser Elements

Vista IE окно браузера разных размеров

Vista IE элементы управления

Mac OS X Safari Web Browser Elements

Mac OS X Safari окна браузера разных размеров

Mac OS X Safari элементы интерфейса

 

 

Geoff Teehan, элементы управления Mac Firefox 3 и Vista IE7

Geoff Teehan аккуратненько сложил два набора элементов в один PSD-файл и подписал слои. Для большинства задач этого будет достаточно.

шаблон Mac Firefox 3 и элементы форм

шаблон Vista IE7 и элементы форм

И большое ему спасибо за заготовленные курсоры.

 

Web Form Elements by *sniperyu

 

Deluxive Creative Pack 001 by Deluxive

Сначала вообще не собирался включать этот набор в статью. Даже и смотреть-то его не особо хотел. Потому что его презентационная картинка произвела на меня странное впечатление несерьезности что ли... Какая-то мелкая, сумбурная, суетная.

Но на всякий случай скачал. Оказалось, что это довольно полезный и, что важно для меня, упорядоченный набор. Демонстрирую самые дельные вещи:

 


Этот странноватый грязноблик на фотках мне не нравится, но он лежит
на отдельном слое, так что его можно отключить.

 

 

 


Тут несколько неаккуратно прорисовано место сгиба, но это можно
и самим подправить.

 

 

Ну вот, почти всеми важными вещами вы теперь вооружены. Киньте их в папочку «Хлам», или «Шаблоны», или «Стенсилы», и в следующий раз, как возьметесь делать сайт, они сыграют вам на руку.

И да, кто не желает бегать по разным сайтам, может скачать все это добро кроме «Дизайнертулбокса» одним архивом (16.2 МБ).

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 28

Алмаз
:) Хорошее название "карусель картинок"
Понятное сочетание. А на русском никогда не видел определенного названия. Кто-то говорит "слайд-шоу", кто-то вертелка, крутилка - это не то.
Именно "карусель картинок"! Давайте обогащать рунет русскими названиями!
Саша Кириллов
Ну я вот тут еще подумал, что это может обзываться слайдером картинок.
Ando
Все круто. Спасибо.
Вот только поправьте ссылку на скачивание архива.
#
Ando
Алмаз
Слайдер картинок? Ну... это не по-русски! Мы же про рунет говорим :)
Anonimous
Спасиб ! палезнейше !
#
Anonimous
TuTbaker
Yahoo конечно на первом месте, но вот вес этого всего великолепия пугающе большой :( Для того, чтобы подключить библиотеку вывода меню например, нужно подгрузить порядка 100кб (если не больше), а представьте если использовать больше фич Yahoo? Конечно для США это не так много, с ихними то скоростями, а у нас некоторые пользователи до сих пор на "дуалапах" сидят, да и качество "высокоскоростного интернета" оставляет желать лучшего
#
TuTbaker
Wild Vampir
в "Yahoo! Design Stencil Kit v1.0" ссылка на SVG косячная, ссылкается на архив c PNG, и общий архив почему-то выдаёт 404
KIVagant
http://vremenno.net/design/stencils-for-web-designers/stencils-for-web-designers

Ошибка 404
#
KIVagant
Саша Кириллов
Народ, привет.

Ссылки я поправил.
Теперь и SVG с Yahoo нормально
качается, и общий архив тоже.
I2Y
Спасибо большое за подборку.
#
I2Y
Саша Кириллов
То ли еще будет. Следующей пойдет
подборка поисковых полей. Причем
там уже все будет в векторе и растре
Dem
Поправьте ссылки, пожалуйста:
Основная страница http://developer.yahoo.com/ypatterns/about/stencils/
По форматам:
http://developer.yahoo.com/ypatterns/about/stencils/Y!DesignStencils-OmniGraffle.dmg
http://developer.yahoo.com/ypatterns/about/stencils/Y!DesignStencils-Visio.zip
http://developer.yahoo.com/ypatterns/about/stencils/Y!DesignStencils-PDF.zip
http://developer.yahoo.com/ypatterns/about/stencils/Y!DesignStencils-PNG.zip
http://developer.yahoo.com/ypatterns/about/stencils/Y!DesignStencils-SVG.zip
http://developer.yahoo.com/ypatterns/about/stencils/fireworks.html
#
Dem
Саша Кириллов
Ух ты! Сменили адреса.

Спасибо большое! Сейчас поправлю.
Dem
не за что, вам спасибо:)
#
Dem
Макс
хм.. интересно.
использование такух штук хоть и убыстряет рисование, однако нарисовать самому куда приятнее.
Удовлетворение получаешь когда понимаешь что каждый пиксель макета - создан тобой =)
Саша Кириллов
Ну не будешь же сам рисовать окно браузера :-)
Mike
классные картинки в дизайнбоксе ) меня тут по скайпу добавил один дизайнер из африки, чисто случайно, пошлю ему в подарок )
#
Mike
Артур
нужные вещи, надо было собрал все в одну кучу...
картинки супер
Иван
Великолепно. Спасибо - то что искал - все в одном месте!
Boldis Media
Спасибо за Web Form Elements by *sniperyu, остальное уже используется.
Grafika-M
Спасибо!
Отличный материал!
Попробуем применить! :-)
Ждем продолжения!
Dmitry
Аж слюнки потекли)) круто)
Дмитрий
TuTbaker. Используйте копрессор средствами PHP статья на этом сайте "Организация, оптимизация и кеширование CSS и JS файлов". Я например добился размера двух загружаемых виджетов (TabView и TreeView) размером в 44 кб (вместо 124кб). Yahoo еще клева тем что можно загружать отдельные компоненты по требованию в отличае от Ext
Айон Планет
Очень клевые стенсилы. Я до этого пользовался только яхувскими, а теперь, гляжу, выбор стал разнообразнее. Очень пригождается в работе проектировщика интерфейсов, когда юзабилити стоит на месте и нужно разрабатывать до сотни страниц и очень быстро.
Обмен ссылками
Яху рулит,лет 5 назад познакомился с его джаваскрипт фрейворком, но в данный момент отдал предпочтение все же JQuery, но все же очень достойны продукт
vtemnote.com
Спасибо за инфу

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler