بحكم أنني مُبرمج واجهة خلفية (باك إند) فإن من عادتي أن أستهلك وقتًا كبيرًا في بناء واجهات تطبيقات الويب التي أطلقها ما بين الحين والآخر. ورغم كل الوقت الذي أقضيه معها (والذي عادة ما يُعادل أو يتجاوز الوقت الذي أقضيه في الواجهة الخلفية) إلّا أن النتيجة النهائية لا تكون بالإتقان أو الجمال الذي أرغب فيه، ربما لأنني لا أحب العمل على الفرونت إند (أميل أكثر إلى اعتبارها برمجة من "درجة أقل" مقارنة مع الواجهات الخلفية) وقد يكون لعدم إلمامي بالقواعد الأساسية وبأفضل المُمارسات في هذا المجال دورًا كبيرًا في هذا الأمر. بالرغم أن تصميم واجهات مُستخدم احترافية يعتمد كثيرًا على الحس الفنّي للمُصمم/المُطوّر إلّا أن الإلمام بتلك القواعد الأساسية والاطلاع على أفضل المُمارسات في هذا الجانب كفيل على الأقل بأن يجعل واجهاتك لا تظهر بمظهر يدلّ على قلّة خبرة/حيلة مُصمّما وأن يسمح لك بتحسين واجهاتك بشكل كبير. هذا الكتاب يجمع خبرة الكاتبين في هذا المجال وتقدميها في كتاب سهل "الاستهلاك" مع العشرات من الأمثلة مما يجب ولا يجب القيام به.
الكتاب مُقسّم إلى 8 فصول تستعرض مُختلف الجوانب التي ستحتاجها لدى بناء تطبيقات الويب الخاصة بك مثل تصميم النماذج واختيار الألوان والخطوط والاستخدام الأمثل للمساحات البيضاء ونسبية العناصر بعضها إلى بعض، كما يتطرّق إلى حسن اختيار الألوان والطريقة الأمثل للتعامل مع الصور، خاصّة تلك التي يرفعها المُستخدم إلى تطبيقك والتي لا تكون في أغلب الحالات مثالية.
مُرفق مع الكتاب ملفات تتعلّق بكيفية اختيار لوحة ألوان والخطوط إضافة إلى مجموعة من الأيقونات التي يُمكن لك استخدامها في تطبيقاتك. كما تم إرفاق 3 فيديوهات تتعلق بتصميم نماذج مُعقّدة، تصميم لوحات التّحكم وتصميم صفحات مُحتوى بشكل احترافي ومن الصفر.
الكتاب مُرتفع السعر ، رغم ذلك إن استطعت الحصول عليه فإنّك ستستفيد لا محالة منه. بعبارة أخرى أنصح بقراءة هذا الكتاب كل من يعمل في مجال تطوير تطبيقات الويب خاصّة ممن ليس لديهم حس فني يسمح لهم بتصميم واجهات مُستخدم جميلة. يُمكنك الحصول على الكتاب وقراءة بعض المُقتطفات منه على موقعه: https://refactoringui.com/
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.
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:
"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.
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.
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 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.
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 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. :)
This entire review has been hidden because of spoilers.
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."
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.
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.
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.
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.
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.
Това е книга за разработчици, които искат да си подобрят уменията относно дизайна на приложенията. И в това си качество е страхотна и мисля да я препрочета пак и пак като я използвам за reference. Чете се буквално за часове. За дизайнери, които вече са такива - предполагам ще им е твърде базова.