topic 10 Flashcards
(21 cards)
what is a wireframe
A wireframe is a low-fidelity outline that shows where content and elements like headers, navigation bars, images, and text will be placed.
Used in early stages of web design to plan layout and structure.
Does not include color, styling, or detailed images.
what is a mockup?
a visualization or design of a webpage that illustrates what the final outcome might look like
Represents how the actual website will look, but does not function (non-clickable).
Useful for stakeholder feedback before coding begins
what is a web design style guide
A set of predefined rules covering:
Typography (font families, sizes)
Color schemes
Logo usage
Button and form styling
Grid systems and spacing
Ensures visual consistency and branding across all web pages.
what is a prototype
Interactive simulations of how the website will function.
Allows user testing and feedback on navigation, layout, and usability before development begins.
what are websafe fonts
Fonts available across most devices (e.g., Arial, Verdana, Times New Roman).
Ensures uniform display of text content regardless of device or OS.
Used to avoid fallback font issues
what are embedded web fonts
Uses services like Google Fonts or Adobe Fonts to add custom fonts
Enhances design flexibility and creativity.
Can impact load speed, so font files should be optimized.
design principles to create effective page layout and design - visual hierarchy
Organizing elements to show their importance:
Larger, bolder headings
Use of color and spacing
design principles to create effective page layout and design - flow
structure and content arrangement that guides the user through the page.
Includes intuitive navigation and clear content blocks.
Helps in improving user engagement and experience.
design principles to create effective page layout and design - color theory
Understanding how colors influence mood and usability.
Use complementary colors for contrast.
Follow accessibility guidelines (e.g., text-background contrast for readability).
Establishes brand identity and emotional connection.
design principles to create effective page layout and design - balance and contrast
Balance ensures no section overpowers another — symmetrical or asymmetrical.
Contrast highlights differences (e.g., dark text on a light background, big vs small elements).
Improves visual appeal and focus
how to make websites accessible to the widest possible audience
referring to the Web Content Accessibility Guidelines (WCAG).
Accessibility ensures all users, including those with disabilities, can use the website effectively.
Websites should follow the Web Content Accessibility Guidelines (WCAG) developed by the W3C.
Key WCAG principles (POUR):
Perceivable – Content must be presented in ways users can perceive.
Use alt text for images.
Provide captions for videos.
Ensure readable fonts and good contrast.
Operable – Users must be able to interact with all components.
Make all functions accessible via keyboard.
Avoid flashing content that could cause seizures.
Understandable – Content and navigation must be easy to understand.
Use clear, simple language.
Maintain consistent navigation and layouts.
Robust – Website must work with current and future tech, including screen readers.
Use valid, semantic HTML.
Avoid deprecated tags or inaccessible scripts.
navigation systems - horizontal scroll menus
Menu items arranged side by side (often at the top).
Common on desktop websites.
Should remain visible and easy to click or tap.
vertical menus
Menu items arranged top to bottom (usually on the left or right).
Suitable for long lists or admin dashboards.
dropdown menus
Menus that expand to show sub-items.
Saves space and helps organize complex content.
Should be keyboard accessible
breadcrumb navigation
Shows user’s current location in a site hierarchy.
E.g., Home > Products > Electronics > Phones
Useful for deep sites, improves backtracking and orientation.
button groups
Group related actions together (e.g., Save / Cancel / Reset).
Improves clarity and efficiency in forms or toolbars.
target specific devices and browsers - cross browser compatibility
Ensure the website works across major browsers: Chrome, Firefox, Safari, Edge, etc.
Avoid browser-specific code or features unless necessary.
Use standard HTML/CSS/JS to prevent layout issues.
target specific devices and browsers - functionality and usability testing
Check:
Do all links work?
Are forms submitting correctly?
Is navigation easy?
Test with real users and gather feedback
target specific devices and browsers - code validation
Use W3C Validator to ensure your HTML and CSS are error-free and standards-compliant.
Clean code = better performance and accessibility.
target specific devices and browsers - browser development tools
Built-in browser tools like:
Chrome DevTools (Inspect element, Network tab, Console, etc.)
Firefox Developer Edition
Helps in:
Debugging code
Testing responsiveness
Viewing accessibility tree
metadata- viewport part
<meta name= “viewport” content=”width=device-width, initial scale=1>
