π 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
Loading suggestions...