📘 The making of my UI design book - Practical UI
In the lead up to the release of my book on 28 November 2022, I thought I’d share a quick behind the scenes look at the making of the book.
🧵 A thread 👇
#design #designbook #uxdesign #uxui #uidesign
In the lead up to the release of my book on 28 November 2022, I thought I’d share a quick behind the scenes look at the making of the book.
🧵 A thread 👇
#design #designbook #uxdesign #uxui #uidesign
📖 A book created entirely in @Figma
I created this book in Figma and exported it as a PDF file. This worked well, as I needed to include a lot of visual design examples in the book.
I built reusable templates for book's pages, and slotted in visual examples as components.
I created this book in Figma and exported it as a PDF file. This worked well, as I needed to include a lot of visual design examples in the book.
I built reusable templates for book's pages, and slotted in visual examples as components.
⚙️ The design system
I created a simple design system with components, templates, and shared styles to speed up my workflow.
This included a colour palette, a type scale, and spacing options to improve consistency and speed up decision making.
I created a simple design system with components, templates, and shared styles to speed up my workflow.
This included a colour palette, a type scale, and spacing options to improve consistency and speed up decision making.
🎨 The brand
I created a simple & neutral brand:
↳ Logo: I manually adjusted the “Catamaran” typeface
↳ Symbol: Selection box
↳ Motif: Grid pattern to add texture
↳ Colours: Single neutral blue for universal appeal
↳ Typeface: A neutral & legible sans serif, "Lato"
I created a simple & neutral brand:
↳ Logo: I manually adjusted the “Catamaran” typeface
↳ Symbol: Selection box
↳ Motif: Grid pattern to add texture
↳ Colours: Single neutral blue for universal appeal
↳ Typeface: A neutral & legible sans serif, "Lato"
📘 The book cover
If you look closely, you’ll see that the background texture is actually made up of interface design examples from the book.
I created this texture by outlining interface components and arranging them in a collage.
If you look closely, you’ll see that the background texture is actually made up of interface design examples from the book.
I created this texture by outlining interface components and arranging them in a collage.
✅ Only what you need to know
There's an overwhelming amount of UI design information out there, but you don't need to know it all.
I focussed on the 20% of interface design, usability, and accessibility knowledge that brings 80% of the results.
There's an overwhelming amount of UI design information out there, but you don't need to know it all.
I focussed on the 20% of interface design, usability, and accessibility knowledge that brings 80% of the results.
🖼 A picture is worth a thousand words
I kept this book as concise and practical as possible to help you quickly cut through the noise.
I created lots of visual examples to demonstrate concepts fast 💨 and make the book a quick and easy read.
I kept this book as concise and practical as possible to help you quickly cut through the noise.
I created lots of visual examples to demonstrate concepts fast 💨 and make the book a quick and easy read.
👩💻 The landing page
I created the landing page using a free WordPress website builder called Elementor.
To design the landing page, I used the same design system I created for the book examples. I also used the design guidelines taught in the book.
I created the landing page using a free WordPress website builder called Elementor.
To design the landing page, I used the same design system I created for the book examples. I also used the design guidelines taught in the book.
I hope this gave you some insights into how I created Practical UI. I spent hundreds of hours crafting each and every word and pixel.
🚨 PS The book will be released at the end of the month 🥳.
Subscribe for a discount code:
👉 practical-ui.com
🚨 PS The book will be released at the end of the month 🥳.
Subscribe for a discount code:
👉 practical-ui.com
That's a wrap! 👏
If you enjoyed this thread:
1. Follow me @AdhamDannaway for more design tips
2. Retweet the tweet below to share this thread
If you enjoyed this thread:
1. Follow me @AdhamDannaway for more design tips
2. Retweet the tweet below to share this thread
جاري تحميل الاقتراحات...