Image
ImageImage
Enhance UI

Design
for Developers

Learn design as a developer to improve
your UI, UX, to make apps and websites look great!
Buy NowTry for free
ImageImage
+425 pages of design fundamentals and user interfaces.
Available in Light and Dark (pdf)
Image
Image
Image
ImageImage
Image

What you’ll learn

The book will be a step by step process ensuring you learn the fundamentals of design first. As you progress for each chapter, you grow those skills making your user interface designs better.
Image

Color Theory

Image

Typography

Image

Component Design

Image

Visual Hierarchy

Image

Design Process

1Image
Color WheelImage
3Image
✔ Color Design
Image
Image
ImageImage
Image

Improve your design skills

Learn concepts such as Visual Hierarchy, which determines the order in which the users scan your website, and there are many ways to stablish it. You will not only learn which those methods are, but also how to apply them. Comes in Dark/Light versions!
Preview Dark/Light Version
ContrastImage
2Image
3Image
✔ Visual Hiearchy
Image

...and that's only the beginning!

Table of contents

1. Colors
Color theory 14
Secondary colors16
Tertiary colors18
Hue / color wheel20
Color temperture22
Saturation24
Tint26
Tone28
Shade32
Selecting colors34
Monochrome colors36
Analogous colors38
Complementary colors40
Triadic colors42
Color psychology44
Contrast46
Color schema50
2. Typography
Typeface52
Fonts54
Serif56
San serif56
Italics58
Underlines60
Capatlization62
Letter spacing64
Line height66
Font size68
Font weight70
Legibility74
Text hierarchy76
Typography schema80
3. Component Design
Spacing84
Base Units86
Grids and Columns88
Buttons90
Borders92
Shadows94
Icons96
Labels98
Dividers100
Form Inputs102
Form Checkboxes112
Form Radio118
Form Textarea124
Form Toggle130
Form Dropdowns134
Form Submit button140
Badges144
Toasts154
Breadcrumbs156
Tables162
Lists172
Toooltips184
Cards192
Accordions200
Tabs206
Iconography206
Avatars216
4. Visual Hierachy
Visual Patterns224
Size and Text230
Buttons240
Inputs244
Color252
Contrast268
Proximity280
Alignment292
Consistency302
Negative Space316
Visual harmony318
Symmetrical hamony328
Asymmetrical harmony332
Radial harmony338
Harmony colors340
Harmony text and images342
Visual weight344
5. Design Process
Wireframe336
Styleguide346
Colors348
Typograhy350
Imagery354
Spacing356
Components358
6. Implementation
Creating a logo360
Building color palletes364
Preparing typography372
Imagery and icongraphy376
Designing UI elements378
See full table of contents

Take a look at the video content

5 Modules - 60 Lessons
Introduction
12min
Image
Forward
2 mins
Introducing George and myself (Adrian) as two developers with similar backgrounds and why we put this book together to help others like us to design better websites and applications.
Image
Course Introduction
10 mins
Find out what is involved as part of this course, what you will learn and why you should. Design isn't just about making good user interfaces, and we will explore exactly what that is.
1. Colors
30min
Image
Image
Color Theory
10 mins
Learn what color theory is, why it's used in web design and how to begin using it yourself.
Image
Colors - Primary, Secondary & Tertiary
20 mins
The three main types of colors used as part of color theory and how they expand the color wheel.
Image
Hue - Saturation, Tint, Tone, Shade
25 mins
What exactly are terms like hue and saturation, and how do we customize colors.
Image
Color Psychology, Monochrome Colors
25 mins
How do colors influence a web design and their viewers.
Image
Color Weights, Contrast, Schema
25 mins
Create a color schema for your next website using various color weights.
2. Typography
30min
Image
Image
Typefaces, Fonts
10 mins
Introduction to typography and typefaces which are based on fonts.
Image
Serif Fonts, Sans Serif Fonts
20 mins
Learn the difference between serf and sans serif fonts and where to use them.
Image
Bold, Italics, Underline, Capitalization
25 mins
How to correctly use bold, italics and other font modifications for your website.
Image
Letter Spacing, Line Height, Font Size
25 mins
The important of spacing for line height, letter spacing and even font sizing as a whole.
Image
Legibility, Text Hierarchy, Schema
25 mins
What exactly is good legibility and how to use text hierarchy to make reading easy.
3. Component Design
1h 30min
Image
Image
Spacing, Baseline Units, Grids, Columns
10 mins
How to setup proper spacing structures for your site using grids, units and columns.
Image
Buttons, Borders, Shadows, Icons
20 mins
Looking at the core components that make up a site like buttons, etc.
Image
Forms, Inputs, Labels, Dividers
25 mins
Building better designs for user interaction with forms, inputs, etc.
Image
Checkbox, Radio, Textarea, Toggles
25 mins
How to ensure you are making your inputs well spaced and useable.
Image
Dropdown, Toasts, Breadcrumbs, Tabs
25 mins
Ensuring users understand your inputs that are more advanced, like dropdowns etc.
Image
Tables, Lists, Tooltips, Cards
25 mins
Displaying complex data using tables, lists and other components.
Image
Icons, Avatars, Accordions
25 mins
Supplement your designs with visuals and functions such as images, icons and accordions.
4. Visual Hierarchy
1h 15min
Image
Image
Visual Patterns, F Pattern, Z Pattern
15 mins
The visual patterns that users read websites by influences design, learn the F and Z patterns to design better looking sites.
Image
Sizing, Text, Buttons
230 mins
Learn how sizing, text and buttons play a vital role in the visual hierarchy of web design.
Image
Inputs, Colors, Contrast
30 mins
How to use color, contrast and inputs to influence how users view and access a site.
Image
Proximity, Alignment, Consistency
60 mins
Visual hierarchy relies on good use of patterns such as proximity, alignment and consistent design.
Image
Negative Space, Harmony
60 mins
Find out how to properly space elements to make them visually appealing and easy to identify.
5. Design Process
30min
Image
Image
Wireframe
10 mins
An introduction to creating wireframes and what elements are important for their creation.
Image
Styleguide
20 mins
Put together earlier chapters of to create your own style guide for a website or application.
Image
Colors
25 mins
Create the final color schema based on color theory principles.
Image
Typography
25 mins
Create the template of text types that will be used as the typography for a website.
Image
Imagery
25 mins
Create the logos and images which can later be used in in different layouts and sizes.
Image
Image

