RCA GRAPHICAL USER INTERFACE

Graphic design basics | Level-3 2023-2024

[Type text] Page 0
Contents

1. Introduction ..........................................................................................................................................................3

2. Description of core concepts and elements of Graphic Design ............................................................................3

2.1. Graphic design career ..................................................................................................................................3

2.2. Basic tools used in graphic design ................................................................................................................6

2.2.1. Software tools .....................................................................................................................................6

2.2.2. Non-Software Tools .............................................................................................................................7

2.3. Some elements of interface design ..............................................................................................................8

2.3.1. Input Controls ......................................................................................................................................9

2.3.2. Navigational Components .................................................................................................................12

2.3.3. Information Components ..................................................................................................................15

2.3.4. Containers .........................................................................................................................................17

2.4. Interface elements interpretation .............................................................................................................18

3. Description of key features and formats of digital images. ................................................................................19

3.1. Description of digital images key features .................................................................................................19

3.1.1. Pixel ...................................................................................................................................................19

3.1.2. Resolution ..........................................................................................................................................22

3.1.3. Size and quality and quantity ............................................................................................................23

3.1.4. Image compression ...........................................................................................................................24

3.2. Description of common raster formats ......................................................................................................25

3.2.1. Usage of raster images ......................................................................................................................25

3.2.2. Advantages of raster files. .................................................................................................................25

1
 3.2.3. Disadvantages of raster files. ............................................................................................................26

3.2.4. Common raster images file formats ..................................................................................................26

3.3. Description of common vector formats .....................................................................................................27

3.3.1. 2D vector formats ..............................................................................................................................27

3.3.2. 3D vector formats ..............................................................................................................................28

3.3.3. Compound formats ...........................................................................................................................28

3.3.4. Stereo formats ...................................................................................................................................29

4. Description of Graphic design principles ............................................................................................................29

4.1. Visible Language .........................................................................................................................................29

4.2. Principles of User Interface Design ............................................................................................................29

4.2.1. Tips and Techniques ..........................................................................................................................29

4.2.2. Three fundamental principles involved in the use of the visible language .......................................32

4.2.3. Other principles .................................................................................................................................32

4.3. Color Design Principles demonstration ......................................................................................................33

4.3.1. Understanding color ..........................................................................................................................33

4.3.2. Color Design Principles ......................................................................................................................33

4.4. Description of advantages and disadvantages for using color ...................................................................34

4.4.1. Some advantages for using color to help communication ................................................................34

4.4.2. Some disadvantages for using color ..................................................................................................34

4.4.3. Color Symbolism ................................................................................................................................35

4.5. Considerations on design and user experience .........................................................................................35

5. Exercises..............................................................................................................................................................36

2
CHAP I: Graphic design basics
1. Introduction

Graphic design is the craft of planning and creating visual content to communicate ideas and
messages.

Graphic design is everywhere you look in the digital age — from billboards to cereal boxes to mobile
apps. Through incorporating different elements and principles, these designs can influence our
perception and emotions.

Graphic design is also known as communication design, and Graphic Designers are essentially visual
communicators. They bring visual concepts to life, most commonly through graphic design software,
and inform or engage consumers through text, graphics and images.

Graphic design is one way that companies connect with consumers. Design can be used

 to promote and sell products,

 to convey a message,
 to develop a brand identity.

Though some graphic design has a commercial purpose, Graphic Designers combine art and business, so
the creative process is informed in part by business goals.

2. Description of core concepts and elements of Graphic Design

2.1. Graphic design career

Graphic design is a great career for people who are creative thinkers and enjoy art, technology, and
communication.

Interested in pursuing a career in graphic design? Graphic design is sometimes thought of as a single
discipline, but there are actually a variety of different specializations within the field. While some
graphic designers are generalists and may work on multiple types of projects, others specialize in more
particular types of graphic design skills. Popular career for graphic designers include:

1) Brand Identity Design

Brand identity designers are responsible for crafting the visual identity of the companies they work
for.

3
 Example: Designing company logo and business cards. Beyond this, identity designers also
create the entire look and feel of a company’s visual presence. As part of this, they create color
palettes, decide on the types of images a company will use, determine the typography, and
create other accompanying visual elements

2) Marketing & Advertising Design

Whether appearing online or in print, marketing and advertising designs are key elements of any
company’s promotional strategy.

Since the goal of marketing and advertising is to prompt consumers to make a purchase or sign
up for a product or service, graphic designers working in these areas need to have a firm
understanding of behavioral psychology when it comes to purchasing behavior.

Graphic designers specializing in advertising & marketing focus on creating assets such as:

 Print & Digital Advertisements

 Social Media Graphics
 Podcast Cover Art
 Banners
 Marketing emails
 Brochures & Posters
 Billboards
 Vehicle wraps
 Pitch Decks & Presentations

3) Packaging Design

Physical products need packaging. These types of graphic designers need to have a strong
grasp of branding as well as consumer behavioral psychology to create packages that make
customers want to make a purchase.

They need to be proficient at color theory and typography, as well as any laws or regulations
about the information that needs to appear on packaging (such as nutrition information).

4) Web & User Interface Design

Web and UI designers create designs for websites and apps. They need to have a solid grasp of
design principles, as well as an understanding of user experience design and basic coding
principles.

4
5) Print & Publication Design

Graphic designers used to work entirely in the print world, and there are still plenty of
opportunities for this kind of print design work.
Print & publication designers typically have their hands in all sorts of print-related projects such
as:
 Book covers
 Magazine & Newspaper layouts
 Menu Design
 Album Covers
 Brochures & Flyers

