K. J.

Somaiya College of Engineering, Mumbai-77

(Autonomous College Affiliated to University of Mumbai)

Batch: B8 Roll No.: 16010121813

Experiment / assignment / tutorial No. 5

Grade: AA / AB / BB / BC / CC / CD /DD

Signature of the Staff In-charge with date

Title: To formulate visually pleasing (color, screen-based controls) design for the
product/application under consideration.

______________________________________________________________________
Objective: To study and explore the color theory for visually pleasing design along with
the importance of screen-based controls.
______________________________________________________________________
Expected Outcome of Experiment:

Course After successful completion of the course students should be able to

Outcome
CO5 Illustrate the working of UX design process.
______________________________________________________________________
Books/ Journals/ Websites referred:
https://www.colormatters.com/color-and-design/basic-color-theory

____________________________________________________________________
Pre Lab/ Prior Concepts:

______________________________________________________________________
New Concepts to be learned:
o Color Psychology.
o Web Content Accessibility.
o Screen based controls.
_____________________________________________________________________

Department of Computer Engineering (UED/ July-October 2023) Page 1

 K. J. Somaiya College of Engineering, Mumbai-77

Importance of Color Theory

Color theory is fundamental to design and communication. Colors convey
emotions, enhance aesthetic appeal, and improve usability through readability and user
experience. They shape brand identities, influence our mood, and carry varying
meanings across cultures. Furthermore, they ensure inclusivity for those with visual
impairments, guide focus in design, establish visual importance, and serve as pivotal
tools for artistic expression. Essentially, a grasp of color theory ensures content is both
compelling and contextually meaningful.

Use of any tool (Open Source) to design

● Pamphlet for marketing your product
● Application of relevant color principles on above design
● Apply web accessibility principle for your website
● Color Blindness Accessibility

Conclusion from Virtual Lab activity.

Department of Computer Engineering (UED/ July-October 2023)Page 2

 K. J. Somaiya College of Engineering, Mumbai-77

Color theory plays an integral role in web design, ensuring content is both
visually appealing and easily legible. By allowing users to manipulate text and
background colors within a simulated web environment, one gains hands-on experience
in understanding the importance of contrasting colors for readability. The experiment
emphasizes the significance of the color brightness difference and color difference
formulae, which are crucial tools in achieving optimal legibility. Moreover, adhering to
W3C guidelines ensures that web content is accessible to a broader audience, taking into
account various visual capabilities. Ultimately, while customization is an enticing
feature, it underscores the need for a well-informed understanding of color contrasts to
avoid design pitfalls. Through this experiment, one learns not only about the aesthetic
aspects of color but also about its functional role in enhancing user experience on digital
platforms.

Screen based controls:

Screen-based controls are interactive elements within digital interfaces,
facilitating user navigation and interaction. These controls range from buttons that
trigger actions, text fields for input, dropdown lists for selections, to progress bars
indicating task completion. Elements like checkboxes and radio buttons allow for

Department of Computer Engineering (UED/ July-October 2023)Page 3

 K. J. Somaiya College of Engineering, Mumbai-77

choice-based interactions, while sliders and toggle switches adjust settings or

preferences. Additionally, tabs help segregate content, modal windows prompt user
actions, and tool tips offer supplementary information. Together, these controls
enhance the usability and intuitiveness of digital platforms, streamlining user
experiences.

Types of Screens based controls with brief description.

Screen-based controls refer to the interactive elements that users encounter on
digital interfaces, such as websites, applications, and software. These controls are
crucial for ensuring user interaction and functionality. Here are some common types of
screen-based controls with brief descriptions:

1. Buttons: Clickable elements that trigger a specific action, like "Submit" or

"Cancel".
2. Text Fields: Areas where users can input text, such as search bars or form
inputs.
3. Dropdown Lists: A menu that allows users to select one option from a list.
Once clicked, it displays multiple choices.
4. Checkboxes: Small boxes that users can select (check) or deselect (uncheck).
They are typically used for multiple-choice scenarios.
5. Radio Buttons: Circular buttons used for single-choice scenarios. Only one
radio button in a grouped set can be selected at a time.
6. Sliders: Graphical control elements that allow users to select a value or range
by moving an indicator, often seen for volume or brightness controls.
7. Toggle Switch: A control that has two states, such as on/off or true/false. Used
to quickly switch between two options.
8. Tabs: Sections of content that are divided into multiple panels. Only one tab's
content is visible at a time, and users can switch between tabs to view different
panels.
9. Progress Bars: A visual indication of the completion status of a task, like file
uploads or downloads.

Department of Computer Engineering (UED/ July-October 2023)Page 4

 K. J. Somaiya College of Engineering, Mumbai-77

10. Modal Windows (or Dialog Boxes): Small windows that appear on top of the
main content, often used to prompt users for an action or provide additional
information without navigating away from the current screen.
11. Menus: Lists of options or commands presented to the user, typically
organized in a hierarchy.
12. Tool Tips: Brief text descriptions that appear when users hover over or focus
on an element. They provide extra information about the function of the
control.
13. Scroll Bars: Vertical or horizontal bars that appear on the side of content that
extends beyond the viewable area. They allow users to navigate through
extended content.
14. Date and Time Pickers: Controls that allow users to select dates, times, or
both from a visual interface, often presented as a calendar.
15. Hyperlinks: Text or images that, when clicked, redirect the user to another
location, either within the same application or to an external location.

Selection of appropriate screen-based controls for the application/product under

consideration with proper justification:

1. Buttons: Buttons for navigating between different pages on our web-

application. We also use on screen arrows to move in the course catalogue. Also
used in our video player to toggle full screen and pause/play.
2. Text Fields: Text fields to enter personal details, enter course name in search
boxes, etc.
3. Checkboxes: Checkboxes can be used to filter courses while in the course store
section.
4. Sliders: Sliders can be used to fix a minimum and maximum price in the course
store. Also used in volume slider.
5. Progress Bar: Progress Bar shows the percentage of completion of our course.
6. Hyperlinks: They can be used to link resources and study materials.

Department of Computer Engineering (UED/ July-October 2023)Page 5

 K. J. Somaiya College of Engineering, Mumbai-77

Results & Screenshots of Color theory and screen-based controls for selected
application/product:

Department of Computer Engineering (UED/ July-October 2023)Page 6

 K. J. Somaiya College of Engineering, Mumbai-77

Conclusion:

Hence, in this experiment, we explored the color theory, in conjunction with

screen-based controls for our product/application. We understood that integrating a
well-thought-out color palette with effective screen-based controls is necessary to
achieve an intuitive and visually appealing design that aligns with the objectives of our
product/application.

Department of Computer Engineering (UED/ July-October 2023)Page 7