Get it now! Early Bird Discount for Launch!

00
Days
00
Hrs
00
Min
00
Sec
Image

Basic

$49

$79

Learn Design Forever

Learn Design

Get started by getting the book which will teach you all the fundamentals for enhancing your UI designs.

  • 425 x Page Book (PDF)
  • Compare to $250 of value
  • Money Back Guarantee
Learn Design
Image

Complete Pack

$179

$279

⭐️Best Value to Learn Design Forever ⭐️

Design Like A Pro

Choose this package if you are ready to commit to getting a professional understanding of UI/UX. It includes everything you will need.

  • 60 x Full Video Tutorials All Chapters
  • 425 x Page Book (PDF, Light/Dark versions)
  • Wireframe Prototype Kit (Figma)
  • 4 UI/UX Exercise Workshops
  • Discord Private Community
  • Component Cheat-sheets
  • Compare to $1,500 of value
  • Money Back Guarantee

includes

Image

Color Theory

Image

Typography

Image

Component Design

Image

Visual Hierarchy

Image

Design Process

Design Like A Pro

Masterclass

$3,250

Coming Soon

Mentoring

One on one guidance with direct instruction on the resources. This will help you get a firm understanding of design theory.

  • Month Personalised Mentoring
  • Workshop Tuition
  • Excercise Coaching
  • Bootcamp compared $34,500 value
  • Limited seats
  • 60 Video Tutorials
  • 425 Page Book (PDF)
  • Discord Community Access
  • Money Back Guarantee
Book a Spot Soon
Image

What people say about the book

Image

Traversy Media

1,270,000 subscribers
Adrian is skilled in both development and design. He has done videos for the Traversy media channel on various topics and even created a mockup of a re-design for the website. In addition, Adrian is a fantastic teacher and content creator with a lot to offer anyone wanting to get into UI design or web development.
Image

CodeSTACKr (Jesse)

271,000 subscribers
Adrian's design skills are amazing! On top of that, he's great at web development. It's not very often that you get a chance to learn from someone skilled in both areas. If you want to level up your UI design skills, look no further!
Image

Web Dev Simplified

1,110,000 subcribers
Adrian is one of the most well spoken people I know. His ability to distill complex topics into easy to understand parts makes learning easy and fun. On top of that his design skills are so good. I wish I could design half as well as him. I highly recommend learning from Adrian if you are looking to improve your design skills.
Image

Level up your UI further with Flowbite

Image
What is next?!

Time to try Flowbite?

https://flowbite.com

Flowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites. If you've learned the basics, it's now time to apply them!

Try out Flowbite

Frequently Asked Questions

How can I get an invoice?

There will be a digital receipt produced for all purchase. This should include an email that will give you more information if you require it for tax purposes.

What is the book's format?

The book is provided in PDF format, there are not specific DRM issues that might require password locks or anything of that nature.

Is it possible to upgrade from Basic to Pro?

Yes you can, email teachme@adriantwarog.com to made this happen.

What about Returns?

If you are unsatisfied, you can also request a refund on the same email teachme@adriantwarog.com within 365 days of the purchase.

1. Reason codes, warranties or exchanges - Subject: Request Refund
2. What the customer is required to do - Email teachme@adriantwarog.com
3. Circumstances under which you offer returns and/or refunds: Any reason
4. Timeframe in which you accept return - 365 days
5. When your customer can expect a refund - Within 3 - 5 working days

Power Parity Discounts?

"Purchasing Power Parity (PPP) is the measurement of prices in different countries that uses the prices of specific goods to compare the absolute purchasing power of the countries' currencies. Yes the Yes Power Parity is active and will automatically work inside of Gumroad during purchases.