Дизайн, Эргономика и Интерфейсы

Как сделать глазам приятно, а рукам — хорошо.

23 блогозаписи

avatar

Переносы слов в Интернете

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Сегодня неожиданно узнал, что это уже реальность, несказанно рад. Теперь можно делать выравнивание текста по ширине, не заботясь о сверхдлинных пробелах. Приближаемся к полиграфии!

Дизайн, Эргономика и Интерфейсы: Переносы слов в Интернете

В браузерах, которые не поддерживают свойство hyphens, можно использовать бесплатную JS-библиотеку hyphenator.
avatar

Мобильная адаптивная верстка и дизайн

Опубликовала в блог Дизайн, Эргономика и Интерфейсы

Проблемы с отображением на старых устройствах, не поддерживающих media query (подгрузка css под определеннное разрешение)

  1. Что такое Viewport, как он работает и для чего вообще нужен
  2. Сказ о двух вьюпортах примерно то же, что и в п.1. — перевод статьи A tale of two viewports — part two
  3. Вёрстка для мобильных телефонов. Уроки Яндекса (презентация)

Общие рекомендации

  1. Краткая инструкция по верстке для моб. устройств
  2. Активная разметка под мобильные устройства  — дополнительно cм. про микроформаты vcard и hcard

Адаптивный дизайн

Адаптивная верстка в контексте мобильных устройств плохо подходит для сегодняшней мобильной связи, с её качеством и тарифами.

  1. Блог http://wedeal.ru  — большая подборка материалов по адаптивной верстке
  2. Как сделать один сайт для всех устройств (Responsive Web Design)  — большая статья на хабре
  3. 62 полезных инструмента для адаптивного дизайна (Responsive web design)

Примеры верстки

  1. http://mediaqueri.es/  — подборка сайтов с адаптивной версткой

avatar

CSS и Ubuntu - пока только вопрос.

Опубликовал в блог Дизайн, Эргономика и Интерфейсы

Приглашаю всех желающих рассказать мне всё, что знаете про совместное существование этих двух понятий.

Вопрос возник не на пустом месте, а в следствии просмотра видеоуроков по CSS на этом канале YouTube. В частности застрял я на уроке №17

Я смотрю эти гайды на работе во время обеденного перерыва(хочу из SEO уйти в верстку) и там для этих уроков завел себе браузер от Яндекса. Он удобный, не пересекается с другими браузерами, заваленными кучей плагинов. Операционная система у меня на работе Windows 7.
До этого момента всё было хорошо, предыдущие 16 уроков я прошел с честью, но стоило мне приняться за 17 про трансформации, как яндекс-браузер взбунтовался, не желая трансформировать iframe.
Я пришел домой и запустил свою любимую Ubuntu а на ней браузер Chrome. И снова неудача, хром напрочь отказался трансформировать iframe не смотря на префиксы -webkit-. Я очень был этим расстроен. Но когда, на следующий день я догадался запустить скрипты из гайда на Chrome, оказалось, что хром под виндой отлично всё схавал и показал всё ровно так как мне и было нужно. Таким образом я пришел к выводу, что проблема с моим браузером Хром конкретно на Убунту и значит есть какие-то хитрости, чтобы запускать CSS в совместимости с Линухом.

Уффффф — не люблю писать в торопях, но вынужден, надеюсь всё доходчиво втиснул в сей опус.

Так вот, жду ответов. Если нужны будут сами скрипты, которые я наваял держите, мне не жалко

HTML
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body>

CSS
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body><!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>трансформации</title> <link rel="stylesheet" type="text/css" href="transformcss.css"> </head> <body> <div id="wrapper"> <div id="conteiner"> <iframe id = "myframe" src="http://www.youtube.com/embed/OmlHKURlvhg?list=PL026CCEB5125879C2" frameborder="0" allowfullscreen></iframe><p> </div> </div> </body>body{ background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png); font: 1em 'PT Sans',Tahoma, Arial; } #myframe{ width: 560px; height: 315px; } #wrapper{ width: 200px; height: 200px; -webkit-perspective: 500px; -moz-perspective: 500px; } #conteiner{ margin: 80px; width: 560px; height: 315px; border: 3px solid #FFF; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: rgba(0,0,0,.2); color: #FFF; text-align: center; font-size: 1.2em; line-height: 150px; -webkit-transform: rotateY(40deg); -moz-transform: rotateY(40deg); }

