FBLA: UX Design

Principles of Effective Design

The fundamental guidelines that help create user-friendly and visually appealing interfaces.

Balance

A design should have an even distribution of elements, creating a sense of visual harmony and stability. This can be achieved through symmetrical or asymmetrical arrangements. 

Contrast

Using different elements (colors, shapes, sizes, etc.) to create visual interest and highlight key information. 

Emphasis

Using elements like contrast, size, color, and placement to draw attention to a specific area or element within a design

Unity

The cohesive integration of all elements to create a harmonious and unified whole.

Lines

A visually discernible path created by a point moving in space.

Colors

Used to evoke emotions, convey meaning, and guide the viewer's eye.

Shapes

Two-dimensional areas enclosed by lines or a defined boundary, acting as a fundamental building block for creating visuals and conveying meaning.

Textures

The surface quality of an object, either real or simulated, that we perceive through touch or sight. It adds visual interest, depth, and dimension to a design, and can be used to create contrast and evoke emotions. 

Types of target audiences

Demographics, psychographics, geography, and purchase intentions

Why is understanding target audiences critical for media selection?

It ensures that designs effectively communicate with specific demographics

Image resolution

The number of pixels that determine image clarity and quality

Image size

Affects the site speed

File format

Influences how content is displayed, shared, and edited.

Key factors in effective user experience design

Useful, Usable, Findable, Credible, Desirable, Accessible, Valuable

Useful

This provides a purpose for its target customers. To guarantee the products’ existence for a long time, it must have great use for its users.

Usable

This factor enables users to achieve their end objective effectively and efficiently. Products can still succeed if they’re not usable but they are much less likely to do so. A high level of usability can improve competitive advantage and also give the user the comfort of use and a feeling of safety.

Findable

Findability will ensure that the product and its contents are easy to find. Whichever products are created must be easy to use and the user should be able to find what they need to and accomplish their task.

Credible

Credibility refers to the ability to trust the product. t’s nearly impossible to deliver a good UX if the user thinks the product creator is lying or has bad intentions.

Desirable

Desirability is conveyed in design through branding, image identity, aesthetics, and emotional design. The visual elements of any product or solution have to be aesthetic, minimalistic, and visually appealing to the user.

Accessible

Accessibility is about providing an experience which can be accessed by users of a full range of abilities – this includes those who are disabled in some respect such as hearing loss, impaired vision, motion impaired or learning impaired.

Valuable

It must deliver value to the business which creates it and to the user who buys or uses it. Without value it is likely that any initial success of a product will eventually be undermined.

Common web page layouts

Single-column, split-screen, full-screen (featured photo layout), asymmetrical, F-pattern, Z-pattern, and grid layouts

Single-column

Presents all content in a vertical line, suitable for text-heavy pages. Extremely user friendly

Split-screen

Divides the page into two halves, allowing for presentation of related content side-by-side. Each half represents a version of a customer’s user journey. It gives both versions the main stage without showing preference to either one.

Full screen/featured photo layout

This type of layout is good for businesses that sell a single service. It’s not as effective for businesses, like retail companies, that sell a variety of products.

Asymmetrical

Offers flexibility and creativity, often used in news and magazine sites where content is not rigidly structured. This type of layout makes it very clear that two sides of a webpage have different amounts of content. The side with the bulk of the content will draw the user’s attention first.

F-pattern

Organizes content in an F-shape, mimicking the way people scan a book, with the left side of the page scanned first, then moving vertically down.

Z-pattern

Encourages users to scan the page in a Z-shape, moving from the top left, diagonally, and then to the bottom right

Grid layout

Organizes content into rows and columns, providing a structured and clean look.

Why is readability of web content important?

It ensures users can easily comprehend and engage with content.

Serif fonts

They are often used in books, magazines, and newspapers because the serifs can help guide the eye across the page and improve legibility, especially in long-form text. Additionally, serif fonts can convey a traditional, elegant, and professional feel.

Sans serif fonts

They are preferred for headings, logos, and body text where clarity and readability are paramount. They are used for their legibility, versatility, and association with modern, minimalist aesthetics.

Points

A unit of measurement used to specify the size of a typeface or font

Leading

Managing the vertical spaces between lines to enhance readability

Kerning

The adjustment of space between individual character pairs for visual harmony

Tracking

The adjustment of the overall spacing between characters across a block of text for readability and aesthetic appeal

Baseline shift

To adjust the vertical positioning of text relative to its baseline, allowing for fine-tuning the visual placement of type

User-centered design

A design approach that prioritizes the needs, goals, and preferences of users throughout the design process

What is UX design important?

it focuses on understanding and improving how users interact with a website, ensuring it's easy, intuitive, and enjoyable to use

Impact of effective UX design

Improved usability, satisfaction, and overall user retention (the percentage of users who continue to engage)

Impact of ineffective UX design

Confusion, frustration, and reduced usability

Search Engine Optimization (SEO)

The process of improving your website's content, structure, and online visibility to rank higher in search engine results pages (SERPs), like Google

Techniques for SEO

Including relevant keywords, on-page optimization (title tags, meta descriptions, header tags, image optimization), building high-quality backlinks, optimizing user experience (site speed, mobile-friendliness), and content marketing. 

Internet

The global network of interconnected computers. 

World Wide Web (WWW)

A system of interconnected documents accessible through the internet, often used interchangeably with "the web"

Web Page

