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

 

 

 

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *