Рабочий процесс современного веб-дизайнера — вебинар (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 примеры сайта без фотошопа