Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для html-верстки. На мой взгляд, это удобно тем, кто и так использует заглушки — экономит время при вёрстке, т.к. сами заглушки уже готовы. Можно цвета/размеры подбирать, меняя только числа/буквы в коде, не отвлекаясь на сам файл картинки — и сразу видеть эффект. И сами размеры видеть написанными, если нужно, чтоб к коду не возвращаться для проверки. Или вместо размеров можно текст добавить, чтоб всегда знать, для чего эта заглушка (типа «Бан(н)ер» или там «Лого», или «Фотография»).

На сервисе не нужна регистрация — и вообще на сайт можно не заходить, чтобы его использовать. Пишете сразу у себя в коде, например:

<img src="http://placehold.it/350x50" />

и получаете:


Update. Благодаря усилиям k0rv1n, найден вариант этого сервиса, только лучше :)
Во-первых, там поддерживается кириллица. Во-вторых, там даны ссылки на исходники для разных языков.
Автор dummyimage.com — тот же Russell Heimlich, что и у placehold.it. У placehold.it есть ещё один автор, но будем считать, что он делал дизайн (дизайн там правда круче, но видимо как раз из-за понтового шрифта Unicode и не выходил).

Примеры (см. под хабракатом) я поменял с placehold.it на dummyimage.com, раз уж он функциональнее…

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

Все знакомы с css параметром border, но есть ли вещи, которые мы не знаем о нем?

Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



Воспользовавшись замечательными параметрами CSS3, мы можем создать элегантые и стильные кнопки без особых усилий (учитывая старые браузеры, конечно). Создаете ли вы кнопку непосредственно в CSS или пользуетесь специальными инструментами для их создания, всегда нужно тщательно подумать о том, как ваша кнопка будет выглядеть в контексте веб-сайта.

Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.



Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

Эксклюзивно для Хабра.



(кликабельно)

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



К сожалению огромная армия даже опытных, «модных» и эффектных дизайнеров забывают, что результатом их творчества должен быть сайт, а не только «супер-скриншот» годный только для портфолио.

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

Не забудьте почитать: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1. (или здесь).

А сегодня поговорим о том, что такое хорошо продуманная типографика и как правильно организовать элементы на странице.

03. Хорошо продуманная типографика

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

Несколько выдающихся примеров и рекомендаций по созданию качественного дизайна веб-страницы или блога



Многие люди склонны описывать предоставляемые ими услуги по веб-дизайну как «качественные». Но что означает здесь слово «качество», как определить, является дизайн качественным или нет? Что ж, я вижу несколько способов определить качество применительно к сфере веб-дизайна. Ведь если однажды определить, что позволяет создавать качественный веб-дизайн, можно использовать эти же приемы для оттачивания собственного стиля.

Чтобы объяснить, как я понимаю качество в дизайне веб-сайтов, я собрал несколько рекомендаций и примеров.

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

Акриловые краски — это такие краски на водной основе, которые состоят из трех ключевых компонентов — собственно, воды, красителя и акриловой эмульсии. Этот вид красок характеризуется яркостью цветов, а главное (при нанесении рисунка на одежду это важно в первую очередь) — устойчивостью к агрессивным условиям. То есть, должным образом сделав рисунок на ткани, за него можно почти не беспокоиться. Он не отслоится, не раскрошится, не сморщится и вообще долгое время будет оставаться как новенький, потому как акрил хорошо переносит перепады температур, механические воздействия и маловосприимчив к влаге.

Хью Дабберли и люди из студии Dubberly Design Office проделали огромную работу по поиску и обработке теоретических описаний процесса дизайна. Около 130 моделей составили содержание их книги How Do You Design. Книга написана для образовательных целей и свободно доступна на сайте авторов.



Кто недавно читал про схему от AIGA и удивлялся сереньким цветам вместо красного — это как раз оттуда. На своем сайте я отдельно перевел и выложил пару наиболее любопытных схем («AIGA» в том числе).

Под катом — еще немного слов про книгу.

Мне попался обзор нескольких социальных сервисов и просто интересных проектов, популярных зарубежом. Некоторые из них ненужны для России, но многих реально не хватает. Было бы здорово, чтобы кто-то заинтересовался этими проектами и воплотил их в жизнь у нас. (Прошу прощения за неточный перевод, главное общий смысл будет понятен. Если нужно будет поправить неточности, просто укажите на них и я исправлю)

Недвижимость

StreetEasy (www.streeteasy.com) — бесплатный сайт дающий доступ к спискам продаваемой и арендуемой недвижимости в Нью-Йорке и на Севере Джерси. В добавок к стандартной информации о ценах, районе и числу спален, StreetEasy предоставляет ищущим жилье возможность отслеживать списки по таким аспектам, как место расположения, состояние здание, удаленность от школ и другие специальных объектов. Пользователи сайта имеют доступ к фото материалам, контактам (e-mail или прямой звонок), возможность сохранить отслеженную информация и могут получать сообщения о наличии предложения на на интересующую их недвижимость.

Вот так вот продаются айподы и аксессуары к ним в аэропорту города Лас Вегас.



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

В данный момент все кому не лень (верстальщики, дизайнеры, программисты, проджекты и т.д.) занимаются созданием и развитием собственных интернет-ресурсов. Но есть люди, история успеха которых не перестает удивлять. Они создали свой ресурс, приложили максимум усилий для его развития и за какие то 10 лет их детища стали стоить миллиарды долларов. Вложением была такая же работа в трусах на ноутбуке в спальне.

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

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

Теперь оценить возможности вертикального поиска сможет каждый. Ранее можно было получить логин и пароль на beta.rambler.ru, написав разработчикам на почту, а теперь поиск открыт для всех желающих. С главной страницы портала, прямо под логотипом идет ссылка «Ищет по-новому!».

Мне интересно мнение хабралюдей — как вам качество поиска?

beta.rambler.ru

На днях занимался созданием лэндинга с приличным набором анимации, возникающей во время взаимодействия со страницей. Прям чувствовал, что должна быть какая-нибудь крутая библиотека для решения задачи. И тут я нашёл AniJS, которая меня совершенно покорила!

В этой статье я расскажу как при помощи HTML и JavaScript сделать своё собственное расширение для Photoshop, Illustrator, Premier, Flash, Prelude или InDesign.

Сделал изменения в коде, дебажишь и не понимаешь в чем дело — код поменял, а результат тот же. Чёрт побери, да я же отлаживаю на продакшене! Случалось такое с вами? Со мной несколько раз, сегодня вот опять. Мне это надоело и я придумал простой способ избежать таких досадных случаев.

Возможно этот трюк не заслуживает отдельного топика, большинство из вас все поймет из одной картинки:



Суть — для каждого окружения(dev, staging, prod, etc.) своя favicon-ка.

Как это сделать на примере Laravel (попиарю лишний раз этот прекрасный фреймворк):