Веб-дизайн та розробка сайтів

Як і кожен майстер, в своїй роботі ми використовуємо різноманітні інструменти, які допомагають нам розробляти сайти для вас, що і є нашою гордістю.

Кожного року цей список трансформується, розвивається, зменшується чи розширюється. Таким чином нам спало на думку, чому б не поділитися досвідом про те, як ми створюємо сайти і які інструменти ми використовуємо з іншими, кому цікава наша робота.

Ми розбили процес розробки на етапи і визначили найулюбленіші технології кожного етапу. Визначені розділи не є жорсткими правилами, це скоріше групи, які можуть вам допомогти відшукати той інструмент, який буде корисний для вдосконалення процесу роботи і результату певної фази розробки.

Веб-додатки і інструменти, які ми використовуємо для створення веб-сайтів:

Зустріч, мозковий штурм, стратегія

Співпраця є початковою фазою планування. Для спілкування з нашими замовниками, формування ідеї і сумісного планування ми використовуємо

Skype – Нашими клієнтами часто є люди з інших континентів. Хоча ми дуже любимо подорожувати, але тривала (і недешева) подорож при кожній потребі колективного обговорення деталей проекту просто неефективна. Skype є найкращим способом організації діалогу з клієнтами і аналізу макетів в реальному часі. Це наш стандартний режим зв’язку при потребі екранізації результатів роботи.

Дошка – Хоча і не цифрова, але немає жодного більш кориснішого інструменту для швидкого схематичного зображення потоків, провідних концепцій і архітектури. Весь вільний простір стін займають такі ескізи, для накреслення яких використовуємо і ватмани.

Google Drive – Для пересилання файлів туди-сюди купувати Microsoft Office зовсім немає потреби. Google Drive є настільки зручним, що ми його використовуємо як основний офісний пакет для бізнес-документів. До того цей інструмент є ідеальним засобом для організації колективного обговорення, збору бізнес-вимог, формування списку поточних справ, графіків часу і ін. Одночасно цей інструмент служить нам для організації архіву робочої документації.

Facebook – Ми часто використовуємо Facebook і інші соціальні мережі, оскільки це величезний інформаційний ресурс, який допомагає відстежувати інноваційні і цікаві проекти, які ми знаходимо в Інтернеті. Це відмінне джерело ідей, які стимулюють наш розвиток на цій фазі проекту, а також дозволяють ділитися з вами цікавою інформацією.

Dropbox – Збір і управління зображеннями, клієнтськими файлами, презентаціями, привілейованою і іншою документацією простіше організовувати через Dropbox. Через настільний додаток легко організувати додавання та надання доступу до файлів, які зберігаються на файлообміннику

Інформаційна архітектура

Ці засоби допомагають визначитися з інструментарієм, оскільки ми починаємо визначати користувацькі потоки, інформаційну архітектуру, прототипи і розробляємо концепцію з вибором фреймворку.

Axure – Потужний інструмент для швидкого макетування додатків веб-сайту, орієнтований під каркасні прототипи веб-сайтів. Інструмент суттєво знижує витрати на проектування веб-сайту, дозволяє швидко в візуальному режимі створити прототип майбутнього сайту, поліруючи його і анотуючи його до затвердження клієнтом.

Balsamiq – Інший додаток, який ми полюбляємо використовувати для побудови макетів користувацьких інтерфейсів. Зручно, гарно і швидко, за що дякуємо позитивним розробникам. Саме швидкість створення макетів стала вирішальною у виборі Balsamiq, адже набагато простіше розпрощатися з незатвердженим проектом, якщо на його розробку витрачено кілька годин, а не кілька днів.

Настінна дошка – Якщо б кожен з команди розробників у фазі проектування архітектури щоразу при внесенні змін на офісній дошці залишав по гривні , то нам не було би потреби стягувати плату за надані послуги. Цей інструмент є безцінним для випробовування ідей  і організації співпраці при вирішенні бізнес-вимог.

Папір і ручка – Якщо настінна дошка не поміщає всіх наших ідей чи ідея виникла далеко від робочого комп’ютера, використовуємо підручні інструменти – вічні (у чорновому проектуванні) папір і ручку. Сила паперових прототипів  полягає в тому, що саме вони дозволяють найшвидше відтворити креатив розробників на носієві і продемонструвати його команді для аналізу. 

Дизайн, презентація

Коли приходить час втілення ідей в життя, тобто час дизайну, без наступних інструментів нам не обійтися.

Adobe Photoshop/Adobe Illustrator – Це провідні інструменти для розробки дизайну довільної складності. Це не є новиною для дизайнерів, це робочі конячки на етапі розробки дизайну, без яких нікуди. Без сумнівів, є і інше програмне забезпечення, але Adobe, як і раніше, є найкращим для створення макетів сторінок, розробки логотипу, арту на замовлення, розробки графіки. Якщо ви недолюблюєте Photoshop, Fireworks також допоможе дизайнеру розробляти професійну веб-графіку з якісною оптимізацією для публікації в Інтернеті.

