Печатная верстка – сетки

https://www.myfonts.com/foundry/Berthold/Многие значительные успехи в области визуальных коммуникаций подкупают именно простотой, ограничением изобразительных средств до абсолютно необходимых.

 

Антиква (serif) – Брусковые (slab serif) грубые засечки Египетские – Гротеск (sans) – Акцидентные рукописные (script) – декоративные

Гарнитура – Начертание – Кегль – Кернинг – Леттеринг

Ширина шрифтов condensed – extended – моноширинный

Типометрическая система – фут – 30см – 798 пунктов

Garamond – Caslon – Baskerville – Bodoni – Clarendon – Berthold – Times – Helvetica – Univers

  • Соотношение кегля и интерлиньяжа
  • Ширина полосы набора 10 слов 50-70 знаков. Не слишком длинная, не слишком короткая.
  • Заголовки по ширине основного текста.
  • Заголовки отступы от края.
  • Пропорции полей – если поля велики – страница слишком загружена, при небольших – пальцы читателя попадают на текст.

  • Колонцифры – выравнивается по полосе набора.
  • Текстовый и заголовочный шрифты – не смешивать шрифты одного стиля

 

  • Должна ли полоса набора состоять из одной, двух, трех или более колонок? От ширины полосы набора зависит размер кегля.
  • Какого рода текстовая информация должна быть набрана на этой полосе?
  • Есть ли в тексте маргиналии или сноски?
  • Есть ли в тексте иллюстрации и подписи?
  • Если с текстом надо комбинировать иллюстрации, сколько иллюстраций в общей сложности?
  • Сколько из них нужно напечатать в большом формате, сколько в малом?
  • Нужно ли, макетирую полосу набора, оптимально заполнить страницу, т.е. оставить только маленькие поля, или незапечатанное пространство полей должно работать, создавая общее гармоничное зрительное впечатление?
  • Должна полоса набора быть узкой, а боковые поля – большими или макетировать широкую полосу небольшой высоты?

Во многих случаях полоса набора – ясные пропорции высоты и ширины к формату страницы с учетом пространства полей.

Верхняя граница модульной сетки должна проходить по верхней линии прописных букв, нижняя граница совпадает с линией нижних выносных элементов строчных букв.

 

 

 

Radio Buttons vs Drop-Down Menus

Radio Buttons vs Drop-Down Menus

Radio buttons

  • When You Want to Emphasize Options
  • When You Have Less Than 5 Options
  • When Comparison of Options Needs to Make Clear
  • When Visibility and Quick Response Is A Priority

Dropdown menu

  • When Default Option Is The Recommended Option
  • When A Large Number of Familiar Options Are Available
  • When You Have More Than 7 Options

Colors

https://kolosek.com/a-website-with-a-black-background-design/#.Wuq_zcCsC7A.twitter

http://alistapart.com/article/mixing-color-for-the-web-with-sass

Color in UI Design: A (Practical) Framework

https://medium.com/s/story/the-mystery-of-color-e45ab2faa6a4

Darker variations:

  • Brightness decreases
  • Saturation increases
  • Hue (often) shifts towards a luminosity minimum (red, green, or blue)

Lighter variations:

  • Brightness increases
  • Saturation decreases
  • Hue (often) shifts towards a luminosity maximum

Fantastic “Color Fonts” and Where To Find Them

Herman style generator

Design with gradients

adaptive email

Задача.

Адаптивный шаблон товарной рассылки. учитывать все почтовые клиенты

 

Первый вариант.

Шаблонизатор Zurb foundation for emails

Есть два компьютера 1) стационарный windows 10- работающий через корпоративную proxy. 2) macPro.

На первом возникли сложности с настройкой nodejs через корпоративную proxy. Настройка npm

https-proxy=http://username:password@proxy:port/
proxy=http://username:password@proxy:port/
strict-ssl=false

На маке пакет foundation-cli установился без проблем.

Преимущества пакета от foundation в том, что он позволяет верстать используя внутренний парсер tiny.

Код пишется тегами <container><row> , с использованием сетки с классами для мобильного и обычного отображения блока (по аналогии с Foundation for site/Bootstrap); Стили подключаются внешним файлом(можно выбрать CSS или SCSS); Можно верстать используя обычные классы;

При парсинге стили вставляются inline каждый тег отдельно, верстка переделывается в табличную. Результат, чище код, удобнее верстать.

На освоение библиотеки ушло около дня-двух. Все похоже на те же bootstrap и foundation.

Для тестирования

  • Litmus за 80$ в месяц.
  • putsmail  позволяет отправлять код рассылки на указанные адреса и руками открывать клиенты.

Доступные клиенты: mail IOs iPhone6, safari mob gmail, android / Outlook 2010,

Первый день

Макет с шапкой, навигацией, главным баннером, сетки товаров из 3 карточек, логотипами и подвалом.

Основные клиенты gmail, mac mail почтовик, mail, yandex отобразили верстку корректно и на мобильных и в приложениях. Адаптация работает.

День второй

Тест-01-02

проблема в Outlook и iphone5 из-за маленького разрешения экрана (320px плюс даются отступы по бокам). После тестов стало понятно, что Outlook, отображает сетку корректно, но при загрузке картинок не масшатбирует и отображает в реальном размере.

Решение использовать исключение для Outlook. задавать максимальную ширину контейнера.

<!--[if !mso]><!--><table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0"  style=" max-width:600px!important; width:100%;"><!--<![endif]-->
<!--[if gte mso 9]><table  align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600" ><![endif]-->

Третий день

test-04

Проблема, Outlook отображает картинки в их реальном размере, так же как и максимальный размер таблицы 600px заданный в исключении для outlook.

style width, height. атрибуты тега img wight height игнорируются outlook.

test-05

Текущее решение, подмена картинок для Outlook.

<!--[if gte mso 9]>
  <img src="http://placehold.it/175x175" alt="товар" class="card-body-img"
  style="-ms-interpolation-mode:bicubic;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto">
<![endif]-->

<!--[if !mso]><!-->
  <img src="http://cdn2.top-shop.ru/55/dc/big_fd307a857c1260357645dddfdedddc55.png" alt="товар" class="card-body-img"
  style="-ms-interpolation-mode:bicubic;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto">
<!--<![endif]-->

Для всех клиентов загружаются изображения любого размера, и изменяют размер в зависимости от свободного места. В Outlook загружаются изображения с размером не ломающих сетку рассылки.  Минус – создание двух изображений карточек товара при разработке макета. Парсер дублирует код, вырастает общий размер исходника.

Задача – найти возможность заблокировать ширину Общей таблицы для Outlook.

Responsive Email Templates in Outlook: Tips and Pitfalls

  • Outlook 2003 used IE6 for render
  • Media query are not supported
  • CSS in head section is ignored (css inline tool)
  • Background-image, float, margin, and display – ignored
  • Applying padding or width in CSS to a div or p tag will not work with Outlook

Ссылки в меню Outlook делает синими – временное решение – использовать тег <font></font> (fixed решается добавлением класса).

Стили подключаемые для мобильной верстки @media-query требуют установки атрибута !important. Query в header, inline стили их перебивают.

 

https://newsignature.com/articles/responsive-email-templates-outlook-tips-pitfalls/

Email Design Checklist

Putsmail send test message

CSS inliner tool

Zurb foundation for emails

Guide to CSS

 

Basic UI/UX

Top tasks

What is the purpose of a visitor coming to your website? And how can we make the journey of that visitor a pleasant journey?

 

  • The interface should feel native to the device the person is using
  • The app should be lightweight and require as little storage as possible
  • The interface should be simple
  • User actions and animations should be quick to respond
  • Features should provide obvious utility so they require little introduction

If the feature needs explanation, it’s not ready.

3 C’s: Containers, Content & Components

  • Rule for Containers uses the concept of Square Inset (uses 16px)
  • Rule for Content uses the concept of Stack (Header stack uses 2px and leaf-node stack uses 0,4,8,16px depending on content type)
  • Rule for Components use the concept of Inline (uses 8px for most cases, 4px for association relationships)

Dan Saffer’s “Microinteractions”

Triggers: the user-initiated or system-initiated action that starts the microinteraction (Example: a submit button, a light switch)

Rules: the capabilities and constraints in the microinteraction; what can and cannot be done in a microinteraction (Example: a date picker for an airline allows you to select departure and returns dates but neither date can be in the past)

Feedback: the visual cues that tell the user what is happening (Example: a red warning icon appears when the user’s password is incorrect, the flash on the screen when a user takes a screenshot, the dwindling character count as you type out your tweet)

Start with objectives

Design is not just how it looks, but how it works

  • Your business objectives. It’s the action you want visitors to take on the site.
  • User objectives, the desires or needs that they want to satisfy.
The first step in a flow is mapping out how they get onto your site.
Your goal is to map users paths.
Designing user flows
  • Organic search. A user comes via Google, after searching for a particular keyword. Often lands on a deep link.
  • Paid advertising. Visitors that come via PPC advertising (AdWords etc), banner ads or other kind of promotions. Arrives on your landing page.
  • Social media. A user coming from a friend’s post on Facebook or Twitter, or via social news site like Reddit.
  • Email. A user coming from an email newsletter or a link they saw in an email sent to them.
  • Press or news item. Visitors who come after a mention in the news or a blog post.
  • Direct link. A regular visitor, has been on your site many times and knows the URL by heart.
The steps in the flow depend on your users and the product
  • What needs or desires do your visitors have? Which problem do they want to solve?
  • Why do they need it?
  • What qualities (about your product or service) are most important to them?
  • What are all the questions they have about the product?
  • What are their doubts or hesitations?
  • What information do they need to take action?
  • What’s their emotional hotspot to propel them towards taking action?
Present sufficient information
  • In each step present a clear, benefit-oriented value proposition.
  • Explain how your offer is useful and how it all works. Invite to read more detailed information.
  • Back it up by easy-to-digest proof points (references, testimonials, studies etc).
  • Minimize friction. Ask for the minimum amount of information, reduce the number of fields, extra clicks and page-loading time. Use trust elements.
  • Create clear and attractive calls to action that guide them to the next step

The mistake a lot of websites make is asking for the sale (signup etc) too soon. There’s little we  people do without the adequate amount of information.

10 Usability Heuristics for User Interface Design

  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help users recognize, diagnose, and recover from errors
  • Help and documentation

Recognition Recall

  • items that visited recently
  • history
  • favorites, wish lists, shopping lists

Gestural interfaces move us back to the era of recall, because they require users to remember the gestures that they can make in a given context.

Instead of showing general tutorials, use tips that are tailored to the page that the user is visiting

How easily information can be retrieved from memory depends on how often we’ve encountered that information, how recently we’ve used, and how much it is related to the current context. Richer contexts (like those present when we use recognition rather than recall) make memory retrieval easier. Interfaces that promote recognition give users extra help in remembering information, be it about tasks and items that they had seen before or about interface functionality.

 

https://www.invisionapp.com/blog/design-for-the-human-brain/

Design thinking re-envisioned for the modern enterprise

Ninja

Матрица поддержки браузера

  • Ожидания и потребности целевой аудитории
  • Доля браузера на рынке
  • Затраты труда на поддержку браузера

 

Interactive

CSS triggers

Transform – doc2

 Transition

 property name | duration | timing function | delay 

Animation

  • Keyframes – define the stages and styles of the animation.
  • Animation Properties – assign the @keyframes to a specific CSS element and define how it is animated.

 

 

Статьи

Using CSS Animation

Animation vs Transition

Animation

Transform

 

https://michalsnik.github.io/aos/

http://jackonthe.net/css3animateit/

https://scrollrevealjs.org/

http://mynameismatthieu.com/WOW/docs.html

https://www.sitepoint.com/scroll-based-animations-jquery-css3/

https://daneden.github.io/animate.css/

Angular

app/app.component.ts – It is the root component of what will become a tree of nested components as the application evolves.

app/app.module.ts – the root module that tells Angular how to assemble the application.

main.ts – The recommended place to bootstrap a JIT-compiled browser application is in a separate file in the src folder named src/main.ts

quickstart

 

git clone https://github.com/angular/quickstart.git quickstart 
cd quickstart
npm install
npm start

@Component decorator’s templateUrl property

Interpolation {{ … }}

<p>My current hero is {{currentHero.name}}</p>

Template expression

JavaScript expression that have or promote side effects are prohibited, includes :

  • assignments (=, +=, -=, …)
  • new
  • chaining expressions with ; or ,
  • increment and decrement operators (++ and --)

The pipe operator

<div>Title through uppercase pipe: {{title | uppercase}}</div>

The safe navigation operator (?.) and null property path

The Angular safe navigation operator (?.) is a more fluent and convenient way to guard against nulls in property paths. The expression bails out when it hits the first null value. The display is blank, but the app keeps rolling without errors.

The current hero's name is {{currentHero?.name}}

*NgIf

<hero-detail *ngIf="isActive"></hero-detail>

*NgFor

<div *ngFor="let hero of heroes">{{hero.name}}</div>

NgFor is a repeater directive — a way to present a list of items. You define a block of HTML that defines how a single item should be displayed. You tell Angular to use that block as a template for rendering each item in the list.

microsyntax

“let hero from heroes” – Take each hero in the heroes array, store it in the local hero looping variable, and make it available to the templated HTML for each iteration.

create class

export class Hero {
  constructor(
    public id: number,
    public name: string) { }
}
  • Declares a constructor parameter and its type.
  • Declares a public property of the same name.
  • Initializes that property with the corresponding argument when creating an instance of the class.