Делаем сайт своей компании

    Год назад мы с stervec решили сменить работу. Одним октябрьским вечером мы встретились на кухне девятиэтажного дома и начали воспитывать свое новое детище (старое, кстати, не умерло, а просто спит).
    Назвались — «Девять утра», а заниматься решили интернет-проектами и делать сайты для клёвых компаний нашего региона (для не клёвых сначала не делали).
    Ох, через что нам пришлось пройти и сколько открытий сделать — стыд и позор, но об этом отдельный сказ. Сегодня мы хотим рассказать, в чем была наша основная ошибка.

    Основная ошибка


    Оказалось, что делать что-то для себя — самое сложное. Требовать от себя принятия решения еще можно, а вот смириться с неидеальностью тому же идеалисту stervec было не просто, да и мне не все нравилось до последнего. Мы так увлеклись бизнес-процессами и проектами клиентов, что свой сайт не могли запустить в течении целого года. Вроде подумаешь, сайт какой-то там студии, а вот фиг :-)
    Была бета версия, запуск которой в паблик мы откладывали примерно 8 месяцев, но так и не запустив ее, сделали редизайн, и быстро (пыф-пыф, задача была поставлена — запуститься в кратчайшие сроки) выкатились на www.9utra.ru.

    Про дизайн


    Что мы хотели? С целями вроде сразу сошлись во мнении, что нужен простой, но при этом функциональный сайт, который бы располагал к себе и впечатлял посетителей. Ощущения легкого, но смелого дизайна с ярким акцентом, который предполагал центром дизайна веселую иллюстрацию. Решили, по рукам. На иллюстрации отображаем названием «Девять утра» — начало дня, утро, свежесть, новизна, завтрак, газета, первая чашка кофе, ну и так далее по ассоциативному ряду. Для лучшего вникания в тему сначала собирались референсы, на основе которых подбирались стиль и содержание иллюстрации:

    Референсы

    Потом решили собрать все вместе, откинув лишнее.

    Первая иллюстрация висела на бета версии, которая так и не увидела свет:

    Иллюстрация на бета версии

    Второй вариант рисовался уже к новой версии сайта:

    Скетч к новому дизайну

    Но хотелось чего-то более яркого и живого, плюнули и отрисовали в 3D:

    Отмоделили в 3D

    А остановились в итоге, на этом:

    Финальная иллюстрация

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

    Делаем бэкграунд из мужской жилетки

    В наши планы входило сделать весело и не скучно, потому что работа для нас в первую очередь удовольствие, а уж только потом реанимация удмуртского интернет-пространства ;-)

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

    UPD: Проблему с хабраэффектом решаем. На Мажордомо обижаемся.

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 136

      +3
      Очень хорошо смотрится логотип, а вот фавиконка немного «помятая» да и рендер непонятно зачем висит.
      Почему-то разъехался низ в FF 3.5, появился горизонтальный скролл.
        0
        Спасибо, будем разбираться. Было бы совсем хорошо если бы написали еще OS и разрешение.
          0
          Думаю, проблема в разрешении — чуть чуть убрал сайдбар и всё встало на места.
            0
            Но даже на 1024 разъезжается. Думаю, вам стоит чуть-чуть ужать сайт и «взять» эту планку :)
              0
              Мы на самом деле в первый раз слышим об этой проблеме в FF. Если не сложно отправьте пожалуйста скриншот на timur@9utra.ru.
          0
          логотип смотрится хорошо но не является ссылкой на сайт. разрыв шаблона
            +1
            Только на главной.
              +3
              мне всегда проще тыкнуть на логотип и быть уверенным что я _уже_ на главной чем всматриваться в адресную строку. это рефлексы, и боюсь что не у меня одного.
                0
                Я вот в этом логотипе читаю «минус девять утра» и начинаю искать обман :)
            0
            А мне интересно услышать ценовую вилку, пишу (очередной) анализ ценовых предложений. Можно в личку.
              +1
              По нашему городу, вы можете посмотреть здесь — izh-it.ru/rating/
              По нам, отправим в личку.
              +6
              Логотип студии (девятка в голубом круге), как понимаю, символизирует часы. Мне кажется, круг нужно более стилизовать под часы, например, изобразив менее ярко (или точками) и другие деления часов. Иначе похоже на «минус девять». Это мнение не дизайнера, а человека, который первый раз взглянул на логотип «не замыленным» взглядом.
                +5
                Хаброэффект, завалил Мажордомо :(
                  +1
                  Мда… Мы конечно о этом думали, но что бы так быстро… Стыд нам и позор…
                    0
                    Вам то что:)
                    Это мажордому нужно подумать над серверами :)
                      +1
                      Мажордому надо думать над организацией саппорта (хотя бы музычку включать пока я до них дозваниваюсь) и быстрой смене тарифов если пошли сильные нагрузки. А мы уже подумали и на днях будем менять хостера.
                        0
                        А некоторым, наоборот музыка не нравится :)
                        Правда это в случаях когда оператора надо ждать полчаса :)
                  +3
                  «Сайт возобновит свою работу в течение 10 минут
                  Сайт временно заблокирован. Если Вы владелец сайта, дополнительную информацию Вы можете узнать
                  по телефону +7 (812) 32-007-32, +7 (495) 727-22-78 или e-mail support@majordomo.ru»

                  Хабраэффект?
                    0
                    Он самый. Но что бы так быстро…
                    –2
                    сайт не работает:
                    Сайт возобновит свою работу в течение 10 минут
                    Сайт временно заблокирован. Если Вы владелец сайта, дополнительную информацию Вы можете узнать
                    по телефону +7 (812) 32-007-32, +7 (495) 727-22-78 или e-mail support@majordomo.ru

                    Хабра-эффект?
                      0
                      Бедные клиенты. Хабр завалил их сайты. Сайты на 1 площадке (договоре)?
                        0
                        Клиенты извещены и им принесены извинения. Никто ничего против не имеет, но мы облажались, конечно.
                      –2
                      Всё, упал сайтец. :(
                        –2
                        Мажордомо не выдержал.
                          +11
                          Ну что парни, нормально пропиарились? )
                          Звоните теперь в можордомо ))
                            +1
                            Телефоны раскаляются от звонков туда :)
                              +1
                              Это мажоры попиарились =)
                              0
                              Эх, хотел посмотреть вживую…
                                0
                                Обещаю, что скоро посмотрите. У Мажордомо еще и саппорт без музыки.
                                +16
                                Сайт возобновит свою работу в течение 10 минут

                                Уловка в том, что никто не знает, когда они начались
                                  +1
                                  Не подскажете, десять минут уже прошло?
                                    0
                                    так работает уже ж…
                                      0
                                      Вроде прошло, у меня открылся
                                        +1
                                        Нет, прошло 5 минут от звонка в Мажордомо, но с человеком до сих пор не можем поговорить.
                                          +1
                                          А ковер (беграунд) должен медленнее контента двигаться? А почему? :) ff3.5
                                          0
                                          Сейчас работает. Надолго ли…
                                          +1
                                          Схема жёсткая, очень не интуитивно
                                            +2
                                            Сделать привычнее?
                                              0
                                              Диаграммой было бы тоже удобно, но это какая-то не правильная диаграмма. Вы потеряли её читабельность
                                            +1
                                            s3.amazonaws.com/floomby/11_30_2009/FUfNl4qunUau2AsJJkEJIA.jpg — стоит ставить неразрывные пробелы после «и», «не», «но», «у»…
                                              0
                                              Спасибо. Поправим.
                                                0
                                                Да ну, это уже мелочи, имхо (я в курсе про типографы, если что, но они такую кашу в исходниках делают..).
                                                  0
                                                  Несколько   — это не каша. Вы на каждом сайте в исходники смотрите? :-)
                                                  Я нет, только тогда, когда есть что-то интересное, но там и неразрывные пробелы непроблема.
                                                  Кроме того, исходники смотрю Firebug'ом, ему любая каша под силу.
                                                    0
                                                    а я почти на всех сайтах где бываю смотрю исходники… что-то приглянется, что-то понравится, что-то возьму на заметку)
                                                      +1
                                                      Что поставить неразрывный пробел можно и не писать &nbsp, а ставить неразрывный пробел :-)

                                                      Ой, там cp1251, ужас.
                                                        0
                                                        Нет, там utf-8, зря ужасаетесь, просто неразрывный пробел слишком трудно визуально отличить от разрывного!
                                                          0
                                                          Ой, верно. Тогда в http-equiv поправьте, а то как-то не красиво выходит =)
                                                          Чтобы визуально отличать неразрывный пробел от разрывного, надо настроить свой текстовый редактор соответствующим образом :-)
                                                        0
                                                        Там не только nbsp, там еще блин появляется куча спанов class=«nobr», какие-то левые обозначения для тире, в общем абзац нормального читаемого текста превращается в нечитаемый код!
                                                          0
                                                          Какими-то не такими типографами Вы пользуетесь. Вот как делает typograf.ru: s3.amazonaws.com/floomby/11_30_2009/uMaOr17fLkeynIL1ORtwA.jpg
                                                            0
                                                            Nobr вроде невалидный в HTML 4.01, потому и использую спан, а так все то, что я и написал.
                                                    0
                                                    У вас же оказывается есть блог компании на Хабре, что не там разместили? :)
                                                      0
                                                      В портфолио на скринах ваших работ радует надпись «Google» в поисковой строке :)
                                                        0
                                                        Принести радость людям это самое главное :)
                                                        +10
                                                        Один я вижу -9 (минус девять) утра??
                                                          +1
                                                          Нет, не Вы один. Некоторые видят, некоторые нет. Мы не видим, но наши дизайнеры стирают руки в кровь и рисуют новый лого. Один уже ушел на больничный.
                                                            +1
                                                            Я бы вместо "-" нарисовал пупсик :)
                                                              0
                                                              трудно не увидеть -9, это первое что приходит на ум, а если вы хотели часы так и нарисуйте часы :)
                                                            0
                                                            Хабра эффект сработал grab.by/SAm
                                                              +1
                                                              Я бы вместо "-" нарисовал пупсик :)
                                                                0
                                                                Пупсик? :-)
                                                                +4
                                                                а мне рендер совсем не нравится. промазали с материалом хлеба (сейчас жёваная плотная бумага), салфетка из кожи, юсб-флешка с бумажной плоской штукой вместо металлической объёмной. кружка в на нас смотрит прямо, ручка у неё при этом почему-то искажена (или просто ручка кривая?). тени все рисовались вручную, да? они совсем неправильные (под очками, под ручкой, под «не проспи новый день» особенно заметно. у чашки тень, как будто она в высоту с вишенку)
                                                                :(
                                                                при этом слева ложка с вилкой выглядят намного вкуснее.
                                                                  0
                                                                  Техдизайнеров издалека видно =)
                                                                    +1
                                                                    да я даже и не техдиз. учу 3д и как раз сейчас бьюсь над реалистичностью шейдеров, в частности бумаги и предметов с подповерхностным рассеиванием.
                                                                    техдизы думаю просто в обморок попадали
                                                                  +3
                                                                  3D явно не стоило делать. Все ненастоящее, а ложка алюминиевая, как из столовой :)
                                                                  Сфотали бы лучше предметы.
                                                                  З.Ы. Портфолио понравилось, удачи.
                                                                    0
                                                                    Спасибо!
                                                                    +3
                                                                    Ух… Что за давняя мода скриншоты в портфолио обрамлять Сафари :) Посмотреть как сайт смотрится в браузере?.. Так Сафари один из непопулярных браузеров. Лучше, в таком случае, выбрать уже IE.

                                                                    PS: Сам пользуюсь именно Safari :) Просто было очень интересно чем вы руководствовались при выборе «браузерной» рамки.
                                                                      0
                                                                      Потому что дизайнеры любят Мак. Под Мак самый нативный браузер Сафари.
                                                                        +1
                                                                        Ну если следовать идеологии Мака, то рамок вообще никаких не должно быть :) Там нет левых и правых бордеров как в Windows.
                                                                          0
                                                                          Я не успел посмотреть сайт оной компании.
                                                                          Но предполагаю, что вы приняли за боковые бордеры стандартную тень, которую рисует макос.
                                                                          pic.ipicture.ru/uploads/091130/2A5GV6q1if.png
                                                                            0
                                                                            Я сам маковод… и знаю, что такое тень, и что такое бордер :)
                                                                            Просто у Мака слева и справа во всех окнах бордер 1px solid, а у Windows бордер 4px solid.
                                                                            Но это уже совсем другая история;)
                                                                        0
                                                                        Он самый нейтрально-симпатичный для этой цели ;-)
                                                                          +2
                                                                          Да, тут не поспоришь :) По мне так куда лучше вообще без браузерного фона.
                                                                        +1
                                                                        первый вариант который так и не увидел свет имхо получше будет.
                                                                          0
                                                                          Вы просто полную версию не видели ;-)
                                                                          –2
                                                                          Заебал уже этот серенький шрифт-стиль написания заголовков. Сговорились все чтоли?
                                                                            0
                                                                            Заговор, уверяю вас.
                                                                              0
                                                                              Теперь по существу:
                                                                              — логотип — это минус девять
                                                                              — Портфолио Услуги контакты — Ах! Это меню!
                                                                              — рендер ужасен, ложки разного цвета и на всех одинаковое неправильное отражение; круасаны никто не ест, потому что начинают подгнивать; мне жаль если вы пьёте кофе такого цвета, а рядом что? неужели сахар?
                                                                              — «Сильным надо помогать, а слабые пробьются сами.» — знающих оригинал фразы в явно повеселили
                                                                              — Турбомозг выглядит не так :)

                                                                              Но, несмотря на это — вы молодцы, потому что всё исправите, будете работать и не загнётесь как большинство.
                                                                            0
                                                                            А что за модель часов у вас изображена не помните? :)
                                                                              0
                                                                              Или это выдуманные?
                                                                                0
                                                                                Одной модели с ножницами на вашей аватарке, я уверен =)
                                                                              +2
                                                                              На сайт взглянуть нет возможности — не работает ваш хостер, но глядя на иллюстрации хотелось бы поинтересоваться, разве не было бы проще все предметы вместо того, что бы рисовать в 3D, сфотографировать?

                                                                              Мне кажется, что результат больше соответствовал бы «чего-то более яркого и живого»
                                                                                0
                                                                                Иллюстрация на раз, фотографировать нам не так интересно было.
                                                                                Огрехи в плане физики есть, углубляться не стали потому что хотели поскорее запустить (ведь как оказалось, для себя очень сложно выпустить все быстро).

                                                                                Будут там и фотографии и отрисованные как живые всякие штуки ;-)
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                +2
                                                                                Оказалось, что делать что-то для себя — самое сложное. Требовать от себя принятия решения еще можно, а вот смириться с неидеальностью тому же идеалисту stervec было не просто, да и мне не все нравилось до последнего. Мы так увлеклись бизнес-процессами и проектами клиентов, что свой сайт не могли запустить в течении целого года.

                                                                                О да, это есть проблема. Вам хоть повезло вы в течении года смирились хоть с каким-то вариантом, а есть люди которые так же увлеклись заказами клиентов, что не могут сделать себе сайт уже как пять лет, каждый из вариантов умирал раньше чем был доделан до конца. Мы даже думали нанять другую студию что бы она делала нашей студии сайт =))))) но и тут мы встретились с проблемой, выбора той самой студии которая бы сделала нам сайт. Для таких подвигов надо иметь холодное восприятие реальности, и задвигать на собственные стремления к идеалам.
                                                                                  +1
                                                                                  Когда мы осознали это, незамедлительно забили на высокие идеалы и теперь, как видите, исправляем все на лету. Да, это не правильно, да — плохо. Но это лучше, чем быть безымянной компанией без сапог.

                                                                                  Пять лет — вот это срок! :-) Сейчас уже доделали?
                                                                                    0
                                                                                    нет =) до сих пор нет, но думаю после ваших описаний предпримем меры
                                                                                      0
                                                                                      Рад, что наш опыт заразителен :-)
                                                                                  0
                                                                                  страница Портфолио уже чем все остальные ((
                                                                                  Chrome 3.0.195.33
                                                                                  windows 7
                                                                                  1366x768
                                                                                    0
                                                                                    спасибо за фидбэк, проверим!
                                                                                    0
                                                                                    картинка на главной очень плохо обработана
                                                                                      0
                                                                                      Рендер не нравится?
                                                                                        0
                                                                                        а это еще и рендер, ну рендер тоже надо оформлять
                                                                                      0
                                                                                      А это так задумано, что div id=«menu_index» шириной во всю страницу и менюха доступна и на картинке?
                                                                                        0
                                                                                        Спасибо. Исправим.
                                                                                        0
                                                                                        В 9 утра обычно встают, а у вас логотип еще спит, мне показалось.
                                                                                          0
                                                                                          Если честно, то у нас все спят в это время ;-)
                                                                                          Вы считаете он веселиться в девять утра должен? :-)
                                                                                            +2
                                                                                            Ну хотя бы стоять! =)
                                                                                          –1
                                                                                          Хабраэффект настиг :)
                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                              +1
                                                                                              +1
                                                                                              title жгет :)
                                                                                              +1
                                                                                              Признаться, у меня ассоциация с рисунком скорее негативная: бардак.
                                                                                              Накрошили круассаном на флешку и очки, карандашом в вишенку тыкаете…
                                                                                                +1
                                                                                                Чертов Мажордомо!
                                                                                                  0
                                                                                                  Ох, по моему вы джипег пережали, на надписи «не проспи новый день» видна грязь.
                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                      0
                                                                                                      Он поднимается, но тут же опять ложится… Просили их перевести нас на новый тарифный план. Обещали послезавтра. Мы на них обиделись.
                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                          0
                                                                                                          Спасибо большое. Чертовски приятно.
                                                                                                      +2
                                                                                                      Логотип похож на Packman. Только в шлеме и смотрит в другую сторону.
                                                                                                        +1
                                                                                                        Еще он похож на Радио-Т :)
                                                                                                        0
                                                                                                        в итоге, о чем пост?
                                                                                                          0
                                                                                                          Мы старались передать наш опыт и рассказать в кратце о таком маленьком пункте как «проекты для себя».
                                                                                                          Вам не понравилось?
                                                                                                          +1
                                                                                                          Понравилась эволюция стрелок на часах ;)

                                                                                                          По–любому, молодцы. Хотя мне вариант с квадратиками–картинками кажется свежее и интереснее. Но на вкус и цвет… ;)
                                                                                                            +1
                                                                                                            А у меня такая жилетка %)
                                                                                                              0
                                                                                                              Мило.
                                                                                                              Что бросилось в глаза:
                                                                                                              — Очки только некрасивые и выбиваются из общей массы вещей.
                                                                                                              www.9utra.ru/service/ схему можно подумать как поюзабильнее обыграть.
                                                                                                              Ну и «Вкусни, Сочни!» малость не в тему (а может и в тему) :)
                                                                                                                +1
                                                                                                                У меня монитор грязный или вокруг «Не проспи новый день» артефакты?
                                                                                                                  0
                                                                                                                  Монитор чистый, а вы правы. Пережмем!
                                                                                                                  0
                                                                                                                  Я так и не понял, что Мажордомо сказал на хабраэффект? Это не гуд, я скажу.

                                                                                                                  По теме: а мне нравится, за исключением, конечно, "-9".
                                                                                                                    +2
                                                                                                                    Мажордомо отказался быстро поменять тариф за любые деньги. Потребовали такой кучи волокитной работы с документами и переносом данных, что мы расплакались и убежали. За последние несоклько часов сайт вроде не падал. Хотя количество посещений конечно снизилось.
                                                                                                                    0
                                                                                                                    Главную с отключенными картинками в браузере смотрели? :)
                                                                                                                      0
                                                                                                                      да, без картинок все расползлось по горизонтали
                                                                                                                      –1
                                                                                                                      Взглянул в раздел портфолио. Ткнул первый сайт www.udmkk.ru/ и увидел www.sipnet.ru/. Мде
                                                                                                                        0
                                                                                                                        Завидная у Вас фантазия.
                                                                                                                        Похоже цветом фона?
                                                                                                                          +1
                                                                                                                          Возможно у вас вирусы, вам стоить быть аккуратней.
                                                                                                                          0
                                                                                                                          На главной странице почти ничего нет, но при этом приходится прокручивать страницу ради последних 5-6 см. Монитор стандартный 19". Сделайте, чтобы умещалось целиком.
                                                                                                                            0
                                                                                                                            И уберите неприятный мозг из фильмов ужасов или пособия по анатомии.
                                                                                                                            0
                                                                                                                            Первое что бросилось в глаза, сделайте фон фиксированным, ему незачем двигаться при скроллинге страницы.

                                                                                                                            Ссылки на главной не выглядят как ссылки (портфолио, услуги, контакты), как будто просто заголовок.

                                                                                                                            Мозг на тарелке как-то не очень аппетитно выглядит, особенно после кофе с круасанами.
                                                                                                                              +2
                                                                                                                              А мне очень понравилось. К дизайну отношения почти не имею, зато имею вкус. Очень приятный дизайн, 5+!
                                                                                                                                0
                                                                                                                                Ижевскому стартапу однозначный плюс!
                                                                                                                                  0
                                                                                                                                  Подскажите, где такие жилетки продаются?
                                                                                                                                    0
                                                                                                                                    Не плохо, но:

                                                                                                                                    1. У всей графики тень под motion blur'еная, а у вилки с ложкой просто гошн блюр.
                                                                                                                                    2. У каждого объекта иллюстрации свой вариант падения света
                                                                                                                                    3. В Контактках много пустоты
                                                                                                                                    4. Турбомозг — тубомилк, м?

                                                                                                                                    Вообще ощущение что делали сайт на скорую руку, не хорошо.
                                                                                                                                      0
                                                                                                                                      Блин, я понимаю, что извращенец. Но первое, что я увидел на сайте, это «ПУК» :)
                                                                                                                                      «П»ортфолио
                                                                                                                                      «У»слуги
                                                                                                                                      «К»онтакты
                                                                                                                                      Или так и было задумано? :)
                                                                                                                                        0
                                                                                                                                        Да, это мы клиентов зомбируем. зЗЗЯЩЩЩ жЖЖЫЩЩЩ.
                                                                                                                                        0
                                                                                                                                        На сайте между пунктами меню

                                                                                                                                        Портфолио
                                                                                                                                        Услуги
                                                                                                                                        Контакты

                                                                                                                                        сделайте, пожалуйста, побольше расстояния, они у мя прям сливаются.
                                                                                                                                          0
                                                                                                                                          это ерунда по сравнению с тем, что мышь в километре от слова, но на него можно нажать. я бы добавил это в 11 пункт списка 10 ошибок интерфейса.
                                                                                                                                          в целом на грани провала имхо
                                                                                                                                          +1
                                                                                                                                          Ссылка на данную статью, которая находится на вашем сайте, выходит за поле.
                                                                                                                                          Не понравился фон — режет глаз.
                                                                                                                                          Искал логику между 9-ю утра, веб-разработкой и вещами. Не нашел. Видимо идея была, что утро начинается с кофе, свежая голова, куча мыслей, энергия, но… логика туманна.
                                                                                                                                          Не понравилось слово «Турбомозг». Сразу вспоминается улица Удмуртская, универ, 2-ой корпус… Вообщем как-то провинциально что ли…
                                                                                                                                          Все это — мои измышления, я не говорю, что плохо :)

                                                                                                                                          Понравился, как ни странно, белый фон.

                                                                                                                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                                                                          Самое читаемое