UI Design MCQ solution | TCS Fresco Play
Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.
Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).
All Question of the MCQs Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!
If you found answer for any of the questions is wrong. Please do mention in the comment section, could be useful for others. Thanks!
_________________________
Design Fundamentals
To get started, this topic explains the basics of Design.
It emphasizes the need to have a good understanding of the principles of design for creating a good User Interface.
Design Fundamentals
Design is a method of problem solving. Design is so many things, executed in many different ways,
but the function is always the same. Whether it’s blueprints, a clever UI, a brochure, or a chair – design can help solve a visual or physical problem.
Design Fundamentals
Design is a work process which has a user perspective and drives development based on your specific customers’ needs.
It's ***not purely aesthetic, nor wholly analytical and functional.***When considering the design of your projects, you must think about how everything
fits together in harmony - some would call this a holistic approach, but it's really the only practical way to approach design problems.
Principles of Design
These principles are fundamental to the design and implementation of effective interfaces,
whether for traditional GUI environments, the web, mobile devices, wearables, or Internet connected smart devices.
Figure Ground
Law Proximity
Law of similarity
law of closure
common fate
continuity
Symmetry
Principles of Design
A basic understanding of the principles of good design is the foundation for creating good User Interface.
The following chapters will explain how the principles and elements of design can improve the interface.
Explore the components of User Interface Design and what comprises a truly unified interface that can stand the test of time.
User Interface Design
Now that we understand the fundamentals of design, let’s go a step further and understand what User Interface Design
is and explore the components of User Interface Design.
User Interface Design
User Interface Design is a process of visually guiding a user through a product's interface through interactive elements and across all platforms.
User Interface design is responsible for the transference of a brand's strength and visual assets to a product's interface to enhance the user's
experience.
Elements of User Interface Design
Elements of User Interface Design
You will learn about the following elements of User Interface Design:
Layout Grids
Iconography
Color Theory
Typography
Layout Grids
Layout Grids
In the designers’ toolbox, grids are considered to be one of the fundamental staples.
But why is this? Why are a few grid lines thrown over your canvas so important to the design project?
In short, they help you to structure your design in a way that would otherwise be difficult, time consuming and troublesome.
If you don’t use Grids, your projects will never have visual harmony, and like anything which lacks structure or a strong foundation,
your concepts will be visually inconsistent.
Without a layout grid, graphic elements will not properly work together.
Layout Grid Benefits
1 Keeps your content organized
2 Makes it easier to balance your design
3 Enhances your visual hierarchy
4 Makes it easier to work on multi-page Interfaces
5 Makes the content far more digestible and readable
Iconography
Iconography is an efficient way to communicate a concept in a small amount of space.
This is increasingly important in the era of the shrinking screen.
With the proliferation of mobile devices, icons play an increasingly important role in interface design.
"Icons aid in scannability, save space at smaller screen sizes, and afford clear, tappable targets."
Here are a six guidelines to keep in mind while designing icons so that you don’t leave users scratching their heads.
1.Label your icons unless there is a space constraint
2.Represent both the icon action and object
3.Group similar icons together
4.Ensure icon order and placement are consistent
5.Give your icons a common visual motif
6.Avoid giving icons way too much specific detail
Using Font Icons
The core idea of a font icon (iconfont) is to take a set of icons or pictograms that would normally be implemented as an image or vector file and
then convert it into a font.
Icon font usage in a web app loads a page 14% faster than images and can to be as much as 90% smaller than SVG files.
Color Theory
Color, one of the seven elements of Design, is an important aspect of UI. Since color has a massive impact on your users,
it is important that you know color theory and even a little psychology. Warm colors give off a fiery message,
while cool colors have a calming affect. Analogous color schemes, often found in nature, are pleasing to the eye,
while complementary color schemes have a more energetic feel.
Concepts & Terms
If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology.
A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own amazing color schemes.
Hue
Is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue.
Chroma
Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma.
Saturation
Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.
Value
Value could also be called “lightness.” It refers to how light or dark a color is.
Lighter colors have higher values. For example, orange has a higher value than navy blue or dark purple.
Black has the lowest value of any hue, and white the highest.
Tones
Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.
Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites.
Depending on the hues, they can also add a sophisticated or elegant look.
Shade
A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.
In design, very dark shades are sometimes used instead of black and can serve as neutrals.
Combining shades with tints is best to avoid too dark and heavy a look.
Tint
A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels,
but any pure hue with white added to it is a tint. For e.g; Pink is a color, but it's also a tint of red.
Typography Terms
Typography can simply be described as the art of type. It's everything you can think of – like fonts, sizes, and readability .
Here are some basic Typographic terms you should be aware of:
Type Size
Also called the Cap Height, is the overall height of capital letters in the formation of words.
Ascender
Is the upward tail on letters like h, l, t, b, d, and k.
Descender
Is the downward tail for letters like g, q, and y.
Counter
Is the white space present inside letters like o and p.
X Height
is the height of the letter, and does not include ascenders or descenders.
Baseline
is the boundary that the lowest part of the letter rests on. Take a look at the y, p, g, p and y letters in the illustration above. The solid line they are resting on is the baseline.
Kerning
Is the space between the characters.
Leading
Leading is the space between lines of text, is an invaluable tool for readable text.
Bad leading can ruin an otherwise stellar piece of copy, and good leading can make even the worst type look readable.
Design Language
Design Language
Having understood the principles and elements of User Interface Design, it is imperative that your products adhere to an established design language for a good user experience.
In this topic you will learn about the need for a design language and take a look at the existing design languages.
Design Language
As the platform ecosystem expands, the challenge of creating a cohesive, unified family of products becomes more complex. User should be able to recognize brands and have an intuitive experience regardless of the device they use.
Let’s take a look at understanding brand identity guidelines.
Understanding Brand Identity
Understanding Brand Identity
Brand identity guidelines define the assets and materials that make a company unique. Logos, typography, color palettes, messaging (such as mission statements and taglines), collateral, and more are aggregated and described in brand identity guidelines.
Brand identity guidelines provide answers to these fundamental questions in one centralized hub. But how do we make cohesive products?
Design Language
While brand identity guidelines are fairly tactile, design language guidelines are a bit harder to pin down. Design language style guides articulate a general design direction, philosophy, and approach to specific projects or products.
A unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem.
Design Language
To present itself in a cohesive way across a growing range of products and media, Google developed a design language called material design. It is used in almost every Google Product including YouTube (Currently beta*), Google Search (Currently beta*), Android OS and many others. Let’s take a look at the design languages available and understand why the visual language has established itself.
Design Language
Skeuomorphism, flat design and material design are a few design languages which follow its own design trends. Let’s understand the concept behind them and why they are so successful at their time.
Skeuomorphism
Skeuomorphism refers to a design principle applied to user interfaces in which design cues are taken from the physical world. For example, turning a digital page to resemble the experience of reading a physical book.
Skeuomorphism has famously been one of Apple's key design principles, and part of its Human Interface Guidelines.
The Rise of Flat Design
Flat design is a minimalist UI design genre, or design language, currently used in various graphical user interfaces.
Material Design
Material design is a design language developed by Google. Expanding upon the “card” motifs first seen in Google Now,
it is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as
lighting and shadows.
Style Guide
So what do robust design languages look like? What form do they take? How do you create, maintain, and enforce them?
The cornerstones of good design systems are style guides, which document and organize design materials while providing guidelines, usage, and guardrails.
Style Guide
As it happens, there are many flavors of style guides, including documentation for brand identity, writing, voice and tone, code, design language, and user interface patterns.
Design Language Benefits
Design Language Benefits
Design Languages are important tools that help prevent chaos, both from a design and development standpoint. Here’s why design languages are now essential tools for modern web design and development.
Consistency – Design languages promote consistency and cohesion across a user interface.
This consistency benefits both the people who create these interfaces and their users.
Making design languages central to your process results in user interfaces that feel more united and trustworthy.
This helps users accomplish their tasks faster and empowers them to master the interface.
Shared Vocabulary – Design languages establish a consistent, shared vocabulary between everyone involved in a project,
encouraging collaboration between disciplines and reducing communication breakdowns.
Communication breakdowns are common when many people collaborate on a project. It’s common for different disciplines to have different names for the
same module, and for individuals to invent their own naming conventions.
For true collaboration to occur, it’s essential for teams to speak a common language. Design languages help establish that shared vocabulary.
Education – A pattern library communicates the design language in a very tangible way, which helps stakeholders understand that an underlying system is determining the final interface.
By exposing the design system in the form of a design language, teams can better appreciate consistency and understand why their requests for custom designs receive pushback.
Empathetic Workflow – By making a design language a cornerstone of your workflow designers and developers are forced to think about how their decisions affect the broader design system.
A good design language helps inform designers and developers of the tools they have in their toolbox, and provides rules and best practices for how to use them properly.
Testing – A design language allows you to view interface patterns in isolation, allowing developers to zero in on what’s causing errors, browser inconsistencies, or performance issues.
Speed – Once the pattern library is established, subsequent design and development becomes much faster,
using existing patterns rather than having to generate brand new patterns from scratch every time speed up the entire workflow.
Longevity – The good thing about interface design systems is that they can and should be modified, extended, and
refined for years to come. Even if you were to undertake a major redesign you’ll find that many of the structural interface building blocks
will remain the same. You’ll still have forms, buttons, headings, other common interface patterns.
A design language provides a rock-solid foundation for all future work, even if that future work may look totally different.
---------------------------------------------------
1. What do you get when you add black to a hue (color)?
Shade
2. Name the design concept of making items represented, resemble their real-world counterparts
Skeuomorphism
3. Name the design tool that can be used to establish a spatial hierarchy of the content
Grids
4. The height of a capital letter measured from the baseline
Cap height
5. Name the design language system developed by google
Material Design
6. Name the color scheme you get by mixing different tones, shades and tints within a specific hue
Analogous
7. The name of the invisible line marking the height of a font.
X-Height
8. What is ‘K’in CMYK?
black
9. What’s the space between letters called?
kerning
10. Which one below is a vector image format?
SVG
______________________________
If you have any queries, please feel free to ask on the comment section.
If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.
Please share and support our page!
Post a Comment