#верстка

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


Вдохновляемся или Воруем:
— csswinner.com
— awwwards.com
— cssdesignawards.com
— land-book.com
— cssawards.net
— htmlinspiration.com
— onepagelove.com

CSS магия:
— daneden.github.io/animate.css большая библиотека, классика анимации на css
— h5bp.github.io/Effeckt.css/dist появление элементов списка, вывод изображений, модальных окон, очень много полезных штук
— ianlunn.github.io/Hover эффекты при наведении на кнопки
— http://matthewlein.com/ceaser/ css easing animation tool, можно посмотреть все виды
— radio buttons. uderstanding the process, делаем красивыми
— http://cssdeck.com/labs/clean-webkit-css3-ui переключение между табами на css, чекбоксы
— http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ анлоязычная статья о быстродействии CSS-анимаций
еще больше полезных материалов на http://htmllinks.ru/search/анимация

Интересные и полезные блоги:
— http://line25.com/ — англоязычный блог для веб-дизайнеров и верстальщиков, здесь постоянно выкладываются подборки лучших сайтов для вдохновения, а также туториалы для верстальщиков. Блог понятный даже без хорошего знания английского языка.

— http://css-tricks.com/ — блог для веб-разработчиков, содержащий в себе тонны полезных советов и классных фишек. Обязательно к занесению в закладки каждому веб-разработчику.

— http://www.onextrapixel.com/ — и еще один англоязычный блог, имеет больший уклон в сторону веб-дизайна, но во вкладке Tutorials можно найти довольно интересные уроки по jQuery.

— http://web-standards.ru/ — блог российского сообщества веб-разработчиков. Из него можно почерпнуть довольно много полезной, а главное, важной информации, необходимой любому верстальщику.

http://www.xiper.net/ — русскоязычный блог, посвященный front-end разработке. Тут можно найти море ответов на вопросы, связанные с HTML, CSS и Javascript.

Сервисы для работы с цветом:
… или что делать, если заказчик хочет «вот этот серый, только темнее с добавлением оранжевого»

— 0to255.com — подбирает различные оттенки одного цвета, идеально подходит при создании границ различных кнопочек, блоков, рамок, теней/градиентов, состояний hover, active, и пр.

— colorzilla.com — узнает код цвета абсолютно любого пикселя на экране
kuler.adobe.com — поможет с выбором цветовой палитры всего сайта, даже генерирует палитру на основе изображения

— colorschemedesigner.com — есть интересная функция — просмотр макета сайта, который будет оформлен именно в тех цветах, которые вы выбрали
web.colorotate.org — функции kuler + просмотр 3D

— http://labs.tineye.com/multicolr — поиск изображений по заданным цветам
yandex.ru — сообщит название цвета при введении кода в строку поиска, или наоборот (можно узнать, как выглядит серо-буро-малиновый или получить код цвета фейсбука)

Иконки:
— http://iconmonstr.com/

Портфолио:
— http://dribbble.com/

Параллакс эффект:
— http://wagerfield.github.io/parallax/

Обернуть дизайн-макеты в обложки браузера:
— http://www.getcover.ru/

После создания psd макета сайта вы всегда делаете его превью, чтобы показать заказчику или положить себе в портфолио. Часто макет обрамляют в рамки известных браузеров (наиболее часто в браузер Safari). Для того, чтобы создать такое превью не обязательно делать это в фотошопе.

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