GET THE BOOK

creative-tim.com
 GET THE BOOK

Roots of UI/UX Design

Learn to Develop Intuitive Web Experiences

PREVIEW

Elisa Paduraru
2023

creative-tim.com
 GET THE BOOK

© 2023 Creative Tim

All rights reserved. No part of this publication may be reproduced in any form or
by any means - graphic, electronic, or mechanical, including photocopying,
scanning, recording, or information storage and retrieval systems - without the
poor permission in writing of the publishers.

Find us:
Email: [email protected]
Website: creative-tim.com
TikTok: tiktok.com/@creative.tim
Instagram: instagram.com/creativetimo cial
Youtube: youtube.com/@creativetimo cial
Facebook: facebook.com/CreativeTim
Twitter: twitter.com/CreativeTim
Github: github.com/creativetimo cial

creative-tim.com
ffi
ffi
ffi
 GET THE BOOK

2,300,000+
Developers and Designers around the World

5,500,000+
NPM Installs and Downloads

30,000+
Hours of Experience

288
Designed and Coded Digital Products

5
Products included in the Github Vault
for 10.000 years code archive

CREATIVE TIM UI BOOK

www.creative-tim.com

creative-tim.com
 GET THE BOOK
Preface

Dear Reader,

Welcome to the fascinating world of web design and user experience! As we

embark on this journey together, I, Elisa Paduraru, UI/UX Designer at Creative
Tim, am thrilled to present to you our comprehensive UI/UX book-guide, born
from 9 years of experience and a passion for empowering developers and
designers like you. Additionally, it is worth noting that this book is based on
Material Tailwind design and draws inspiration from the "Fundamentals of
Creating a Great UI/UX" by Creative Tim book

At Creative Tim, we have a deep-rooted belief in the power of creativity and the
importance of giving back to the community that has supported us throughout
our journey. As a result, we actively sponsor educational initiatives, hackathons,
and events, where we get the opportunity to nurture and mentor aspiring
developers, designers, and entrepreneurs.

Our story began in 2014 when we noticed that developers were o en stuck in a
loop of "reinventing the wheel" while creating websites for their clients. Common
components like login and register modals, calendars, wizards, headers, and
footers were being recreated repeatedly, draining precious time and creative
energy. This realization inspired us to create a set of standard components that
could be used and reused e ciently, allowing you to focus on the exciting and
innovative aspects of your work.

The ever-evolving market has been inundated with resources like UI Kits and
templates, which undoubtedly assist people in their projects. However, the
correct implementation of these resources and the user experience they deliver
are paramount for success. That's where this book comes in.
creative-tim.com
ffi
ft
 GET THE BOOK
Drawing from our eight years of experience in cra ing next-generation web
design tools, UI Kits, Admin Dashboards, and Mobile App Templates, we have
carefully curated this book to serve as a de nitive guide for developers and
designers in creating outstanding UI/UX experiences. Our goal is to provide
essential knowledge that we consider a "must-have" foundation, enabling you to
approach design with con dence and consciousness.

The book is thoughtfully organized into 7 parts, each building upon the other to
provide a comprehensive understanding of UI/UX design. It commences with an
UI/UX Past to Present exploration delving into the historical context and the
principles that have shaped modern design trends.

The journey continues with an in-depth analysis of essential elements at a

molecular level. In the third part “From Pixels to Elements”, we will guide you in
creating small yet impactful components, including typography, buttons, inputs,
images, and more. Subsequently, we progress to the fourth part, where these
elements unite to form cohesive sections. As we advance to the h part, you will
learn the foundations of mobile design and the six part will present you how
these sections learned before come together to create concrete examples of
captivating web pages.

Finally, in the last part, you will nd real-world examples of websites from
esteemed companies and brands that embrace the principles outlined in this
book, reinforcing their e ectiveness and value.

I would like to extend my heartfelt gratitude to my incredible teammates at

