Сейчас стало довольно популярно интегрировать на сайты социальные сервисы. Я думаю все видели социальные кнопки tweet, like, Plus One и множество других. Сегодня зашел на сайт Ubuntu.com и увидел следующую картину . Это стало последней каплей и я решил написать данную статью, что бы помочь тем кто не нашел времени разобраться в вопросе. Как можно заметить браузер определил локализацию как ru_Ru и в соответствии с этим заменил на кнопке facebook подпись «like» на «мне нравится». Я конечно благодарен за такую заботу, но как видно на картинке — это отрицательно сказывается на внешнем виде и функционале. Как следствие у меня нет возможности увидеть сам счетчик на котором отображается количество лайкнувших. Проблема носит глобальный характер так, как я такое встречал не один раз, и всегда это выглядит по крайней мере не эстетично.

 

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

Контакты — всему шапка, но...

Размещать контактный телефон (и другие варианты связи) в заметном месте страниц сайта стало стандартом.

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

Часы, минуты, дни работы

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

Это та вещь, которая в обязательном порядке должна быть размещена рядом со сквозным блоком контактной информации. Дни работы и время.

Дизайнер Джессика из компании Seed Design Consultancy занимается подбором оригинальных цветовых палитр для сайтов и предлагает несколько методов, в том числе по произвольному цвету, по рубрикатору тем (осень, минералы, природа). Сейчас она придумала ещё один способ, который несложно реализовать самостоятельно методом статистического анализа.

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

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

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

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

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

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

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

Стилизованный в мрачных тонах Хеллоуина постер студии «MintLeaf», описывающий наиболее распространенные ошибки начинающих веб-дизайнеров. Подходит для распечатки и вывешивания в видном месте для назидания.

Под катом длинный постер (900х5750), png, 625 кб.

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

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

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

На Хабре периодически появляются статьи, объединенные общей мыслью «заказчики тупые» или «разработчики тупые».

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

Что интересно, в 90% случаев все эти ситуации разрешает всего одна личная встреча, когда на словах (а не в аське, ломая пальцы или в скайпе ломая голос) приводятся четкие доводы в пользу того или иного решения.

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

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

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

Описывая сайт, не могу не рассказать подробно о процессе его создания.

 

Эти способы не являются ноу-хау или чем-то в этом духе. Тем не менее, они могут помочь начинающим дизайнерам и web технологам в реализации задуманных ими идей. Каждый из предложенных вариантов можно обыграть по-своему.

Проверял лично и убедился в том, что исправно работает под следующими браузерами:

IE7+, Opera 10.5+, FF 3.6+, Chrome 12+ (linux), Chrome 13+ (windows), Safari 5+(win) исходя из личного опыта, предполагаю о том, что работать исправно будет во всех свежих версиях Safari, FireFox, Opera и Chrome.

С помощью CSS можно построить вот такие вот симпатичные варианты:

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

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

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

Думаю, никто не будет спорить, что контент – король. И именно с него обычно и начинается сайт, как информационный носитель.

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

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

Итак, начнем. Если Вы рисуете:

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

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

ru | en, имейте ввиду, что заголовки и разделы на разных языках, имеют разное количество символов.

Поиск, то обязательно нужно отрисовать страницу вывода результатов. Так же, если вы рисуете ссылку «продвинутый поиск», то нужно показать как будет выглядеть продвинутый поиск.

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Игры становятся более похожими на веб-страницы, а веб-страницы все больше напоминают игры. Посмотрите на Хабр: народ пишет топики, за который начисляют карму и рейтинг. Это работает согласно психологии успеха и игровой механике, таким образом, поощряя взаимодействие. Отсюда возникает вопрос: что веб-дизайнер может почерпнуть из игр, а точнее видео игр?

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