Join.me – Навіщо платити за GoToMeeting, якщо для спільного використання екрану чи веб-конференції можна використовувати join.me. Все досить просто, ви можете або сплачувати певну суму за повторювальне користувацьке ім’я і конференц-зал, або ж безкоштовно використовувати одноразовий код. Це відмінний спосіб організації сумісної роботи над дизайном з колегами чи замовниками.

Getty Images/iStockPhoto – Ми намагаємося не зловживати зображеннями зі стоків, але іноді до стоків ми звертаємося. Це великі бібліотеки, які надають широкі можливості пошуку, що економить час та зусилля дизайнера.

Розробка

Закінчивши роботу над дизайном ми починаємо роботу над програмною частиною, яка підніме цей проект і зробить його зручним та доступним користувачам. Ось список інструментів, які нам в цьому допомагають.

Zend Studio – Інтегроване середовище, в якому ми як і багато інших розробників по всьому світу, розробляємо і відлагоджуємо наші проекти. Значною перевагою цього середовища є можливість віддаленого відлагодження і профілювання, а також розгортання додатків на всіх популярних платформах. Zend Studio дає нам можливість розробляти для вас додатки мовою PHP, відлагоджувати JavaScript код, швидко аналізувати та виправляти код, виявляти помилки в режимі реального часу, генерувати тести та звітність.

Notepad++ – Найкращий, легкий декстопний редактор коду. Вбудовані шаблони, можливості автозаповнення і повний глянц визначають цей інструмент золотим стандартом при розробці веб-сайту. Вони ідеальні для кодування веб-сайту чи встановлення та налаштування WordPress.

Javascriptcompressor.com – JavaScript може занадто використовувати ресурси, якщо це належним чином не  оптимізовано і не визначено в коді. Якщо ж ви не хочете час завантаження сторінки тратити на роздуми JavaScript, тоді Javascriptcompressor.com вам знадобиться. Достатньо JavaScript код вставити у поле пропонованої сторінки, натиснути відповідну кнопку і як результат отримаєте легший користувацький веб-клієнт.

CSS Compressor – Так як і його JavaScript колега, компресор оптимізує ваші CSS файли для поліпшення ефективності роботи сайту і скорочення часу завантаження сторінки. Роздування коду не вітається, навіть коли ваш користувач цього не помічає. Вичистіть свій код за допомогою зручного інструменту.

Firebug – Якщо ви розробляєте довільні інтерфейсні веб-додатки то співпраця з Firebug вам більше як необхідна. Це хороший інструмент для ідентифікації проблем моделювання, випробовування нових CSS  у вашому браузері і підштовхування елементів на місце їх призначення через дрібні налаштування. Копіюючи стилі і вбудовуючи їх в основний CSS файл ви значно спрощуєте собі життя.

Araxis Merge – Корисний додаток від розробника програмного забезпечення Araxis, який ми використовуємо для порівняння файлів (різного формату), злиття і синхронізації додатків. Порівнюємо ми вихідний код веб-сторінок, зображення, папки, XML та інші текстові файли з їх попередніми версіями. Цей додаток є незамінним при потребі синхронізації директорій чи файлів на дисках.

ColorZilla – Якщо ви плануєте використовувати градієнти для кнопок та інших елементів користувацького інтерфейсу, цей зручний інструмент дозволить визначити параметри налаштування градієнта, а опісля генерує інформацію про стиль CSS, який вам найбільше підійде. Не нехтуйте градієнтом і для полегшення роботи з кольорами спробуйте ColorZilla.

Після запуску

Поставка готового продукту ще не означає завершення нашої роботи. Ітерація є ключовою для підвищення продуктивності та вивчення реального користувацького попиту ресурсу. Ось яким чином ми збираємо дані.

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

CrazyEgg – детальна карта кліків і скролінгу допоможе зрозуміти які саме сторінки найчастіше привертають увагу відвідувачів. CrazyEgg є відмінним способом візуалізації тих елементів сторінки, які на даний час популярні серед відвідувачів. Ви можете помітити, що ваш дизайн привертає увагу, тоді як ваш заклик до дії опускається більшістю користувачів, які не бажають прогортувати сторінку перш ніж зробити замовлення.

А для організації належної роботи студія використовує власну розробку – Ticket Manager, який виконує роль менеджера завдань кожного учасника команди при паралельній роботі над проектом та обліку робочого часу на виконання кожного з завдань. Менеджер призначений для спрощення взаємодії розробників і є засобом управління діяльністю як окремої людини так і діяльністю групи людей.

Ось набір інструментів, без яких ми не уявляємо нашу роботу. Сподіваємося, що даний список ознайомив вас з корисними ресурсами, які полегшать вашу роботу.

Якщо у своїй роботі ви користуєтеся іншими інструментами, будемо раді познайомитися з ними детальніше (не лінуйтеся, пишіть коментарі) і, при можливості, ми впровадимо їх в наш процес розробки веб-сайтів.