Процесс разработки сайта в картинках

    Три наших персонажа: программист, дизайнер и клиент.


    Шаг 1: Обсуждение

    Естественно, любой проект начинается со встречи с клиентом. На первой встрече вам нужно определить основные направления работы – какой продукт необходимо сделать, какими функциями он будет обладать, какие потребуются материалы (тексты, изображения, и т.д).

    Шаг 2: Мозговой штурм

    Подумайте о том, как вы будете разрабатывать продукт. Что важно, а что – нет? Что должно быть на каждой странице? В зависимости от размера проекта, вам может потребоваться создать визуальную карту сайта. Подготовка карты сайта важна и для правильной организации информации.

    Шаг 3: Каркасы

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

    Каким способом вы будете создавать каркасы – решать вам. Для небольших проектов можно сделать изображения в Photoshop или Illustrator. Для более крупных могут понадобиться каркасы в формате HTML, на которых можно проверить поведение.

    Шаг 4: Планирование контента

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

    Шаг 5: Первоначальный дизайн

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

    Шаг 6: Отзыв клиента

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

    Шаг 7: Доработка дизайна

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

    Шаг 8: Согласование

    Пока все довольны.

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

    Шаг 9: Дизайн дополнительных страниц и элементов

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

    Шаг 10: Утверждение

    И вновь все проверяется, дорабатывается и, наконец, утверждается.

    Шаг 11: Создание HTML

    Теперь можно приступить к созданию HTML-страниц.

    Шаг 12: … и CSS

    Шаг 13: Презентация

    И снова обратная связь с клиентом.

    Шаг 14: Тестирование

    Завершающий этап разработки – отладка. Работу сайта нужно проверить на всех платформах, устранить технические проблемы, проверить ошибки в тексте.

    Шаг 15: Запуск

    На картинке написано «Конец» – но, конечно, вы не возьмете чек и не скроетесь за дверью. После запуска за сайтом нужно посмотреть еще дней 10 или около того, и в случае возникновения проблем исправить их.

    Перевод оригинала тут.
    Оригинал тут.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

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

      +22
      Понравилось :) По-доброму так.
        0
        Пожалуй, не так приятно сначала читать и удивляться, а потом разочаровываться, узнав, что это все-таки японцы.
          0
          А что разочаровало? Японцы по-моему молодцы!
            +1
            Три наших персонажа: программист, дизайнер и клиент.

            Я думал, "наших" означает, что это контора из России такое придумала.
            А что японцы молодцы давно известно ;)
            0
            Довольно странно, что японцы обошлись человечками из конструктора. Думаю, в виде оригами придало лишь шик.
              0
              Делайте в оригами!
                0
                Довольно шаблонное у вас представление о детских писателях, скажу я вам...
                  +1
                  Они должны были взять фигурки Годзиллы…
                  А в России матрёшки…
                0
                Гениальная правда жизни) Только мало отобразили весь дедлайн процесса.
                  +2
                  А где само програмирование?
                    0
                    Возможно тут идет речь о статичном сайте :)
                      +1
                      В последнее время такой завал с работой, что я принял за него многоточие в 12-м пункте.
                      0
                      Кинул в карму подожди наверняка накидают еще и сможешь переместить в " Дизайн пользовательских интерфейсов и юзабилити" :)
                        –1
                        Если не ошибаюсь - было и на nnm.ru
                          0
                          Классно, в избранное. =)
                          Кстати, уже перемещайте, вам помогли кармой уже 6 человек)
                            0
                            вообще понравилось тем, что в картинках...то есть доступно и понятно =)
                              0
                              Вспоминается Чапаев с картошкой.
                              0
                              Пркольно:)И чётко.
                                +4
                                Предвкушал прикол, который выкинет вот уже наконец программер... но так и не дождался, жаль (:
                                  0
                                  Думал что лампочка перегорит и тут начнется самое интересное ;)
                                    –1
                                    12 шаг слишком сложен для оценки юмора?
                                      –1
                                      Нет, но как-то попсово получилось с двоичным кодом этим. IMHO.
                                        +1
                                        если ты увидел там только двоичный код - то значит слишком сложен :)
                                      0
                                      прикол - это то, что он говорит двоичным кодом
                                      +3
                                      Программер клёвый!
                                        +3
                                        Забавно :) Но создаётся впечатление что работа программера не самая важная в веб-разработке и ими управляют дизайнеры :) В жизни, по-моему, всё как раз наоборот :)
                                          +2
                                          Не надо минусовать! Программеры не роботы, программеры тоже люди :)
                                            0
                                            Сайты разные бывают ;)
                                              0
                                              Возможно под дизайнером понимался больше проектировщик, чем художник.
                                              0
                                              Эх...было бы все так просто как на картинках ))
                                                0
                                                очень точно подмечено. как правило практически на каждом этапе баданий между заказчиком и исполнителем хватает на целый сборник комиксов.

                                                хотя это в большей степени зависит от менеджера проектов
                                                  0
                                                  это вводный курс для первокурсников )
                                                  +1
                                                  Гм, а где менеджер проекта?
                                                    0
                                                    судя по картинке 3, роль менеджера проекта выполняет дизайнер.
                                                      0
                                                      Он так быстро передвигался в пространстве, что его не успела заснять камера.
                                                        0
                                                        ну если вспомнили про менеджера, то еще можно добавить тестировщика и бизнеса аналитика)))
                                                        +1
                                                        Красиво и познавательно, но пропущен один важный момент, разработка идеологической концепции сайта (извиняюсь за выражение), ведь структура навигации и контент напрямую зависят от тех целей, которые преследуют потенциальные посетители.
                                                          0
                                                          А разве в первом пункте это не подразумевается?
                                                          0
                                                          Японцы, насколько мне известно по мимолетным урывкам из аниме, обожают дядек в костюмах с "пиратской повязкой" =)
                                                            0
                                                            И конечно же длинные волосы =)
                                                            +1
                                                            Понравилось. Только, вот, верстальщика, как правило, не называют программистом.
                                                              +1
                                                              Прикололо. Особенно понравилась дизайнер (или точнее дизайнерша как мне кажется ;-))))) ). А наиболее запоминаемая сцена где программер мыслит двоичным кодом
                                                              0101100101010101010111110010101
                                                              0101010101010111110101010101010
                                                              1111010101010101010101010101010
                                                                0
                                                                Здорово!
                                                                Только порой этапы утверждения бывают иными.. В нашей сказке - хэппи энд, так сказать. :)
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                    +1
                                                                    на 14ом шаге клиент домогается дизайнера,в реальной жизни это бы случилось гораздо раньше
                                                                      0
                                                                      Хороший заказчик попался, даже "ненужного" элемента не пришлось добавлять :)
                                                                        0
                                                                        процесс разработки глазами дизайнера, программист - робат который стоит где то сзади и делает что типа html...
                                                                          0
                                                                          Прямо сказка какая-то. Все закончилось хорошо, а ведь в реальной жизни бывают и безнадежные проекты.
                                                                            0
                                                                            Програмер примерно на 50% случаев сидит.
                                                                              +1
                                                                              Классно =) А главное все так и есть )
                                                                                –1
                                                                                программер вообще клиента видеть не должен в идеале. как-то странно роли расписаны
                                                                                  0
                                                                                  мне тоже понравилось (:
                                                                                    0
                                                                                    Не согласен я (с) Полиграф Полиграфыч
                                                                                    Шутка, но в каждой шутке дишь доля шутки на самом деле.
                                                                                    Где проект-менеджер? Мое imnsho в том, что обычный, желател талантливый дизайнер и обычный способный программист ну никак не годядтся для общения с клиентом.
                                                                                      +1
                                                                                      А как на счет постоянных фидбэков типа "а давайте вот это чуть-чуть передвинем", "а давайте вот это чуть-чуть перекрасим"? :)
                                                                                        +1
                                                                                        А так же "поиграть со шрифтами" и "подвигать логотипом" :)
                                                                                        0
                                                                                        А этой схеме не хватает менеджера, который будет связующим звеном между командой разработчиков и клиентом. Дизайнерам и программистам не до общения, у них другие задачи.

                                                                                        А там просто отличная история, которая напоминает комикс :)
                                                                                          0
                                                                                          Классно! Хочу таких же человечков на свой рабочий стол :D
                                                                                            +1
                                                                                            Девушка симпатичная среди мужиков — поэтому всё так хорошо и закончилось )))
                                                                                              +1
                                                                                              Вперёд выдвинули самых чистых и опрятных сотрудников, а где-то в самой далёкой комнатке сидят ОНИ. Не выспавшиеся, молчаливые и грязные.
                                                                                                0
                                                                                                Вот было-бы оно всё иак в жизне, а не только в картинках... Эх...
                                                                                                  +1
                                                                                                  Ждите продолжения. Лично от меня :)
                                                                                                    0
                                                                                                    Довольно интересная статейка ;)
                                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                        +1
                                                                                                        позитивненько и все правда! ;)
                                                                                                          0
                                                                                                          это картинки для детей?
                                                                                                          комментарии типа "все так жизненно" вызывают у меня отторжение, в жизни все гораздо корявей получается
                                                                                                          единственный плюс - "все по-доброму"
                                                                                                            0
                                                                                                            Идеалистично, но приятно и настроение чуть чуть подняло =) Спасибо.
                                                                                                              –1
                                                                                                              дежа-вю,.. было уже ведь на хабре, ссылкой не располагаю, но я вижу не в первый раз. я верю своим глазам
                                                                                                                0
                                                                                                                Красочно, ярко и крсиво. Вот бы и в жизни клиенты были пластмассовыми фигурками которые за 2-3 шага становятся довольны результатом и больше не меняют свого решения! :)
                                                                                                                  0
                                                                                                                  большой респект автору за материал, японцам респект за креатив)
                                                                                                                  местами смеялся) в конце рабочего дня самое оно)
                                                                                                                    0
                                                                                                                    Всё как есть на самом деле ))
                                                                                                                    Молодец тот кто это сделал :))
                                                                                                                      +2
                                                                                                                      Придумана Лампочка_БЕЗ_патрона!Эх!Вспоминается случай с моим сотрудником-дизайнером, когда он резал гифы с изображением года для заголовков новостей и его заклинило:
                                                                                                                      2007, 2008, 2009, 20010, 20011, 20012....Самое забавное, что заметили эту оплошность НЕ сразу и теперь это типа местный анекдот)
                                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                          0
                                                                                                                          красивая сказка )
                                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                              0
                                                                                                                              Понравилось! Незнаю как Вам, но мне от жутко напомнило Мультфильм Робоцып (Robot Chicken). В меру испорченности этим зловредным мультом ожидал в конце "трэш" ;)
                                                                                                                                0
                                                                                                                                В избранное, однозначно.
                                                                                                                                  0
                                                                                                                                  Улыбнуло) Я бы относился к этой подборке рисунков, как к мультику, в котором не обязательно должно быть так как в жизни. Где могут не показывать рутину, а как раз самое интересное, как во многих мультах))

                                                                                                                                  Вроде еще никто не подметил небольшую странность, что мозговой штурм дизайнера проходит горизонтально))
                                                                                                                                    0
                                                                                                                                    Красиво)
                                                                                                                                    Все простое - гениально.
                                                                                                                                      0
                                                                                                                                      Может мне кажется, но тут получается, что с заказчиком общается только дизайнер. А прогер, как бы так, на всякий случай. Дак вот, имхо в жизни, такого не бывает. Обычно с заказчиком общается манагер, в сложных проектах манагер + программер. Но никак не дизайнер. В реальности нифига бы у них не вышло таким макаром :) Однако нарисовать можно всё что в голову взбредёт.. а вот сделать...
                                                                                                                                        0
                                                                                                                                        а где проектирование? :( определение ЦА, придумывание персон и т.д.?
                                                                                                                                        какие-то пункты нарисованы которые и так вроде всем понятны, нет?
                                                                                                                                          0
                                                                                                                                          Мне одному клиент «Сами знаете кого» напоминает?
                                                                                                                                            0
                                                                                                                                            Нет, ты не один. :)
                                                                                                                                            0
                                                                                                                                            Я бы программера с двумя головами изобразил, гы гы:)
                                                                                                                                              0
                                                                                                                                              Студентам своим эти картинки покажу! Совершенно наглядно показано, как используются персонажи в проектировании ПИ, а также показан процесс прототипирования.
                                                                                                                                                0
                                                                                                                                                Прикольно! :)
                                                                                                                                                  0
                                                                                                                                                  Классно!
                                                                                                                                                  Вот только не совсем понятно, почему сначала «каркас сайта», а потом уже работа над контентом? Разве можно сделать каркас, не имея контента?
                                                                                                                                                  (возможно, конечно, имеется в виду более подробная проработка текстов и иллюстраций, но все равно, где-то в порядке этих шагов что-то не так =) )
                                                                                                                                                    0
                                                                                                                                                    Конечно можно. Рыбу еще ни кто не отменил. Я бы даже сказал, что не только можно, но и обязательно нужно, ибо в реальном мире дожидаться контента от клиента можно оччччень долго.

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

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