6) Graphic illustration

Graphic illustrators are usually tasked with creating illustrations for commercial and editorial
purposes, as well as illustrations that live on web designs and social media. These types of
graphic designers will often create their illustrations digitally, but some may also use more
analog tools and then digitize their images

5
 7) Data Visualization & Infographic Design
Data visualization and infographic designers need to have a solid understanding of how to
represent data accurately and in ways that make it easier to understand.

Working in this type of graphic design role means you need to understand how to work with
large data sets and how to make that information digestible for people who aren’t data
scientists.

It’s helpful for data visualization and infographic designers to have at least some background
knowledge and experience with data science. The better they understand the data they’re
presenting, the more equipped they are to translate that data into easy-to-understand visuals.
Infographics and data visualizations may be static or interactive (such as those used in
dashboards).

Figure 1: Infographics and data visualizations

2.2. Basic tools used in graphic design

Graphic design tools are tools used to create, edit, and view graphic arts. There are many types of
graphic design software available, each with different tools and functions.

Depending on the software, users can create illustrations, develop multimedia products, stylize or edit
images, or format layouts.

2.2.1. Software tools

Graphic Designers rely on software to bring their ideas to life. Photoshop, Sketch, Illustrator, InDesign,
and After Effects are among the best software for graphic design.

6
1) Photoshop

Photoshop is a graphic editor that is best used for image editing. It is the industry standard for
manipulating photos and computer art. Photoshop offers 2D and 3D image manipulation, compositing,
video editing, and image analysis.

2) Sketch

Sketch is a vector-based tool available on Mac and focuses on web, app, and interface design. This is a
great program for designing icons, ad banners, social media images, and presentation materials. It also
has many UI and UX-related usages, such as icon design, prototyping, and creating user flows.

3) Illustrator

With Illustrator, you can create everything from vector illustrations and logos to graphics and fonts.
While Illustrator shares many similar tools and functions with Photoshop, it is centered around vector
design, which means that you can resize and rescale designs without losing image clarity.

4) InDesign

InDesign is a page layout program and an essential tool for Designers working in publishing. This
software can be used for laying out magazines and newspapers, or putting together reports and
brochures. With InDesign, Designers can effectively organize text, create layout formats, insert image
placeholders, and save files in a print-ready format.

5) After Effects

After Effects is a motion graphics and visual effects software that is ideal for Graphic Designers who
incorporate motion into their work. With After Effects, designers can create animations, movie titles,
transitions, or even design in a 3D space

2.2.2. Non-Software Tools

Along with design software, Graphic Designers also rely on a few other tools, including pen and paper,
computers, stylus and graphics tablets, storage devices, and cameras.

1) Pen and paper

A pen and paper is the fastest and easiest way to bring ideas into the world. Graphic Designers use pen
and paper to sketch design ideas and take notes.

7
2) A computer

This is an obvious but essential tool for Graphic Designers. Because Graphic Designers primarily use
design software to complete their work, they need a computer that can adequately run a range of
software. A large, high-definition monitor can also be particularly useful for Designers.

3) Stylus and graphics tablet

A tablet and stylus is a good alternative to the traditional paper and pen, and is particularly useful for
Designers who want to work or sketch wherever they go. It imitates the feeling of drawing by hand, but
provides added capabilities like instant colors, filters, editing, and more.

4) Storage devices

Graphic Designers work with large files and applications, which can quickly take up a lot of computer
storage. To ensure adequate storage for their designs, Graphic Designers use cloud or physical storage
devices. Graphic Designers will generally want at least a terabyte of storage.

5) Camera

For Graphic Designers who incorporate original photos and videos into their work, a high-quality digital
camera is essential. While smartphone cameras can work in a pinch, Graphic Designers should invest in a
DSLR camera if they will be regularly taking photos.

2.3. Some elements of interface design

The elements of interface design are the building blocks that make up a user interface (UI). Effectively
choosing and adopt those elements when appropriate will help with task completion, efficiency, and
satisfaction.

Interface elements include but are not limited to:

 Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text
fields, date field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
 Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal
windows
 Containers: accordion

8
2.3.1. Input Controls

Element Description Examples

Checkboxes Checkboxes allow the user to select

one or more options from a set. It
is usually best to present
checkboxes in a vertical list. More
than one column is acceptable as
well if the list is long enough that it
might require scrolling or if
comparison of terms might be
necessary.

Radio Radio buttons are used to allow

buttons users to select one item at a time.

Dropdown Dropdown lists allow users to select

lists one item at a time, similarly to
radio buttons, but are more
compact allowing you to save
space. Consider adding text to the
field, such as ‘Select one’ to help
the user recognize the necessary
action.

9
Element Description Examples

List boxes List boxes, like checkboxes, allow

users to select a multiple items at a
time,but are more compact and can
support a longer list of options if
needed.

Buttons A button indicates an action upon

touch and is typically labeled using
text, an icon, or both.

Dropdown The dropdown button consists of a

Button button that when clicked displays a
drop-down list of mutually
exclusive items.

10
Element Description Examples

Toggles A toggle button allows the user to

change a setting between two
states. They are most effective
when the on/off states are visually
distinct.

Text fields Text fields allow users to enter

text. It can allow either a single line
or multiple lines of text.

Date and A date picker allows users to select

