Неизвестно откуда пошла мода на оформление текста заглавными буквами, но факт остается фактом – использование заглавных букв окружает нас повсеместно. Если вы напишете в интернете текст прописными, люди решат, что вы кричите, или усомнятся в вашем психическом здоровье. Но чаще всего все прописные раздражают людей, а текст написанный таким образом очень трудно быстро прочесть.
Вчера я слушал подкаст и обратил внимание, как кто-то задавал вопрос и по ходу дела сказал: «Старый фанат, впервые звоню». По какой-то причине это заставило меня подумать о Medium. Я читаю тут статьи давным-давно, но никогда не вставлял свои два цента. Сегодня тот день, когда это изменится.
Для начала я решил написать о чём-то, что мне близко, о визуальном дизайне (он же графический дизайн), более конкретно об основных принципах, использование которых пришло с опытом, и которые я считаю наиважнейшими для хорошего выполнения моей работы.
Не хочу раздувать статью, поэтому буду краток по каждому принципу. Тем, которые заслуживают более подробного изложения, я могу посвятить полноценную статью в будущем.
Устраните элемент таинственности в выборе шрифтов с нашим пошаговым руководством
Если всё сделать правильно, то типографика становится невероятно мощным инструментом. Обратимся к сочинениям Роберта Брингхёрста, чья книга «Основы стиля в типографике» (The Elements of Typographic Style) десятилетиями служила остроумным справочником для профессионалов. Там вы найдёте возвышенную формулировку ремесла. По Брингхёрсту, типографика «существует для уважения контента», а правильная типографика «показывает каждый элемент, каждое отношение между элементами и каждый логический нюанс текста».
Может, эти слова кажутся вдохновляющими или пугающими. Но очевидный факт в том, что правильный выбор типографики всегда отражает конкретные потребности самого проекта. Это не только эстетические потребности, но также технические и функциональные — и очень разные сообщения вы можете создать из фрагментов текста, прокручивая выпадающий список от Alegreya до Zapf Dingbats. Некоторые шрифты лучше работают в заголовках, а другие хорошо читаются в абзацах. Некоторые семейства достаточно велики, чтобы вместить международные алфавиты и специальные символы. И если шрифт идёт в разных стилях (например, курсив или малые прописные) и начертаниях (от тончайшего Hairline до ультра-чёрного), то по мере сборки проекта он предоставит больше возможностей для тонкой настройки дизайна.
Конечно, есть о чём подумать, но некоторые из наиболее важных соображений — это практические и функциональные особенности проекта. Начав с уже известных вещей и пройдя по следующим пунктам, вы найдёте шрифт, который соответствует вашим нуждам.
Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам. Написать эту статью меня вдохновил твит от Эдди Османи, работающего над Google Chrome.
Здесь я рассмотрю различные подходы и решения этой проблемы, а также то, как передать пользовательский интерфейс фронтенд разработчику таким образом, чтобы гарантировать, что UI реализован в соответствии с макетом дизайна, поскольку некоторые детали в CSS можно легко упустить.
Медицина всегда шла рука об руку с диагностикой. Прежде чем заниматься лечением болезни, следует выяснить, что происходит с организмом пациента, каков характер этого процесса и где он протекает.
Современная диагностика заболеваний путем визуализации насчитывает множество методов: МРТ, КТ, ФА, УЗД и т.д. Каждый из них по-своему уникален и предоставляет определенный спектр информации про здоровье пациента. Однако у всего есть свои недостатки, и вышеперечисленные методы не исключение. Ученые из Стэнфордского университета решили разработать новый метод визуализации, который будет объединять в себе сильные стороны сразу нескольких классических методов, но при этом будет лишен их недостатков. Основой изобретения стал разработанные ими контрастный агент, с помощью которого можно проводить раннюю диагностику ишемической болезни сердца пациентов, у которых пока еще нет видимых симптомов. Что лежит в основе нового метода и как он работает? Об этом мы узнаем из доклада ученых. Поехали.
Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его.
Функция color-contrast() используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с нарушениями зрения, которым трудно прочитать текст с низким контрастом.
Здесь упоминаются три основных правила эффективного выбора цветов, которые хорошо воспринимаются практически всеми. Далее приводятся объяснения трех свойств цвета в человеческом восприятии — тона, яркости и насыщенности — в контексте науки о зрении.
Основы web-типографики пришли к нам из далекого 1991 года, еще от небезызвестного Tim Berners-Lee :)
Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.
Cуть web-типографики заключаться не просто в выборе нужного шрифта и умение отличить начертание одного шрифта от другого.
Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.
Мы поговорим о web-типографике как о рецепте, содержащем четыре основных компонента. Если вы когда-нибудь пытались приготовить суфле, то скорее всего, смогли ощутить насколько важен рецепт его приготовления.
Эффективность дизайна часто оценивается по финальному результату. Но между брифом и финальным решением есть множество вводных, которые дизайнер получает в процессе погружения в продукт. Он сам накачивает себя новыми смыслами, паттернами и причинно-следственными связями. Пытаясь найти свой принцип отбора наиболее удачных концептов, дизайнеры опираются на насмотренность, креативные механики или мощь алгоритмов пинтереста. Все это может работать по отдельности и вместе, но вопрос остаётся тот же: как при всем многообразии методик оценить свою идею по требованиям задачи и выдать нетривиальное решение? Разложим на конкретные вопросы Метод 3К, который призван сбалансировать эффективность и креативность.
Продолжаем гайд по формулировке вопросов для проверки своих дизайн решений.
В прошлой части мы разобрали две К: понимание (К)онтекста и качество (К)онтента в проекте. А сегодня поговорим о последней К — (К)онтрасте, который дробится на две части — Контраст Глобальный и Контраст Локальный.
