UX Design Notes Student 2

UX Design NotesEffective Design Principles1. Define the principles of effective design.Balance - the distribution of the weight on visual items, like GUI'sContrast - the use of different colors, sizes, and fontsAlignment - ensuring the layout is organized and flows well from one item to anotherRepetition - the use of design elements, like fonts and colors, consistentlyHierarchy - arranging the elements to guide the viewer's eyes to more important itemsUnity - harmony is achieved throughout all the elementsFunctionality - any scripts made actually work2. Identify principles of design, layout, and typography appropriate for a project, including movement, balance, emphasis, and unity.Balance - distributing the weight of visual elements evenlyMovement - guide the viewer through designs, such as lines and shapes or colors Emphasis - draw attention to important buttons or screensUnity -  how well the design elements work together through consistent factors or contrasting factors3. Apply appropriate design elements, including lines, colors, shapes, and textures.Lines - create emphasis using thicker lines, use curved lines for a more professional feel, use dashed lines to create the feeling of a softer effectColors - contrast different elements, create mood, or create harmony with complementary colorsShapes - create patterns, define spaces much more clearly, or create a mood by using with geometric shapes (like circles) or using organic shapesTextures - add quality and depth to the screen4. Explore different target audiences and identify the most effective media selections.When creating a website, knowing your target audience is important. Consider:Demographics - age, gender, education, income, etcPsychographics - interests, lifestyles, personalitiesBehavioral factors - how they act online (rude, kind, talkative, quiet)5. Demonstrate vocabulary related to graphic design and web design.Tyography - the way you arrange text, including spacing, fonts, etcKerning - the adjustment of individual letters between wordsLeading - the vertical spacing between lines/wordsTracking - the overall spacing between characters in a block of textContrast - difference between elements (example: red and blue contrast)6. Identify the role of image resolution, size, and file format in relation to content design.Resolution - the number of pixels on an image. measured in PPI. higher resolutions are higher quality, but take longer to loadSize - the physical size of an image, measured in pixels or centimetersFile format - the file you choose affects the quality of the image. it also affects the size of the file and how long it takes to load7. Identify key factors in effective user experience design.Usability - whether the scripts work (does something not load or work when clicked on?)Accessibility - people with disabilities should still be able to use your websiteNavigation - is it difficult to find specific buttons or web pages? Speed - if you used files that are too big, it will take awhile to load some of your screensEase of Navigation and Readability1. Identify common web page layouts and explain the role for each.Grid layout: used for responsive designs to ensure that GUI's are consistent across different screen typesFixed layout: elements stay in place regardless of the screen size, making precise builds easier to create but much less flexibleFluid layout: widths are based on percentage for adaptability across devices F-Shaped layout: used for articles and websites with lots of text usuallyZ-Shaped layout: leads the eye in the shape of a Z, useful for landing pages2. Explain the importance of readability of web content.Good readability allows users can easily read the information and understand what it's saying. It improves user engagement, makes the site appear more trustworthy and accessible, and can create moods depending on size, font, or color.3. Explain the role of serif and sans serif fonts.Serif fonts: serif fonts have strokes at the end of letters, making it look more traditional and formal. Usually used in longer texts or when printingSans serif fonts: doesn't have the strokes that serif fonts do. Allows the font to appear more modern and cleaner; used especially for digital screens4. Define points in the context of typography.In typography, a point is a unit of measurement that helps define sizes of typography. a single point is 1/72 of an inch; font sizes are usually measured in terms of points5. Explain the role of leading within design and typography.In design and typography, leading refers to the vertical space between any two lines of text. Ensuring the lead is consistent is important, as it makes reading much easier and makes the text appear clean. 6. Explain the role of kerning within design and typography.Kerning adjusts the space between individual characters in a word or in a horizontal line of text. The goal is to eliminate awkward gaps and make everything flow smoothly.7. Explain the role of tracking within design and typography.Tracking refers to the uniform adjustments of space in the entire text, rather than individual instances. It can change the density of the text much more efficiently. 8. Explain the role of baseline shift within design and typography.Baseline shift moves characters vertically up or down against the baseline of all the other characters in a line of text. It's used in very special occasions. Role of UX Design1. Define user-centered design.A design approach that focuses on understanding the user's behaviors, needs, and preferences. It's done through extensive research and testing to enhance the user's experience.2. Explain the importance of UX design in relation to an efficient web experienceGood UX design ensures that all buttons work, navigation is simple and efficient, loading times aren't delayed, accessibility to those with disabilities, and an aesthetically pleasing design to make the user feel certain moods.3. Identify the impact of effective and ineffective UX design.An effective UX design will:  -improve their perception of the brand/company -have good navigation and accessibility -not annoy the user through annoying instances -higher conversion ratesAn ineffective UX design will: -cause confusion and frustration; annoy the user -increase bounce rates -a negative view on the brand/company -lower the customer's retention4. Identify search engine optimization (SEO)SEO is the act of optimizing the web page to improve visibility and user experience. The goal is to make content more relevant to search queries.5. Identify techniques related to search engine optimization (SEO)On-Page SEO: optimize headings, tags, imagesOff-Page SEO: build a structure for improving the domain authorityTechnical SEO: enhance the site's speed and create a mobile-friendly platformContent Optimization: using relevant keywords, internal linking, relevant colorsLocal SEO: optimization for location based searches, such as Google6. Define terminology related to the Internet and web pages.HTTP: protocol for data transfers, as HTTP is secureDomain Name: the address/URL of a websiteHTML: the language used to code websitesCSS: used to style websitesJavaScript: the language used to create interaction opportunities, such as GUI'S7. Demonstrate understanding of web security in relation to UX design.Creating a safe environment for the user is prominent to create trustworthiness. To enhance safety and user experience, use features such as secure authentication and data protection.8. Demonstrate knowledge of common web security flaws.XSS: injection suspicious scripts into the code of a websiteSQL injection: attackers manipulate the database queries CSRF: actions are done without the permission or will of the userIDOR: exposure of sensitive data of the userBroken authentication: weak login securities, which makes hacking easierMobile and Desktop Responsive Web Design1. Demonstrate understanding of HTML and CSS in user experience design.HTML gives the structure of a webpage, such as the layout and screen readability through tags and other elementsCSS enhances the aesthetics through typography, colors, spacing, and responsiveness (overall affects the appearance) 2. Demonstrate understanding of JavaScript and its applications in user experience design.JS makes websites more interactive and dynamic for the user-allows interactive buttons and navigation menus to be made-animations can be created and implemented with JS-without refreshing the page, content can be updated-makes the app much smoother than other code languages 3. Examine new and emerging trends in website design.-dark mode: more aesthetically pleasing for the user-flat design: clean, simple interfaces that look good and improve speed-AI/chat boxes: help the user without contacting support; accessibilityvoice search: accessibility for people with or without disabilities 4. Assess the effects of new and emerging technologies on web use.-PWA's: provide app-like experiences to browsers with offline capabilities-5G technology: improved speed and interactive experiences-AI: personalize recommendations and allow design tools to be automated-Cloud Computing: allow applications to be properly scaled5. Demonstrate an understanding of the growth of mobile applications. - mobile usage makes up 60% of web traffic - tools like Flutter and React Native allow apps to work on multiple kinds of phones - PWA web functions work on native apps and browsers (reduces installation barriers) - super apps (such as WeChat) combine multiple services into one6. Understand the differences and similarities in the needs of desktop and mobile content users. - both are expected to be fast and secure - expectations of an aesthetically pleasing interface - computers have bigger screens and that of a mobile's are much spaller - mobile devices are touch screen while computers use a mouse and keyboard - mobile users may expect slower speeds and less stability than a computer - mobile is used for quick interactions, while computers are used mainly for large scale interactions, such as homework and assignmentsUX Design Process1. Define empathy within the context of UX design.In UX design, empathy means the ability to comprehend/share the feelings, needs, and pain points of the users. it ensures the design isn't based on assumptions2. Define need definition within the context of UX design.In UX design, need definition is the process of identifying and fixing core problems based on user searchers or highlights. lots of the information comes from user data3. Define ideation within the context of UX design.In the context of UX design, ideation is the process of generating, exploring, and finalizing ideas to fix design issues. There's lots of brainstorming and sketching within this process.4. Identify the role of research in UX design.In UX design, research plays a crucial role in knowing the user's behaviors, needs, pain points, etc. Surveys and interviews are a way of getting the information for this.5. Define the role of prototypes in UX design.Prototypes allow for a cheap representation of a product that is very flexible for changes. They help visualize the product to see if any changes should be made.6. Define the role and value of testing in UX design.Testing products in UX design is prominent, as it helps identify what people can get annoyed at, any bugs, poor design choices, etc.7. Demonstrate understanding of the overall design process.emphasize: understand the users needsdefine: find and solve any bugs/problemsideate: generate creative solutionsprototype: test your product in a cheap and flexible mannertest: gather feedback and refine any issuesColor Scheme1. Explain the role of color within content creation, including color psychology.Different colors make the user feel different emotions. For example, blue may seem sad but refreshing, while yellow is outgoing, energetic, fun.2. Define contrasting colors and their role in content design. Contrasting colors stand out against each other. It helps create a strong contrast and vibrancy and balance.3. Define complementary colors and their role in content design.Complementary colors are pairs of colors that are the direct opposites of each other, such and orange and blue. They create strong contrasting feelings and can make designs feel much more vibrant and fun.4. Define analogous colors and their role in content design.Analogous colors are groups of three colors next to each other, for instance blue/teal/green. They act like a gradient and can create a relaxing and soothing feeling.Careers in UX/UI Design1. Identify careers in the field of UX/UI design and related areas.UX designer - focuses on user prototyping and wireframing to make an experience bettweUI designer - designs the visual elements of a product, including typography, kerning, colors, etcproduct designer - works with the overall usability of a product, and blends UX and UI goalsinteraction designer - designs the interactive elements, such as animations 2. Explain the industries impacted by the field of UX/UI design.apps/websites - UX/UI ensure accessible and engaging digital experiencesSaaS - cloud services and  project management tools heavily rely on UX/UIAI - UX makes AI much more user friendly Online shopping - UX/UI is responsible for the interface of the program, and any animations that may appear tooAccommodations for Special Needs and Related Laws1. Explain the impact of the Americans with Disabilities Act.the ADA is a civil rights law that prohibits ablest discrimination in a public space. it emphasized that disabled or not, we are all human 2. Describe design of websites for accessibility and accommodation of persons with special needs.websites have been required to make accessible to all people, including people with disabilities. it ensures visual, auditory, motor, and other elements are up to standards3. Define accessibility in relation to web and content design.accessibility in this case is the act of creating a digital experience open to all kinds of people; inclusiveness.4. Define alt text and explain its role.alt text is the written description of an image. it serves two purposes: - allows screen readers to accurately describe an imaeg - if an image fails to load, the user will know what the image was meant to show5. Identify situations in which use of elements in projects is legal but may be unethical/inappropriate. - collecting data legally but not properly disclosing it - designing interfaces to persuade people into doing things the website wants - using legally obtained copyrighted material in a way that disregards the creator's intent - creating realistic but misleading content that would manipulate people into believing itCopyright, Creative Commons, and Fair Use1. Describe licensing agreements associated with software usage.proprietary license - restricts modification and redistributionopen source license - allows modification under specific conditionsfreeware license - software is free, but there are conditions on distributationshareware license - users can use a software for free but must pay at some point2. Describe copyright issues and laws related to creating graphic design, multimedia, and website design projects.copyright laws ensure that original works, such as images or videos, cannot be used anywhere else without the authorization of the creator. it's prominent to website designing as it regulates fair use and prohibits the copying of one website to another3. Identify concepts related to copyright, public domain, copy protection, intellectual property, and licensing agreements.copyright - a protection against the original workpublic domain - works aren't protected by copyright either due to expiration or explicit releasecopy protection - measures to prevent unauthorized distributionlicensing agreements - a legal contract defining what is and isn't allowed for copyrights4. Interpret Creative Commons licensing and the associated restrictions.CC BY - free used required but attribution is requiredCC BY-SA - attribution required, but derivates must have the same licenseCC BY-NC - attribution required, but commercial use isn't requiredCC0 - public domain (no rights are reserved)5. Interpret copyright licensing and the associated restrictions.exclusive license - only the licensee can use the works in a specific mannernon-exclusive license - the creator retains rights, but people can use the workroyalty-free license - users pay once to usage, but must agree to some requirements6. Define fair use in the context of design.fair use is the legal doctrine that regulates copyright laws. it's usually used for education, commentary, and parody7. Understand the role of public domain as well as the qualifications surrounding public domain.public domain allows works to be used and distributed without any issues; there aren't any copyright laws blocking such. public domain occurs when the creator wishes this to happen, or when the copyright expired8. Identify the process in which to obtain permission to use content-identify the copyright holder-find if there are any licenses that'll permit your use-contact the owner to get permission-make a legal agreement (contract/license)-credit the owner, if it's required