time pickers a date and/or time. By using the
picker, the information is
consistently formatted and input
into the system.

11
2.3.2. Navigational Components

Element Description Examples

Search Field A search box allows users to

enter a keyword or phrase
(query) and submit it to
search the index with the
intention of getting back the
most relevant results.
Typically search fields are
single-line text boxes and are
often accompanied by a
search button.

Breadcrumb Breadcrumbs allow users to

identify their current
location within the system
by providing a clickable trail
of proceeding pages to
navigate by.

12
Element Description Examples

Pagination Pagination divides content

up between pages, and
allows users to skip between
pages or go in order through
the content.

Tags Tags allow users to find

content in the same
category. Some tagging
systems also allow users to
apply their own tags to
content by entering them
into the system.

13
Element Description Examples

Sliders A slider, also known as a

track bar, allows users to set
or adjust a value. When the
user changes the value, it
does not change the format
of the interface or other info
on the screen.

Icons An icon is a simplified

image serving as an intuitive
symbol that is used to help
users to navigate the
system. Typically, icons are
hyperlinked.

Image Image carousels allow users

Carousel to browse through a set of
items and make a selection
of one if they so choose.
Typically, the images are
hyperlinked.

14
2.3.3. Information Components

Element Description Examples

Notifications A notification is an
update message that
announces something
new for the user to see.
Notifications are
typically used to
indicate items such as,
the successful
completion of a task,
or an error or warning
message.

Progress A progress bar

Bars indicates where a user
is as they advance
through a series of
steps in a process.
Typically, progress
bars are not clickable.

15
Element Description Examples

Tool Tips A tooltip allows a user

to see hints when they
hover over an item
indicating the name or
purpose of the item.

Message A message box is a

Boxes small window that
provides information
to users and requires
them to take an action
before they can move
forward.

16
Element Description Examples

Modal A modal window

Window requires users to
(pop-up) interact with it in some
way before they can
return to the system.

2.3.4. Containers

Element Description Examples

Accordion
An accordion is a
vertically stacked list of
items that utilizes
show/ hide
functionality. When a
label is clicked, it
expands the section
showing the content
within. There can have
one or more items
showing at a time and

17
Element Description Examples

may have default

states that reveal one
or more sections
without the user
clicking

2.4. Interface elements interpretation

This includes understanding the visual design of the elements, as well as their intended purpose and
how they interact with each other.

There are many different types of interface elements, each with its own unique purpose. Some common
examples include:

 Buttons: Buttons are used to initiate an action. They are typically labeled with text or an icon,
and they can be clicked, tapped, or pressed to perform the desired action.
 Text fields: Text fields are used to enter text. They can be used to enter a variety of information,
such as a username, password, or search term.
 Checkboxes: Checkboxes are used to select one or more options. They are typically labeled with
text, and they can be clicked or tapped to toggle the selected state.
 Radio buttons: Radio buttons are used to select a single option from a group of options. They
are typically arranged in a circle, and only one radio button in the group can be selected at a
time.
 Dropdown lists: Dropdown lists are used to display a list of options. The list is hidden until the
dropdown button is clicked or tapped.
 List boxes: List boxes are used to display a list of options that can be scrolled through.
 Toggles: Toggles are used to turn a setting on or off. They are typically represented by a switch
that can be flipped up or down.
 Icons: Icons are used to represent objects, actions, or concepts. They are typically small and
visually distinctive.

18
3. Description of key features and formats of digital images.

Digital images are electronic representations of visual content that can be viewed, edited, and shared
using digital devices and software.

3.1. Description of digital images key features

3.1.1. Pixel

A pixel (short for picture element) is the smallest unit of information in a digital image. It is a tiny square
that is arranged in a grid on a display device. Each pixel has a unique color or shade, which is determined
by its brightness and color components.

In digital image processing, pixels are represented by a set of numbers. The number of numbers used to
represent each pixel is called the bit depth. A 1-bit image uses only one number to represent each pixel,
so it can only display two colors: black and white. A 2-bit image uses two numbers to represent each
pixel, so it can display four colors: black, white, gray, and dark gray. A 24-bit image uses 24 numbers to
represent each pixel, so it can display over 16 million colors.

The number of pixels in an image is called the resolution. The higher the resolution, the more pixels
there are in the image, and the more detailed the image will be. For example, a 1024 x 768 image has
1024 pixels in width and 768 pixels in height, for a total of 786,432 pixels.

The color of a pixel is determined by its red, green, and blue (RGB) components. Each component is
represented by a number between 0 and 255, where 0 represents no intensity and 255 represents
maximum intensity. For example, a pixel with RGB values of 255, 0, 0 is red, while a pixel with RGB
values of 0, 255, 0 is green.

Pixels are the building blocks of digital images. They are used to store and display images on computers,
cameras, and other devices. The number and size of pixels in an image determine its resolution and
quality.

19
1) Pixel count

The first kind of resolution refers to the pixel count which is the number of pixels that form your
photo. In order to calculate this resolution you just use the same formula you would use for the
area of any rectangle; multiply the length by the height. For example, if you have a photo that
has 4,500 pixels on the horizontal side, and 3,000 on the vertical size it gives you a total of
13,500,000. Because this number is very unpractical to use, you can just divide it by a million to
convert it into megapixels. So 13,500,000 / 1,000000 = 13.5 Megapixels.

2) Pixel density

The other kind of resolution is about how you distribute the total amount of pixels that you have,
which is commonly referred as pixel density.

Now, the resolution is expressed in dpi (or ppi), which is the acronym for dots (or pixels) per
inch. So, if you see 72 dpi it means that the image will have 72 pixels per inch; if you see 300 dpi
means 300 pixels per inch, and so on.

The final size of your image depends on the resolution that you choose. If an image is 4500 x
3000 pixels it means that it will print at 15 x 10 inches if you set the resolution to 300 dpi, but it
will be 62.5 x 41.6 inches at 72 dpi. While the size of your print does change, you are not
resizing your photo (image file), you are just reorganizing the existing pixels.

20
In summary, resolution is not the same as size, but they are related.

Imagine a rubber band, you can stretch it or shrink it but you’re not changing the composition of
the band, you’re not adding or cutting any of the rubber.

21
3.1.2. Resolution

Image resolution is the detail an image holds. The term applies to raster digital images, film
images, and other types of images. Higher resolution means more image detail.

1) Resolution refers to the number of pixels in an image.

Resolution is sometimes identified by the width and height of the image as well as the total
number of pixels in the image. For example, an image that is 2048 pixels wide and 1536 pixels
high (2048 x 1536) contains (multiply) 3,145,728 pixels (or 3.1 Megapixels). You could call it a
2048 x 1536 or a 3.1 Megapixel image. As the megapixels in the pickup device in your camera
increase so does the possible maximum size image you can produce. This means that a 5
megapixel camera is capable of capturing a larger image than a 3 megapixel camera.

2) How does image resolution play out on my computer monitor?

The computer screen you are looking at right now is set at a particular resolution as well. The
larger the screen, the larger you likely have your screen resolution set. If you have a 17" monitor,
likely you have it set at 800 x 600 pixels. If you have a 19" screen it is likely set at 1024 x 768.
You can change the settings but these are optimum for those screen sizes.

Now, if your monitor is set to 800 x 600 and you open up an image that is 640 x 480, it will only
fill up a part of your screen. If you open up an image that is 2048 x 1536 (3.1 megapixels) then
you will find yourself moving the slider bar around to see all the different parts of the image. It
just won't fit.

If you are going to put your image on a webpage or email it to a friend then you will want to first
make it a useful size. Not too big, not too small. Maybe 200-300 pixels high would be a nice
size. You can also reduce the size of the file (not necessarily the size of the image) so it loads
faster. You reduce the file size by compressing the image (we are looking at this image
compression section).

22
3.1.3. Size and quality and quantity

1) File size

The file size of an image is the digital size of the image file, measured in kilobytes (K),
megabytes (MB), or gigabytes (GB). File size is proportional to the pixel dimensions of the
image. Images with more pixels may produce more detail at a given printed size, but they require
more disk space to store and may be slower to edit and print. Image resolution thus becomes a
compromise between image quality (capturing all the data you need) and file size.

Another factor that affects file size is file format. Because of the varying compression methods used by
GIF, JPEG, PNG, and TIFF file formats, file sizes can vary considerably for the same pixel dimensions.
Similarly, color bit-depth and the number of layers and channels in an image affect file size.

Photoshop supports a maximum pixel dimension of 300,000 by 300,000 pixels per image. This restriction
places limits on the print size and resolution available to an image.

In addition to image size, the quality of the image can also be manipulated. Here we use the word
"compression." An uncompressed image is saved in a file format that doesn't compress the pixels in the
image at all. Formats such as BMP or TIF files do not compress the image. If you want to reduce the "file
size" (number of megabytes required to save the image), you can choose to store your image as a JPG
file and choose the amount of compression you want before saving the image.

2) Quantity vs quality

A lot of people think that megapixels equal quality. And in a sense it does because the more pixels you
have to spread out, the higher the pixel density will be.

However, on top of the quantity you should also consider the bits per pixels, this is what determines the
amount of tonal values that your image will have.

3) Bits per pixel

The number of distinct colors that can be represented by a pixel depends on the number of bits per pixel
(bpp). A 1 bpp image uses 1-bit for each pixel, so each pixel can be either on or off. Each additional bit
doubles the number of colors available, so a 2 bpp image can have 4 colors, and a 3 bpp image can have
8 colors:

23
1 bpp, 21 = 2 colors (monochrome)

2 bpp, 22 = 4 colors

3 bpp, 23 = 8 colors

...

8 bpp, 28 = 256 colors

16 bpp, 216 = 65,536 colors ("Highcolor" )

24 bpp, 224 = 16,777,216 colors ("Truecolor")

In other words it is the number of colors per pixel. For example, a 2-bit depth can store only black,
white and two shades of grey, but the more common value is 8-bit. The values grows exponentially so
for example with an 8-bit photo (2 to the power of 8 = 256) you’ll have 256 tones of green, 256 tones of
blue, and 256 tones of red, which means about 16 million colors.

This is already that the eye can distinguish which means that 16-bit or 32-bit will look relatively similar
to us. Of course, this means that your image will be heavier even of the size is the same, because there
is more information contained in each pixel. This is also why quality and quantity are not necessarily the
same.

Therefore quantity helps, but also the size and depth of each pixel determine the quality. This is why
you should look all the specs of the camera and its sensor and not just the amount of Megapixels. After
all, there’s a limit to the size you can print or view your image, more than that it will only result in extra
file size (megabytes) and no impact in the image size (megapixels) or the quality.

3.1.4. Image compression

Image compression is a type of data compression applied to digital images, to reduce their cost for
storage or transmission.

1) Lossy compression

Lossy compression means that some data from the original image file is lost. This process is irreversible.
Lossy compression methods, especially when used at low bit rates, introduce compression artifacts.
Lossy methods are especially suitable for natural images such as photographs in applications where
minor loss of fidelity is acceptable to achieve a substantial reduction in bit rate. Lossy compression that
produces negligible differences may be called visually lossless.

24
In theory, JPEGs and GIFs are all lossy image formats. However, our human eyes do not really notice the
difference between JPEGs, GIFs, PNGs or other formats. Images are great candidates for lossy
compression because of the way our eyes work. Our eyes have a different sensitivity to different colors.
This is leveraged for image compression as we compress some colors more than others.

2) Lossless compression

This is to represent an image signal with the smallest possible number of bits without loss of any
information, thereby speeding up transmission and minimizing storage requirement.

Lossless compression is preferred for archival purposes and often for medical imaging, technical
drawings, zipped files, clip art, or comics.

3.2. Description of common raster formats

There are two main types of digital image file — raster and vector. Digital photos and detailed graphics
both come in raster form. Popular types of raster files include JPEG, PNG, and GIF images.

However, because their pixel number is fixed, raster images can become distorted or blurry when
resized to fill a bigger or smaller space. That’s why vector images are more commonly used for
illustrations and logos — vectors are made up of mathematical formulas that can scale up or down
infinitely. This means that, compared to pixels, vectors don’t lose their resolution when resized.

3.2.1. Usage of raster images

Also known as bitmap, raster files work best when you need to store and display high-quality
photographs. Most photos come in the raster file format, whether they’re print or digital.

With software like Adobe Photoshop, you can edit individual pixels within a raster file to change the
appearance of a photograph. However, each raster image is limited to its individual dimensions and
number of pixels, which affects its size and resolution. Increasing the size of an image with too few
pixels can cause pixelation, which isn’t usually desirable. That’s why illustrations or logos that need to be
used across a variety of sizes often come in vector form.

3.2.2. Advantages of raster files.

 Precise editing: have the power to individually alter each pixel when editing a raster graphic or
photograph. This lets you enhance and tailor the image to your own needs.
 Widely compatible: Raster files can open in a wide range of programs and web browsers, making it
easy to view, edit, and share your images.

25
3.2.3. Disadvantages of raster files.

 Limited resolution: Unlike vector images, raster files don’t maintain their resolution when resized.
Their colors and details can distort when enlarged, reducing the number of ways you can use these
images.
 Larger file sizes: A raster file may include millions of pixels. While this creates a highly detailed
image, it can also increase the file size and loading speed.
 Fabric printing issues: The square pixels that make up raster images don’t always transfer well to
fabrics and clothing. For this reason, vector images are a more common choice when creating T-shirt
logos and prints.

3.2.4. Common raster images file formats

There are several raster image formats used to store digital images. Here are some of the most common
ones:

JPEG (Joint Photographic Experts Group): This is a popular image format that uses lossy
compression to reduce the file size of images. It is commonly used for photographs and other
complex images.
PNG (Portable Network Graphics): This format uses lossless compression, which means that it
preserves all the original image data without any loss in quality. It is often used for images that
require transparency, such as logos and icons.
GIF (Graphics Interchange Format): This format is best suited for simple graphics and
animations, as it uses a limited color palette of up to 256 colors. It supports transparency and
animation, making it a popular choice for web graphics.
BMP (Bitmap): This format is a basic raster image format that is used primarily on Windows
systems. It stores images as uncompressed data, which can result in large file sizes.
TIFF (Tagged Image File Format): This format supports lossless and lossy compression, making it
a versatile choice for storing high-quality images. It is commonly used in professional settings,
such as in the printing and publishing industries.
PSD (Photoshop Document): This format is specific to Adobe Photoshop and is used to store
layered image files. It is commonly used by graphic designers and photographers to work on
complex image compositions.
RAW (Raw Image Data): This is a file format that stores the raw image data captured by digital
cameras. It preserves all the original image data without any compression, allowing for more
flexibility in post-processing.

26
3.3. Description of common vector formats

As opposed to the raster image formats above (where the data describes the characteristics of each
individual pixel), vector image formats contain a geometric description which can be rendered smoothly
at any desired display size. Vector image file formats are used to store digital images as mathematical
equations or geometric shapes, rather than pixels

At some point, all vector graphics must be rasterized in order to be displayed on digital monitors. Vector
images may also be displayed with analog CRT(A cathode ray tube is a specialized vacuum tube in which
images are produced when an electron beam strikes a phosphorescent surface) technology such as that
used in some electronic test equipment, medical monitors, radar displays, laser shows and early video
games.

 CGM (Computer Graphics Metafile) is a file format for 2D vector graphics, raster graphics, and
text, and is defined by ISO/IEC 8632. CGM provides a means of graphics data interchange for
computer representation of 2D graphical information independent from any particular
application, system, platform, or device. It has been adopted to some extent in the areas of
technical illustration and professional design, but has largely been superseded by formats such
as SVG and DXF.
 The Gerber format (aka Extended Gerber, RS-274X) was developed by Gerber Systems Corp,
now Ucamco, and is a 2D bi-level image description format. It is the de facto standard format
used by printed circuit board or PCB software. It is also widely used in other industries requiring
high-precision 2D bi-level images.
 SVG (Scalable Vector Graphics) is an open standard created and developed by the World Wide
