Designing User Interfaces

Exploring User Interfaces, UI Elements, Design Prototypes and the Figma UI Design Tool (English Edition)

Dario Calonaci

• Editorial: BPB Publications
• Año: 2021
• ISBN:
  9789389898743
• Categoría: Ciencia de la computación
• Categoría: Medios digitales

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 Introduction to Figma
11. Building a Shopping Cart
12. Farewell and Future Considerations

About the Authors
Dario Calonaci is a published author and an award-winning graphic designer. After completing his Art Diploma under the Renaissance classics, he worked with brands like The Ritz-Carlton, Designers for Obama, Rio+20 (United Nations conference), and Fortune 500 companies.His art has been published worldwide in a plethora of books, plus exhibitions from Rome to New York. LinkedIn Profile: https://www.linkedin.com/in/dariocalonaci/
Blogs: www.dariocalonaci.com

CHAPTER 1

Definition of the User Interface

Hello everyone, my name is Dario, and I will guide you through this chapter, where you will learn what is usually defined as interface and user interface and why they are important, even if you don’t know they are there (and usually that happens when they’re well designed).

Then, we’ll take a quick look at some of the different kinds of onscreen ones because, as of today, there is almost always one screen around us everywhere we go; our bonds and interactions with them have only started.

For this chapter, like the next couple of ones, you won’t need any special software – just your brain, imagination and curiosity. Things that are always lovely to bring around, don’t you think?

Structure

In this chapter, we will discuss the following topics:

• Take a look around
• Do a click!
  • Command Line Interface (CLI)
  • Graphical (GUI)
  • Menus
  • Forms
  • Natural Languages Ones

Objective

The objective of this chapter is to help you understand concepts and designed systems that lie all around us so that you’ll be more prepared to design some of them in the future.

Take a Look Around

Breathe. Relax. Where are you now?

Are you at home, laying under the cosy duvet you choose? Or are you sitting on that beautiful sofa of yours, looking at your 55-inches brand new TV?

Are you sipping a cup of tea in your favourite café? Or are you in the metro, waiting for it to reach your destination?

Whenever you are, whatever you’re doing, there’s the good possibility of a user interface being near you, if not dozens or hundreds of them.

The term ‘interface’ is usually regarded as the place or a point of connection/ intersection of two things (users, objects, or anything else), that comes together and interact with each other, affecting one or both of them. Where worlds collide, we hope there’s a well-done interface to save us.

It’s a complex, sometimes more virtual concept.

Where do you fit in the picture? Let’s take an example for better understanding: every book you see is a user interface. Through its pages and words, you can enter unknown worlds and experience them; you can feel their emotions and thoughts and interact, although virtually, with the characters and their creators. Or you can gain new knowledge about different materials and subjects, like history, geography, science; it’s up to your taste and curiosity.

A book can be seen and defined as one of the best designs ever done. Its functions and aspect are universally understandable and remained the same throughout the world; while its content and your desire to assimilate it are conceivable as two worlds, the wise mixture and balance made by the cover, pages, and words imprinted on them are exactly one of the many user interfaces that we are presented with daily.

Each time you’re doing something that seems as simple as flipping a page or your eyes jumping from word to word or line to line, you’re interacting with what should be defined as a user interface.

Let’s step back a little bit, shall we?

Put that little, now confusing book back on the coffee table – and relax a little with your new TV. But first, you need to turn it on. What better way to do this than with the remote?

Well, you guessed it! Even your TV remote control is a user interface!

Think about it: what do you use it for? You turn on your television, change the channels, adjust the volume…each button with its function, with its place on the body and their layout making for a compelling case of user interface.

And interfaces come stacked one on another too! Your cellphone? It evolved so much, from the huge buttons and heavy models that were around the same weights as portable laptops nowadays, to what is that almost keyless device that we hold in our hands. Those first bodies with clattering keys where a really smart way for users to interact with the screen and the info that is presented, a clever example of a user interface (so clever that still survives in other concepts and objects as of today.)

