Веб-дизайн *

Привет!

Ребята с ресурса Data Visualization собрали несколько очень интересных решений для представления данных:



Datavisualization.ch Selected Tools

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

Datavisualization.ch является одним из ведущих ресурсов в интернете, рассказывающих о визуализации данных и инфографике. На сайте обсуждаются и исследуются интересные и инновационные идеи в этих областях.

Давно не было таких чудесных работ, все гениальное просто.

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

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

Картинка для привлечения внимания:

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

Вдохновлённый сегодняшним обновлением (и оперативностью последовавшего за ним багфикса), я хотел бы обратить внимание Хабра на еще одну давнюю беду интерфейса — обозначение топиков-переводов. Да, сейчас они выделяются значком , но этого значка никто не видит, не замечает, не понимает и не одобряет. Вследствии чего возникают обвинения в плагиате, требования указания авторства, упрёки в непонимании интерфейса Хабра, слив топика\кармы автора\кармы обвиняющего, ненужные оправдания и глупые отгавкивания — в общем, сплошной негатив.
Это происходит фактически в каждом топике-переводе. Вот пару ссылок с примерами:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, (можно продолжать до бесконечности)

Предложение: давайте выделять топик-перевод явно, словом «перевод», которое можно писать так, как сейчас пишется «из песочницы».

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

Заранее спасибо.

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

Это ответ на пост StartPSD — в помощь дизайнерам сайтов, автоматизируем работу. В комментариях очень многие интересовались, почему же использовался Safari и Mac, поэтому я решил сделать аналогичную штуку только в стиле Аэро. Возможно кому-то пригодится.

Сетка взята из шаблона Firefox для «мака» от cherenkevich (там еще неплохая серия статей про модульную сетку) — cherenkevich.livejournal.com/40021.html

Здравствуй, Хабрачеловек!

В этой коротенькой статье хочу поделиться полезной фичей от Photoshop.
Да простят меня гуру дизайна, если это покажется очевидным.
Все же, думаю, для начинающих и «среднячков», коим я и являюсь, полезность покажется весьма пригодной.

Случайность

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



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

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

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

Здравствуйте, веб-дизайнеры Хабрахабра.

Вашему вниманию предлагается штука, в которой можно неистово играть шрифтами (и не только) — Web Design Randomizr. Она появилась случайно, задумывалась совершенно иначе, получилось что-то совсем третье, в общем, ничего примечательного.

Пример того, что она делает, видно на изображении справа, если оно загрузилось.

С того момента, как Эллиот Джей Стокс резко призвал уничтожать личину Веб 2.0, можно было заметить «раскарамелизацию» сети: меньше «стеклянных» кнопок, скошенных краев, отражений, меток специальных предложений, вульгарных градиентов с яркими цветами и диагональными паттернами. Трансформацию с радостью приняли все, кроме, разве что, самых заядлых фанатов глянца. Однако, дизайн и эстетика идут лишь им ведомым путем, и только в веб-дизайне заглохла одна тенденция, как появилась другая.

Симптомы

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

2012 год, сайт css-tricks.com:


versus:

1992 год, стандартный элемент интерфейса OS/2:



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

Современная web-технология, основанная на CSS/HTML (включая даже HTML5/CSS3) – это апофеоз бессистемности в архитектуре и фрагментации. Бессистемность в начальном дизайне и последующее наложение на нее фрагментации из-за несовместимых реализаций в браузерах породили каскады хаков для латания дыр. Эти хаки (типа CSS 2.x) сами по себе уже более системные, но их разработчики связаны тем полем (HTML/CSS 1.x), на котором приходится играть. Поэтому новые версии CSS мало что решают, к тому же не полностью поддержаны в реальных браузерах.

Открыв любой серьезный CSS-файл, например, написанный в Google или FB, увидишь в нем отрицательные границы элементов, relative позиционирование через сдвиги в пикселах, огромные длины, усекаемые затем с помощью overflow: none, использование свойства content и прочие извращения. Это семантически бессмысленные и нечитаемые другими программистами конструкции. Но без подобных вещей невозможно сверстать современный веб-два-нольный сайт. Или, например, ни в одной спецификации CSS не написано, что картинка из тега <IMG>, идущая вслед за <OL> с маркером-изображением, может вклиниться визуально между маркером и текстом пунктов списка (в некоторых браузерах и при некоторых вариантах верстки).

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

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

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

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

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

Представляю вашему вниманию доработанную мной библиотеку, позволяющую смоделировать интерфейс простой миксовкой основных элементов — CSS Twitter Bootstrap v. 2.0.

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

Многие веб-дизайнеры, работающие в Photoshop CS6 Beta, уже оценили полезную функцию вставки текста Lorem Ipsum прямиком из меню.



Удобно. Но, когда разрабатывается дизайн русскоязычного проекта, латинская «рыба», как ни крути, портит вид и не передаёт всю композицию до конца. Чтобы бесконечно не копипастить кириллическую «рыбу», предлагаю русифицировать встроенную в CS6 Beta.

08 апреля вышел в свет Gimp 2.8 RC1. Уже несколько дней я «погонял» его в рабочем режиме и на основе этих впечатлений подготовил отчёт о нововведениях.

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

1) Фотоманипуляции
2) Работа с интерфейсом (сайт и мобильное приложение)
3) Типографика
4) Создание иллюстраций и векторные фишки
UPD 1: Небольшое тестирование производительности и стабильности.

Итак, поехали.