Web Consortium to address the need (and attempts of several corporations) for a versatile,
scriptable and all-purpose vector format for the web and otherwise. The SVG format does not
have a compression scheme of its own, but due to the textual nature of XML, an SVG graphic
can be compressed using a program such as gzip. Because of its scripting potential, SVG is a key
component in web applications: interactive web pages that look and act like applications.

3.3.1. 2D vector formats

- AFDesign (Affinity Designer document)

- AI (Adobe Illustrator Artwork)
- CDR (CorelDRAW)
- DrawingML
- GEM metafiles (interpreted and written by the Graphics Environment Manager VDI subsystem)
- Graphics Layout Engine
- HPGL, introduced on Hewlett-Packard plotters, but generalized into a printer language
- HVIF (Haiku Vector Icon Format)

27
 - MathML
- NAPLPS (North American Presentation Layer Protocol Syntax)
- ODG (OpenDocument Graphics)
- VML (Vector Markup Language)
- Xar format used in vector applications from Xara
- XPS (XML Paper Specification)

3.3.2. 3D vector formats

• AMF - Additive Manufacturing File Format

• Asymptote - A language that lifts TeX to 3D.
• blend – Blender
• COLLADA
• Dgn
• Dwf
• Dwg
• Dxf
• EDrawings
• HSF
• VRML - Virtual Reality Modeling Language
• XAML
• XGL
• XVL

3.3.3. Compound formats

These are formats containing both pixel and vector data, possible other data, e.g. the interactive
features of PDF.

• EPS (Encapsulated PostScript)

• PDF (Portable Document Format)
• PostScript, a page description language with strong graphics capabilities
• PICT (Classic Macintosh QuickDraw file)
• WMF / EMF (Windows Metafile / Enhanced Metafile)
• SWF (Shockwave Flash)
• XAML User interface language using vector graphics for images.

28
3.3.4. Stereo formats

Stereoscopic images consist of two slightly different images of the same size captured from for left and
right eyes (e.g. from two camera positions).

4. Description of Graphic design principles

The more intuitive the UI:

 The easier it is to use, and the easier it is to use and the less expensive to use it.
 The better the UI the easier it is to train people to use it, reducing your training costs.
 The better your UI the less help people will need to use it, reducing your support costs.
 The better your UI the more your users will like to use it, increasing their satisfaction with the
work that you have done

4.1. Visible Language

Visible language refers to all of the graphical techniques used to communicate the message or context.
These include:

 Layout: formats, proportions, and grids; 2-D and 3-D organization

 Typography: selection of typefaces and typesetting, including variable width and fixed width
 Color and Texture: color, texture and light that convey complex information and pictorial reality
 Imagery: signs, icons and symbols, from the photographically real to the abstract
 Animation: a dynamic or kinetic display; very important for video-related imagery
 Sequencing: the overall approach to visual storytelling
 Sound: abstract, vocal, concrete, or musical cues
 Visual identity: the additional, unique rules that lend overall consistency to a user interface. The
overall decisions as to how the corporation or the product line expresses itself in visible
language.

4.2. Principles of User Interface Design

4.2.1. Tips and Techniques

The following tips and techniques that I have learned over the years should prove valuable:

8) Consistency, consistency, consistency: I believe the most important thing you can possibly
do is ensure your user interface works consistently. If you can double-click on items in one list
and have something happen, then you should be able to double-click on items in any other list
and have the same sort of thing happen. Put your buttons in consistent places on all your

29
 windows, use the same wording in labels and messages, and use a consistent color scheme
throughout. Consistency in your user interface enables your users to build an accurate mental
model of the way it works, and accurate mental models lead to lower training and support costs.
9) Set and stick to standards: The only way you can ensure consistency within your application
is to set user interface design standards, and then stick to them. You should follow Agile
Modeling (AM)’s Apply Modeling Standards practice in all aspects of software development,
including user interface design.
10) Be prepared to hold the line: When you are developing the user interface for your system
you will discover that your stakeholders often have some unusual ideas as to how the user
interface should be developed. You should definitely listen to these ideas but you also need to
make your stakeholders aware of your corporate UI standards and the need to conform to
them.
11) Explain the rules: Your users need to know how to work with the application you built for
them. When an application works consistently, it means you only have to explain the rules once.
This is a lot easier than explaining in detail exactly how to use each feature in an application
step-by-step.
12) Navigation between major user interface items is important: If it is difficult to get from
one screen to another, then your users will quickly become frustrated and give up. When the
flow between screens matches the flow of the work the user is trying to accomplish, then your
application will make sense to your users. Because different users work in different ways, your
system needs to be flexible enough to support their various approaches. User interface-flow
diagrams should optionally be developed to further your understanding of the flow of your user
interface.
13) Navigation within a screen is important: In Western societies, people read left to right and
top to bottom. Because people are used to this, should you design screens that are also
organized left to right and top to bottom when designing a user interface for people from this
culture? You want to organize navigation between widgets on your screen in a manner users will
find familiar to them.
14) Word your messages and labels effectively: The text you display on your screens is a
primary source of information for your users. If your text is worded poorly, then your interface
will be perceived poorly by your users. Using full words and sentences, as opposed to
abbreviations and codes, makes your text easier to understand. Your messages should be
worded positively, imply that the user is in control, and provide insight into how to use the
application properly. For example, which message do you find more appealing “You have input
the wrong information” or “An account number should be eight digits in length.” Furthermore,
your messages should be worded consistently and displayed in a consistent place on the screen.
Although the messages “The person’s first name must be input” and “An account number
should be input” are separately worded well, together they are inconsistent. In light of the first

