Pull to refresh
6
0
Сергей Голубев @sgolubev

UX-дизайнер, предприниматель

Send message

Как правильно верстать в 2022 году. Часть 1

Reading time 11 min
Views 87K

Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

Читать далее
Total votes 48: ↑46 and ↓2 +44
Comments 41

Почему каждый сайт пытается продвинуть своё нативное приложение?

Reading time 7 min
Views 35K


Странная вещь: вот сайты (теперь не все, но всё ещё многие) отлично работают в браузере. Но только заходишь со смартфона, начинается цирк. Всплывающее окно — хотите открыть ссылку в приложении? В каком? У меня нет никакого приложения! Если случайно нажать «Да», то начнётся скачивание — и нативное приложение таки будет установлено.

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

Спрашивается, зачем? Зачем устанавливать на смартфон отдельное нативное приложение для каждого сайта? Очевидно, что маркетологи впаривают их не просто так. Похоже, это очень выгодное дело.
Читать дальше →
Total votes 99: ↑98 and ↓1 +97
Comments 68

Самое маленькое почтовое отделение в мире

Reading time 1 min
Views 547
Прототип почтового киоска, был представлен на выставке “Super Contemporary” в Музее Дизайна в Лондоне.

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

image

Исследование показало что «почти четверть людей ждёт как минимум 10 минут на почте, и потери Post Office составили 184,000,000 фунтов стерлингов в 2008-м году.»

Не обходится и без приколов в интерфейсе виртуального «почтальона» :-)

image

А вы пользовались бы таким киоском?

[оригинал моего поста на английском: http://sgolubev.livejournal.com/78642.html]
Total votes 6: ↑5 and ↓1 +4
Comments 8

IE8 Web Slice и Silverlight

Reading time 2 min
Views 418
image

На днях завершили работу над Веб-слайсом для международного студенческого кубка технологий Imagine Cup. Вот уже в 7-й раз организация конкурса доказала его популярность: число зарегистрировавшихся участников в этом году перевалило за 300 тысяч человек.

Подписаться на Imagine Cup Web Slice можно здесь: www.ieaddons.com/en/details/news/Imagine_Cup_2009

Далее: о том с чем едят Веб-слайсы и обмен опытом при их разработке.

Читать дальше →
Total votes 19: ↑14 and ↓5 +9
Comments 5

My Story — софт для школьников

Reading time 1 min
Views 517
На днях завершил разработку прототипа программы для детей школьного возраста. “My Story” позволяет легко и быстро создавать и делиться своими рассказами. Программку можно опробовать здесь: www.mystoryapp.com.

image

Отзывы более чем приветствуются. Софт написан на Windows Presentation Foundation в рамках диссертации в University of Nottingham.
Total votes 10: ↑6 and ↓4 +2
Comments 27

Фотоцепочка студенческих партнёров Microsoft: DeepZoom + Microsoft Tag

Reading time 1 min
Views 373
Оригинальное применение технологий DeepZoom и Microsoft Tag можно увидеть на примере фотогалереи Microsoft Student Partners, сообщества студенческих партнёров Microsoft по всему миру:

image
student-partners.com/photochain.aspx

Для просмотра необходим Microsoft Silverlight.
Total votes 20: ↑9 and ↓11 -2
Comments 4

Как отправить сообщение на пейджер — the hard way

Reading time 14 min
Views 28K
2022. Количество активных SIM-карт превзошло население планеты семь лет назад. Вовсю идёт внедрение мобильных сетей пятого поколения, невероятно быстрых и в то же время доступных на самом широком спектре устройств — от автомобилей до носков. Искать парные носки скоро можно будет через интернет, представляете?

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


После этого всё пошло наперекосяк
Total votes 131: ↑130 and ↓1 +129
Comments 86

Состояние VR в 2022-м: работа, 3D-миры, мероприятия, секс, игры

Reading time 21 min
Views 36K

Недавно популярность VR резко скакнула: шлем Quest 2 от Meta так массово дарили на Рождество, что разработчики VR-приложений сообщили о рекордном всплеске пользователей. И это не разовая случайность, Quest 2 вообще продаётся куда лучше, чем все VR-шлемы до него. Он не требует подключения к компьютеру и стоит всего $300, а в итоге делает VR массовым.

Это что же получается, Цукерберг был прав, что мы все вот-вот переедем в метавселенную? Не уверен: многие из купленных шлемов пылятся на полках, что такое «метавселенная» — никто не знает, а разговоры о будущем — это гадание на кофейной гуще. Но вижу, что среди спорящих о будущем многие не очень разбираются даже в настоящем. Поэтому, раз VR взлетает, решил расписать: что люди делают там уже сейчас?

Узнать, как глубока кроличья нора
Total votes 92: ↑92 and ↓0 +92
Comments 67

Япония как земля обетованная?

Reading time 12 min
Views 48K

Привет, Хабр! Уже три года живу я в Японии (два провёл в языковой школе, а сейчас эникею в фирме с русским руководством на Хоккайдо) и, несмотря на то что глобально говоря ничего я ещё не добился, рассказы об Японии вызывают у людей живой интерес. Почему бы его не удовлетворить?

И так, начнём с самого животрепещущего вопроса: стоит ли стремиться к трудовой миграции в Японию?

Читать далее
Total votes 166: ↑162 and ↓4 +158
Comments 150

Вымирание компьютерных файлов

Reading time 9 min
Views 71K

Новомодные технологические сервисы меняют наши интернет-привычки.




Я люблю файлы. Мне нравится переименовывать их, перемещать, сортировать, изменять способ отображения в папке, создавать резервные копии, выгружать их в интернет, восстанавливать, копировать и даже дефрагментировать их. Как метафора способа хранения информационного блока, я думаю, они великолепны. Мне нравится файл как единое целое. Если мне нужно написать статью, она окажется в файле. Если мне нужно выдать в свет изображение, оно будет в файле.
Читать дальше →
Total votes 177: ↑157 and ↓20 +137
Comments 400

Знаменитые дизайнеры vs научные исследования про читаемость шрифтов

Reading time 6 min
Views 65K
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.

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

Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).


