Такая вот ситуация: дизайнер присылает макет, а у верстальщика открывается какая то лабуда светлая, или темная (если верстальщик испольует МасOS, а дизайнер Win.). Или же верстальщик сохраняет картинку, а там цвета другие стали.

Разберемся почему так и как с этим жить.

Разрабатывая дизайн для веб-сайтов и мобильных приложений в Photoshop, мы сталкиваемся с проблемой при формировании цвета программным кодом, HTML или CSS. Статья призвана покончить с этим раз и навсегда.

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

За долгое время работы в Яндексе нам удалось систематизировать все наши знания и огромный опыт в создании фронтенда веб-сервисов. Результатом этого осмысления и длительной работы стала первая Школа разработки интерфейсов, занятие которой шли в московском офисе Яндекса. Вся практическая часть обучения проходила в реальных проектах Яндекса. Теоретическая же состояла из лекций, которые читали ведущие разработчики интерфейсов Яндекса: Сергей veged Бережной, Михаил mishanga Трошев, Алексей doochik Андросов, Михаил azproduction Давыдов и другие.



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

Я уже писал о сервисе CostUp, который создан для загрузки данных о затратах в Google Analytics. Мы учли пожелания пользователей и сделали автоматическую загрузку данных о показах, кликах и затратах из Яндекс.Директ в Google Analytics, в том числе по расписанию.

Для этого необходимо пройти авторизацию в API Google Analytics и Яндекс.Директ через сервис CostUp, выбрать параметры импорта и параметры использованных UTM-меток по кампаниям (для однозначной идентификации кампании с Директа) и сохранить настройки задания в расписание.

Fluid UI: очень удобное HTML5-приложение для создания прототипов мобильных интерфейсов в браузере (Chrome или Safari). Буквально за пару минут можно сделать приличный набросок.



Поддерживает жесты, действия на прикосновения, драг-н-дроп, переходы между страницами, дублирование шаблона на несколько страниц, библиотеки iPhone и Android, загрузку пользовательских изображений и скриншотов. Ссылку на созданный дизайн можно быстро отправить коллеге или протестировать на мобильном устройстве. Можно экспортировать в PDF, HTML или графический формат.

Перевод статьи “Responsive workflow” финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen).

На прошлой неделе я был на конференции Webshaped, где Стивен Хэй (Stephen Hay) рассказывал о процессе разработки адаптивного дизайна. Этот пост не совсем о том же самом, но подход Стивена напомнил мне мой собственный, поэтому я решил изложить некоторые мысли по этому поводу, описать как моя работа эволюционировала за прошедшие два или три года и как может измениться в будущем.

В конце апреля я делал доклад на РИФ 2012 про этапы проектирования пользовательского интерфейса. Так как видео нет, попробую представить доклад в виде слайдов с моими комментариями.



Я расскажу как процесс разработки сайта или приложения выглядит с точки зрения дизайнера. Как вы сможете только за счет интерфейса улучшить впечатление пользователя от вашего стартапа.

Facebook — самая большая социальная сеть и один и самых посещаемых сайтов в мире. В ней можно не только постить веселые статусы и лайкать фотографии, но и
использовать, как мощный маркетинговый инструмент. Все логично — миллиард пользователей, возможность таргетинга на определенную аудиторию, мгновенные объявления, ну и масса других
полезных штук, которые недоступны для оффлайна. На сегодняшний день сложно найти компанию без собственной бизнес-страницы или популярную личность без фан-пейджа. В этой статье постараюсь
подробно разобрать техническую сторону этого вопроса со стороны фронт-енд разработки.
Речь в посте пойдет не о создании самой страницы, потому что это довольно тривиальная процедура, а о пользовательских вкладках, которые можно добавить самостоятельно и наполнить нужным контентом.
Любой, даже начинающий веб-разработчик, может сделать с десяток таких табов за один вечер, зная некоторые принципы и нюансы их создания.
Я имею в виду подавляющее большинство всякого рода welcome-страниц, страниц-анонсов и страниц со всяким информационным текстово-графическим контентом. На страницы посложнее с динамическими элементами, формами и прочим функционалом времени уйдет, конечно, побольше.

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

Пример такого поста: habrahabr.ru/post/139542

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

Уверен, что курсов по данным дисциплинам, информативнее и понятнее выложенных, в природе не существует.

Под катом ссылки и список того, что было выложено, что ещё предстоит выложить…

Друзья, прошло уже 2,5 года, как мы выпустили в свет ImageCMS и за это время она существенно изменилась. Мы решили создать свой корпоративный блог на Хабре, чтобы держать вас в курсе наших новостей и предоставить более удобный способ следить за ходом развития системы для всех хабрапользователей.

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

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

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

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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

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



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

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

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

Естественно, если вы расскажите о своих ресурсах, я буду благодарен.

Хочу сразу предупредить, что практически все ресурсы, собранные мной — англоязычные. Только лишь один на русском. Так же я не очень приветствую узкопрофильные ресурсы (речь о ресурсах, на которых можно скачать только кисти для photoshop и прочее).

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

Создание панорам занятие достаточно непростое и кропотливое, но зато результат от кропотливых действий будет радовать и вас, как творца, и пользователей. Создание панорам, это не такое простое занятие, как может показаться на первый взгляд. Я сталкивался с тем, что пользователи говорят следующее: «Для создание панорам необходимо только сфотографировать несколько кадров с перекрытием, а затем выровнять кадры в специальной программе, склеить их и получить готовую панораму.» Можно сказать, что данное утверждение верно. но только для начинающего фотографа. Полученный результат может удовлетворить. Но, если фотограф хочет профессионально развиваться, то нужно отнестись с критикой к своим предыдущим работам. Посмотреть на них как первый базовый кирпичик. Основу будущего мастерства в создании бесшовных панорам.

В этом году в Google Analytics появился новый отчет Посетители > Соцфункции. Он, как можно догадаться, должен показывать взаимодействие с сайтом посредством социальных кнопок (like, share и т.п.)
Но для отслеживания каждой социальной кнопки необходимо было создавать функцию обратного вызова, которая бы посредством вызова метода _trackSocial и должна отслеживать нажатие на кнопку.
Об этом можно почитать в справке Google Analytics: http://code.google.com/intl/ru-RU/apis/analytics/docs/tracking/gaTrackingSocial.html
И это было не очень удобное решение, т.к. социальных кнопок на сайте может быть много и для каждой придется писать функцию.

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

Предисловие

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

Для начала опишу основную задачу: необходимо создать загрузчик изображений(bmp, png, jpg), с последующим их сохранением на сервере, а также с созданием копий изображений различного размера. Также желательно обеспечить соответствие дизайна загрузчика стилю сайта, и удобный интерфейс пользователя. И самое главное – загрузчик должен максимально поддерживаться браузерами.

Хочу поделиться ссылками на несколько полезных сервисов. Некоторые из них помогут сэкономить время, другие — сделают за Вас незнакомую/нелюбимую работу. Список разбит по категориям, чтобы было легче ориентироваться.

Сервисы опросов
userreport.com (добавил Romanych)
simpoll.ru
webanketa.com (добавил mihass)

Кнопки постинга в социальные сети
Кнопка от Яндекса
addthis.com (добавил UksusoFF)
share42.com

В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.