A single document on the web, usually containing text, images, and links. 

Web Site

A collection of web pages, often on a specific topic or by a single entity. 

URL

The address of a specific resource on the internet, often starting with "http://" or "https://”

IP Address

A numerical address assigned to each device on a network, allowing communication. 

Browser

A software application that allows users to view web pages

Server

A computer that stores and delivers web pages to users

Homepage

The main or introductory page of a website. 

Hyperlink

A clickable text or image that links to another web page or resource. 

Bandwidth

The amount of data that can be transferred over a network connection in a given period of time. 

Cache

Temporary storage of data, such as web pages, to speed up loading times. 

Favicon

The small icon displayed in a browser's tab or bookmark bar, representing a website. 

CMS

Content Management System, a software application that allows users to create, manage, and publish content on a website. 

Web security

The practice of protecting websites from cyberattacks, such as malware, phishing, and data theft

Common web security flaws

Cross-Site Scripting (XSS), SQL Injection, Cross-Site Request Forgery (CSRF), weak password protection, or improper encryption

Cross-Site Scripting (XSS)

XSS vulnerabilities allow attackers to inject malicious scripts into legitimate websites, which can then steal user data, impersonate users, or redirect them to malicious sites

SQL Injection

SQL injection occurs when attackers manipulate database queries to gain unauthorized access to data or modify it.

Cross-Site Request Forgery (CSRF)

CSRF vulnerabilities exploit the trust a web application has in a user's browser. Attackers can trick a logged-in user into performing unwanted actions on a website, such as making an unauthorized transaction or changing their profile.

HTML

Structures content on the web

CSS

Styles HTML elements like color and layout and improves presentation

JavaScript

JavaScript is a programming language used to create dynamic and interactive content for websites

New/emerging trends in website design

AI-powered personalization, 3D design, and interactive elements

The effects of new and emerging technologies on web use

Enhancing user experiences, improving website functionality, and driving innovation in various fields

Mobile applications

They drive innovation, emphasizing convenience and functionality across devices

Differences in desktop and mobile content user needs

Mobile users prioritize speed, simplicity, and quick access to information, often while on the go.

Desktop users spend more time engaging with more complex content, seeking detailed information and interactive experiences. 

Similarities in desktop and mobile content user needs

Both require clear navigation, usability, and optimized layouts

Empathy in UX design

Understanding the user’s needs and feelings

Need definition in UX design

Clearly outlining user problems and goals to guide design solutions

Ideation in UX design

Brainstorming creative solutions for user needs

Research in UX design

It informs decisions with data about users and their needs

Prototypes in UX design

A simplified version of a product or interface used to test and refine ideas before full implementation

Role and value of testing in UX design

Ensures a product is usable, intuitive, and meets user needs

Overall design process

UX design teams use a five phase process: Empathize, define, ideate, prototype and test.

Role of color

Influences viewer perception, emotions, and engagement. It can be used to evoke specific feelings, create visual hierarchy, and even impact consumer behavior.

Blue

Calmness, trust, intelligence, professionalism

Red

Passion, excitement, love, energy, danger

Yellow

Happiness, optimism, clarity, caution

Contrasting colors

Colors that are opposite each other on the color wheel to create visual distinction and emphasize specific elements

Complementary colors

Colors opposite each other on the color wheel that balance and enhance designs

Analogous colors

They are adjacent on the color wheel and create cohesive, harmonious designs

Common UX design jobs

UX Designer, Product Designer, UI Designer, UX Researcher, Usability Analyst, and Interaction Designer

Industries impacted by the field of UX/UI design

Healthcare, education, e-commerce, and entertainment

The impact of the Americans with Disabilities Act

It mandated that digital products and services be accessible to people with disabilities

Design of websites for accessibility and accommodation of persons with special needs

Make sure images have descriptive alt tags. These tags appear on a website in place of an image for people who are using screen readers.

Provide enough contrast between text color and background color.

Accessibility in relation to web and content design.

Websites, tools, and technologies are designed and developed so that people with disabilities can use them

Alt text

A brief textual description of an image that appears on a webpage if the image fails to load or is not displayed for some reason. It describes images for users with visual impairments or those using screen readers

Software license agreement (SLA)

A legal contract outlining the terms and conditions under which a software user (licensee) can use the software. It essentially grants the user permission to use the software, but the owner (licensor) retains intellectual property rights

Copyright

Protects original creative works, giving the creator exclusive rights to control how their work is used, reproduced, and distributed

Public Domain

Creative works that are not protected by intellectual property laws like copyright, meaning they are free to use without permission. This allows designers to incorporate images, text, or other materials from the public domain into their projects without needing to obtain licenses or pay royalties

Copy Protection

The process of protecting files and folders from being copied without proper authorization to any device in the same network

Intellectual property

Protects the original creations of the mind, such as logos, designs, and images, from unauthorized use or replication

Licensing agreements

Allows for the legal use of copyrighted or patented materials, such as artwork, designs, or content, by others

Creative Commons licensing

Legal tools that creators can use to grant the public permission to use their creative work under copyright law, while retaining their copyright

Creative Commons licensing restrictions

CC licenses are not applicable in cases where copyright doesn't apply, and they don't modify or restrict exceptions like fair use.

Copyright licensing restrictions

Restricts the use of copyrighted material, specifying permissible actions, durations, territories, and even the type of work. It can also be limited to certain jurisdictions or types of uses