And yes, you were interacting with concrete keys to make your choices and push and select virtual ones – that’s the secret of interfaces, either user or other kinds: they are layered so well, stacked on one another, that you won’t even notice – or consider them one single being. One of their rules is that ‘the user must know where they are’ (, that on a book it’s the always understated page indicator, which covers this exactly designed scope) can also be seamlessly exchanged and set from one status to the other, with an indicator on the screen, an illuminated physical button, or both.

Tip: Even your voice and language could be listed as user interfaces.

As you see, user interfaces are scattered everywhere: they are in your house, in your supermarket, in your city, in your bathroom! When you’re interacting with something, when you’re reaching for something, be it in the real world or the virtual one, in search of meaning or information, you’re almost always doing so through the usage of a user interface or something that can be stretched into this definition.

Do a Click!

While the physical world offers us the chance to get a better understanding of the general concept, the cyber area permits further categorization of its specific phenomena.

There are many naming variations and different proposals about the main areas and fields of a virtual user interface, with some being more generalist and others more specifically named and divided. There isn’t a ‘universally recognized’ one.

Some of the most commonly used ones are as follows (in no specific order):

• Command-Line Interfaces (CLI)
  • Plain text for everything, with a prescribed set of possible actions, to be interacted by typing input. Take a look at the following screenshot:

    

    Figure 1.1: An example of CLI interface as of today, Command Prompt on Windows, screenshot captured on my computer.©2020 Microsoft. Used with permission from Microsoft.
• Graphical User Interfaces (GUI)
  • One of the most commonly used ones, it is made with various layers of virtual, graphical objects to be interacted with, and they should also provide continuous feedback to the user. Take a look at the following image:

    

    Figure 1.2: One great GUI, Microsoft Paint 3D on Windows, screenshot captured on my computer. ©2020 Microsoft. Used with permission from Microsoft.
• Menus
  • These are useful when there is the need of presenting a limited choice to the users before allowing them freedom of choice, or when there are so many choices that they can and should be broken down in a smaller bit of info. The most famous usage of such structures and UI are Automated Teller Machines, the ATMs.
• Forms
  • Sometimes, gathering precise info is all you need. You may be registering for a job application, a gym membership, or a new credit card. You may be redirected or presented with a whole page made up only by form fields – and that is still a user interface.
• Natural Language ones
  • These are some of the most difficult and expensive ones since the user should interact with them using the same informal language they use to interact with another human being, without much physical input.
    You can find them on all the latest phones and computers, and some of them can even integrate with the smart appliances in your home! Well-known software in this field are Alexa from Amazon, Siri from Apple, Google Assistant from Google, and Cortana from Microsoft.

Conclusion

With technology always growing, new kinds of user interfaces are introduced almost daily, like stylus, interactive pens, touch-based devices, virtual reality, and robotics. Every medium brings something to the table that needs to be addressed and studied – with their peculiarities requiring understanding and development.

In the next chapter, we will take a brief look at the evolution of some of the most well-known and useful types of user interfaces.

Points to remember

• There are all kinds of interfaces: screens, printed text, packaging boxes…general rule: it is an interface if it gives info or content.
• User interfaces allows the user to interact and gain info or take the desired action. You’re looking at a traffic light? Chances are there is a button/sensor (UI) on it that, with your proper interaction, will make it (in due time) turn its lights green (both the lights and the color are interfaces, giving you the info of both a safer or dangerous crossing.)
• When they’re well designed, you barely notice them (this also happens due to common usage and old solutions, like a book. Flip a page, dang! User experience)

MCQ

1. You’re surrounded by _____?
   1. Reptilians
   2. Vegans
   3. Interfaces
2. Sometimes you don’t see them. Why?
   1. I’m not saying it was aliens…but it was aliens
   2. Good design
   3. I’m sorry, I was distracted by a flu...