Обновить
57.51

Веб-дизайн *

Дизайн спасет мир

Сначала показывать
Порог рейтинга
Уровень сложности

Правильная адаптивная типографика с FlowType.JS

Время на прочтение1 мин
Охват и читатели16K
image


Согласно правилам типографики, контент страницы хорошо читается, если в строке от 45 до 75 символов. При разработке адаптивного дизайна это сложно реализовать только лишь с помощью Media Queries. Появился jQuery плагин FlowType, который помогает добиться такого соотношения при любом размере экрана и ширине окна.

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

Понимание букв

Время на прочтение2 мин
Охват и читатели52K
Для того, чтобы выбрать правильные шрифты для хорошей читабельности текста, необходимо понимать основные принципы типографики. Дьявол кроется в деталях, а главная составляющая типографики — буква.

Книга «Основы стиля в типографике» (The Elements of Typographic Style), которую стоит рекомендовать всем начинающим дизайнерам, начинается со слов:
Типографика существует, чтобы отдавать должное содержанию.

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

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

Пожалуй, самый популярный логотип, который демонстрирует «владение буквами» — это логотип FedEx, разработанный Линдоном Лидером (Lindon Leader). На первый взгляд, это обычное применение Futura Bold. Однако если присмотреться, видно, как были изменены буквы «E» и «x», чтобы образовалась стрелка:
image
Читать дальше →

Как работать с дизайнерами

Время на прочтение3 мин
Охват и читатели31K
image


Это перевод интересной статьи о дизайнерах и их принципах работы How to Work with Designers.

Чтобы дизайнеры вас понимали, говорите не о показателях, а о пользователях


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

Еще примеры таких «переводов»:

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

Быстрый просмотр комментариев на Хабре

Время на прочтение1 мин
Охват и читатели13K

Похоже на этой неделе волна постов изменялок интерфейса Хабра. Напишу и про свою.


Иногда так бывает, что открываешь пост, а там уже сотни комментариев, а времени и желания читать всё нет, или тема не особо интересная чтобы тратить на неё много времени. Хочется посмотреть только самые интересные комментарии.


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


image
Читать дальше →

Удобный интерфейс Хабра? Легко!

Время на прочтение1 мин
Охват и читатели21K
Добрый день, после прочтения этого топика я твердо решил освоить написание расширений для Google Chrome.
Не люблю длинные речи, потому встречайте:
ХабраРедизайнер alpha делает шапку сайта похожей на концепты grokru.



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

К комментариям

Удобный интерфейс Хабра? #2

Время на прочтение2 мин
Охват и читатели33K
На досуге решил поразмышлять об улучшении интерфейса Хабрахабра. Он хорош, но ведь нет предела совершенству? В первую очередь необходимо определить группы пользователей и попытаться понять их потребности, а также наметить слабые места, которые можно улучшить. Об этом я уже писал в топике Удобный интерфейс Хабра?, в этот раз копну немного глубже.

image
Читать дальше →

Теория цвета в цифрах

Время на прочтение3 мин
Охват и читатели207K
Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы


Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.

Читать дальше →

Чем тестировать адаптивный дизайн?

Время на прочтение4 мин
Охват и читатели270K
image

Хватит менять размер окна браузера, хватит его насиловать! Готов спорить, вы не раз слышали это. Хорошо, возможно и не слышали. Но если вы профессионально занимаетесь разработкой адаптивных сайтов, вы понимаете о чем я: любое изменение DOM или правка CSS, и вы снова начинаете тянуть край браузера вперед, назад, тестируя изменения и просматривая ничего ли не сломалось.

Целью ваших движений является имитация экранов различных устройств.

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

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

Для тестирования я выбрал реально адаптивный сайт PajamasOnYourFeet.com, сайт построено на основе HTML5 шаблона, бесплатно предоставленным EGrappler.
Читать дальше →

Мобильная типографика

Время на прочтение3 мин
Охват и читатели80K


При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.
Читать дальше →

Необычная навигация на сайтах

Время на прочтение4 мин
Охват и читатели40K
Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox


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

Читать дальше →

Работа с цветом: полезные инструменты, книги, статьи для веб-дизайнеров

Время на прочтение2 мин
Охват и читатели91K
Работа с цветом — это первое, что должен уметь любой дизайнер. В интернете огромное количество разрозненной информации на эту тему, я попытался собрать самое полезное в одной подборке. Большинство полезностей с уклоном в веб-дизайн.

