Привет, Хабр! Мы приготовили для вас долгожданный подарок (из заголовка вы уже поняли, какой), но мы вам его просто так, как говорится, не отдадим 😃
Веб-дизайн *
Дизайн спасет мир
Новости
Как дизайнеры помогают заменить GitLab: что из этого получилось
Привет! Меня зовут Валерия, я дизайнер внутренних сервисов в Ozon Tech. Наша команда занимается продуктами, которые коллеги используют для доступа к инфраструктуре Ozon, приоритизации задач, проведения регламентных работ, выкатки и управления релизами.
Сегодня речь пойдёт про последнее упомянутое решение — REpublic или релизный портал, который помогает нашим разработчикам выкатывать более тысячи релизов каждый день. Я расскажу, зачем мы начали его делать и с какими сложностями столкнулись.
Скрытые возможности элемента <input>
Элемент
<input>
в HTML самый интересный.Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут
type
элемента <input>
может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).Элемент
<input>
отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме. В этой статье я опишу не только различные типы <input>
, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях. Приступим!Это ужасно бесит — подборка косяков, постоянно встречающихся от сайта к сайту, от приложения к приложению
Каждый день мы пользуемся десятками различных мобильных приложений и посещаем десятки, если не сотни, всевозможных сайтов. Часто при этом мы сталкиваемся с какими-то их неприятными особенностями — что-то сделано недостаточно продуманно, где-то разработчик запилил фичу спустя рукава. И всё бы ничего, но некоторые из этих моментов по-настоящему вездесущи, встречаются ежедневно и неимоверно раздражают.
В этой статье я попытался перечислить некоторые из таких наиболее распространённых косяков. Если вы отвечаете за разработку/дизайн/менеджмент какого-либо сайта или приложения, пожалуйста, никогда так не делайте. Правда, ну сколько можно...
Истории
Создаём веб-сайт, как будто сейчас 1999 год
Раньше веб был более странным местом
В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь.
И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о старых добрых статических личных страничках.
Сайты наподобие Geocities, Angelfire, Tripod и Expage предлагали для всех услуги бесплатного статического хостинга, поэтому произошёл бум количества личных веб-сайтов. У некоторых хостов даже были конструкторы веб-сайтов в стиле drag-and-drop, так что вам даже не нужно было изучать HTML.
Сегодня мы можем посмеяться над этими веб-сайтами, по сравнению с современными изящными и минималистическими сайтами они выглядят карикатурно. Но я считаю, что мы слишком далеко ушли в другом направлении, и сегодня многие веб-сайты выглядят одинаково. Те старые личные веб-сайты были отражением вашей личности.
Долго. Дорого… Делать гаджет в России – учиться, терять деньги, жить на работе
Привет! Я Игорь, создатель проекта гражданского мониторинга Nebo и это моя первая статья на Хабре, в которой хочу поделиться опытом разработки гаджета.
Важное: наша команда состоит из дизайнера, программиста и инженера. Множество работ мы закрывали своим трудом, учились, реальные расходы могут вырасти X10. Мы сильно экономили, возможно это станет полезно кому-то.
Изначально мы создали проект, чтобы с помощью недорогих девайсов определять загрязнение воздуха в Красноярске. В нашем городе люди часто жаловались на удушливый смог, и очень часто официальные данные оставались не актуальными. Этому смогу местные жители даже дали специальное определение «чёрное небо».
Простые сайты снова в моде. Минимализм возвращается
Сколько раз говорили об ожирении софта и сайтов, а воз и ныне там. Ситуация совершенно не улучшается. В 1993 году Word открывался за секунду, а сейчас за пять. Простейшие странички обвешаны десятками скриптов и грузятся бесконечно долго даже на многоядерной рабочей станции.
Такая ситуация напрягает и самих веб-разработчиков. Приходится тратить кучу времени на оптимизацию, тестирование новомодных фич в разных браузерах, осваивать сложные CMS. Зачем? На самом деле HTML и CSS — исключительно мощные инструменты, если ими умело пользоваться.
Мимо наборной кассы: феерическая профанация шрифтового дела от компании «Паратайп»
Это история о том, как я разочаровался в компании «Паратайп» и шрифтах, которые она производит.
Я делал PDF-презентацию, чтобы показать европейским иностранцам. И что-то меня пробило на гиперкачественную вёрстку с образцовым типографингом. Пускай, думаю, у иностранцев сорвёт шаблон: они-то привыкли, что все русские верстают по-колхозному, особенно если думают, что нет.
Пока я размечал сетку страницы, меня упорола ещё одна идея: использовать шрифт отечественного производства. Пусть европейцы дважды офигеют.
Я выбрал PT Sans, потому что графика этого шрифта — вполне на мировом уровне. Однако…
Зачем делать копию Facebook под Internet Explorer 6 в 2021 году?
В августе этого года Microsoft прекращает поддержку Internet Explorer 11, тем самым заканчивает эпоху браузеров, которые несли в себе одну очень важную миссию…
И, в связи с этим, меня посетила мысль — «А не сделать ли мне современный сайт так, как делали их тогда?». Отличный повод вспомнить как начиналась моя дорога в разработку и поностальгировать за теми годами. Вечер свободный, каких-то сложностей с вёрсткой под Internet Explorer я уже не припомню. Так-то почти 15 лет прошло. Думаю, справлюсь за час сильно не напрягаясь…
Полная домашняя автоматизация в новостройке
Панель управления квартирой в феврале 2020 года (Home Assistant)
В этой статье расскажу о выборе технологий умного дома, используемых в квартире, а также приведу мои схемы разводки, фотографии всего что было сделано, получившиеся электрические щиты и конфигурации всех устройств, дам ссылку на гитхаб.
Строительство нашего дома в процессе — ноябрь 2016 года
Как делать сайты в 2019 году
Веб стремительно меняется, не отставай и ты!
Я писал подобную статью в 2018 году, но веб меняется так быстро, что те гайдлайны уже безнадёжно устарели.
Давайте-ка шаг за шагом разберём важнейшие принципы веб-дизайна в 2019 году.
Обязательно дайте пользователю знать, что у сайта есть мобильное приложение
Это важнейший принцип, и на то есть свои причины. Фокус-группы, на которые мы уже потратили кучу денег, показали что первое же, чего захочет пользователь попав на ваш сайт — установить мобильное приложение.
Ну а кратчайший путь к этому — показать здоровенное модальное окно:
В качестве необязательной опции можно добавить кнопку или ссылку, чтобы закрыть это окно, но принципиально важно, чтобы текст на ней был слабо различим и сформулирован так, как будто пользователю должно быть стыдно отказываться или он ещё захочет установить приложение в будущем.
Совет: Если у вас нет мобильного приложения, не беда! Просто запихните весь сайт в webview с отключенной безопасностью и пишите, что это мобильное приложение!
История одного лендинга: привлек много клиентов и был скопирован под сотню раз
Среди созданных нами продуктов есть по-настоящему легендарный лендинг пейдж, ставший донором для зарождающегося в интернете сегмента механизированной штукатурки. За три года работы он не только привлёк много клиентов, но и был скопирован почти 100 раз. Хотите узнать, что такого особенного в нем было?
Хватит делать сайты с бесконечной прокруткойǃ
TL;DR. Хотя бесконечная прокрутка подходит для некоторых случаев, но она может создать проблемы.
Бесконечная прокрутка может быть дезориентирующей, неконтролируемой и вызывать стресс у пользователей.
В этой статье мы объясним, почему нужно прекратить создание сайтов с бесконечной прокруткой. Но для начала рассмотрим краткую историю вопроса.
Ближайшие события
Цвет: от шестнадцатеричных кодов до глаза
Почему мы воспринимаем
background-color: #9B51E0
как этот конкретный фиолетовый цвет?Долгое время я думал, что знаю ответ на этот вопрос. Но хорошенько поразмыслив, осознал значительные пробелы в своих знаниях.
Редизайн Хабрахабра и Гиктаймс. Финишная прямая
Сегодня поговорим про финишную и, пожалуй, ключевую итерацию: редизайн ленты, публикаций и комментариев. Волнуемся!
Пятница: все дизайнеры интерфейсов попадают в ад…
Каждый раз, когда я вижу надпись «Обновить сейчас или напомнить завтра», у меня возникает улыбка, при мысли о том, что все люди, участвовавшие в разработке подобных диалоговых окон (с*ки, верните кнопку «Нет и никогда больше не спрашивать»), окажутся в тепленьком уютненьком аду, где им нужно будет просто ввести телефонный номер…
Серия интерфейсных обновлений «Хабрахабра» и Geektimes
300 потрясающих бесплатных сервисов
Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.
A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета
- HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
- Bootswatch: Бесплатные темы для Bootstrap.
- Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
- Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
- Strikingly.com Domain: Конструктор веб-сайтов.
- Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
- Withoomph: Мгновенное создание логотипов (англ.).
- Hipster Logo Generator: Генератор хипстерских логотипов.
- Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
- Invoice to me: Бесплатный генератор счета.
- Free Invoice Generator: Альтернативный бесплатный генератор счета.
- Slimvoice: Невероятно простой счет.
Будущее [отсутствие] интерфейсов браузеров от Яндекса
Меня зовут Гена Лохтин. В Яндексе я отвечаю за проектирование интерфейса нового Браузера, и специально для Хабра хочу сейчас рассказать, почему мы пришли к такому новому интерфейсу и какие трудности нам удалось преодолеть по дороге. Внутри для нового браузера мы использовали кодовое название «Кусто» (чуть ниже расскажу почему). Так что иногда я буду использовать его в тексте.
Всё началось ещё в 2012 году с вопроса, который задают себе многие авторы браузеров: как сделать так, чтобы интерфейс занимал меньше места и оставлял его сайтам? Вопрос кажется простым. И первые идеи ответов на него тоже простые. Кто-то убирает табы в заголовок окна, кто-то — иконки расширений к адресной строке.
Но никто ещё не предлагал такого радикального решения, как мы. Чтобы прийти к нему, и решить все те проблемы, которые оно ставит, — понадобилось несколько лет. Ведь это не только убирание рамок. Нужно, чтобы браузером при этом было удобно пользоваться. Внутри «Кусто» много новых интерфейсных решений, над которыми мы долго работали и которые долго тестировали. Итак.
Простые догмы при работе с цветом в интерфейсах
Привет, username!
Хотел написать большую статью про биологию восприятия цвета, но решил для начала ограничиться простыми правилами для начинающего/продолжающего дизайнера интерфейсов. К сожалению, грамотная работа с цветом присутствует даже не во всех продуктах крупных компаний, поэтому данный текст имеет цель не только обучить новичков, но и напомнить более опытным дизайнерам обо всех тонкостях этого вопроса. Вопрос дальтонизма в статье не освещается.