30
 message, a better wording of the second message would be “The account number must be
input” to make the two messages consistent.
15) Understand the UI widgets: You should use the right widget for the right task, helping to
increase the consistency in your application and probably making it easier to build the
application in the first place. The only way you can learn how to use widgets properly is to read
and understand the user-interface standards and guidelines your organization has adopted.
16) Look at other applications with a grain of salt: Unless you know another application has
been verified to follow the user interface-standards and guidelines of your organization, don’t
assume the application is doing things right. Although looking at the work of others to get ideas
is always a good idea, until you know how to distinguish between good user interface design
and bad user interface design, you must be careful. Too many developers make the mistake of
imitating the user interface of poorly designed software.
17) Use color appropriately: Color should be used sparingly in your applications and, if you do
use it, you must also use a secondary indicator. The problem is that some of your users may be
color blind and if you are using color to highlight something on a screen, then you need to do
something else to make it stand out if you want these people to notice it. You also want to use
colors in your application consistently, so you have a common look and feel throughout your
application.
18) Follow the contrast rule: If you are going to use color in your application, you need to ensure
that your screens are still readable. The best way to do this is to follow the contrast rule: Use
dark text on light backgrounds and light text on dark backgrounds. Reading blue text on a white
background is easy, but reading blue text on a red background is difficult. The problem is not
enough contrast exists between blue and red to make it easy to read, whereas there is a lot of
contrast between blue and white.
19) Align fields effectively: When a screen has more than one editing field, you want to organize
the fields in a way that is both visually appealing and efficient. I have always found the best way
to do so is to left-justify edit fields: in other words, make the left-hand side of each edit field line
up in a straight line, one over the other. The corresponding labels should be right-justified and
placed immediately beside the field. This is a clean and efficient way to organize the fields on a
screen.
20) Expect your users to make mistakes: How many times have you accidentally deleted some
text in one of your files or deleted the file itself? Were you able to recover from these mistakes
or were you forced to redo hours, or even days, of work? The reality is that to err is human, so
you should design your user interface to recover from mistakes made by your users.
21) Justify data appropriately: For columns of data, common practice is to right-justify integers,
decimal align floating-point numbers, and to left-justify strings.
22) Your design should be intuitable: In other words, if your users don’t know how to use your
software, they should be able to determine how to use it by making educated guesses. Even

31
 when the guesses are wrong, your system should provide reasonable results from which your
users can readily understand and ideally learn.
23) Do not create busy user interfaces: Crowded screens are difficult to understand and, hence,
are difficult to use. Experimental results show that the overall density of the screen should not
exceed 40 percent, whereas local density within groupings should not exceed 62 percent.
24) Group things effectively: Items that are logically connected should be grouped together on
the screen to communicate they are connected, whereas items that have nothing to do with
each other should be separated. You can use white space between collections of items to group
them and/or you can put boxes around them to accomplish the same thing.
25) Take an evolutionary approach: Techniques such as user interface prototyping and Agile
Model Driven Development (AMDD) are critical to your success as a developer.

4.2.2. Three fundamental principles involved in the use of the visible language

1) Organize: provide the user with a clear and consistent conceptual structure
2) Economize: do the most with the least amount of cues
3) Communicate: match the presentation to the capabilities of the user.

4.2.3. Other principles

1) The structure principle: Your design should organize the user interface purposefully, in
meaningful and useful ways based on clear, consistent models that are apparent and
recognizable to users, putting related things together and separating unrelated things,
differentiating dissimilar things and making similar things resemble one another. The structure
principle is concerned with your overall user interface architecture.
2) The simplicity principle: Your design should make simple, common tasks simple to do,
communicating clearly and simply in the user’s own language, and providing good shortcuts that
are meaningfully related to longer procedures.
3) The visibility principle: Your design should keep all needed options and materials for a given
task visible without distracting the user with extraneous or redundant information. Good
designs do not overwhelm users with too many alternatives or confuse them with unneeded
information.
4) The feedback principle: Your design should keep users informed of actions or interpretations,
changes of state or condition, and errors or exceptions that are relevant and of interest to the
user through clear, concise, and unambiguous language familiar to users.
5) The tolerance principle: Your design should be flexible and tolerant, reducing the cost of
mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever
possible by tolerating varied inputs and sequences and by interpreting all reasonable actions
reasonable.

32
 6) The reuse principle: Your design should reuse internal and external components and
behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus
reducing the need for users to rethink and remember.

4.3. Color Design Principles demonstration

4.3.1. Understanding color

Color is an integral part of our lives. Nature uses color to warn off potential predators, to attract
pollinators, to attract mates and to show fruit is ready for eating.

Color is perception. Our eyes see something (the sky, for example), and data sent from our eyes to our
brains tells us it’s a certain color (blue). Objects reflect light in different combinations of wavelengths.
Our brains pick up on those wavelength combinations and translate them into the phenomenon we call
color.

4.3.2. Color Design Principles

The three basic principles can also be applied to color:

1. Color organization,
2. Color economy,
3. Color communication.

Color organization pertains to consistency of organization. Color should be used to group related items.
A consistent color code should be applied to screen displays, documentation, and training materials.

Similar colors should infer a similarity among objects. One needs to be complete and consistent when
grouping objects by the same color. Once a color coding scheme has been established, the same colors
should be used throughout the GUI and all related publications.

The second principle of color, color economy, suggests using a maximum of 5+/-2 colors where the
meaning must be remembered. The fundamental idea is to use color to augment black-and-white
information, i.e. design the display to first work well in black-and-white.

Color emphasis suggests using strong contrasts in value and chroma to draw the user's attention to the
most important information. Confusion can result if too many figures or background fields compete for
the viewer's attention. The hierarchy of highlighted, neutral, and low-lighted states for all areas of the
visual display must be designed carefully to provide the maximum simplicity and clarity.

33
Color communication deals with legibility, including using appropriate colors for the central and
peripheral areas of the visual field. Color combinations influenced least by the relative area of each color
should be used.

Red or green should not be used in the periphery of the visual field, but in the center. If used in the
periphery, you need a way to capture the attention of the viewer, size change or blinking for example.
Blue, black, white, and yellow should be used near the periphery of the visual field, where the retina
remains sensitive to these colors.

If colors change in size in the imagery, the following should be considered: as color areas decrease in
size, their value (lightness) and chroma will appear to change.

Use colors that differ in both chroma and value. Avoid red/green, blue/yellow, green/blue, and red/blue
combinations unless a special visual effect is needed. They can create vibrations, illusions of shadows,
and afterimages.

For dark viewing situations, light text, then lines, and small shapes on medium to dark backgrounds
should be used in slide presentations, workstations and videos. For light-viewing situations, use dark
(blue or black) text, thin lines and small shapes on light background. These viewing situations include
overhead transparencies and paper.

4.4. Description of advantages and disadvantages for using color

4.4.1. Some advantages for using color to help communication

- Emphasize important information

- Identify subsystems of structures
- Portray natural objects in a realistic manner
- Portray time and progress
- Reduce errors of interpretation
- Add coding dimensions
- Increase comprehensibility
- Increase believability and appeal

When color is used correctly, people will often learn more. Memory for color information seems to be
much better than information presented in black-and-white.

4.4.2. Some disadvantages for using color

- Requires more expensive and complicated display equipment

- Many not accommodate color-deficient vision

34
 - Some colors can potentially cause visual discomfort and afterimages.
- May contribute to visual or may lead to negative associations through cross-disciplinary and
cross-cultural association.

4.4.3. Color Symbolism

The importance of color is to communicate. Therefore color codes should respect existing cultural and
professional usage. Connotations vary strongly among different kinds of viewers, especially from
different cultures. Color connotations should be used with great care. For example: mailboxes are blue
in the United States, bright red in England and bright yellow in Greece. If using color in an electronic mail
icon on the screen, color sets might be changed for different countries to reflect the differences in
international markets.

4.5. Considerations on design and user experience

There are three factors that should be considered for the design of a successful user interface;

1. Development factors,
2. Visibility factors and
3. Acceptance factors.

Development factors help by improving visual communication. These include: platform constraints, tool
kits and component libraries, support for rapid prototyping, and customizability.

Visibility factors take into account human factors and express a strong visual identity. These include:
human abilities, product identity, clear conceptual model, and multiple representations.

Included as acceptance factors are an installed base, corporate politics, international markets, and
documentation and training.

35
5. Exercises

1. In what ways can graphic designs influence our perception?

 Graphic designs can shape the way we perceive information or products by using visual
elements to convey specific meanings or emotions.
2. How do graphic designs impact our emotions?
 Graphic designs can evoke emotions through their use of colors, imagery, and composition. For
example, a design with bright colors and happy imagery may elicit positive emotions, while dark
and somber designs can evoke sadness or seriousness.
3. What role does graphic design play in mobile apps?
 In mobile apps, graphic design is essential for creating intuitive user interfaces, enhancing user
experience, and conveying information or branding effectively.
4. Are there any ethical considerations related to the influence of graphic design on perception
and emotions?
 Yes, graphic design can be used to manipulate perceptions or emotions, raising ethical questions
about its use in advertising, political campaigns, or other contexts.
5. How has the digital age impacted the field of graphic design?
 The digital age has revolutionized graphic design by providing tools and platforms for creating,
distributing, and consuming designs on a global scale. It has also expanded the range of design
possibilities.
6. What is image compression?
 Image compression is the process of reducing the size of a digital image while preserving its
visual quality. It's done to save storage space and make image transmission over networks more
efficient.
7. Why is image compression important?
 Image compression is crucial for various reasons, such as reducing storage requirements,
speeding up image transmission over the internet, and optimizing the display of images on
devices with limited resources.
8. What are the two main types of image compression?
 The two main types of image compression are lossless and lossy compression.
9. What is lossless image compression?
 Lossless image compression is a method that reduces the file size of an image without any loss
in quality. It allows for perfect reconstruction of the original image from the compressed data.

36
10. What is lossy image compression?
 Lossy image compression is a method that reduces the file size of an image by discarding some
of the image data. This results in a minor loss in quality, which is often imperceptible to the
human eye.
11. What are some common lossless image compression formats?
 Common lossless image compression formats include PNG (Portable Network Graphics) and GIF
(Graphics Interchange Format).
12. What are some common lossy image compression formats?
 Common lossy image compression formats include JPEG (Joint Photographic Experts Group) and
WebP.
13. What is the trade-off between compression ratio and image quality in lossy compression?
 In lossy compression, there is a trade-off between the degree of compression (compression
ratio) and the image quality. Higher compression ratios result in smaller file sizes but may lead
to more noticeable image artifacts and quality degradation.

37