Аналитическая компания StatCounter сообщает важную информацию для веб-разработчиков и дизайнеров: впервые самым популярным разрешением экрана в мире стало 1366×768px, которое обогнало прежнего лидера 1024×768px.

Любой, кто играл или наблюдал за игрой друзей, либо в принципе видел игры, которые были выпущены в 80-90-х годах, должны быть знакомы с техникой параллакс-скроллинга.

Вспомните такие игры, как Mario Bros, Streets of Rage, Mortal Kombat, Turtles in Time или оригинальную игру Moon Patrol. В этих играх техника параллакса наблюдается в тот момент, когда несколько фоновых слоев с различными текстурами двигаются с разной скоростью, что создает эффект трехмерного пространства.

Почему я начал говорить о ретро-играх в статье о веб-разработке? Самым простым ответом мог бы быть «потому что они клевые», но нет. Параллакс-скроллинг является классным дизайнерским концептом, который прокладывает свой путь в мир веб-дизайна. Nike были одними из первых, кто использовал эту технику с большим успехом, когда они наняли маркетинговых гигантов Weiden and Kennedy для разработки их оригинального сайта Nike Better World. Сайт Nike Better World с того времени был обновлен и заменен на новый, однако есть другой сайт, довольно похожий на то, как выглядел первый параллакс-дизайн от Nike — сайт о спортивных напитках Activate.

Дизайнер Pofben с сайта PlentyOfFish.com провёл эксперимент, результаты которого посчитал достаточно забавными для публикации. Он протестировал два баннера по 15K показов на каждом:



Первый баннер создан по всем канонам:

• качественное изображение реального игрового контента;
• зелёная кнопка, призывающая к действию, с волшебным словом «free»;
• узнаваемые логотипы EA и Need for Speed, что должно повышать доверие.

Вторую картинку он просто по приколу нарисовал в MS Paint за пять минут.

TemplateMonster.com. Теперь банановый на русском

TemplateMonster взял курс на полноценное обслуживание клиентов в России. Об этом сегодня представители компании сообщили в официальном блоге.

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

Встречайте.

Вслед за новостями о Adobe Photoshop CS6 1, 2 на youtube появилось видео с новыми возможностями Adobe Illustrator CS6.

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

• свободное пространство среди объектов верстки;
• приятная цветовая гамма для элементов оформления;
• эффекты теней и блеска благодаря CSS3;
• тенденции собственного оформления элементов зоны тега <form>;
• внедрение пиксельных иконок в управляющие элементы дизайна.

А теперь обо всем по подробнее…

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

Последнее время все чаще можно встретить сайты с необычным дизайном и функциональностью, увидев которые, можно залипнуть на некоторое время. Увидев такие, у меня рука непроизвольно тянется к f12, чтобы открыть firebug и посмотреть, как же реализован тот или иной компонент. Таким образом можно открыть для себя интересные техники и в будущем реализовать их на своих проектах. Некоторые из них стали доступны с приходом новых технологий, например таких, как CSS 3 — то, что раньше было реализовано на флеше, теперь можно воплотить с помощью строк кода в таблице стилей. Дизайнеры тоже не теряют времени, создавая новые тренды и все плотнее взаимодействуя с верстальщиками. В этой статье я хотел бы показать 15 сайтов, которые так или иначе удивили и порадовали меня. Возможно, кого-то они вдохновят на собственный шедевр

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

Расскажу еще об одной относительной величине, которую можно измерить — лояльность ваших посетителей. А точнее — динамику ее изменения.

---

Привет, Хаброжители.
Сегодня решил скачать новый фотошоп(CS6), и посмотреть, что и как с ним.
Весь мой обзор увидим дальше

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

Всё сложно! Езда в общественном транспорте крупных городов похожа на консервирование овощей, а за рулём автомобиля – на боевые действия. Обозлённые лица прохожих расцветают лишь на facebook-митингах. Там, где действительно хорошо, и всё «лайк!».
Не всегда хочется выходить на неубранные, некрасивые улицы и видеть там мрачных и угрюмых людей. И кажется, что в недружелюбной, а подчас и враждебной среде, отечественный дизайн не развивается, а яркие таланты растворяются в серой действительности.

А с другой стороны, может быть, это – идеальная почва для создания новых интернет-решений? Решений для отказавшихся выходить из своих «бункеров» людей? Ведь если есть доставка суши или пиццы, то может существовать и доставка дизайна логотипа, к примеру…

Всякий такой веборазработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).

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

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

Проанализировав несколько существующих интернет-сайтов, таких, например, как: ru.asus.com (ведущий производитель компьютерных комплектующих), bbc.com (сайт ведущего мирового агентства СМИ), msu.ru (сайт московского государственного университета), admhmao.ru (сайт администрации ХМАО – Югры), было установлено, что проектирование пользовательского веб-интерфейса сводится к созданию структуры, состоящей из следующих блоков:
1. Верхняя, титульная часть дизайн-макета веб-страницы («шапка» или header).
2. Нижная, титульная часть дизайн-макета веб-страницы («подвал» или footer).
3. Блок меню, которое может располагаться как горизонтально, так и вертикально. Элементы меню часто выполняются в блочно-текстовом или символьном виде.
4. Блок с основным содержанием страницы («контент»), который также может содержать дополнительный функционал.

Методами при таком проектировании, в основном являются: метод «Золотого сечения», «Кошелек Миллера» и «Принцип группировки».

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

Как мы часто составляем спрайты:

1) Выделяем отдельные элементы из PSD для групировки в спрайт.
2) Для точного нахождения координат элементов спрайта рисуем сетку из линеек для верстальщика.
3) И тупенько через alt+tab переписываем координаты в css.

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

Еще один шаг к упрощению процесса верстки спрайтами нам предоставляют энтузиасты из Германии «We are kiss» с проектом Spritepad.

1) Вырезаете все что нужно из PSD-шки в png24 и закидываем по очереди в браузер.
2) Позиционируем, и справа получаем готовую css-ку, классы которой будут генерироваться на основе имен скинутых в браузер файлов.

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

Если верить сайту то за 20 минут можно освоить чтение данного шрифта.

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



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

Аннотация

В статье я попробую рассказать о том, как на базе Twitter Bootstrap можно очень легко реализовать приятный пользовательский интерфейс небольшого (одностраничного) web-приложения, владея лишь базовыми знаниями html. Сразу предупреждаю, специалистам будет не интересно, речь пойдет о базовом стандартном функционале.