Creative Tim – Alexandru Paduraru, Alexandra Murtaza, Beniamin Marcu, Stefan
Moldovan, Cristina Neculai, Dragos Costin, Stefan Condurachi, Alexandru Dobrin,
Cristian Andrei, Andrei Amos, Alexandru Liviu, Radu Gogoasa, and Alexandru
Boghiu. Their unwavering support and invaluable feedback have been

creative-tim.com
ff
fi
fi
fi
ft
fi
ft
 GET THE BOOK
instrumental in shaping this book. Also, I want to thank the artist Paul Virlan who
created the bookʼs cover design.

As you immerse yourself in the knowledge within these pages, I encourage you to
embrace the learning process, embrace the challenges, and embrace the joy of
cra ing exceptional user experiences. May this book inspire and empower you to
create digital masterpieces that leave a lasting impact on users.

Thank you for choosing to accompany us on this enlightening adventure.

Enjoy your reading!

Warm regards,
Elisa Paduraru
UI/UX Designer at Creative Tim

creative-tim.com
ft
 GET THE BOOK

PART I

Shaping Design: From Past to Present

1. A Visual History of Design 14

2. Web Design's Turning Points 20

PART II

Embarking on Design Journeys: A UI/UX

Exploration

1. User Interface - The Visual Language 25

2. User Experience - The Language of Interaction 39

3. Exploring the World of UI/UX Designers 41

creative-tim.com
 GET THE BOOK

PART III

From Pixels to Elements

1. Grid and Layout 45

2. Typography 53

3. Colors 64

4. Gradients 76

5. Shadows 81

6. Buttons 87

7. Forms 99

8. Icons 111

9. Images 118

10. Illustrations 129

11. Navigations 132

PART IV

Mastering UI/UX Components

1. Navbars 140

2. Hero 145

creative-tim.com
 GET THE BOOK
3. Features 155

4. Cards 165

5. Content 176

6. Team 184

7. Logo Areas 190

8. Stats 195

9. Charts 199

10. Tables 206

11. Maps 212

12. Widgets 215

13. Frequently Asked Questions (FAQs) 219

14. Contact Us 228

15. Footers 234

16. Sidebars 240

17. Wizards 246

18. Timelines 249

19. Reviews and Testimonials 252

creative-tim.com
 GET THE BOOK

PART V

The Foundations of Mobile Design

1. Mobile Adoption 258

2. Mobile Design Guide 259

PART VI

Web Experiences in Action

1. About Us 266

2. Pro le Page 269

3. Blog Page 272

4. Blog Post Page 275

5. Product Page 278

6. Rental Page 281

7. Application Page 284

8. Sign Up Page 288

9. Sign In Page 290

10. Legal Agreements Page 292

creative-tim.com
fi
 GET THE BOOK
11. Chat and Messages Page 293

12. Shopping Cart Page 295

13. Checkout Page 297

14. Admin Templates 298

PART VII

Journey Through Outstanding Websites

1. Stripe - stripe.com 304

2. Vercel - vercel.com 307

3. Wope - wope.com 310

4. Diagram - diagram.com 313

PART VIII

End Credits

Bibliography 317

creative-tim.com
 GET THE BOOK

PART I

Shaping Design:
From Past to Present

creative-tim.com
 GET THE BOOK

1. A Visual History of Design

a. Genesis of the Typography Framework

Typography is the art and technique of arranging type to make written language
legible, readable, and visually appealing. It's a fundamental aspect of design that
can greatly in uence the user experience. Now, when we talk about the rst
Typography System, we're essentially looking at the origins of how type was
organized and presented.

In the early days of typography, before the digital era, the process was entirely
manual. Each character, punctuation mark, and symbol had to be physically set in
place, usually through methods like letterpress printing. This process required
meticulous attention to detail and cra smanship. One of the earliest and most
in uential typography systems was developed by Johannes Gutenberg in the 15th
century with his invention of the movable type printing press.

Gutenberg's system revolutionized the spread of information by making books

