Wathan A. & Schoger S. - Refactoring UI [2018, PDF, ENG] + CD

Refactoring UI

Год издания: 2018
Автор: Adam Wathan & Steve Schoger
Жанр или тематика: Web design
Издательство: Самиздат
Язык: Английский
Формат: PDF
Качество: Издательский макет или текст (eBook)
Интерактивное оглавление: Да
Количество страниц: 252
Описание: Make your ideas look awesome,without relying on a designer.
Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.
This book contains literally everything we know about web design, distilled into short, easy to read chapters.
Every chapter is designed to be as independent as possible, so you can read them in almost any order. And if you want to sit down and read the whole thing at once, you’ll have no trouble getting through it in just a couple of hours.
The book will teach you a ton, but there are some things best learned by watching an expert do it themselves.
We’ve put together three in-depth video tutorials that walk through how to take all of the ideas in the book and apply them to three common UI design scenarios:
- Designing a complex form interface
- Building a data-focused dashboard
- Styling a text-focused landing page
Each video is tightly edited and just the right pace, so there’s no wasted time watching me “hmm” and “uhh” my way around the design.
Contains:- The 252-page book in PDF format
- All three in-depth video tutorials
- Component inspiration gallery, featuring 200+ component and layout ideas
- Over a dozen comprehensive color palettes, tailored for application UIs
- Curated font showcase, including 30+ font recommendations categorized by use-case

Примеры страниц

Оглавление
Starting from Scratch
Start with a feature, not a layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Detail comes later . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
Don’t design too much . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ..16
Choose a personality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ... 20
Limit your choices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Hierarchy is Everything
Not all elements are equal. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Size isn’t everything. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Don’t use grey text on colored backgrounds . . . . . . . . . . . . . . . . . . . . . 42
Emphasize by de-emphasizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Labels are a last resort. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Separate visual hierarchy from document hierarchy . . . . . . . . . . . . . . . 54
Balance weight and contrast. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Semantics are secondary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Layout and Spacing
Start with too much white space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Establish a spacing and sizing system. . . . . . . . . . . . . . . . . . . . . . . . . . . 70
You don’t have to fill the whole screen . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Grids are overrated . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Relative sizing doesn’t scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Avoid ambiguous spacing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Designing Text
Establish a type scale. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Use good fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Keep your line length in check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Baseline, not center . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Line-height is proportional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Not every link needs a color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Align with readability in mind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Use letter-spacing effectively . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Working with Color
Ditch hex for HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
You need more colors than you think. . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Define your shades up front . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Don’t let lightness kill your saturation . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Greys don’t have to be grey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Accessible doesn’t have to mean ugly. . . . . . . . . . . . . . . . . . . . . . . . . . 162
Don’t rely on color alone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Creating Depth
Emulate a light source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Use shadows to convey elevation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Shadows can have two parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Even flat designs can have depth. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Overlap elements to create layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Working with Images
Use good photos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Text needs consistent contrast. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Everything has an intended size. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Beware user-uploaded content. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Finishing Touches
Supercharge the defaults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Add color with accent borders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Decorate your backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Don’t overlook empty states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Use fewer borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Think outside the box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Leveling Up

Доп. информация: DOESN'T CONTAIN: Exclusive icon library, including 200 easily customizable SVG icons