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

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

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

        image

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

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

        Дальше я опишу, что и как делал в процессе. Статья традиционно будет в нескольких частях.
        Читать дальше →
      • Разработка дизайна для приложений МойОфис


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

          Сегодня мы расскажем, как работаем над дизайном приложений МойОфис: как выстраиваем процесс, какие инструменты используем и как проверяем результаты своей работы.
          Читать дальше →
        • Неправильно использованные шаблоны мобильного интерфейса

          • Перевод


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

          Некоторые могут возразить, что следование гайдам может убить творчество, и в итоге все приложения будут выглядеть одинаково. С точки зрения UX, я тут вижу другую проблему. Может казаться, что применение лучших шаблонов, которые используют Google / Facebook / Instagram / [вставить любимое приложение], всегда является отличным решением. Что они ставят себе такие же задачи, что и вы. Вот несколько шаблонов, которые считаются (или считались) лучшими, но в то же время не такие уж они и хорошие, какими кажутся на первый взгляд.
          Читать дальше →
        • Адаптивное масштабирование: дизайн интернет-магазинов для больших экранов

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

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

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

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



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

            Автор — Sebastien Gabriel.

            Я не знаю всего, так что, если по вашему мнению я где то ошибаюсь или вам нужно уточнить что-то, либо у вас есть предложения или вопросы для улучшения данного руководства, отправьте письмо (на англ) на sgabriel.contact@gmail.com. Вы также можете найти на меня Twitter, G+ или Facebook.
            Читать дальше →
          • Как в Pixar решали проблемы со съёмками «Головоломки» (The Inside Out)

            • Перевод
            image

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

            В случае успеха, когда все сделано правильно, ваше внимание захвачено изложением рассказа, а не техническими достижениями, которые делают его возможным. В фильме "Головоломка" у Pixar был свой собственный уникальный набор технических проблем, которые нужно было преодолеть. Большие задумки приводят к большим сложностям, а двойственность истории фильма означала создание не одного, а целых двух миров, не говоря уже о том, что один из главных героев должен был светиться.

            «Головоломка» — история маленькой девочки по имени Райли, которая переезжает в Сан-Франциско со Среднего запада вместе со своими родителями. В какой-то степени, это рассказ о том, как она приспосабливается, и как её отношения в семье изменяются вместе с изменением места проживания.

            Но кроме этого, есть ещё и внутренняя история, рассказывающая об её эмоциях: Радость, Грусть, Страх, Злость и Отвращение. Эмоции, которые влияют на чувства Райли, на её действия и реакции на события в жизни — и это всё отражается при помощи очень хитрой конструкции, которую я не буду разоблачать, чтобы не спойлерить. Двойная история привела к разным интересным проблемам, которые возникают при попытке представить и разделить их так, чтобы это помогло рассказывать историю.

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

            Более человечная камера


            Одной из главных преград, которые нужно было преодолеть, был вопрос о том как снимать фильм, который передаст бурный, экспрессивной мир внутренних эмоций и при этом передать оттенки и нюансы внешнего мира людей.
            Читать дальше →
          • Идем на рекорд: как мы оптимизировали прикрепление изображений в Почте Mail.Ru для iOS



              По внутренней статистике Почты Mail.Ru, 80% файлов, отправляемых по email — изображения. Мы и сами каждый день шлём десятки макетов, прототипов и скриншотов. Конечно, мы захотели сделать такой распространенный сценарий удобнее, и нам это удалось. В результате отправлять фото и видео из нашего iOS-приложения стало гораздо удобнее и быстрее, чем у конкурентов. Например, чтобы прикрепить к письму три фотографии, в Почте Mail.Ru нужно всего пять нажатий. Это на 10 меньше, чем в Gmail, и на целых 13 — чем в Apple Mail. Под катом рассказ о работе над этой задачей, от возникновения идеи до её воплощения, а также несколько тяжелых гифок.
              Читать дальше →
            • Hello World для iPhone на MonoTouch

                Недавно я писал про анонс платформы MonoTouch. Теперь стало доступным подробное видео с созданием Hello World на языке C# с помощью Mono/MonoTouch для iPhone. К тому же, все это делается в MacOS X.