Большая часть людей, так или иначе причастных к верстке сайтов, проходят через… Назовем это “путь бутстрапа”. Это такая философская позиция, когда у тебя есть 12 колонок и ничего больше. Ты берешь элементы, кладешь их в определенные колонки и все у тебя хорошо. Можно выключить мозг, погрузиться в нирвану и руки будут сами расставлять элементы. Красота… Но тут появляется современный дизайнер, который рисует что-то, что ну совсем не сходится с этой замечательной концепцией. Колонок явно больше, они все разной ширины, да еще и по высоте что-то нужно выравнивать. Жуть. А встречается такое все чаще, особенно если сделать шаг в сторону от магазинов или админок. Сегодня мы поговорим о том, что же это за чудо такое там используется и как его можно готовить в современном CSS. Кода будет совсем немного, в основном – размышления и картинки.
Александр Котоманов @kotomanov
User
Прелести интерфейса на частично перекрывающихся слоях
5 min
23KСегодня я расскажу как и зачем мы построили интерфейс нового сервиса Вирусдай на перекрывающихся слоях, как это сказалось на UX и как мы сформулировали принцип «Looks like an app. Works like an app».
![](https://habrastorage.org/files/404/792/d87/404792d87cdb44d3a515affc488a39af.jpg)
За время, прошедшее с 2012 года мы несколько раз модернизировали как сам сервис, так и его интерфейс. Однако, всему однажды приходится сказать «прощай» и идти дальше. Настал момент, когда ни архитектура, ни интерфейс сервиса уже не отвечали нашим запросам. Нам предстояло превратить простой антивирус для сайтов в нечто большее – в целый набор связанных и удобных инструментов для лечения и защиты сайтов. Назревало только одно решение – делать новый сервис «с нуля». Архитектура, технологии, сценарии, интерфейсы – все должно было быть абсолютно новым. Нашей главной целью было достижение максимального уровня комфорта для пользователя при работе с новым сервисом.
Основной задачей нашего отдела стало создание максимально удобного и понятного UI. Итак, весной 2014 года мы приступили к работе над абсолютно новым интерфейсом сервиса и я расскажу вам как все происходило.
![](https://habrastorage.org/files/404/792/d87/404792d87cdb44d3a515affc488a39af.jpg)
За время, прошедшее с 2012 года мы несколько раз модернизировали как сам сервис, так и его интерфейс. Однако, всему однажды приходится сказать «прощай» и идти дальше. Настал момент, когда ни архитектура, ни интерфейс сервиса уже не отвечали нашим запросам. Нам предстояло превратить простой антивирус для сайтов в нечто большее – в целый набор связанных и удобных инструментов для лечения и защиты сайтов. Назревало только одно решение – делать новый сервис «с нуля». Архитектура, технологии, сценарии, интерфейсы – все должно было быть абсолютно новым. Нашей главной целью было достижение максимального уровня комфорта для пользователя при работе с новым сервисом.
Основной задачей нашего отдела стало создание максимально удобного и понятного UI. Итак, весной 2014 года мы приступили к работе над абсолютно новым интерфейсом сервиса и я расскажу вам как все происходило.
+16
Компьютерные интерфейсы в кино — эволюция воображения
10 min
83KTL;DR. Мы пытались охватить многое, поэтому статья получилась пугающе объемной. Но, надеюсь, познавательной. А еще под нее ностальгировать можно.
![](https://habrastorage.org/files/ed6/297/c62/ed6297c628e44b7bb55607575fdbffae.png)
У интерфейсов в поп-культуре — целая история, которая заслуживает отдельного внимания. Сегодня поговорим о том, как люди представляли и изображали интерфейсы в кино. Приоритет будет за компьютерами (от домашних до бортовых) однако стоит понимать, что любая система, с помощью которой человек взаимодействует с другой системой — это интерфейс.
+48
01 Ссылки для UX-специалистов
3 min
93KВ этой подборке я хочу поделиться информационными ресурсами, где можно почерпать новые знания, отследить новые методы, техники и аналитку, а также улучшить свои навыки в области UX. Полезно будет не только специалистам из области юзабилити, а также всем кто имеет отношение к разработке веб-продуктов.
![](https://habrastorage.org/files/816/606/5d8/8166065d89524eabb2a8ae7caac3ab4c.jpg)
![](https://habrastorage.org/files/816/606/5d8/8166065d89524eabb2a8ae7caac3ab4c.jpg)
+54
Одно успешное внедрение iBeacon: 200 маячков для РИФ+КИБ 2014
6 min
25K![](https://habrastorage.org/getpro/habr/post_images/150/ff9/c81/150ff9c814530eb6225ad09c50685971.png)
+30
Microsoft вложил 15 млн долларов в Foursquare в обмен на использование его данных
1 min
15K![Bing Smart Search Windows 8.1](https://habrastorage.org/getpro/habr/post_images/73f/0f8/e21/73f0f8e2197dd64f8b7745cf0a314f7e.jpg)
Microsoft инвестировал 15 миллионов долларов в Foursquare и договорился со стартапом о стратегическом партнёрстве, сообщает The Wall Street Journal. В рамках контракта Microsoft получил право на использование данных Foursquare в своих сервисах, таких как Windows Phone и Bing.
С этой сделкой Microsoft становится крупнейшим партнёром Foursquare, но в стартапе отмечают, что соглашение не является экслюзивным и не влияет на партнёрства с другими компаниями. В декабре Foursquare уже закрыл раунд инвестиций на 35 миллионов, что позволило оценить компанию примерно в 650 миллионов.
+24
Обзор Yota Many
6 min
40K В начале июня компания Yota представила два новых устройства для работы в своей сети, Yota One и Yota Many, почитать более подробно о которых вы можете у нас на сайте. На сегодня я приготовил обзор «старшей» новинки — добро пожаловать под кат.
![image](https://habrastorage.org/getpro/geektimes/post_images/7b6/743/9dd/7b67439dd251ae1a3f45b132a783d511.jpg)
![image](https://habrastorage.org/getpro/geektimes/post_images/7b6/743/9dd/7b67439dd251ae1a3f45b132a783d511.jpg)
+36
Пара полезных сайтов для выбирающих фототехнику
1 min
39KХотелось бы дополнить недавний топик про теоретические основы фотографии некоторым объемом практической информации. Интересно будет в первую очередь тем, кто выбирает себе очередную камеру или объектив (независимо от квалификации фотографа и уровня техники):
www.dpreview.com — подробнейшие обзоры и сравнения фотокамер, довольно оперативно пополняемые по мере выхода в свет новых моделей. Для людителей истории фототехники имеется архив за прошедшие годы;
www.photozone.de/Reviews/overview — качественные и информативые отчеты о тестировании объективов для зеркальных камер различных производителей.
Update: еще насколько сайтов, подсказанных читателями, за что им спасибо :)
www.steves-digicams.com/ — обзоры техники, форум, подборка «HowTo»;
www.dpreview.com — подробнейшие обзоры и сравнения фотокамер, довольно оперативно пополняемые по мере выхода в свет новых моделей. Для людителей истории фототехники имеется архив за прошедшие годы;
www.photozone.de/Reviews/overview — качественные и информативые отчеты о тестировании объективов для зеркальных камер различных производителей.
Update: еще насколько сайтов, подсказанных читателями, за что им спасибо :)
www.steves-digicams.com/ — обзоры техники, форум, подборка «HowTo»;
+7
Установка Windows 7 на Macbook Air 2010 Late основной и единственной ОС
4 min
205KДанный пост написан не холивара ради, а просто, чтобы поделится опытом. Сразу отвечу на основную часть вопросов:
— Зачем это надо?
— Это просто надо!
— Есть же MacOS, зачем на Маке Windows?
— Каждый выбирает для себя, с чем ему удобнее работать! Мне нравятся железки от Apple, но привык я работать в Windows!
— Есть же виртуальные машины?
— Они работают медленно!
— Есть же Bootcamp!?
— На Air мало место, и только Windows занимает около 30-40Гб, со всем софтом!
Ответил на все вопросы?! Если вам все еще интересно как это провернуть, тогда добро пожаловать в пост…
— Зачем это надо?
— Это просто надо!
— Есть же MacOS, зачем на Маке Windows?
— Каждый выбирает для себя, с чем ему удобнее работать! Мне нравятся железки от Apple, но привык я работать в Windows!
— Есть же виртуальные машины?
— Они работают медленно!
— Есть же Bootcamp!?
— На Air мало место, и только Windows занимает около 30-40Гб, со всем софтом!
Ответил на все вопросы?! Если вам все еще интересно как это провернуть, тогда добро пожаловать в пост…
+5
Вам календарик 2011
1 min
6.4K+204
Математический способ определения самых влиятельных юзеров
2 min
594![image](http://s001.radikal.ru/i194/1002/f4/83954101997f.jpg)
Ученые предложили новый метод определения самых влиятельных пользователей социальных сетей — оказалось, что количество связей конкретного индивидуума слабо сказывается на его способности распространять информацию. В качестве одного из модельных примеров выступала сеть, образованная дружественными аккаунтами в ЖЖ. Статья ученых пока нигде не опубликована, однако ее препринт доступен на сайте arXiv.org.
+45
10 предсказаний про интернет-рекламу и продвижение 2010 года
4 min
1KВ этом небольшом посте хочу дать несколько самых вероятных прогнозов развития интернет-продвижения и рекламы в наступившем году. Мои утверждения основаны на собственных наблюдениях, опыте работы в этой сфере и некоторых аналитических материалах. А вы, в свою очередь, можете пользоваться этой информацией как вам угодно.
2010 — год SMM & SMO
Все уже прекрасно понимают, что Social Media Optimisation & Social Media Marketing — далеко не новинки в промо интернет-проектов. Но именно в 2010 году эти методы и способы выйдут на новый уровень и окончательно войдут в инструментарий каждого современного коммуникационного агентства.
+67
Поиграем в Dendy по интернету?
2 min
5.4K![image](https://habrastorage.org/getpro/geektimes/post_images/828/961/7f0/8289617f05adc1df4e75e8ffaf395cbe.jpg)
Хабралюди, предлагаю нам собраться и поиграть в любимые игры Dendy по интернету, кто во что захочет.
Под катом опишу, как это организовать и настроить.
+93
Как я становился разработчиком приложений для vkontakte.ru
12 min
2.2KЧуть более месяца назад, я решил, что разработка приложений для контакта вполне может стать прибыльным делом, а прибыльное дело это как раз то, что мне надо. Никаких познаний в Action Script у меня на тот момент небыло. Так что я фактически начинал с нуля и решил задокументировать процесс. Надеюсь это кому-нибудь поможет. По мере возможностей, буду продолжать делиться своим опытом в этом блоге. Ниже мои записи точно в том виде, в каком я заносил их в evernote.
+38
Установка Windows 7 на EEE-PC 1000HE
3 min
38K![image](https://habrastorage.org/getpro/geektimes/post_images/701/b39/10c/701b3910cac7650bf7d54b4ed5c635f6.jpg)
Я задумывался о покупке нетбука уже давно. Идеи бродили еще с прошлого года, но руки дошли вот только сейчас. Главная причина для покупки это то, что нетбук умещается в задний кофр мотоцикла, что избавляет от необходимости возить рюкзак с полноразмерным ноутбуком. После длительного маркетингового исследования мой выбор пал на ASUS EEE 1000HE. Atom N280, клавиатура а-ля Apple, батарея на 8 часов и чехол и тряпочка в комплекте перевесили аргументы конкурентов.
Нетбук поставляется с чешской версией Windows XP, что для меня неприемлемо. Хотя, знаю людей, которые находят это забавным и даже удобным. В данном посте я опишу процедуру установки Windows 7 на мой нетбук. Сразу подчеркну, что для работы мне нужен именно Windows. Итак, поехали.
+30
Любимому ZX Spectrum 27 лет
1 min
8KРовно 27 лет назад, 23 апреля 1982 года благодаря усилиям компании Sinclair Research свет увидел компьютер ZX Spectrum.
![image](https://habrastorage.org/getpro/geektimes/post_images/9eb/670/19d/9eb67019d8907915261ea64ed9eb91ba.jpg)
Процессор Zilog Z80 3,5 МГц, от 16 Кбайт памяти, ОС Sinclair BASIC… кассеты! А этот звук загрузки?
Помним и любим :) Кхххх. Кхх. Бзззззз…
![image](https://habrastorage.org/getpro/geektimes/post_images/9eb/670/19d/9eb67019d8907915261ea64ed9eb91ba.jpg)
Процессор Zilog Z80 3,5 МГц, от 16 Кбайт памяти, ОС Sinclair BASIC… кассеты! А этот звук загрузки?
Помним и любим :) Кхххх. Кхх. Бзззззз…
+153
Организация данных на usb-flash
2 min
6.4KМногие, для организации данных на usb-flash, используют программы-лаунчеры. Мне ни один из них не понравился и я хочу рассказать как сделал собственный, на основе bat-файлов и Launchy
+26
Last.fm отложил платную подписку
1 min
1.3K«После объявления о нашем решении ввести платную подписку во всех странах, кроме США, Великобритании и Германии, мы получили очень много отзывов», — так начинается сообщение в официальном блоге Last.fm, в котором основатели проекта говорят, что всё-таки решили пересмотреть своё решение и отложить подписку на неопределённое время, пока не разработают несколько дополнительных фич (подарочные сертификаты, поддержка альтернативных платёжных систем, оплаты по SMS, интеграция подписки в Last.fm API).
Очевидно, они увидели, что введение платной подписки сейчас станет настоящей катастрофой с точки зрения пиара, потому что это было крайне негативно воспринято основной массой аудитории. Судя по комментариям на Хабрахабре, абсолютное большинство пользователей не собираются платить 3 евро в месяц, а сразу начинают поиск альтернативных интернет-радиостанций, благо недостатка в них не наблюдается. Правда, по размеру фонотеки с Last.fm никто не может сравниться, но для большинства слушателей это не является принципиальным.
Основатели Last.fm также объясняют причины географической дискриминации. Дело в том, что они просто не могут продавать достаточное количество рекламы для иностранной аудитории, так что в этих странах проект не может окупаться за счёт рекламы, как в США, Великобритании и Германии.
Очевидно, они увидели, что введение платной подписки сейчас станет настоящей катастрофой с точки зрения пиара, потому что это было крайне негативно воспринято основной массой аудитории. Судя по комментариям на Хабрахабре, абсолютное большинство пользователей не собираются платить 3 евро в месяц, а сразу начинают поиск альтернативных интернет-радиостанций, благо недостатка в них не наблюдается. Правда, по размеру фонотеки с Last.fm никто не может сравниться, но для большинства слушателей это не является принципиальным.
Основатели Last.fm также объясняют причины географической дискриминации. Дело в том, что они просто не могут продавать достаточное количество рекламы для иностранной аудитории, так что в этих странах проект не может окупаться за счёт рекламы, как в США, Великобритании и Германии.
+53
Книга How Do You Design. Справочник по 130 схемам процесса дизайна
1 min
1.5KХью Дабберли и люди из студии Dubberly Design Office проделали огромную работу по поиску и обработке теоретических описаний процесса дизайна. Около 130 моделей составили содержание их книги How Do You Design. Книга написана для образовательных целей и свободно доступна на сайте авторов.
![](https://habrastorage.org/getpro/geektimes/post_images/e6e/d5a/7df/e6ed5a7df62a86f3304ec97efebf09c8.gif)
Кто недавно читал про схему от AIGA и удивлялся сереньким цветам вместо красного — это как раз оттуда. На своем сайте я отдельно перевел и выложил пару наиболее любопытных схем («AIGA» в том числе).
Под катом — еще немного слов про книгу.
![](https://habrastorage.org/getpro/geektimes/post_images/e6e/d5a/7df/e6ed5a7df62a86f3304ec97efebf09c8.gif)
Кто недавно читал про схему от AIGA и удивлялся сереньким цветам вместо красного — это как раз оттуда. На своем сайте я отдельно перевел и выложил пару наиболее любопытных схем («AIGA» в том числе).
Под катом — еще немного слов про книгу.
+33
Схема дизайнерского процесса от Американского института изобразительных искусств (AIGA)
2 min
2KВ Американском институте изобразительных искусств (AIGA) составили схему, разъясняющую процесс дизайна. Под дизайном подразумевается самое широкое его понимание, то есть осмысление, придумывание, разработка и внедрение решения конкретной проблемы.
![](https://habrastorage.org/getpro/geektimes/post_images/442/3f9/9e7/4423f99e7a7b6dde171e4453b1d4eb71.gif)
Будучи остряками, создатели схемы вот так иллюстрируют ее применение:
![](https://habrastorage.org/getpro/geektimes/post_images/c1e/939/b60/c1e939b6075e72e2912deae999557ca3.gif)
Я попробовал прогнать одну свою насущную проблему по этим пунктам и, надо сказать, нашел решение, которое сработало, и сработало так как было задумано.
Подробности по каждому пункту расписаны в моей записи тут: nordisk.pp.ru/design/58
Там же есть ссылка на исходную брошюру, если вам не понравятся мои переводческие потуги :)
Для хабра я немного переписал запись в плане укорочения и выложил под кат.
![](https://habrastorage.org/getpro/geektimes/post_images/442/3f9/9e7/4423f99e7a7b6dde171e4453b1d4eb71.gif)
Будучи остряками, создатели схемы вот так иллюстрируют ее применение:
![](https://habrastorage.org/getpro/geektimes/post_images/c1e/939/b60/c1e939b6075e72e2912deae999557ca3.gif)
Я попробовал прогнать одну свою насущную проблему по этим пунктам и, надо сказать, нашел решение, которое сработало, и сработало так как было задумано.
Подробности по каждому пункту расписаны в моей записи тут: nordisk.pp.ru/design/58
Там же есть ссылка на исходную брошюру, если вам не понравятся мои переводческие потуги :)
Для хабра я немного переписал запись в плане укорочения и выложил под кат.
+47
Information
- Rating
- Does not participate
- Location
- Санкт-Петербург и область, Россия
- Date of birth
- Registered
- Activity