# Design Assets ## Overview Guidelines for images, icons, fonts, and other design assets in frontend development. Focus on using reliable CDN sources and placeholder services. ## Quick Reference **Images**: Unsplash, placehold.co (never make up URLs) **Icons**: Lucide (default), Heroicons, Font Awesome **Fonts**: Google Fonts **CDN**: Use established CDN services only --- ## Image Guidelines ### Placeholder Images **Rule**: NEVER make up image URLs. Always use known placeholder services. #### Unsplash (Recommended) **Random Images**: ```html Random image Nature image Technology image People image ``` **Categories Available**: - nature, landscape, mountains, ocean, forest - technology, computer, code, workspace - people, portrait, business, team - food, coffee, restaurant - architecture, building, interior - travel, city, street - abstract, pattern, texture **Specific Images**: ```html Mountain landscape ``` #### Placehold.co **Simple Placeholders**: ```html Placeholder Placeholder Product placeholder PNG placeholder JPG placeholder WebP placeholder ``` #### Picsum Photos **Random Photos**: ```html Random photo Specific photo Grayscale photo Blurred photo ``` ### Image Best Practices ```html Nature landscape Responsive nature image ``` --- ## Icon Systems ### Lucide Icons (Recommended Default) **Loading**: ```html ``` **Usage**: ```html ``` **Common Icons**: ``` Navigation: home, menu, x, chevron-down, chevron-up, arrow-left, arrow-right User: user, user-plus, users, user-check, user-x Actions: edit, trash, save, download, upload, share, copy Communication: mail, message-circle, phone, send Media: image, video, music, file, folder UI: search, settings, bell, heart, star, bookmark Status: check, x, alert-circle, info, help-circle ``` ### Heroicons **Loading**: ```html ``` **Usage**: ```html ``` ### Font Awesome **Loading**: ```html ``` **Usage**: ```html ``` ### Icon Best Practices ```html Visit website
Featured
``` --- ## Font Loading ### Google Fonts (Recommended) **Loading**: ```html ``` **Usage**: ```css body { font-family: 'Inter', sans-serif; } code, pre { font-family: 'JetBrains Mono', monospace; } ``` **Popular Font Combinations**: ```html ``` ### Font Loading Strategies ```html ``` --- ## CDN Resources ### CSS Frameworks ```html ``` ### JavaScript Libraries ```html ``` ### Utility Libraries ```html ``` --- ## SVG Assets ### Inline SVG ```html ``` ### SVG Backgrounds ```html
``` --- ## Video Assets ### Placeholder Videos ```html ``` --- ## Asset Organization ### File Structure ``` design_iterations/ ├── theme_1.css ├── ui_1.html ├── ui_1_1.html (iteration) ├── ui_1_2.html (iteration) ├── dashboard_1.html └── assets/ ├── images/ ├── icons/ └── fonts/ ``` ### Naming Conventions **Design Files**: - Initial: `{design_name}_1.html` (e.g., `table_1.html`) - Iterations: `{design_name}_1_1.html`, `{design_name}_1_2.html` - Theme files: `theme_1.css`, `theme_2.css` **Asset Files**: - Images: `hero-image.jpg`, `product-1.png` - Icons: `logo.svg`, `icon-menu.svg` - Fonts: `inter-var.woff2`, `jetbrains-mono.woff2` --- ## Performance Optimization ### Image Optimization ```html Description Description Description ``` ### Font Optimization ```html ``` ### CDN Best Practices ```html ``` --- ## Best Practices ### Do's ✅ - Use established placeholder services (Unsplash, placehold.co) - Always provide alt text for images - Use Lucide as default icon library - Load fonts from Google Fonts - Use lazy loading for images - Provide responsive image srcsets - Use semantic SVG with accessible labels - Specify CDN versions for stability - Optimize images before deployment - Use modern image formats (WebP, AVIF) ### Don'ts ❌ - Don't make up image URLs - Don't use images without alt text - Don't load unnecessary icon libraries - Don't use too many font families (2-3 max) - Don't skip lazy loading - Don't use unoptimized images - Don't forget ARIA labels for icon buttons - Don't use latest CDN versions in production - Don't load fonts synchronously - Don't use decorative images in content --- ## Accessibility ### Image Accessibility ```html Sales increased 25% in Q4 2024
System architecture diagram
The diagram shows three layers: frontend, API, and database.
``` ### Icon Accessibility ```html ``` --- ## References - [Unsplash Source](https://source.unsplash.com/) - [Placehold.co](https://placehold.co/) - [Lucide Icons](https://lucide.dev/) - [Google Fonts](https://fonts.google.com/) - [Web.dev Image Optimization](https://web.dev/fast/#optimize-your-images)