Application of Digital Graphics

 Navigation Bars/Menu

A navigation bar appears at the top of an app screen, beneath the status bar, and allows users to navigate through a series of hierarchical screens. When a new screen is displayed, a back button appears on the left side of the bar, often labeled with the title of the previous screen. The right or left side of a navigation bar may contain a control, such as an Edit or a Done button, for managing the content within the active view. A navigation bar in a split view may appear in a single pane of the split view. Translucent navigation bars with a background tint can be configured to hide when the keyboard is onscreen, a gesture occurs, or a view resizes.

A navigation menu is a list of links that lead to key areas of a website. They are typically displayed as a horizontal bar of links at the top of each page on a website. Navigation menus structure the site and help visitors find what they've been looking for.

Navigation Tabs

Tabs are commonly used to separate data that is related in some way. Like A profile can be viewed in Tabs, which are divided into Personal, Professional, and Education tabs. It is primarily used to display data from the same power structure but of a different variety, as well as to organize the data.

The concept of navigation tabs is derived from the concept of folders in a file cabinet and is thus familiar to the end user. Navigation tabs provide a clear complete overview of what content can be located on a website and, by highlighting it, place the current location in context.

Menu Bar

In a graphical user interface, a menu bar is a thin, horizontal bar that contains the labels of menus. The menu bar places the majority of a program's essential functions in a window for the user to access. Opening and closing files, editing text, and exiting the program are all examples of these functions. Although menu bars are common in most graphical user interfaces, they can vary depending on the operating system.

Rollover Buttons

A rollover button is a dynamic Web button that changes appearance based on where the user's mouse pointer is located. It has three modes: normal, over, and down. When the mouse is off the button, the normal state appears, the over control board when their mouse rolls over the button, and the down state appears when users click on the button. Rollover buttons are available in a variety of shapes, sizes, colors, and styles. Because images can be converted into rollover buttons, a rollover button can contain images as well.

Uses

When a user clicks on a rollover button, it can be raised, sunken, flattened, or animated.

Rollover buttons are primarily used as navigational buttons on a Web page to direct visitors to other areas. They can also be found in drop-down and pop-up menus. Other rollover buttons are used for animated effects and sounds, so an image, color, shape, text, or sound can change as the user moves their mouse over the button on the Web.

Rollover buttons extend a button's normal functionality. Rollover buttons are not only visually appealing, but they are also dynamic, alerting the user to the fact that they are active elements on the page. Sound effects can be added by web designers to play when a user moves his mouse over these buttons. Rollover buttons, when used in drop-down or pop-up menus, help save navigational space.

Animated Graphics

Animated graphics can be used to improve the visual appeal of a website. Of course, it is important to use a reasonable amount because animated graphics take longer to load and too many of them can quickly become offensive to the eye, which was a common problem on several other older websites when gif images were first enabled on operating systems.

Multiple frames make up animated gif (Graphics Interchange Format) files. When the file is viewed in a gif-supporting application, these frames are played in sequence. This enables the storage of animation or short clips. Rather than using a video format, which takes time to load and consumes a lot of data, GIFs can be used.

Gifs are more commonly used than other types of animated image files because they are typically the smallest and easiest to produce. However, the GIF format isn't without flaws. GIFs can only store 256 different colors per frame and have to use these 256 colors throughout the entire GIF. A GIF's data may not contain more than 256 colors. Furthermore, they may only be colors chosen from the 24 RGB.

GIFs are likely to be exposed to posterization as a result of these constraints. This occurs when the bit depth is incomplete to demonstrate the drastic change in the color accurately.

Web Banners

A web banner, also known as a banner ad, is a type of advertising on the World Wide Web that is delivered by an ad server. This type of online advertising involves inserting an advertisement into a web page. Its purpose is to drive traffic to a website by linking to the advertiser's website. Banners are frequently delivered by a centralized ad server.

Banner ads, which are image-based rather than text-based, are a common type of website advertising. The goal of banner advertising is to promote a brand or to direct visitors from the host website to the advertiser's website.

All banner ads perform the same basic function: users click on an image/multimedia object on a web page, and your internet browser redirects visitor to the advertiser's website/landing page. They are simple but vital pieces of html, and their presence on the web can make a significant difference for internet-based businesses and brands.

Website Advertisements

The use of a rectangular graphic display that spans the top, bottom, or sides of a website or online media property is referred to as banner advertising. A leaderboard is a horizontal banner advertisement, whereas a skyscraper is a vertical banner advertisement that appears on a web page's sidebars. Banner ads, which are image-based rather than text-based, are a popular type of online advertising.

Logo Graphics

A logo is a graphical mark, emblem, symbol, or stylized name used to identify a business, organization, product, or brand. It could be an abstract or symbolism design, or it could be a stylized version of the original company if the brand is well-known enough.

A logo's purpose is to visually identify a company. The logo can include the company's name, or it can simply be a visual representation. A company's logo is frequently plastered on anything associated with it: on the products it sells on advertisements, on sponsorship deals, or on charitable donations. A logo's purpose is to draw an individual’s attention quickly and attractively to a company.

Color is an important component in logo design. Color and contrast are critical for detecting visual details due to the mechanics of human visual perception. The vast majority of consumers associate various colors and color combinations with various meanings.

Screen Icons

An icon is a small image, usually a symbol, that is used on a computer screen to graphically represent a software program, file, or function.

Icons aid in the recognition and location of items on the computer or features within a program. Many operating systems, particularly those for mobile devices, use desktop icons to make it easier for users to access installed programs.

When a program is launched, it now includes a graphical toolbar that provides functionality through icons rather than words. For example, your browser's "back" button is most likely an arrow pointing to the left side of your screen. There's also a small house that, when clicked, will take you to the homepage of your browser.

Backgrounds

Backgrounds are another type of graphic typically used in all graphical interactive systems like websites and software. In a website there will always be a body background, this is standard for a website and is automatically created as a solid white color when coded in HTML. CSS scripts can then be implemented to change this color. HTML can also use links to image sources and have those set as backgrounds for the bodies. The background may also be set for the content of the website too.

Website backgrounds are the images, color splashes, or design elements that fill the screen of your website. It is also frequently the first impression a visitor has of the website, brand, and business, so it is critical that you get it right.

There are 2 types of website backgrounds:

- Body Background

The body background is the area that takes up the majority of the screen. Backgrounds made up of illustrations, textures, a full image, or color gradients can be found here. It's often just plain white.

- Content Background

The content background does not cover the entire screen, but rather surrounds other sections, such as an image or text. It provides structure and aids in emphasizing and distinguishing different elements.