Инструменты




Colour Lovers — старый и функциональный инструмент для подбора цветовых схем. Аналоги — Colourcode, Color Scheme Designer и конечно Kuler. Подобных сайтов великое множество, но эти, на мой взгляд, самые удобные.
Читать дальше →

Оптимизация сайта для планшетов

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

Ускорение набора текста с помощью добавления спецсимволов


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

Читать дальше →

Хороший пользовательский интерфейс

Время на прочтение7 мин
Охват и читатели120K

Вольный перевод статьи Якуба Линовски — «A Good User Interface».

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

16 практических идей

Ближайшие события

Dribbble Meetup 2013 в Москве

Время на прочтение4 мин
Охват и читатели8.3K
Dribbble Meetup 201312 апреля в Москве прошел Dribbble Meetup 2013. На этой неформальной конференции для дизайнеров выступили два десятка сильных и интересных специалистов, представленных в одной из главных тематических социальных сетей Dribbble. Это Евгений Беляев (Mail.Ru Group), Николай Верин, Павел Грозян и Дмитрий Новиков (MacPaw), Фил Дунский, Дмитрий Зимин (Киноход, экс-Рамблер), Алексей Кандауров и Александр Киров (Mail.Ru Group), Мысмаксом, Павел Прошин (Gipis), Дмитрий Чута, Вадим Щербаков, Алишер Якупов (Одноклассники), Юра Ярохович, а также внеплановые Александр Хмелевский и Дмитрий Цозик (SoftFacade), Денис Пахалюк (Ramotion) и Игорь Степахин (TracksFlow). Было много практически полезных рассказов и историй из жизни компаний с живым и веселым диалогом со слушателями.
Читать дальше →

Тренды в веб-дизайне: плоский интерфейс и длинные тени

Время на прочтение2 мин
Охват и читатели25K
Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн. Этот прием, да, назовем его так, получил шквал критики и восхищения, у него появились сторонники и лютые ненавистники, но сегодня, я постараюсь рассмотреть новый, современный, набирающий огромную популярность подход при проектировании — long shadows (длинные тени).

(P.S. — Все картинки кликабельны).

Что такое длинные тени в дизайне, и как это понимать?

fox icon

iPad Mini

Long Shadows

Читать дальше →

Fakebook. Концепт здравомыслия

Время на прочтение4 мин
Охват и читатели59K
Довольно длительное время я читаю Хабр и постоянно вижу статьи про юзабилити Фейсбука, написанные в негативном ключе, как с позиции его пользователей, так и с точки зрения людей, имеющих прямое отношение к IT-сообществу.

Огромная и очень богатая компания, собравшая под своим крылом множество профессионалов, лучших спецов по юзабилити. Компания, занимающаяся сбором статистик, собирающая фокус-группы, проводящая маркетинговые исследования. Всякий раз возникает один и тот же наболевший вопрос: где результат, который устроит пользователя? Сейчас Фейсбук — воплощенный в реальность бардак.

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

Но моя статья не о том. Я хочу представить вашему вниманию свой труд, на который меня изначально натолкнул пользователь Klimentij, написавший статью «Юзабилити Facebook». Долгое время хотел им заняться и вот, наконец, появилось свободное время.

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

Зачем это надо? Я хочу показать свой Фейсбук с простым и понятным интерфейсом, который будет дружелюбным по отношению к пользователю, повысить юзабилити и сделать его более трендовым. Хочу заметить, что это лишь мое видение проблемы, многие элементы могут нуждаться в переосмыслении, так что не судите строго.

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



Читать дальше →

20 вопросов про веб-шрифты

Время на прочтение12 мин
Охват и читатели267K

Привет, Хабр!

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

Много текста и картинок

О современном веб-дизайне и кнопке «Наверх»

Время на прочтение3 мин
Охват и читатели45K
Сегодняшний «Бизнес-линч» напомнил о том, что я давно хочу высказать свои мысли о современном состоянии веб-дизайна, в частности, о кнопке «Наверх».

Веб-дизайн болен. Разработчики превращают сайты в веб-приложения, которые работают нормально только в правильных с их точки зрения браузерах. Повсюду плавающие элементы, которые на мобильном устройстве обязательно куда-нибудь уедут и что-нибудь загородят. Бесконечная прокрутка порою прикручена к сайту так бездумно, что чтобы добраться до ссылок в подвале, приходится судорожно долбить кнопку End (прямо как quick time event в играх). На мобильном устройстве пользоваться полной версией сайта со всеми этими «удобствами» невозможно, и разработчики делают урезанную версию сайта, называя это «адаптив-дизайн», «респонсив-дизайн» и «йет–эназер–маркетинг–буллшит–инглиш–ворд-дизайн» — по сути своей это WAP-сайты в новой личине. Мало того, эту урезанную версию пользователю ещё и навязывают. И не дай бог у сайта есть мобильное приложение: в лучшем случае вы увидите радостное сообщение об этом на весь экран, а в худшем вас, ни о чём не спрашивая, перенаправят в App Store или Google Play, и никого не интересует, что вы зашли на сайт по поисковой выдаче и не собираетесь постоянно его посещать.


За примером далеко ходить не надо

Когда-нибудь, я надеюсь, всё это уйдёт, как ушли заставки на сайтах, неуместное использование Flash, облака тегов. Интернет снова станет единым, на компьютере и посудомоечной машине сайты будут выглядеть одинаково, проблема отображения на разных экранах будет решаться «резиновым» дизайном (придумают новый маркетинговый термин и будут подавать это как что-то новое), а на место отдельных мобильных приложений для сайтов придёт единый формат вроде RSS, встроенный в систему. Кстати, представьте, как будет здорово: нажатием одной кнопки можно будет добавить в свой телефон любой поддерживающий эту функцию сайт, читать его в удобном формате (в том числе и в офлайне — прощай, Readability!) и получать уведомления.
Читать дальше →

Возможно ли создать сайт-визитку за 40 минут? Мой опыт

Время на прочтение4 мин
Охват и читатели47K
Существует большое количество инструментов как для создания прототипа сайта, так и быстрого разворачивания сайта «с нуля», которые позволяют создать что-то в Сети и оперативно это обсудить/поменять буквально за несколько минут. Для интернет-магазина можно воспользоваться InSales, WebAsyst, WinShop или SiteBerry. Для создания готовых сайтов сервисов еще больше — к списку можно добавить имеющиеся у провайдеров Jimdo, Setup, Wix и многочисленные платформы для блогов. Но онлайн-сервисов для быстрого создания уникального дизайна сайта (с учетом обычной и мобильной версии) почти нет. Поэтому я расскажу о MotoCMS, как инструменте прототипирования и быстрого дизайна сайта.

Основная миссия MotoCMS — быстрое и бюджетное создание сайта-визитки, сервис позволяет успешно решить следующие задачи:
  • Подобрать сетку сайта и цветовое решение
  • Согласовать основные шаблоны на примере готового сайта
  • Быстро внести изменения в дизайн прямо в браузере
  • Быстро согласовать тексты и изображения на сайте
  • Легко добавить базовый функционал для сайта

Хотя на сайте MotoCMS заявлено, что это шаблоны Flash-сайтов, далеко не все из них Flash, есть и обычные HTML. Например, тот, который использовался для данной статьи. Как заявляют разработчики, MotoCMS была изначально Flash-админкой сайтов с Flash-шаблонами, но потом разработчики полностью перешли на HTML формат в шаблонах. Сейчас шаблоны MotoCMS наиболее удобные, функциональные и отвечающие всем требованиям к сайтам-визиткам.
Читать дальше →

Веб-дизайн + Mac OS − Adobe = Sketch. Чем новый инструмент лучше всех старых

Время на прочтение4 мин
Охват и читатели111K
Программы Адоби я очень сильно не люблю. Они большие, несуразные, прожорливые, и с ними приходится мириться, потому что за неимением сильных конкурентов Фотошоп с Иллюстратором стали уже стандартными инструментами в профессии.

Начинал я рисовать сайты, как и все, в Фотошопе. Но чем сложнее становились задания, тем сильнее ощущалась его неприспособленность для проектирования интерфейсов. Оно и понятно: Адоби никогда не говорили, что он предназначен для интерфейсных дизайнеров, это дизайнеры как-то сами себе придумали. Всегда хотелось иметь инструмент с двумя кнопками и тремя ползунками — все равно я больше не использовал ни в Фотошопе, ни в Фаерворксе ни в ИнДизайне. Сейчас у меня из «адобовского» набора есть только доставшийся бесплатно (в нагрузку к планшету) Фотошоп Элементс, установленный из принципа (халява же), а все остальное я уже давно заменил другими приложениями. И вот одно из.

Читать дальше →

Вклад авторов