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 freeyour UI, UX, to make apps and websites look great!
+425 pages of design fundamentals and user interfaces.
Available in Light and Dark (pdf)
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.
Color Theory
Typography
Component Design
Visual Hierarchy
Design Process
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...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
Take a look at the video content
5 Modules - 60 Lessons
Introduction
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.
.jpg)
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
Color Theory
10 mins
Learn what color theory is, why it's used in web design and how to begin using it yourself.
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.
Hue - Saturation, Tint, Tone, Shade
25 mins
What exactly are terms like hue and saturation, and how do we customize colors.
Color Psychology, Monochrome Colors
25 mins
How do colors influence a web design and their viewers.
Color Weights, Contrast, Schema
25 mins
Create a color schema for your next website using various color weights.
2. Typography
30min
Typefaces, Fonts
10 mins
Introduction to typography and typefaces which are based on fonts.
Serif Fonts, Sans Serif Fonts
20 mins
Learn the difference between serf and sans serif fonts and where to use them.
Bold, Italics, Underline, Capitalization
25 mins
How to correctly use bold, italics and other font modifications for your website.
Letter Spacing, Line Height, Font Size
25 mins
The important of spacing for line height, letter spacing and even font sizing as a whole.
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
Spacing, Baseline Units, Grids, Columns
10 mins
How to setup proper spacing structures for your site using grids, units and columns.
Buttons, Borders, Shadows, Icons
20 mins
Looking at the core components that make up a site like buttons, etc.
Forms, Inputs, Labels, Dividers
25 mins
Building better designs for user interaction with forms, inputs, etc.
Checkbox, Radio, Textarea, Toggles
25 mins
How to ensure you are making your inputs well spaced and useable.
Dropdown, Toasts, Breadcrumbs, Tabs
25 mins
Ensuring users understand your inputs that are more advanced, like dropdowns etc.
Tables, Lists, Tooltips, Cards
25 mins
Displaying complex data using tables, lists and other components.
Icons, Avatars, Accordions
25 mins
Supplement your designs with visuals and functions such as images, icons and accordions.
4. Visual Hierarchy
1h 15min
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.
Sizing, Text, Buttons
230 mins
Learn how sizing, text and buttons play a vital role in the visual hierarchy of web design.
Inputs, Colors, Contrast
30 mins
How to use color, contrast and inputs to influence how users view and access a site.
Proximity, Alignment, Consistency
60 mins
Visual hierarchy relies on good use of patterns such as proximity, alignment and consistent design.
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
Wireframe
10 mins
An introduction to creating wireframes and what elements are important for their creation.
Styleguide
20 mins
Put together earlier chapters of to create your own style guide for a website or application.
Colors
25 mins
Create the final color schema based on color theory principles.
Typography
25 mins
Create the template of text types that will be used as the typography for a website.
Imagery
25 mins
Create the logos and images which can later be used in in different layouts and sizes.
Get it now! Early Bird Discount for Launch!
00
Days
00
Hrs
00
Min
00
Sec
Basic
$49
$79
Learn Design Forever
Learn DesignGet 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
.png)
Complete Pack
$179
$279
⭐️Best Value to Learn Design Forever ⭐️
Design Like A ProChoose 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
Color Theory
Typography
Component Design
Visual Hierarchy
Design Process
Masterclass
$3,250
Coming Soon
MentoringOne 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
What people say about the book
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.
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!
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.
Level up your UI further with Flowbite
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 FlowbiteFrequently 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
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.