Читать дальше →
Total votes 174: ↑169 and ↓5 +164
Comments 126

Загадка выпадающего списка «Амазона»

Reading time 2 min
Views 191K
Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



Запаздывание необходимо не только для того, чтобы сберечь ресурсы машины пользователя, но и по соображениям юзабилити: если не добавить задержку, то переводить курсор мыши на выпавшее подменю будет неудобно, придётся вести его сначала горизонтально в меню, не задевая другие пункты, и лишь после выбирать нужный подпункт.
Читать дальше →
Total votes 558: ↑548 and ↓10 +538
Comments 90

Коллекция практических советов и заметок по вёрстке

Reading time 32 min
Views 176K

CSS Refresher


Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

От переводчика


Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание


  1. Позиционирование (position)
  2. Отображение элемента в документе (display)
  3. Плавающие элементы (float)
  4. CSS селекторы
  5. Эффективные селекторы
  6. Переотрисовка и перерасчет
  7. CSS3 свойства
  8. CSS3 медиа-запросы
  9. Адаптивный web-дизайн
  10. CSS3 переходы
  11. CSS3 анимации
  12. Масштабируемая векторная графика (SVG)
  13. CSS спрайты
  14. Вертикальное выравнивание
  15. Известные проблемы

Читать дальше →
Total votes 40: ↑37 and ↓3 +34
Comments 33

Как я делал шаблон веб-магазина в Sketch.app для Themeforest. Часть 1: письмо, идея, прототип

Reading time 6 min
Views 36K
image

Началось так: мне написали из Envato, что они запускают раздел с шаблонами Скетча в Themeforest, а раз уж я такой идейный пользователь, то было бы неплохо, если бы я на открытие нарисовал шаблон какой-нибудь. Я, естественно, отказываться не стал.

Шаблон получился вот такой.

Дальше я опишу, что и как делал в процессе. Статья традиционно будет в нескольких частях.
Читать дальше →
Total votes 25: ↑23 and ↓2 +21
Comments 15

Разработка дизайна для приложений МойОфис

Reading time 6 min
Views 13K

К офисным приложениям правило Парето применимо в следующем виде: 80% пользователей используют для решения своих задач только 20% представленных функций. В проекте МойОфис мы сосредоточились на реализации самых необходимых из них, чтобы повысить продуктивность работы большинства офисных сотрудников. На это влияет не только оптимальное количество функций, но и то, как они представлены в интерфейсе.

Сегодня мы расскажем, как работаем над дизайном приложений МойОфис: как выстраиваем процесс, какие инструменты используем и как проверяем результаты своей работы.
Читать дальше →
Total votes 18: ↑15 and ↓3 +12
Comments 12

Неправильно использованные шаблоны мобильного интерфейса

Reading time 6 min
Views 33K


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

Некоторые могут возразить, что следование гайдам может убить творчество, и в итоге все приложения будут выглядеть одинаково. С точки зрения UX, я тут вижу другую проблему. Может казаться, что применение лучших шаблонов, которые используют Google / Facebook / Instagram / [вставить любимое приложение], всегда является отличным решением. Что они ставят себе такие же задачи, что и вы. Вот несколько шаблонов, которые считаются (или считались) лучшими, но в то же время не такие уж они и хорошие, какими кажутся на первый взгляд.
Читать дальше →
Total votes 37: ↑35 and ↓2 +33
Comments 29

Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов

Reading time 14 min
Views 21K
Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.

Революция в адаптивном дизайне не за горами (если уже не случилась!), и даже не смотря на то, что интернет-магазины не взялись на адаптивный дизайн столь же агрессивно, как другие индустрии, все же это становится популярным.

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

  1. Только 18% из 50 ведущих американских интернет-магазинов, которые мы тестировали ранее, в этом году адаптировали свой дизайн под большие экраны (в то время как у 94% этих сайтов дизайн адаптирован под мобильные устройства).
  2. Почти три четверти электронных продаж все ещё совершаются на ПК, а не на мобильных устройствах (смотрите здесь, здесь и здесь).
  3. Около трети этих пользователей приходят с экранов шире 1350 пикселей (смотрите здесь, здесь и здесь). (Примечание: Разумеется, есть разница между шириной экрана и шириной браузерного окна — реальное число пользователей с браузером указанной ширины будет ниже. Мы рекомендуем вам отслеживать размеры браузерного окна в вашей веб-статистике для более полной картины того, насколько значителен этот сегмент для вашего сайта.
Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Comments 2

Руководство для дизайнера по DPI

Reading time 27 min
Views 317K


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

Автор — Sebastien Gabriel.

Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.
Читать дальше →
Total votes 92: ↑88 and ↓4 +84
Comments 19

Information

Rating
Does not participate
Location
London, England - London, Великобритания
Registered
Activity

Specialization

UI/UX Designer
Lead
Web design
UI/UX design
Designing interfaces
Figma Design
Mobile application design
Prototyping
Interface development
User research
Information architecture
Interactive design