• Серьезное проектирование серьезных сайтов. Часть 2. Визуализация

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

    Динамический прототип



    Рис. 9. Демонстрация динамического прототипа для проекта «Маркетплейс».

    На этом этапе мы переходим от аналитики к интерфейсам, к визуальной части. На основе Mind map необходимо спроектировать интерфейсы для каждой функции и страницы. Таких интерфейсов у нас будет много, от нескольких десятков до нескольких сотен уникальных прототипов, а еще есть раскадровки, когда одна страница может иметь ряд состояний, всплывающих окон, выпадающих блоков и т.д. В процессе все прототипы объединяются в один большой динамический прототип и связываются между собой.
    Читать дальше →
    • +19
    • 22,3k
    • 6
  • Серьезное проектирование серьезных сайтов. Часть 1. Аналитика

    • Tutorial
    Почти 4 года назад мы написали одну из самых популярных статей в рунете про проектирование больших проектов с таким же названием, как и эта: часть 1 и часть 2. Только на Хабре её прочитало более 170 тыс. человек, а вообще она публиковалась в самых разных изданиях мира. Более 1000 стартапов использовали наработки из этой статьи для проектирования, и это только те, о которых я слышал и которые нам писали. Но время не стоит на месте, а мы постоянно развиваемся. С тех пор наша технология проектирования значительно эволюционировала и стала еще лучше. В этой статье мы опишем нашу обновленную технологию проектирования и покажем много живых примеров для каждой стадии.

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


    Читать дальше →
  • Системный подход в повышении эффективности работающего веб-проекта

      В Интернете есть много разных материалов о том, как правильно делать новые интернет-проекты, как их потом продвигать, как улучшать уже существующий интерфейс и т.д. Но вот чего нет, так это системного взгляда на проблему поддержки и развития существующих проектов. Многие думают, что это как покупка хорошего нового автомобиля: купил и иногда масло меняешь, может новый коврик купишь за пару лет. На самом деле, это неправильный подход: недостаточно раз в год оплачивать хостинг и домен. Даже иногда вносить доработки недостаточно. Сайт — это инструмент, и он должен работать максимально эффективно. Над всеми успешными сайтами работа идет постоянно и непрерывно.

      В этой статье я постараюсь системно посмотреть на проблемы уже работающих сайтов, а также дать рекомендации, как можно постоянно увеличивать их эффективность. Материал будет полезен владельцам существующих проектов, позволит всесторонне посмотреть на вопросы поддержки и развития с привязкой к экономической эффективности, а для некоторых, возможно, вдохнет новую жизнь в старый проект.
      Читать дальше →
      • +10
      • 6,1k
      • 8
    • Манипуляции пользователями сайта с помощью цветов

        Мы живем во времена, когда люди не привыкли глубоко погружаться в какую-то тему. Это касается и дизайна. Сегодня все ценят победы на различных престижных конкурсах по дизайну, или, в худшем случае, оценивают личным «нравится / не нравится». У нас также есть международные награды по дизайну от Awwwards, Behance и других известных «оценщиков», которые диктуют современную моду в веб-дизайне. Но так ли они важны? Если всмотреться в суть дизайна, то он, как и многое в нашем мире, основывается на психологии восприятия. И психология — это основа любого успешного дизайна. Вы можете победить на конкурсе по дизайну, но сайт при этом будет лишь красивой картинкой, которая абсолютно не достигает поставленной цели. В этой статье мы поговорим о психологии и эффективности дизайна сайта, в частности, подробно разобрав такой важный аспект, как цвета.
        Читать дальше →
      • 9 способов оптимизации производительности Front-End

        • Tutorial
        Поскольку современные браузеры стали поддерживать больше возможностей, а веб-индустрия стремительно перемещается в сторону мобильных устройств, появилась необходимость писать компактный и оптимизированный код, который не заставит долго ждать пользователя, пока загрузится сайт. Front-end хорош тем, что в нем содержится много простых стратегий и конвенций кода, которые мы можем использовать для обеспечения оптимальной производительности. В этой статье мы собрали 9 простых советов, которые помогут с оптимизацией кода.

        Сразу должен сказать, что часть приемов было подсмотрено нами на западных просторах интернетов, а часть добавили мы. В любом случае, в рунете такого материала не было. Нам часто приходится писать большие системы и оптимизировать скорость загрузки, поэтому стараемся бороться за каждый байт. Отсюда и решили написать про эту важную тему.
        Читать дальше →
      • Как мы делали сервис по IP телефонии: с 0 до 1800 клиентов за 3 месяца


          Я давно работаю в стартапах и со стартапами. Тема для меня очень близка, у самого было 5 проектов за 4 года со следующей статистикой: 2 закрылось, 1 был целиком продан большой компании, 1 проект трансформировался в другой. Еще один превратился в небольшой действующий бизнес, а также полностью поменял фокус. По двум проектам привлекались достаточно серьезные инвестиции. Особенно по меркам рунета, порядка ~ 0,5 млн $.

          Все любят красивые истории о том как стартап стал “единорогом”, но мало говорят о том чего ему это стоило. Вот именно об этом и будет моя статья — короткое эссе о личном опыте на конкретном примере успешного проекта.
          Читать дальше →
        • «Великий уравнитель» или способ решить проблему выравнивания по высоте

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

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

            Рис. 1. Порядок отображения группы товаров.

            Читать дальше →
          • Выбор технологий для большого и не очень большого веб-проекта

            • Tutorial
            За годы работы я часто слышу вопросы о выборе технологий для того или иного веб-проекта. Кто-то спрашивает у нас, как у разработчиков, как правильно, а кто-то приходит и просит сделать на какой-то конкретной технологии. Проблема в том, что большинство выбирают технологии по субъективным причинам, и пока я не слышал достойного и понятного рассуждения, которое позволило бы выбрать технологию объективно, основываясь на фактах, а не желаниях. Даже немногие итишники могут правильно выбрать технологию, ведь для этого нужно: понимать специфику проекта, иметь многолетний опыт разработки на нескольких языках, знать, как устроены подобные проекты и т.д.

            Но прежде, чем что-то выбирать, давайте посмотрим, какие технологии бывают, чем они отличаются и в каких случаях какую технологию выбрать.
            Читать дальше →
          • Проектирование большого проекта на примере аналога Alibaba.com

            • Tutorial
            Многие рассказываю о проектировании: как пользоваться Axure или Sketch, какие функции должен содержать сайт, как правильно спроектировать страницу товара. Это все, безусловно, очень полезно, но не показывает полную картину происходящего в проектировании. В интернете даже нет ни одного полного примера технического задания на проекты такого уровня. На самом деле, чтобы спроектировать большой сайт, нужно потратить сотни часов на исследования, прототипирование и разработку подробного ТЗ. В этой статье я впервые в рунете покажу все этапы проектирования и результаты по ним, полный динамический прототип (более 150 прототипов) и большое ТЗ (более 200 страниц описания). Все это мы будем делать на примере проектирования аналога крупнейшей в мире E-commerce площадки «Alibaba.com».
            Читать дальше →
          • Контроль качества кода в перспективе развития проекта

            • Tutorial
            Наверняка всем знакома ситуация, когда развитием проекта упирается в какую-то стену, внедрение новых функций становится все более затратным по времени и финансам. И, к сожалению, нередки такие моменты, когда чаша весов с ценой, начинает значительно перевешивать возможную выгоду от реализации той, или иной функции.

            Это достаточно стандартный и, во многом, привычный ход событий. С опытом, мы пытаемся делать разрозненные попытки улучшать ситуацию, и не допускать ошибок прошлого. Но часто, собрать все в кучу для организации какой-то вменяемой системы времени не хватает. И, какое-либо универсальное решение, до настоящего времени, найти было достаточно непросто.

            Мы разработали автоматизацию по контролю качества кода, которая уже работает в нашей компании и в некоторых других. Данная реализация создана для языка PHP. Ранее она была только для Java и C#. Однако принципы и подходы применимы ко всем современным языкам, поэтому приглашаем к обсуждению этой важной темы.
            Читать дальше →