Как стать автором
Обновить
6
0
Сергей Голубев @sgolubev

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

Отправить сообщение

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

Время на прочтение11 мин
Количество просмотров88K

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

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

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

Читать далее
Всего голосов 48: ↑46 и ↓2+44
Комментарии42

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

Время на прочтение7 мин
Количество просмотров35K


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

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

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

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

Время на прочтение1 мин
Количество просмотров555
Прототип почтового киоска, был представлен на выставке “Super Contemporary” в Музее Дизайна в Лондоне.

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

image

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

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

image

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

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

IE8 Web Slice и Silverlight

Время на прочтение2 мин
Количество просмотров424
image

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

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

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

Читать дальше →
Всего голосов 19: ↑14 и ↓5+9
Комментарии5

Конкурс Photosynth для студентов в UK

Время на прочтение1 мин
Количество просмотров339
Для тех студентов, кто находится в окрестностях Англии, я организую фото-конкурс на создание Photosynth. Подробности – на постере ниже:

image

Да пребудет с вами вдохновение! :-)
Всего голосов 12: ↑4 и ↓8-4
Комментарии2

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

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

image

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

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

Время на прочтение1 мин
Количество просмотров383
Оригинальное применение технологий DeepZoom и Microsoft Tag можно увидеть на примере фотогалереи Microsoft Student Partners, сообщества студенческих партнёров Microsoft по всему миру:

image
student-partners.com/photochain.aspx

Для просмотра необходим Microsoft Silverlight.
Всего голосов 20: ↑9 и ↓11-2
Комментарии4

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

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

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


После этого всё пошло наперекосяк
Всего голосов 131: ↑130 и ↓1+129
Комментарии86

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

Время на прочтение21 мин
Количество просмотров37K

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

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

Узнать, как глубока кроличья нора
Всего голосов 92: ↑92 и ↓0+92
Комментарии67

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

Время на прочтение12 мин
Количество просмотров48K

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

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

Читать далее
Всего голосов 166: ↑162 и ↓4+158
Комментарии150

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

Время на прочтение9 мин
Количество просмотров71K

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




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

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

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

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

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


Читать дальше →
Всего голосов 174: ↑169 и ↓5+164
Комментарии126

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

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



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

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

Время на прочтение32 мин
Количество просмотров177K

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. Известные проблемы

Читать дальше →
Всего голосов 40: ↑37 и ↓3+34
Комментарии33

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

Время на прочтение6 мин
Количество просмотров36K
image

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

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

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

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

Время на прочтение6 мин
Количество просмотров13K

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

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

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

Время на прочтение6 мин
Количество просмотров33K


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

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

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

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

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

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

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

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

Время на прочтение27 мин
Количество просмотров318K


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

Автор — Sebastien Gabriel.

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

Информация

В рейтинге
Не участвует
Откуда
London, England - London, Великобритания
Зарегистрирован
Активность

Специализация

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