Рабочий процесс современного веб-дизайнера — вебинар (40 мин)
Товарищ веб-разработчик и дизайнер. Умные штуки про адаптацию и протопирование говорит. Стоит послушать и поучиться. Лишним точно не будет!
Ниже краткое описание с ссылками:
Построение работы над макетом:
1. Контент — для всех заметок, статей и контента для сайтов:
markdown онлайн — http://dillinger.io/
2. Скетчи:
- От руки
- Брать части с готовых сайтов-примеров. (коллаж из разных сайтов)
3. Прототипирование.
- Axure
- Balsamic
- divshot.com — использует bootstrap и Ratcet. Можно дать ссылку клиенту, который сможет посмотреть как вы обновляете прототип.
Он условно бесплатен. Но в одном проекте можно создать кучу файлов.
Он в превью показывает вид макета на разных устройствах.
Сайт unicode-table.com — на нем приведены все стандартные иконки в стандартных шрифтах
4. Адаптация.
- Тестирование на устройствах.
- В Хроме есть плагин Responsive Inspector
- Catapulty.com
- browserstack.com -платная прога для тестировании на устройствах, которых у нас нет
- get hb — на сайте есть ссылка которая помогает показать прототип на сайте
- Dropbox — Можно хранить тестовые данные: возможна привязка базы данных (Datastore API)
- override.css — записать основные стили
5. Полировка
- тестровка на retina без retina:
- Windows-firefox.
-about:config
-layout.css.devPixelsPerPx
-Изменить на 2, 4, 1.5 и т.д.
6. Поставка.
- stylifyme.com — собирает всю инфу с ваших css о шрифтах, цветах и т.п.
- kaleistyleguide — генерирует как в Твиттре boostrap но с нашими стилями
- pattern-lab.info Атомы, молекулы, организмы, шаблоны, страницы
designebinrowser.com примеры сайта без фотошопа
Свежие комментарии