more accessible. He designed a standardized set of typefaces that allowed for
consistent and e cient printing. This marked the beginning of the use of serif and
sans-serif typefaces, which are still prevalent in design today. The Gutenberg
Bible, printed around 1455, is a testament to the power of this typography system
and its impact on communication

creative-tim.com
fl
fl
ffi
ft
fi
 GET THE BOOK

Johann Gutenberg Font

Fast forward to today's digital age, and typography systems have evolved
signi cantly. We've moved from physical type-setting to digital typefaces that can
be easily manipulated and customized using design so ware. Typography systems
in modern UI/UX design involve selecting appropriate typefaces, de ning
hierarchy, establishing grids, and ensuring readability across various devices and
screen sizes.

[…]

creative-tim.com
fi
ft
fi
 GET THE BOOK

PART II

Embarking on Design Journeys:

A UI/UX Exploration

creative-tim.com
 GET THE BOOK

[…]
4. Bauhaus UI Design
The Bauhaus design movement, which originated in Germany in the early 20th
century, has had a profound in uence on contemporary UI Design.

Here are the main characteristics of Bauhaus-inspired UI design:

Typography
Bauhaus typography o en featured sans-serif typefaces with geometric shapes
and clean lines.

[…]

creative-tim.com
ft
fl
 GET THE BOOK
5. Neumorphism UI Design
Neumorphism is seen as an evolution of design trends. It takes inspiration from
both skeuomorphism (which replicates real-world objects) and at design (which
emphasizes simplicity and minimalism). Neumorphism's goal is to provide a
pleasing and intuitive user experience while incorporating elements of realism.

Key characteristics of Neumorphism UI Design:

[…]

creative-tim.com
fl
 GET THE BOOK

PART III

From Pixels to Elements

creative-tim.com
 GET THE BOOK

6. Buttons

a. Understanding Buttons

[…]

The evolution of buttons in the realm of UI/UX design represents a fascinating

journey through the ever-changing landscape of digital interfaces. From their
inception as static, clickable elements, buttons have evolved into dynamic,
responsive components that are integral to user interactions and experiences.

Let's take a closer look at the anatomy of buttons. Understanding the various
elements that make up a button can provide valuable insights into how they
function and how they contribute to user interactions in design.

[…]

creative-tim.com
 GET THE BOOK
b. The Psychology of Rounded Corners in UI Design

In the article titled "Why Rounded Corners Are Easier on the Eyes," experts suggest
that rectangles featuring rounded corners are visually more comfortable
compared to those with sharp edges. This preference is due to the reduced
cognitive e ort required for processing. Sharp corners tend to divert focus
outward from the rectangle, whereas rounded corners encourage attention
inward.

In practical terms, this means that rounded corners can enhance the emphasis on
labels and actions. The most prevalent button shapes in design are typically
square or square with rounded corners, which are achieved by specifying a border
radius value.

creative-tim.com
ff
 GET THE BOOK
[…]

Another e ective approach to cra ing stunning gradients is to draw inspiration

from nature-themed themes. Much like color palettes, the beauty of gradients can
already be found in the natural world.

creative-tim.com
ff
ft
 GET THE BOOK

i. Design with Arti cial Intelligence

AI tools can assist designers in choosing button colors by streamlining the color
selection process, ensuring accessibility, and optimizing user engagement. Also,
AI tools can help you pick the ideal button style and suggest the best labels tailored
to your project's industry.

creative-tim.com
fi
 GET THE BOOK
[…]

Moreover, when designing a dropdown, it is an improvement to ensure that its

content remains user-friendly. Implementing visual categories or employing
dividers can enhance the overall user experience.

creative-tim.com
 GET THE BOOK

16. Sidebars

Sidebars play an important role in the navigation process, particularly in

dashboards. They can be positioned on either the le or right side of the screen,
although they are typically on the le , especially for users who read from right to
le .

[…]

b. How to Design

