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

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

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

Website development *HTML *
Sandbox

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

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

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

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

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

ITSumma corporate blog Interfaces *Usability *


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

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

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

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

Lumber room
Прототип почтового киоска, был представлен на выставке “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
Views 494
Comments 8

IE8 Web Slice и Silverlight

Lumber room
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
Views 342
Comments 5

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

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

image

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

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

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

image
student-partners.com/photochain.aspx

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

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

RUVDS.com corporate blog Wireless technologies *Network standards *Old hardware DIY
Tutorial
2022. Количество активных SIM-карт превзошло население планеты семь лет назад. Вовсю идёт внедрение мобильных сетей пятого поколения, невероятно быстрых и в то же время доступных на самом широком спектре устройств — от автомобилей до носков. Искать парные носки скоро можно будет через интернет, представляете?

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


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

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

JUG Ru Group corporate blog Conferences AR and VR The future is here

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

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

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

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

IT-emigration Learning languages
Sandbox

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

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

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

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

ua-hosting.company corporate blog Interfaces *IT Standards *Data storage *History of IT
Translation

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




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

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

TINKOFF corporate blog Typography *Graphic design *Design
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.

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

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


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

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

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



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

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

CSS *

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
Views 165K
Comments 33

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

Web design *Vector graphics *Interfaces *
image

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

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

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

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

МойОфис corporate blog Web design *Interfaces *

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

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

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

Web design *Interfaces *Usability *Mobile applications design *
Translation


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

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

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

Web design *Interfaces *Usability *
Предлагаю вашему вниманию перевод статьи «Responsive Upscaling: Large-Screen E-Commerce Design» автора Christian Holst.

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

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

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

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

Development of mobile applications *
Sandbox


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

Автор — Sebastien Gabriel.

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