Refactoring UI [Adam Wathan] [Steve Schoger]

Refactoring UI: The Book
Adam Wathan & Steve Schoger
​

Заставь свои идеи выглядеть великолепно, не полагаясь на дизайнера! Узнай как создавать красивые пользовательские интерфейсы самостоятельно, пользуясь специальными тактиками, описанными с точки зрения разработчика.

Книга от автора PHP Refactoring to Collections и Advanced Vue Component Design

Спойлер: Подробное описание

“I know this looks terrible, but I have no idea why.”
Hi! I'm Adam Wathan, a full stack developer who used to suck at design.

I've been friends with Steve Schoger for years and we've worked on a bunch of side projects together — him handling the UI design and me taking care of development.

Like a lot of developers, I always wished I could make my ideas look awesome without relying on a designer, but any time I tried to design something myself I would always get frustrated and give up.

I always chalked it up to a left brain/right brain sort of thing — I'm logical and analytical so I'm good at programming, people like Steve are intuitive and creative so he's good at design.

But after working closely with Steve I started picking up little tricks. Tricks that didn't require any artistic talent, but made things look better instantly for reasons that made sense to me as a developer.

Most design courses are missing the mark.
They focus so much on high level principles like color theory and typography which, while important, never helped me make instant improvements like the actionable, specific tactics I was picking up from Steve.

Working together, we knew we could create something better.

Over the last few years, we've helped thousands of developers get better at design through quick tips, in-depth articles, and video tutorials.

Refactoring UI takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more.

It’s exactly what I needed when I was struggling to make my projects look awesome.

Содержимое:

• 50 визуальных глав на 250 страницах, представленных в виде PDF-файла
• 3 видео-урока
• галерея компонент из 20 категорий компонент/макетов и 200 индивидуальных стилей компонент
• более дюжины цветовых палитр с 10 оттенками каждого цвета
• 30 рекомендованных к использованию шрифтов
• 200 великолепно иллюстрированных SVG иконок

Продажник: Скрытая ссылка
Стоимость: $149
Формат книги: PDF
Количество страниц: 250

Спойлер: Содержание

• 
  
  
  • Starting from Scratch
    • Start with a feature, not a layout
    • Detail comes later
    • Don’t design too much
    • Choose a personality
    • Limit your choices
  • Hierarchy is Everything
    • Not all elements are equal
    • Size isn’t everything
    • Don't use grey text on colored backgrounds
    • De-emphasize to emphasize
    • Labels are a last resort
    • Separate visual hierarchy from document hierarchy
    • Balance weight and contrast
    • Semantics are secondary
  • Layout and Spacing
    • Start with too much white space
    • Establish a spacing and sizing system
    • You don’t have to fill the whole screen
    • Grids are overrated
    • Relative sizing doesn’t scale
    • Avoid ambiguous spacing
  • Designing Text
    • Establish a type scale
    • Use good fonts
    • Keep your line length in check
    • Baseline, not center
    • Line-height is proportional
    • Not every link needs a color
    • Align with readability in mind
    • Use letter-spacing effectively
  • Working with Color
    • Ditch hex for HSL
    • You need more colors than you think
    • Define your shades up front
    • Don’t let lightness kill your saturation
    • Greys don’t have to be grey
    • Accessible doesn’t have to mean ugly
    • Don’t rely on color alone
  • Creating Depth
    • Emulate a light source
    • Use shadows to convey elevation
    • Shadows can have two parts
    • Even flat designs can have depth
    • Overlap elements to create layers
  • Working with Images
    • Use good photos
    • Text needs consistent contrast
    • Everything has an intended size
    • Beware user-uploaded content
  • Finishing Touches
    • Supercharge the defaults
    • Add color with accent borders
    • Decorate your backgrounds
    • Don’t overlook empty states
    • Use fewer borders
    • Think outside the box
  • Leveling Up
    • Leveling up