🎨 Design Basics
- UI (User Interface) – The visual elements users interact with on a website (buttons, menus, etc.).
- UX (User Experience) – The overall experience a user has while navigating a website; focuses on ease of use and satisfaction.
- Wireframe – A basic layout (like a blueprint) showing the structure of a web page before detailed design.
- Mockup – A high-fidelity, static design of a web page, showing what it will look like.
- Prototype – An interactive version of the design that simulates how the website works.
- Layout – The arrangement of visual elements (text, images, etc.) on a web page.
- White Space – The empty space between elements, used to improve readability and focus.
- Typography – The style, arrangement, and appearance of text on a website.
- Color Theory – The use of colors in design to create mood, hierarchy, and visual interest.
- Visual Hierarchy – The arrangement of elements to guide the viewer’s attention in order of importance.
🧩 Design Elements
- Navigation Bar – A menu that helps users move between pages or sections of a site.
- Hero Section – The large banner area at the top of a web page, often with a key message or image.
- Call to Action (CTA) – Buttons or links that encourage user action (e.g., “Buy Now” or “Learn More”).
- Header – The top section of a website, usually containing the logo and navigation menu.
- Footer – The bottom part of a web page, often containing links, contact info, and legal notices.
- Grid System – A structure of rows and columns that helps align elements consistently.
- Responsive Design – A design approach that ensures websites look good on all screen sizes.
- Icons – Small symbols used to represent actions or concepts (like a trash can for delete).
- Buttons – Clickable elements that perform actions or take users to other pages.
- Forms – Interactive fields for users to input data (e.g., contact form, login form).
🛠️ Tools & Software
- Figma – A popular tool for collaborative UI/UX design and prototyping.
- Adobe XD – A design and prototyping tool for web and app interfaces.
- Sketch – A vector-based design tool for creating UI/UX layouts (Mac-only).
- Photoshop – A powerful image editing tool, often used for web graphics.
- Canva – A beginner-friendly design tool with templates for web content.
💻 Development & Code
- HTML – The basic language used to structure content on the web.
- CSS – A stylesheet language used to control the design (colors, fonts, layout) of a webpage.
- JavaScript – A scripting language used to add interactivity to websites (like animations or dropdowns).
- Bootstrap – A CSS framework that makes responsive design and layout easier.
- Tailwind CSS – A utility-first CSS framework for rapidly building custom designs.
🌐 Web Technologies
- CMS (Content Management System) – Software that lets you manage website content easily (like WordPress).
- WordPress – A widely used CMS for building and managing websites.
- Web Hosting – A service that stores your website and makes it accessible online.
- Domain Name – The address of your website (like www.example.com).
- SSL Certificate – A security feature that encrypts data between the browser and server (shows as “https://”).
📱 Responsive & Mobile Design
- Breakpoints – The screen sizes at which a website’s layout adjusts to stay user-friendly.
- Media Queries – CSS rules that apply styles based on screen size or device type.
- Mobile-First Design – A design strategy that starts with mobile layouts before scaling up to desktop.
- Cross-Browser Compatibility – Ensuring a website works well in all major browsers (Chrome, Safari, Firefox, etc.).
- Touch Optimization – Designing for touch interaction (larger buttons, swipe gestures, etc.).
📈 Performance & SEO
- Page Speed – How quickly a website loads; affects user experience and SEO rankings.
- SEO (Search Engine Optimization) – Techniques to improve how well a website ranks on search engines like Google.
- Accessibility (a11y) – Designing websites to be usable by people with disabilities (e.g., screen readers).
- Alt Text – Descriptive text for images, used for accessibility and SEO.
- Lazy Loading – A technique that delays loading images/content until they’re needed to improve speed.
🧠 User Behavior & Strategy
- User Flow – The path a user takes to complete a task on a website.
- Information Architecture – The way content is organized and structured on a site.
- Conversion Rate – The percentage of visitors who take a desired action (e.g., making a purchase).
- Bounce Rate – The percentage of visitors who leave the site after viewing only one page.
- Heatmap – A visual representation of where users click or scroll the most on a web page