Appropriate Icons
Choosing suitable icons for the links can help users quickly scan and locate what
they need. Avoid overpowering icons and maintain a balance by using a slight tint
of color or setting their opacity to around 60-70% compared to the text. Align icons
with the margin to ensure consistent spacing.

creative-tim.com
ft
ft
ft
 GET THE BOOK

Scan or Click for More Features Sections

Unlock a world of possibilities by scanning the QR code below or clicking on it. Itʼs
your gateway to explore additional sections and discover more content. Just point
and tap, or simply click, to begin your journey!

creative-tim.com
 GET THE BOOK

Mobile Design Guide

[…]

Touch and Tap

Leverage mobile-speci c controls designed for touch interaction. Avoid
repurposing web controls that may be challenging for users to interact with on
mobile.

Simpli ed Forms for E ortless Mobile Input

Simplify forms to facilitate user input. Minimize the need for extensive typing and
make the process of providing information as e ortless as possible.

creative-tim.com
fi
ff
fi
ff
 Roots of UI/UX Design
Learn to Develop Intuitive Web Experiences

GET THE BOOK

Whattsapp: 03248295910 https://linktr.ee/rizxdigitalcreator

Hey
Welcome to our
"Riz x eBooks/ Guides"
Channel!!

> You can check OLD Stuff (courses, Resources, eBooks, Guides,
Products) on our telegram Channel (if you are from Pakistan, please
use VPN to join our telegram channel)

Join our telegram channel here:

https://t.me/rizxdigitalworld

> Here's our Linktree Website till now, where our all channel Links
are Attached!!

Join all Channels here:

https://linktr.ee/rizxdigitalcreator

> Our Official Website:

rizxdigitalcreator.com
CONTACT US
+92 3248295910 (Whatsapp)
+92 3248295910 (Telegram)
t.me/rizxdigitalcreator (Telegram)

Check more Stuff at the end of this ebook page (Last Page)
 WhatsApp/ Telegram Contact: 03248295910

Get more FREE Resources, Premiums, Materials, Guides, Courses, eBooks, etc !!

Riz x Digital Creator

OFFICIAL WESBITE (under Maintenance - will be Live in the future):

www.rizxdigitalcreator.com
JOIN OUR TELEGRAM CHANNEL:

https://t.me/rizxdigitalworld

This is our Official Website, where all channel Links Attached;

https://linktr.ee/rizxdigitalcreator
JOIN OUR WHATSAPP CHANNEL FOR DAILY FREEBIES:
OFFICIAL WHATSAPP CHANNEL: (Riz x Digital World)
https://whatsapp.com/channel/0029VaLywNLLNSaA10XCM91Y

BACKUP WHATSAPP CHANNEL (eDeals Shop) Digital Store: (Riz x eDeals Shop)
https://whatsapp.com/channel/0029VaDZViBJUM2fCLuCd90w

JOBS/ INTERNSHIPS WHATSAPP CHANNEL: (Riz x Jobs/ Internships)

https://whatsapp.com/channel/0029VaghTEnD38CT7vKgkz0S

UDEMY COURSES WHATSAPP CHANNEL: (Riz x Udemy Stuff)

https://whatsapp.com/channel/0029Vaoa0XBKrWQtdbCOYw3P

EBOOKS/ GUIDES WHATSAPP CHANNEL: (Riz x eBooks/ Guides)

https://whatsapp.com/channel/0029VakVnEM6rsQuO3aX5I1Y

CRYPTO AIRDROPS WHATSAPP CHANNEL: (Riz x Crypto Airdrops)

https://whatsapp.com/channel/0029VamxM1JHVvTYREePCZ2x

Whatsapp & Telegram Contact Number:

Number: +92 3248295910

Whatsapp: https://wa.me/+923248295910
Telegram: https://t.me/rizxdigitalcreator

More Stuff here:

https://linktr.ee/rizwannnasir/
OR
https://topmate.io/rizxdigitalcreator

Join our Telegram Channel: t.me/rizxdigitalworld