Designing
User Interfaces
Exploring User Interfaces, UI Elements,
Design Prototypes and the Figma UI Design Tool
Dario Calonaci
www.bpbonline.com
FIRST EDITION 2021
Copyright BPB Publications, India
ISBN: 978-93-89898-743
All Rights Reserved. No part of this publication may be reproduced, distributed or transmitted in any form or by any means or stored in a database or retrieval system, without the prior written permission of the publisher with the exception to the program listings which may be entered, stored and executed in a computer system, but they can not be reproduced by the means of publication, photocopy, recording, or by any electronic and mechanical means.
LIMITS OF LIABILITY AND DISCLAIMER OF WARRANTY
The information contained in this book is true to correct and the best of authors and publishers knowledge. The author has made every effort to ensure the accuracy of these publications, but publisher cannot be held responsible for any loss or damage arising from any information in this book.
All trademarks referred to in the book are acknowledged as properties of their respective owners but BPB Publications cannot guarantee the accuracy of this information.
www.bpbonline.com
Dedicated to
Dario Calonaci
for always being there when I need him the most,
or a comic book. You cant see it, but hes now blushing.
About the Author
Dario Calonaci is a published author and an award-winning graphic designer, as well as a technical editor. After receiving his art diploma and masters degree in Renaissance classics, he enjoyed working with brands like The Ritz-Carlton, Designers for Obama (Obama for America), The Rio+20 (United Nations conference), and other Fortune companies.
Dario was twenty-three years old when he landed his first editing job and, three years later, his first book, and he hasnt stopped since.
His works have been published in a plethora of books, from the likes BorchDesign to Hightone to Index to SendPoints to Zeixs. Plus it has been seen in a couple of exhibitions in Rome and New York. Hes been featured in interviews and overseas seminars as well (if only he could find those emails ). He has been teaching, and when not following his passions in front of a PC, he can be found wandering the floors of the nearest malls, in awe of the lights and packaging.
About the Reviewer
Idris Rampurawala is a senior software engineer. He has worked on various SaaS products right from its inception to market. He specializes in designing, building and scaling distributed web applications and APIs.
While he is a proficient Full Stack Developer, his expertise lies in technologies such as Python and Javascript, and cloud platforms such as AWS and GCP. Having managed a technical team from a very young age, Idris has honed his skills in team planning and managing deliverables on time. You can visit the site https://dev.to/idrisrampurawala for articles related to his experiences, teachings and learnings.
Acknowledgement
I would personally like to acknowledge people restocking malls, supermarkets, and shopping centers, as, without them, I would have been lost already. I would then like to acknowledge and thank the various geniuses that made and shaped our numerous fields, who are too many to name. I have cited some of them in the book, but space is never a friend; so Im sorry if your name is not directly cited, but Im still thankful for your work.
Last, Id like to address the people who, like me, love to design the most gorgeous, eye-catching packaging for various food items, like ice cream, beverages, pasta, chips, and whatnot. Im always jealous of your assignments and talent. Youre an inspiration.
You know who you are. Here, this toast is for you.
Preface
Hi everyone, Im Dario, and today I will guide you on an adventure full of knowledge, psychology, usability (this to be defined later), fonts, and best practices. But youll also see and learn about errors, practical blindness, illogicality, and more!
Through this book I aim to explain to you what makes a well-designed interface, what lies behind the colored screen on our technological devices, especially, how you can technically design a status using one of my previous clients assignment, plus the reasons why it was made that way.
Because, as one of the best science fiction writers and thinkers once said,
When one teaches, two learn.
- Robert Anson Heinlein
As you must have realized by now, interfaces are a huge part of our life, whether you like it or not. So studying them and the psychology behind them is essential, especially if youre in or interested in being in a technical field. Even if you arent directly involved with the appearance and behavior of the interface the user will directly interact with, knowing a couple or two things more than you know now could be helpful to understand what needs to be made better. So, the primary goal of this book is to provide this information, while relating it to the world you live and see every day.
Chapter introduces the concept of interface design and how it can work, with a couple of use cases.
Chapter focuses on the history of the onscreen medium, because history can and is a great teacher indeed; so youll learn about the reasons behind some of todays constraints as well.
Chapter discusses one of the cores of every interface in every medium: typography. It is still one of the best means of information transmission.
Chapter explores the basics of visual design, because if you want to create an interface, you have to know how some of those parts work, to make it clearer to understand and thus use.
Chapter is a key chapter that explores some of the psychological concepts that regulate our life, while pairing them with modern interface examples.
Chapter discusses user habits, as these affect the way users interact with their surroundings, and hence, the interface.
Chapter is a small one but important chapter that focuses on usability, one of the key features of every good interface.
Chapter explores in detail some of the most common, modern interface elements.
Chapter is a foreword to e-commerce.
Chapter is a small introduction to Figma, our tool of choice, and explains why I chose it.
Chapter is an exercise on building the Shopping Cart feature for a mobile app with our tool of choice, so youll see and apply some of the previously explained concepts yourself.
Chapter is a simple goodbye, with a couple of consideration for your future endeavors.
Downloading the coloured images: