7 шагов для систематизации процесса дизайна и разработки

Автор оригинала: Joel Reyes
  • Перевод
Систематизация означает создание процессов или предопределенного набора мер, которые предназначены для ускорения выполнения трудоемких и повторяющихся задач.

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

Хранилище фрагментов



Каждый должен иметь хранилище кода/дизайнов. Вы можете использовать как выделенные программы, такие как Code Collector PRO или просто создать отдельную папку для хранения текстовой информации, html и Photoshop файлов с программным кодом и элементами дизайна.

Ниже следуют некоторые идеи насчет того, что вы можете хранить для экономии времени на переписывание кода и создание тех же самых элементов дизайна по несколько раз для разных сайтов и проектов:

  • Формы обратной связи (создайте одну форму с возможностью быстрой его переделки для использования в разных проектах),
  • Управление Пользователями – скрипты авторизации и т.д. (создайте одну систему, которая не будет слишком интегрирована в ваш дизайн с большим количеством кода в файлах шаблона, для большей экономии времени),
  • Платежные системы и скрипты он-лайн магазинов (если вы когда то уже создавали что то подобное, зачем же не использовать эти готовые скрипты снова?),
  • Часто используемые элементы дизайна (кнопки, шапки, макеты, футеры и т.д.),
  • Что либо еще что вы создавали на заказ и что может быть использовано в другом проекте,
  • Для дизайнеров будет весьма удобным сохранение готовых HTML шаблонов с уже вставленным тегом для doctype и ссылкой на списки стилей. Все это сэкономит время при начале работ над новым проектом вместо того, чтобы начать все с нуля.




CodeCollectorPro

Кодекс поведения



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

Это может быть так же легко как говорить, что свойства CSS должны быть определены в следующем порядке:

  • width
  • height
  • color
  • position
  • misc


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

Готовые шаблоны



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

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

Готовые ответы на письма и готовые скрипты



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

В следующий раз, когда вам зададут вопрос типа “Мне нужен сайт, сколько это будет стоять?”, вместо того, чтобы написать сложный и длинный ответ, воспользуйтесь ответом, который у вас уже заготовлен на этот случай. Это может сэкономить от 5 до 20 минут.

Чтобы сэкономить больше времени, напишите частые вопросы и ответы на них в секции FAQ вашего сайта, чтобы вовсе избежать таких писем.

Фреймворки программирования



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

Существует множество фреймворков для дизайнеров и разработчиков.

Фреймворки для дизайнеров



Дизайнерам будет полезло ознакомиться с CSS фреймворками и системами Сеток и Типографики.

Несколько таких фреймворков, достойных внимания:



Blueprint CSS

Blueprint является CSS фреймворком, целью которого является уменьшение времени разработки посредством предоставления сеточной системы и типографических руководств. Доступны также плагины для кнопок, вкладок и спрайтов.



YAML – Yet Another Multicolumn Layout

Еще один HTML/CSS фреймворк, который весьма легок и создан по всем стандартам Web. Из функций можно упомянуть модульную конструкцию.



Eric Meyer CSS reset

Обнулите стандартные CSS свойства браузеров, чтобы всегда начать с чистого листа. Остановите странные ошибки, вызванные конфликтом CSS с браузером.



YUI Grids CSS

Yahoo является другим большим игроком в индустрии фреймворков. YUI предлагает 4 предустановленных настроек ширины страниц, предустановленные шаблоны и весит всего 4кб.



960 Grid

Сеточная система CSS для разработки профессиональных и солидных макетов дизайнов.

Фреймворки для программистов



Использование фреймворка для разработки может тоже быть полезным для вас и вашей команды. Вы можете интегрировать в ваш код архитектуру MVC (Model, View, Controller). В основном это означает, что данные (модель) разделены от контроллера (который берет данные из модели) и комбинирует эти данные с шаблоном (что видит пользователь). Очень часто вы увидите внедренные инструменты и компоненты, которые помогут вам быстрее создавать приложения.

Используя фреймворки вы также сможете уменьшить затраты а также разработчикам нужно будет писать меньше кода.



CodeIgniter

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

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



CakePHP

CakePHP стремится создать “фреймворк быстрого развития”, такой как CodeIgniter. CakePHP имеет большое сообщество, что означает, что при надобности вы сможете быстро получить помощь.



Zend Framework

Расширяя дух и искусство PHP, Zend Framework основан на простоте, лучших принципах объектно-ориентированного программирования и тщательно протестированном исходном коде. Zend Framework сфокусирован на создании более безопасных, надежных и современных Web 2.0 приложений и использует API от таких ведущих вендоров как Google, Amazon, Yahoo!, Flickr, также API от таких провайдеров и каталогов как StrikeIron и ProgrammableWeb.

Zend поддерживает:

  • поддержка AJAX посредством JSON – создайте простые для использования приложения, которые ваши пользователи ожидают увидеть,
  • Поиск – стандартная PHP версия ведущего поискового движка Lucene,
  • Синдикация – форматы данных и простой доступ к ним для ваших Web 2.0 приложений,
  • Веб Сервисы – Zend Framework стремится быть лидирующим местом для потребления и публикаций веб-сервисов,
  • Библиотека высококачественных объектно-ориентированных классов PHP5.


JavaScript Фреймворки



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



jQuery

jQuery упрощает перемещение по страницам HTML, обработку событий, анмиацию и AJAX разработку. jQuery бесплатен, легок, является кроссбраузерным и совместим с CSS3. Наверное, jQuery является самым широко используемым JavaScript фреймворком и в сети можно найти тысячи плагинов и обучающих материалов.

