Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rest in PS: рабочий процесс современного веб-ди...

Ilya Pukhalski
October 20, 2013

Rest in PS: рабочий процесс современного веб-дизайнера

Еще год назад многие сомневались, что дизайн и прототипировние должно начинаться сразу в браузере. В текущих реалиях это фактически неоспоримо. Слайды на тему сложившегося современного подхода к веб-дизайну: опыт применения, способы, инструменты, трюки и проблемы подхода.

Ilya Pukhalski

October 20, 2013
Tweet

More Decks by Ilya Pukhalski

Other Decks in Design

Transcript

  1. "The different areas of web design include "web graphic design;

    interface design; "authoring, including standardized code "and proprietary software; user "experience design; and search engine "optimization." Wikipedia, October 2011 "
  2. Фотошопить или не фотошопить? — Жесткие рамки ограниченные размером рабочей

    области — PSD статичен — Контент уходит на второй план — Проблемы со шрифтами — Не учитывает возможности браузера — Увеличение объема работы
  3. .icon { display: inline-block; ! color: inherit; ! border: 0;

    ! background: none; ! font-weight: normal; ! font-style: normal; ! font-family: 'serif'; } .icon:before { ! display: block; ! margin: 0 auto; } .icon-heart:before { content: '\2665'; }
  4. /* Mobile styles go first, without media queries. */ @media

    only screen and (min-width: 321px) { /* Larger mobile styles (wider than 320 pixels) */ } @media only screen and (min-width: 600px) { /* Tablet styles (wider than 600 pixels) */ } @media only screen and (min-width: 1024px) { /* Large laptop styles (wider than 1024 pixels) */ } @media only screen and (min-width: 1140px) { /* Desktop styles (wider than 1140 pixels) */ }
  5. @media only screen and (min-width: 1200px) { } @media only

    screen and (min-width: 960px) { } @media only screen and (min-width: 860px) { } @media only screen and (min-width: 740px) { } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 340px) { }
  6. git checkout --orphan gh-pages git add . git commit -a

    -m "Pages: init" git push origin gh-pages
  7. header { ! text-align: center; } .navbar-header { ! width:

    100%; ! text-align: center; ! float: none; } .navbar-nav, .navbar-nav>li { ! float: none; } .navbar-nav>li { ! display: inline-block; }