прошу прощения за отсутствие красоты в коде, он тут так размещается, я не знаю как его написать красивее.

Быть может укажете на ошибку или наставите на путь истинный, или подскажете к какому источнику знаний припасть страждущему путнику?

UPD: По совету уважаемого npofopr, выкладываю ссылочку на более удобочитаемую версию вышеизложеного кода: jsbin.com/asayut/2/edit

avatar

Заставка для... бортового автокомпьютера

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Во время «простоя» или воспроизведения музыки можно было бы показывать альтернативные нестандартные заставки (как на десктопе), приятные глазу. Особенно на сдвоенном просторном сенсорном экране. Сегодня задался мыслью о том, на что было бы приятно смотреть не только водителю, но и пассажирам. На что-то необычное, игровое, фантастическое, нереальное или просто классное. Такие идеи пришли в голову:

Читать дальше
avatar

Вопрос про тренд: 3D-принтеры

Опубликовала в блог Дизайн, Эргономика и Интерфейсы
Дизайн, Юзабилити и Интерфейсы: Вопрос про тренд: 3D-принтеры
Задумалась над тем, что принтеры эти печатают большинстве своем за счет расходников — картриджей с пластиковыми шнурками, стоящих порядочно. К примеру, если накопить и приобрести сам принтер за 1300 зеленых, то 1 картридж обойдется сейчас в 50 зеленых, что дороговато за небольшую поделку, им отпечатанную.
Хорошо бы не только задуматься над удешевлением самих картриджей (что конечно же постепенно и произойдет под влиянием Китая и формирования массового спроса), но и над использованием вторсырья для производства 3D-моделей. Эдакий принтер-переработчик.
Пока не нашла подобных упоминаний в новостях, хотя идея вроде как должна крутиться поблизости…
Если вы читали о нечто подобном или есть соображения по поводу того, какое сырье (дерево, пластмасса, металл...) лучше использовать и как именно можно было бы его перерабатывать меньшими время/энерго затратами — прошу высказать.
avatar

50 бесплатных html5 css3 шаблона

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Дизайн, Юзабилити и Интерфейсы: Free html template

Подборка 50 бесплатных html5 css3 шаблона. Если не полениться и походить по Preview страницам шаблонов и покликать по ссылкам «design by» внизу, то можно найти еще несколько симпатичных вариантов.

avatar

50 обучающих примеров дизайна интерфейсов в Photoshop

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Дизайн, Юзабилити и Интерфейсы: Таблица цен

В подборке собрано 50 обучающих примеров дизайна интерфейсов в Photoshop. Представлен дизайн таблиц цен, диалогов, меню и кнопок. Перейти к подборке...

avatar

Простой генератор шаблонов: Randomizr

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Сделал какую-то штуку, в ней можно поиграть со шрифтами: Randomizr

Она порождает вот такие шаблоны:
Image #1457170, 169.8 KB
Результат можно сохранять, постить пермалинки в свитер, уиии!
avatar

Почему проектирование лучше начинать с массового обсуждения, а не опроса

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Задача: сделать универсальный компьютерный стол, который понравится большинству работающих за ним людей.
Рассмотрены: современные компьютерные столы, продающиеся в магазинах.
В опросе приняло участие 117 человек из необходимой целевой группы.

Читать дальше
avatar

Типографика и оформление сайтов для начинающих

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
Типографика – это графическое оформление текста посредством набора и последующей верстки, а также проектирование внешнего вида печатного или электронного издания или произведения.

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



Читать дальше
avatar

Как выглядели гаджеты в 60-х и 70-х годах

Опубликовал в блог Дизайн, Эргономика и Интерфейсы
21 фото
1. Telefunken KETTY (70's)
image
Специально для любителей ретро и просто любителей прекрасного — отличные примеры дизайна гажетов 60-х и 70-х годов.