Фото до статті
Анастасія Пономарьова
Журналістка Highload
І тестувальникам, і розробникам, і проджект менеджерам час від часу доводиться займатися фіксацією дизайну (особливо в невеликих компаніях, де можуть легко перекласти суміжні обов’язки). UI дизайнер Ліана Климович підготувала добірку розширень для браузера Chrome, які максимально спростять це завдання.
«Тут йдеться не про сам дизайн, не про створення прототипів чи проектування. А про оперативне рев’ю, швидку перевірку стилів, відступів тощо. Це часто буває дуже необхідно під час роботи на етапі тестування», — зазначила Ліана у LinkedIn.
VisBug — безкоштовний інструмент для налагодження веб-дизайну, створений на JavaScript. Він дозволяє редагувати, переміщувати, вимірювати елементи безпосередньо на сторінці — загалом, коригувати дизайн без необхідності використання Figma чи Photoshop. Він також підходить для перевірки вже розгорнутих дизайнів (QA та PM, дякуємо).
GoFullPage — утиліта, яка допоможе зробити повний знімок поточної веб-сторінки, а не тільки видиму частину. Готовий скрін можна зберегти як зображення або PDF, або навіть просто перетягнути на робочий стіл.
Window Resizer — розширення, яке змінює розміри вікна браузера для емуляції різних роздільних здатностей. Це буде особливо корисно для веб-дизайнерів та розробників, оскільки допомагає тестувати їхні макети в різних браузерних дозволах.
Так, ви можете сказати, що є Webkit Inspector. Але це розширення змінює роздільну здатність вікна самого браузера, і можна оцінити адаптивний дизайн у його, так би мовити, природному вигляді.
Corporate Ipsum — генерує випадковий текст-заповнювач (placeholder) за словом або абзацом.
«QA, BA та FE, будь ласка, використовуйте більш-менш реальний контент для тестів чи вайерфреймів, а не просто qwerty12345. Чим ближчий контент до реальності, тим раніше можна виявити різні помилки, а також зробити дизайн привабливішим для презентації клієнту», — радить Ліана.
Whatfont — найпростіший спосіб визначити шрифти на веб-сторінках. Для перевірки веб-шрифтів достатньо навести курсор. Дизайнер назвала це розширення обов’язковим: це простий доступ до характеристик будь-якого текстового елемента на сторінці (назва шрифту, розмір, колір, насиченість тощо).
Eye dropper — розширення з відкритим вихідним кодом, яке дозволяє вибирати кольори з веб-сторінок, створювати колірні палітри та зберігати історію кольорів. Працює як “піпетка”. Перевага розширення — можливість швидко та легко перевірити правильність кольору елементів.
Головна > Добірки > 6 розширень Google Chrome для роботи над проектом, якщо ви — не дизайнер
Джерело
