Design Typo

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


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

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

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

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


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

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


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

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

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






Color in UI Design: A (Practical) Framework

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


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.

Design thinking re-envisioned for the modern enterprise


Base Type rules

  • Serif is subjectively considered easier to read (and more trusted), whereas sans-serif is considered more modern.
  • In general, the recommendation is to have a font-size of 16px, which translates into 12pt on a printed document.
  • Line height 1.2-1.5 – for short paragraph 1.2, 1.5 for long story.
  • Characters per line 55-75  Tame the flow
  • mobile phone, tablet, and desktop – different font sizes (mobile, tablet – characters per line – 35-50, line height – 2)
  • Use contrast – Pick one that has lots of weights, Four at least.
  • Think in blocks: Type is a beautiful group of letters, not a group of beautiful letters.
  • Type is not an exact science. It is aligned when it feels aligned.
  • Contrast
  • Headlines 2x – In doubt, skip a weight.
  • Don’t underline non-links
  • drop capital increases readership
  • Have the first paragraph’s text size be even bigger or less char on the line
  • Have good subheadings (<h2> and <h3>) in your content. Making them eye-catching helps the user segue into your content
  • Make your content scannable
  • Use bold and italics (but never underlines)
  • Use lists
  • Use <blockquotes> to highlight
  • Keep to shorter paragraphs – it makes the user feel like they are reading it faster
  • Do not use jargon – that limits your potential audience greatly
  • Be concise – you’re not writing a novel
  • Use images – people retain more information visually. To maximize shares, use animated or hand-drawn images.
  • Quotes can also be useful – people love sharing quotes
  • Make it easy to share – if it was interesting and a pleasure to read, they’ll want to share it


Google Play Books – Literata, Material Design – Roboto (The basic set of styles) / Noto (asian) / Amazon – Bookerly / Apple -Apple Garamond – Helvetica Black(headers)- Myriad-Myriad Set Pro(from-2001)- soft – Mac OS X Lucida Grande – IPhone – Helvetica, Helvetica Nue (retina) – Apple Watch – San Francisco

Serif fonts can be broadly classified into one of four subgroups: old style, transitional, Didone and slab serif.

A font is what you use, a typeface is what you see.

What Is Typography?, Matthew Butyric
Why Does Typography Matter?, Matthew Butterick
Elements of Typographic Style, Robert Bringhurst
Understanding the Difference Between Type and Lettering, Joseph Alessio
5 minutes Guide to better typography







Redesign concepts for popular websites #1

Redesign concepts for popular websites #2

Design Typo


What Is Typography?, Matthew Butterick
Why Does Typography Matter?, Matthew Butterick
Elements of Typographic Style, Robert Bringhurst
Understanding the Difference Between Type and Lettering, Joseph Alessio


Web- дизайн мертв

Веб дизайн – мертв.

  • Звук
  • Белый лист
  • Экран в экране
  • Устройство
  • Кроличья нора (параллакс)
  • Магнит
  • Мир/Пространство
  • Рабочий стол
  • Селебрити / Звездный
  • WindowsSwiss (Швейцарский дизайн)
  • Решение пространства
  • Док
  • левый формат
  • левый формат топ
  • песочные часы
  • формат диск
  • формат Г формы
  • Медиа дров
  • П формат
  • Топ-Хеад
  • Мидлайн (меню под хедером)
  • 4 column-info
  • waterfall
  • mash-up
  • bottom line
  • ступени
  • Full screen motion
  • vimeo-tube
  • Top-square
  • interactive motion
  • Карта
  • Типография данных
  • Интерактивные комиксы
  • Формат шторка
  • Симметрия
  • Пространство WebGl


Design Typo

Christian Schwartz

Masterclass – Christian Schwartz

Making something out of something: Typefaces, history, culture, and meaning