What do you think?
Rate this book
Refactoring UI
Make your ideas look awesome, without relying on a designer. Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.
252 pages, ebook
Published December 11, 2018
Ratings & Reviews
Friends & Following
Create a free account to discover what your friends think of this book!
Community Reviews
Displaying 1 - 30 of 206 reviews
April 13, 2019
I literally read this in 2 hours.
November 21, 2020
A message to my younger, experimental person who thought you mostly learn by doing:
Read this first. You would have a boosted run.
Read this first. You would have a boosted run.
January 5, 2019
بحكم أنني مُبرمج واجهة خلفية (باك إند) فإن من عادتي أن أستهلك وقتًا كبيرًا في بناء واجهات تطبيقات الويب التي أطلقها ما بين الحين والآخر. ورغم كل الوقت الذي أقضيه معها (والذي عادة ما يُعادل أو يتجاوز الوقت الذي أقضيه في الواجهة الخلفية) إلّا أن النتيجة النهائية لا تكون بالإتقان أو الجمال الذي أرغب فيه، ربما لأنني لا أحب العمل على الفرونت إند (أميل أكثر إلى اعتبارها برمجة من "درجة أقل" مقارنة مع الواجهات الخلفية) وقد يكون لعدم إلمامي بالقواعد الأساسية وبأفضل المُمارسات في هذا المجال دورًا كبيرًا في هذا الأمر.
بالرغم أن تصميم واجهات مُستخدم احترافية يعتمد كثيرًا على الحس الفنّي للمُصمم/المُطوّر إلّا أن الإلمام بتلك القواعد الأساسية والاطلاع على أفضل المُمارسات في هذا الجانب كفيل على الأقل بأن يجعل واجهاتك لا تظهر بمظهر يدلّ على قلّة خبرة/حيلة مُصمّما وأن يسمح لك بتحسين واجهاتك بشكل كبير. هذا الكتاب يجمع خبرة الكاتبين في هذا المجال وتقدميها في كتاب سهل "الاستهلاك" مع العشرات من الأمثلة مما يجب ولا يجب القيام به.
الكتاب مُقسّم إلى 8 فصول تستعرض مُختلف الجوانب التي ستحتاجها لدى بناء تطبيقات الويب الخاصة بك مثل تصميم النماذج واختيار الألوان والخطوط والاستخدام الأمثل للمساحات البيضاء ونسبية العناصر بعضها إلى بعض، كما يتطرّق إلى حسن اختيار الألوان والطريقة الأمثل للتعامل مع الصور، خاصّة تلك التي يرفعها المُستخدم إلى تطبيقك والتي لا تكون في أغلب الحالات مثالية.
مُرفق مع الكتاب ملفات تتعلّق بكيفية اختيار لوحة ألوان والخطوط إضافة إلى مجموعة من الأيقونات التي يُمكن لك استخدامها في تطبيقاتك. كما تم إرفاق 3 فيديوهات تتعلق بتصميم نماذج مُعقّدة، تصميم لوحات التّحكم وتصميم صفحات مُحتوى بشكل احترافي ومن الصفر.
إن لم يُقنعك الوصف السابق لقراءة الكتاب فإن الفيديو التالية ستقنعك لا محالة
https://vimeo.com/305601486/a1388ac3a9
الكتاب مُرتفع السعر ، رغم ذلك إن استطعت الحصول عليه فإنّك ستستفيد لا محالة منه. بعبارة أخرى أنصح بقراءة هذا الكتاب كل من يعمل في مجال تطوير تطبيقات الويب خاصّة ممن ليس لديهم حس فني يسمح لهم
بتصميم واجهات مُستخدم جميلة.
يُمكنك الحصول على الكتاب وقراءة بعض المُقتطفات منه على موقعه: https://refactoringui.com/
بالرغم أن تصميم واجهات مُستخدم احترافية يعتمد كثيرًا على الحس الفنّي للمُصمم/المُطوّر إلّا أن الإلمام بتلك القواعد الأساسية والاطلاع على أفضل المُمارسات في هذا الجانب كفيل على الأقل بأن يجعل واجهاتك لا تظهر بمظهر يدلّ على قلّة خبرة/حيلة مُصمّما وأن يسمح لك بتحسين واجهاتك بشكل كبير. هذا الكتاب يجمع خبرة الكاتبين في هذا المجال وتقدميها في كتاب سهل "الاستهلاك" مع العشرات من الأمثلة مما يجب ولا يجب القيام به.
الكتاب مُقسّم إلى 8 فصول تستعرض مُختلف الجوانب التي ستحتاجها لدى بناء تطبيقات الويب الخاصة بك مثل تصميم النماذج واختيار الألوان والخطوط والاستخدام الأمثل للمساحات البيضاء ونسبية العناصر بعضها إلى بعض، كما يتطرّق إلى حسن اختيار الألوان والطريقة الأمثل للتعامل مع الصور، خاصّة تلك التي يرفعها المُستخدم إلى تطبيقك والتي لا تكون في أغلب الحالات مثالية.
مُرفق مع الكتاب ملفات تتعلّق بكيفية اختيار لوحة ألوان والخطوط إضافة إلى مجموعة من الأيقونات التي يُمكن لك استخدامها في تطبيقاتك. كما تم إرفاق 3 فيديوهات تتعلق بتصميم نماذج مُعقّدة، تصميم لوحات التّحكم وتصميم صفحات مُحتوى بشكل احترافي ومن الصفر.
إن لم يُقنعك الوصف السابق لقراءة الكتاب فإن الفيديو التالية ستقنعك لا محالة
https://vimeo.com/305601486/a1388ac3a9
الكتاب مُرتفع السعر ، رغم ذلك إن استطعت الحصول عليه فإنّك ستستفيد لا محالة منه. بعبارة أخرى أنصح بقراءة هذا الكتاب كل من يعمل في مجال تطوير تطبيقات الويب خاصّة ممن ليس لديهم حس فني يسمح لهم
بتصميم واجهات مُستخدم جميلة.
يُمكنك الحصول على الكتاب وقراءة بعض المُقتطفات منه على موقعه: https://refactoringui.com/
January 20, 2019
This book is great but it’s aimed primarily at developers who are looking to improve their UI designs when there’s no designer on a project (or similar situation). For that audience, it’s perfect. For designers coming from a primarily print background, I’d recommend this book in a heartbeat. As for the seasoned web or UI design veteran... a lot of it is stuff you’ll likely already know. But I found at least a couple of practical tips that I’m definitely going to include in my design toolbox and workflow.
July 20, 2019
I love this book, because it doesn't mess around: there's a title page, the table of contents, and then you're immediately presented with some great design advice:
That's the title of the first section of the first chapter of this book. The authors explain that design is different from aesthetics. When you're developing a product like an app or a website, the most important thing is that it's functional. Decide what UI elements you need to satisfy that functionality first, then build your product around it. Google's home page contains little more than a single search box, but it's one of the most popular websites on the Internet.
I feel like I can't accurately summarise this book in a review because every sentence is brimming with great design tips. The book is only about 200 pages long and -- because there are a lot of graphics -- you can easily read it in a few hours in a single afternoon. It feels like sitting down for a chat with an experienced web developer and listening to them explain every bit of design advice they've accrued over their career.
This book has helped me put into words what I think is the most important piece of design advice anyone could give, and that is: "be consistent". Not "consistent" in the sense that everything has to always be the same, but in the sense that you should pick a few different fonts, a few different colours, and so on, and use them the same way in the same contexts.
The authors call this a "visual hierarchy" and recommend that you develop it ahead of time so you you're not constantly fretting over minute design details as you develop your website or app. Pick 2-3 shades of a colour for emphasised, normal, and de-emphasised text. Use a heavier font weight to emphasise important information. Pick a colour scheme and stick with it. Use whitespace judiciously. Steer clear of relative sizing.
In my humble opinion, the two biggest "tells" of someone who's not design-minded are:
1. inconsistent or inappropriate spacing
2. inconsistent layout
I can't tell you how important it is for your company logo to be in the same place on every page of your website, or every slide of your Powerpoint presentation (excepting maybe the home page / title slide). It looks unprofessional (dare I say "sloppy"?). This book emphasises these points and more.
As I said, it's difficult to summarise this book in a few sentences. If you're interested in visual design, especially web design, I promise that you will not be able to put this book down. I would recommend it to anyone working in UI/UX, frontend development, or web or mobile design. Actually, I would recommend it to anyone who has ever had to lay out a report, make a slide deck, or design a brochure. There are certain rules of design that transcend media and this book provides a great foundation for designing professional-looking products. 100% Recommended.
"Start with a feature, not a layout"
That's the title of the first section of the first chapter of this book. The authors explain that design is different from aesthetics. When you're developing a product like an app or a website, the most important thing is that it's functional. Decide what UI elements you need to satisfy that functionality first, then build your product around it. Google's home page contains little more than a single search box, but it's one of the most popular websites on the Internet.
I feel like I can't accurately summarise this book in a review because every sentence is brimming with great design tips. The book is only about 200 pages long and -- because there are a lot of graphics -- you can easily read it in a few hours in a single afternoon. It feels like sitting down for a chat with an experienced web developer and listening to them explain every bit of design advice they've accrued over their career.
This book has helped me put into words what I think is the most important piece of design advice anyone could give, and that is: "be consistent". Not "consistent" in the sense that everything has to always be the same, but in the sense that you should pick a few different fonts, a few different colours, and so on, and use them the same way in the same contexts.
The authors call this a "visual hierarchy" and recommend that you develop it ahead of time so you you're not constantly fretting over minute design details as you develop your website or app. Pick 2-3 shades of a colour for emphasised, normal, and de-emphasised text. Use a heavier font weight to emphasise important information. Pick a colour scheme and stick with it. Use whitespace judiciously. Steer clear of relative sizing.
In my humble opinion, the two biggest "tells" of someone who's not design-minded are:
1. inconsistent or inappropriate spacing
2. inconsistent layout
I can't tell you how important it is for your company logo to be in the same place on every page of your website, or every slide of your Powerpoint presentation (excepting maybe the home page / title slide). It looks unprofessional (dare I say "sloppy"?). This book emphasises these points and more.
As I said, it's difficult to summarise this book in a few sentences. If you're interested in visual design, especially web design, I promise that you will not be able to put this book down. I would recommend it to anyone working in UI/UX, frontend development, or web or mobile design. Actually, I would recommend it to anyone who has ever had to lay out a report, make a slide deck, or design a brochure. There are certain rules of design that transcend media and this book provides a great foundation for designing professional-looking products. 100% Recommended.
December 13, 2018
An excellent primer on how to make simple design decisions that could greatly improve your designs. No fluff; 100% signal, 0% noise.
April 18, 2019
I want every tech book to be that good.
October 27, 2019
Best book on UI/UX design. Great re-read value as well. Helped me clear a lot of fundamentals for designing good UIs without needing a designer.
December 22, 2022
That book made even me feel like I could design something
February 12, 2019
I'm starting to realize that as a front-end developer, I had no idea of designing UI's before. It explains it's ideas with nice examples and sketches and also, for example, gave me nice approach in using white space in my designs: "A better approach is to start by giving something way too much space, then remove it until it you’re happy with the result." It may seem simple but I wasn't aware how much this can help me. I would recommend it to you if you are a developer or a junior product owner/manager for a better understanding of designing web pages without a designer.
January 6, 2023
This book made me going from having absolutely no clue to feeling confident in trying to implement some own design ideas.
They have a lot of great examples on almost anything they write and it is immediately graspable what they mean. They also provide a ton of resources for color palettes, components etc.
I appreciate it a lot to have resources from people like Adam Wathan. Adam is the Inventor of TailwindCSS, the leading CSS styling framework which is used super widely.
It's also worth a read for non-development people and everyone who is interested in how to make designs better :)
They have a lot of great examples on almost anything they write and it is immediately graspable what they mean. They also provide a ton of resources for color palettes, components etc.
I appreciate it a lot to have resources from people like Adam Wathan. Adam is the Inventor of TailwindCSS, the leading CSS styling framework which is used super widely.
It's also worth a read for non-development people and everyone who is interested in how to make designs better :)
March 25, 2020
Concise guide to User Interfaces. Really helped me as a non-designer.
January 7, 2019
Thought this one was great. Good, hands on advice on how you can bring your designs to the next level, will definitely go back to this one!
September 14, 2019
Tonnes of good practical tips
January 19, 2020
Awesome book!
I highly recommend it for UI/UX and Web designer, and also for backend developer who want to learn some quick tips to make thiers own UIs feel designed and well organized.
Me as a backend developer, sometimes when I need to build some frontend for my APIs, I often waste time making decisions like : what perfect color to pick, what font-family to choose, how to position headlines, etc. I think this book will help me a lot :)
I highly recommend it for UI/UX and Web designer, and also for backend developer who want to learn some quick tips to make thiers own UIs feel designed and well organized.
Me as a backend developer, sometimes when I need to build some frontend for my APIs, I often waste time making decisions like : what perfect color to pick, what font-family to choose, how to position headlines, etc. I think this book will help me a lot :)
April 3, 2021
I have been working on building new interfaces usually involving a solid research for every single detailing done on the designs. This book gives you curated such researches to rely on that works well and serves the purpose.
Tips, tricks and good amount of foundation knowledge is what you get in this book, explained in simple langauge.
Tips, tricks and good amount of foundation knowledge is what you get in this book, explained in simple langauge.
October 17, 2021
I like it!
May 18, 2022
I've followed the authors' work on YouTube, Dribble, and similar platforms over the last months and finally committed the time to go through this book.
Overall it's a short read (a few hours), and doesn't bring much more to the table than all the great resources already out there.
I can definitely recommend looking into material such as
https://m.youtube.com/playlist?list=P...
and looking into the two author's conference talks. Their Dribble pages are good inspiration, too.
To see constrained design systems in action, I can recommend checking out https://www.pollen.style and the design tokens in Tailwind CSS.
With all these free and open resources out there, the book really was a quick read for me and mainly rehashed what the authors already taught me through open resources. Overall very education for anyone who wants to learn about display-first design nowadays.
Overall it's a short read (a few hours), and doesn't bring much more to the table than all the great resources already out there.
I can definitely recommend looking into material such as
https://m.youtube.com/playlist?list=P...
and looking into the two author's conference talks. Their Dribble pages are good inspiration, too.
To see constrained design systems in action, I can recommend checking out https://www.pollen.style and the design tokens in Tailwind CSS.
With all these free and open resources out there, the book really was a quick read for me and mainly rehashed what the authors already taught me through open resources. Overall very education for anyone who wants to learn about display-first design nowadays.
November 11, 2020
Overall a super light and quick read! Adam Wathan was able to manifest a lot of concepts I felt like I intuitively already knew beforehand into very quantitative and specific examples. Instead of having a gut feeling that a space is too busy, he puts into words and diagrams why exactly that may be. Another big takeaway is the reoccurring theme of creating systems in the designs you're wishing to implement - whether it's in shadows, colours, or typography.
It's definitely targeted towards specific visual design elements but has so many great tips I think it'd make for a good re-read in the future. :)
It's definitely targeted towards specific visual design elements but has so many great tips I think it'd make for a good re-read in the future. :)
This entire review has been hidden because of spoilers.
September 20, 2020
This is a really good book.
Because:
-lots of practical and specific tips and tricks to improve visual designs
- a beautiful, soothing layout
- easy to read language
- good reasoning and fundamentals about many of the 'tips'
I wish I had read a book like this 5 years ago.
(This one came out in 2018)
The authors know what they are talking about. Visual design can feel overwhelming because blank pages are overwhelming, and everyone is an expert on what looks good to them.
If your work/passion involves design for web-based products, go for it.
Because:
-lots of practical and specific tips and tricks to improve visual designs
- a beautiful, soothing layout
- easy to read language
- good reasoning and fundamentals about many of the 'tips'
I wish I had read a book like this 5 years ago.
(This one came out in 2018)
The authors know what they are talking about. Visual design can feel overwhelming because blank pages are overwhelming, and everyone is an expert on what looks good to them.
If your work/passion involves design for web-based products, go for it.
April 3, 2021
I wish I would have read this book sooner. It's a quick read (say, half a day) and contains lots of practical advice on how to design beautiful user interfaces. If you are a PM or front-end developer, who thinks of themselves as "being bad at design", this book is a must-read.
Some sample advice: Build your design system first and choose within those boundaries while designing to avoid decisions fatigue. "Painfully trialing arbitrary values one pixel at a time will drastically slow you down at best, and create ugly, inconsistent designs at worst. [...] [This] will help you create better designs, with less effort, in less time. Design advice doesn’t get much more valuable than that."
Some sample advice: Build your design system first and choose within those boundaries while designing to avoid decisions fatigue. "Painfully trialing arbitrary values one pixel at a time will drastically slow you down at best, and create ugly, inconsistent designs at worst. [...] [This] will help you create better designs, with less effort, in less time. Design advice doesn’t get much more valuable than that."
May 20, 2021
This is a great book for mostly developers, but there's a lot to learn in there for anyone who's interested in creating a great design. I've been following Steve Schoger over twitter and seen him work on quick do-overs on not-so-great-looking UIs and turn them to better looking and effective interfaces. He's collaborated with Adam Wathan to bring out a great guide that is easy to comprehend. This book clearly shows where you are going wrong, how to improve your thinking process behind a design along with a couple of more effective options.
January 9, 2023
I recently read Refactoring UI and was blown away by how useful it was. The book is very practical and easy to follow, with clear explanations and examples to illustrate key points. It also does an excellent job of explaining the principles that underlie good UI design, which really helped me to understand why certain design choices are better than others. Overall, I highly recommend this book to anyone looking to improve their UI design skills. It has already had a huge impact on my work, and I'm sure it will do the same for others.
February 3, 2019
This book is full of simple UI examples and comparisons: what is better, why, and how to control user focus. Refactoring UI doesn't dive deep into details and I think it's a good start point for Web Designing. If you are familiar with Bootstrap and Material Design then this book gonna fill your gaps and help you to see the full picture of UI and even UX.
July 19, 2019
Absolutely outstanding. It's only over 200 (easy) pages, but it's so packed with valuable tips and insight into creating great UI. I've definitely leveled up from reading this, and this will be my number one recommendation to developers looking to get a firmer grasp on design basics. Pricey, but well-worth it in my opinion.
January 10, 2022
Even though I'm a total newbie to UI/UX, this book has given me the confidence to pursue design. On that note, I also have not had any difficulty understanding the concepts mentioned here. Everything from choosing a color, typography, shadows, depth, and so on made perfect sense. It's fascinating - I never thought I'd understand art in a logical way.
Thanks, Joe for recommending this book :)
Thanks, Joe for recommending this book :)
July 2, 2019
Bir sürü güzel, pratik ve anında uygulanabilir arayüz tasarım tüyoları içeriyor. Yazılımcı ve UI tasarımına başlamak isteyenlere tavsiye ederim. Bir süredir tasarımdan uzak kaldığım için faydalı oldu.
January 6, 2022
Това е книга за разработчици, които искат да си подобрят уменията относно дизайна на приложенията. И в това си качество е страхотна и мисля да я препрочета пак и пак като я използвам за reference.
Чете се буквално за часове.
За дизайнери, които вече са такива - предполагам ще им е твърде базова.
Чете се буквално за часове.
За дизайнери, които вече са такива - предполагам ще им е твърде базова.
April 23, 2019
Adam Wathan had done an awesome job in this book. With just the right balance of design theory and examples, here you will find some clever tips to step up your User interface game.
February 28, 2020
Well crafted. Concise.
Displaying 1 - 30 of 206 reviews