Statistics
20
Views
0
Downloads
0
Donations
Designing User Interfaces Exploring User Interfaces, UI Elements, Design Prototypes and the Figma UI Design Tool (English… (Dario Calonaci) (z-library.sk, 1lib.sk, z-lib.sk) (1)
其他Author：Dario Calonaci
Think about UIs using design thinking principles from an award winning graphic designer Key Features ● Practical knowledge of visual design basics and typography. ● Understand the modern UI to kick-start your career with UI designs. ● Introduces you to explore UI designs for e-commerce web applications. Description From the initial introduction about the meaning behind interfaces to the technical skills of thinking and designing a modern UI, this book will guide you on designing the UI of a screen for a real-world application, infused with the newly learned knowledge with the Figma tool. You will be able to explore and practice visual design concepts, namely, color, contrast, balance, consistency, alignments, negative space, how to approach visual impairments, and many more. You will be able to learn about one of the most critical elements of how to think about a UI for which you will explore concepts such as memory, vision, processing of info and objects, models of thinking, and more. Furthermore, you will explore the Figma tool and a live practical example of how to design a UI for an e-commerce graphic application, including its shopping cart page and adding a payment method screen. What you will learn ● Get familiar with the basic visual design concepts. ● Understand the fundamentals of the User Interface and User Interaction. ● An overview of Search Results, Font Psychology, and Typography. ● Learn to work with some common interface elements. ● Understand how real-time collaborative editing works in the Figma UI design tool. Who this book is for This book is literally for everyone! You should only be loaded with plenty of curiosity. No previous knowledge of the field is required. Table of Contents 1. Definition of the User Interface 2. The Web and Graphic User Interfaces 3. Explanation to Typography 4. Visual Design Basics 5. Thinking About User Interaction 6. Usability 7. Know Your Habits 8. Interfaces’ Elements 9. Foreword to an E-commerce 10. A Small Introdu
AI Reading Assistant
Summary and highlights from this book's index; jump to passages in the text
Tags
Support Statistics
¥.00 ·
0times
Text Preview (First 20 pages)
Registered users can read the full content for free
Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.
Page
1
(This page has no text content)
Page
2
Designing User Interfaces Exploring User Interfaces, UI Elements, Design Prototypes and the Figma UI Design Tool Dario Calonaci www.bpbonline.com
Page
3
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 author’s and publisher’s 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.
Page
4
www.bpbonline.com
Page
5
Dedicated to Dario Calonaci for always being there when I need him the most, or a comic book. You can’t see it, but he’s now blushing.
Page
6
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 master’s 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 500 companies. Dario was twenty-three years old when he landed his first editing job and, three years later, his first book, and he hasn’t 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. He’s 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.
Page
7
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.
Page
8
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 I’m sorry if your name is not directly cited, but I’m still thankful for your work. Last, I’d 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. I’m always jealous of your assignments and talent. You’re an inspiration. You know who you are. Here, this toast is for you.
Page
9
Preface Hi everyone, I’m 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 you’ll 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 client’s 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 you’re in or interested in being in a technical field. Even if you aren’t 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
Page
10
provide this information, while relating it to the world you live and see every day. Chapter 1 introduces the concept of interface design and how it can work, with a couple of use cases. Chapter 2 focuses on the history of the onscreen medium, because history can and is a great teacher indeed; so you’ll learn about the reasons behind some of today’s constraints as well. Chapter 3 discusses one of the cores of every interface in every medium: typography. It is still one of the best means of information transmission. Chapter 4 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 5 is a key chapter that explores some of the psychological concepts that regulate our life, while pairing them with modern interface examples. Chapter 6 discusses user habits, as these affect the way users interact with their surroundings, and hence, the interface. Chapter 7 is a small one but important chapter that focuses on usability, one of the key features of every good interface.
Page
11
Chapter 8 explores in detail some of the most common, modern interface elements. Chapter 9 is a foreword to e-commerce. Chapter 10 is a small introduction to Figma, our tool of choice, and explains why I chose it. Chapter 11 is an exercise on building the “Shopping Cart” feature for a mobile app with our tool of choice, so you’ll see and apply some of the previously explained concepts yourself. Chapter 12 is a simple goodbye, with a couple of consideration for your future endeavors.
Page
12
Downloading the coloured images: Please follow the link to download the Coloured Images of the book: https://rebrand.ly/k7ff3vn Errata We take immense pride in our work at BPB Publications and follow best practices to ensure the accuracy of our content to provide with an indulging reading experience to our subscribers. Our readers are our mirrors, and we use their inputs to reflect and improve upon human errors, if any, that may have occurred during the publishing processes involved. To let us maintain the quality and help us reach out to any readers who might be having difficulties due to any unforeseen errors, please write to us at : errata@bpbonline.com Your support, suggestions and feedbacks are highly appreciated by the BPB Publications’ Family.
Page
13
Did you know that BPB offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.bpbonline.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at business@bpbonline.com for more details. At you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on BPB books and eBooks.
Page
14
BPB is searching for authors like you If you're interested in becoming an author for BPB, please visit www.bpbonline.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea. The code bundle for the book is also hosted on GitHub at In case there's an update to the code, it will be updated on the existing GitHub repository. We also have other code bundles from our rich catalog of books and videos available at Check them out! PIRACY If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at business@bpbonline.com with a link to the material. If you are interested in becoming an author
Page
15
If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit REVIEWS Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at BPB can understand what you think about our products, and our authors can see your feedback on their book. Thank you! For more information about BPB, please visit
Page
16
Table of Contents 1. Definition of the User Interface Structure Objective Take a Look Around Do a Click! Conclusion Points to remember MCQ Answers Questions Keywords 2. The Web and Graphic User Interfaces Introduction Structure Objective Human-computer interaction Let there be light Everyday life Here's floppy! The Mother of All Demos Steve Jobs The Macintosh, IBM, and Microsoft Well, what's NeXT? Conclusion Points to remember MCQ
Page
17
Answers Questions Keywords 3. Explanation to Typography Structure Objective There Ink More Than Meets the Eye You're My Type! Blackletters Serifs Sans Serifs Monospaced Scripts Display Typefaces Sans vs. Serif Legibility and Readability Conclusion Points to remember MCQs Answers Questions Keywords 4. Visual Design Basics Introduction Structure Objective It’s time to talk about colors One, two, and one two three
Page
18
Schemes Other information Feelings Vision deficiencies Being negative is a positive thing Time for a little Gestalt Similarity Simplicity/Prägnanz Proximity Continuity Figure/Ground Closure Common region Grids Hierarchy, Dominance, Rhythm, and Unity Balance Conclusion Points to remember MCQ Answers Questions Keywords 5. Thinking User Interaction Introduction Structure Objective Vision is perception Time to talk about conventions Human faces as interfaces When I talk about the eye, I mean the entire eye
Page
19
More of the same? Can you afford that? Affordable model kits Be user-centered People don’t read Giving credits where they are due I hope you’re paying attention One at a time Filtering is caring Real life is virtually less weary Do you remember me? Put it in your mind Allow customizations I was thinking about … One wrong example You got to help Drive the experience Who is your typical consumer? Card sorting Tree testing Five-second tests Blur testing First-click testing User tasks User surveys A/B testing Remote and unmoderated testing Phone interviews Keystroke-level modelling Expert reviews
Page
20
Analyze the results One unpopular truth Conclusion Points to remember MCQ Answer Questions Keywords 6. Know Your Habits Introduction Structure Objective That’s understandable! Making the habit Conclusion Points to remember MCQ Answer Questions Keywords 7. Usability Introduction Structure Objective Usability Bad usability is a possibility An update Deliberate is the word
Comments 0
Loading comments...
Reply to Comment
Edit Comment