Создайте свой собственный фреймворк



Конечно, если у вас есть время, вы можете создать свой собственный фреймворк дизайна, CSS или программного кода. Это может быть комбинация элементов, функций или свойств, которые вы часто используете, что сэкономит вам время. Вы также можете создавать Photoshop фреймворки. Так как вы будете создавать свой собственный фреймворк, для вас будет легче внедрить его в свой рабочий процесс.

Бухгалтерский учет, управление проектами и работа с клиентами



Данные 3 работы обычно выполняются тремя разными квалифицированными специалистами в полный рабочий день. Тогда почему же вы, будучи фрилансером дизайнером или разработчиком, должны работать со счетами, управлять проектами и общаться с клиентами в одиночку? Пришло время получить помощь. Используя готовые приложения, такие как Basecamp, Highrise и LessAccounting вы сможете быстро и безопасно вести свой бизнес. Это сэкономит как минимум несколько часов в неделю для тех работ, которые вы любите выполнять.

Сайты поддержки пользователей



Поддержка пользователей очень важна, так как обычно все когда-нибудь ломается и это вызовет недовольство клиентов.
Исходя из этого создайте сайт поддержки пользователей, с документацией о том, как настроить e-mail аккаунты, как использовать ваш CMS и тем самим уменьшите количество звонков сердитых клиентов и электронных писем. Использование видео руководство обеспечит то, что даже те клиенты, которые знают о компьютерах очень мало, смогут хоть как-нибудь управиться с вашим продуктом. Вы можете использовать специализированные приложения поддержки, такие как Helpserve, который работает с запросами пользователей о помощи делая все это весьма организованным образом.

Итак, несколько таких идей по систематизации вашей работы помогут сэкономить 5, 10 или даже 15 часов в неделю и позволят не делать одну и ту же работу по несколько раз. Создание таких систем может занять несколько часов, но сэкономленное при их помощи время будет больше в сто раз.
Поделиться публикацией

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

    +6
    «Например, если элемент должен содержать обьявление и должен отображаться в верхнем левом углу, то его название должно быть „#topleftad“ — плохой совет. Намного логичнее называть элемент по своему назначению, а не по его цвету-размеру-позиции.
      0
      а как бы вы назвали объявление в верхнем левом углу?
      • НЛО прилетело и опубликовало эту надпись здесь
          0
          А если через пол-годика этот элемент переедет в нижний правый угол?
          Будет замечательно смотреться:
          #topleftad {
          position: absolute;
          bottom: 0;
          right: 0;
          }


          Какя-то путанница. Имена элементов должны «пояснять свое предназначение» а не положение.
        +2
        Не подскажите аналог Code Collector PRO под Windows?
          0
          кажется не хватает самого главного «пишите документацию!»
            0
            Блин, уже месяц думаю о написании сервиса, по смыслу, видимо аналогичного codecollector.
            А то накопилось всяких мелочей, типа функции добавления окончаний, обрезания строки с точностью до слова и т.д., а вынимать из других проектов каждый раз запарно.
              0
              Оформляем в статический класс типа TextHelpers (TextHelpers::truncate(), TextHelpers::somthingElse()), и включаем этот файл куда нужно)
                0
                Да, в общем то, это так и есть, просто все не ограничивается строковыми функциями.

                Да и вообще, мне кажется, у каждого программиста есть такие кусочки для работы со строками, графикой, почтой, авторизацией, какими-нибудь api и прочим, и систематизировать их было бы неплохо.

                Есть конечно кончно на подобии phpclasses, но, имхо, он убогий, да и какую-нибудь функцию на 10 строк туда как-то нелепо пихать.
                0
                А что мешает выделить это в библиотеку или хотя бы файл с функциями, который подключается (по крайней мере на этапе разработки) к каждому проекту?
                0
                Не мешало бы в наборе полезных программ иметь что-то на подобие «HTMLChanger» для замены текста сразу в большом количестве документов.
                  0
                  Я пользуюсь программой «handy file find & replace». Вот ссылка, если кому надо: znatnado.ru/search.exe (65 Кб). По скорости ничего быстрее найти просто не удалось
                    0
                    Плагин для Far'а Find and Replace. Поиск и замена с использованием регулярных выражений (или без) в выделенных файлах и папках или по маске.
                    0
                    Очень не понравилось то, что не указаны русские аналоги всех приведенных сайтов/сервисов. Я конечно понимаю, что это просто перевод, но если его немножко дополнить, было бы куда аппетитнее.

                    Еще не понравилось про «сделайте шаблоны», считаю, что всегда нужно делать под конкретный проект, а не доставать «заначку», которая сойдет за быстрое решение.
                      0
                      Что хотел сказать автор? Что нужно использовать фреймворки и реюзать код?
                        0
                        Меня малость смущает раздел «Фреймворки для дизайнеров». И что, например, с YUI CSS Grid'ом должен делать дизайнер?
                        Понимаю готовые заготовки с кнопками, окнами и другими элементами интерфейса (системы), а-ля Yahoo! Patterns или Designre's toolbox
                          –1
                          как раз искал чо-то подобное, спасибо за статью, подумываю о использовании кодигнитэра как средства разработки
                            0
                            Когда у вас есть пара свободных часов, вы можете создать несколько дизайнов и создать на них шаблоны, чтобы при надобности просто использовать эти готовые шаблоны — стереотипные умозаключения новичка
                              0
                              1. а что будет, если #topleftad надо будет поставить справа?
                              2. раздел про фреймворки должен находиться в начале.
                              3. для кого эта статья?

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

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