# Project Inspiration ## Tendencias Destacadas en Diseño Web (2025) ### 1. Brutalismo & Neo-Brutalismo - **Descripción:** Estética cruda y directa, tipografía llamativa, contraste fuerte, elementos sin pulir. - **Ejemplo:** [Gumroad](https://gumroad.com) ### 2. Glassmorfismo - **Descripción:** Uso creativo de transparencias y difuminados tipo vidrio esmerilado. - **Referencia:** [MDN - backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) - **CSS Destacado:** `backdrop-filter: blur(10px)` ### 3. Tipografía Cinética - **Descripción:** Textos animados y adaptativos que interactúan o acompañan la navegación. - **Ejemplos y Recursos:** - [Colección de animaciones tipográficas](https://tympanus.net/codrops/tag/typography/) - [Tutorial SVG: animar letras con código](https://tympanus.net/codrops/2023/01/31/bringing-letters-to-life-coding-a-kinetic-svg-typography-animation/) - [Animaciones por scroll](https://tympanus.net/codrops/2023/01/18/on-scroll-typography-animations/) ### 4. UI Modular & Web Components - **Descripción:** Construcción de interfaces a partir de bloques reutilizables y compatibles. - **Referencia general:** [Web Components MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components) ### 5. Design Systems - **Descripción:** Uso sistemático de tokens para color, espacio, tipografía y componentes coherentes. - **Repositorio de sistemas:** [Design Systems Repo](https://designsystemsrepo.com/design-systems/) ### 6. Web Sostenible - **Descripción:** Experiencias web eficientes, optimizadas para bajo consumo y menor huella de carbono. - **Guía de buenas prácticas:** [Sustainable Web Design](https://www.wholegraindigital.com/blog/sustainable-web-design/) --- ## 🌐 Inspiration Resources ### Award-Winning Design Galleries - **[Awwwards](https://www.awwwards.com/)**: Best web design awards, daily inspiration - **[CSS Design Awards](https://www.cssdesignawards.com/)**: Showcases innovative CSS work - **[Behance](https://www.behance.net/)**: Creative portfolios and case studies - **[Dribbble](https://dribbble.com/)**: UI/UX design shots and concepts - **[Land-book](https://land-book.com/)**: Curated web design inspiration gallery - **[Httpster](https://httpster.net/)**: Totally rocking websites - **[Lapa Ninja](https://www.lapa.ninja/)**: Landing page design inspiration - **[One Page Love](https://onepagelove.com/)**: Single-page website gallery ### Color & Typography - **[Coolors](https://coolors.co/)**: Color palette generator - **[Adobe Color](https://color.adobe.com/)**: Color wheel and scheme explorer - **[Realtime Colors](https://www.realtimecolors.com/)**: Visualize color palettes on real designs - **[Google Fonts](https://fonts.google.com/)**: Free, open-source fonts - **[Fontjoy](https://fontjoy.com/)**: Font pairing generator - **[Type Scale](https://typescale.com/)**: Visual typography scale calculator - **[Contrast Checker](https://webaim.org/resources/contrastchecker/)**: WCAG accessibility testing ### Layout & Spacing - **[Grid by Example](https://gridbyexample.com/)**: CSS Grid patterns and examples - **[Flexbox Froggy](https://flexboxfroggy.com/)**: Learn Flexbox through a game - **[CSS Grid Garden](https://cssgridgarden.com/)**: Learn CSS Grid through a game - **[Every Layout](https://every-layout.dev/)**: Modern CSS layout patterns - **[Open Props Sizes](https://open-props.style/#sizes)**: Spacing scale and design tokens ### Icons & Graphics - **[Lucide Icons](https://lucide.dev/)**: Beautiful, consistent icon set (recommended) - **[Heroicons](https://heroicons.com/)**: Tailwind's icon library - **[Phosphor Icons](https://phosphoricons.com/)**: Flexible icon family - **[Unsplash](https://unsplash.com/)**: Free high-quality photos and videos - **[unDraw](https://undraw.co/)**: Open-source illustrations - **[Humaaans](https://www.humaaans.com/)**: Mix-and-match illustration library ### Animation & Interaction - **[Animista](https://animista.net/)**: CSS animation library and generator - **[Cubic-Bezier](https://cubic-bezier.com/)**: Easing function visualizer - **[LottieFiles](https://lottiefiles.com/)**: Lightweight animations for web - **[GSAP](https://greensock.com/gsap/)**: Professional animation library - **[Framer Motion](https://www.framer.com/motion/)**: React animation library - **[Scroll-Driven Animations](https://scroll-driven-animations.style/)**: CSS scroll animations --- ## 💡 Project Examples by Type ### Portfolio Sites - **[Bruno Simon](https://bruno-simon.com/)**: Interactive 3D portfolio (WebGL) - **[Brittany Chiang](https://brittanychiang.com/)**: Clean, accessible developer portfolio - **[Lynn Fisher](https://lynnandtonic.com/)**: Creative, playful personal site - **[Tobias Ahlin](https://tobiasahlin.com/)**: Minimalist designer portfolio (motion, typography) ### Landing Pages - **[Stripe](https://stripe.com/)**: Clean, conversion-focused design - **[Linear](https://linear.app/)**: Modern SaaS landing page - **[Vercel](https://vercel.com/)**: Developer-focused, fast-loading - **[Raycast](https://www.raycast.com/)**: Product showcase with great animations ### Editorial/Blog - **[The Pudding](https://pudding.cool/)**: Visual essays and data storytelling - **[CSS-Tricks](https://css-tricks.com/)**: Developer blog with great UX - **[Smashing Magazine](https://www.smashingmagazine.com/)**: Web design publication - **[A List Apart](https://alistapart.com/)**: Web standards and best practices ### Experimental/Creative - **[Active Theory](https://activetheory.net/)**: WebGL and creative development - **[Resn](https://resn.co.nz/)**: Award-winning digital experiences - **[Locomotive](https://locomotive.ca/)**: Smooth scrolling and interactions - **[Codrops](https://tympanus.net/codrops/)**: Creative coding experiments --- ## 📐 Visual References ### Moodboard Tools - **[Milanote](https://milanote.com/)**: Visual workspace for creative projects - **[Pinterest](https://www.pinterest.com/)**: Visual discovery and bookmarking - **[Are.na](https://www.are.na/)**: Visual research and collaboration - **[Figma](https://www.figma.com/)**: Design tool with moodboard templates ### Screenshot & Save Create a folder in your project: `/images/inspiration/` and save screenshots of: 1. **Color schemes** you like (save 3-5 examples) 2. **Typography combinations** that inspire you (2-3 examples) 3. **Layout patterns** you want to explore (3-5 examples) 4. **Interaction examples** (GIFs or videos of animations you admire) 5. **Complete sites** that match your project vision (5-10 screenshots) --- ## 🎯 Your Project Theme ### Core Concept **What is your project about?** _Example: A portfolio showcasing my graphic design work with a focus on sustainability and eco-friendly branding._ [Write your project's core concept here—1-2 sentences] --- ### Target Audience **Who is this for?** _Example: Potential clients looking for a designer who specializes in environmental brands, and recruiters from design agencies._ [Describe your target audience] --- ### Key Message **What do you want visitors to feel/understand?** _Example: I want them to see me as a thoughtful, detail-oriented designer who cares about making a positive impact through design._ [Your key message] --- ### Visual Direction **What aesthetic/mood are you going for?** _Example: Clean, modern, with earthy tones (greens, browns, off-white). Lots of whitespace, organic shapes, and subtle animations._ [Describe your visual direction] --- ### Technical Goals **What do you want to learn/demonstrate?** _Example: Master CSS Grid for complex layouts, implement smooth scroll animations, achieve 95+ Lighthouse scores, ensure WCAG AA accessibility._ - [ ] Goal 1: [e.g., Responsive design with CSS Grid] - [ ] Goal 2: [e.g., Accessible navigation with ARIA] - [ ] Goal 3: [e.g., Optimized images and lazy loading] - [ ] Goal 4: [e.g., Dark mode toggle] - [ ] Goal 5: [e.g., Smooth scroll animations] --- ## 📚 Further Reading ### Web Design Fundamentals - **[Web Design in 4 Minutes](https://jgthms.com/web-design-in-4-minutes/)**: Interactive tutorial - **[Laws of UX](https://lawsofux.com/)**: Psychology principles for designers - **[Refactoring UI](https://www.refactoringui.com/)**: Design tips for developers - **[Inclusive Components](https://inclusive-components.design/)**: Accessible component patterns ### Modern CSS - **[Modern CSS Solutions](https://moderncss.dev/)**: Contemporary CSS techniques - **[CSS Layout Patterns](https://web.dev/patterns/layout/)**: Google's layout guide - **[Defensive CSS](https://defensivecss.dev/)**: Prevent common CSS issues - **[SmolCSS](https://smolcss.dev/)**: Minimal CSS snippets ### Performance & Accessibility - **[Web.dev](https://web.dev/)**: Google's web development best practices - **[A11y Project](https://www.a11yproject.com/)**: Accessibility checklist and resources - **[WebAIM](https://webaim.org/)**: Accessibility evaluation and training - **[Core Web Vitals](https://web.dev/vitals/)**: Performance metrics guide --- ## ✅ Next Steps 1. **Explore** 2-3 trend categories that interest you 2. **Collect** 10-15 visual references in your inspiration folder 3. **Define** your project theme using the template above 4. **Share** your moodboard with classmates for feedback 5. **Refine** your concept based on feedback 6. **Start** sketching wireframes or creating a Figma prototype --- **Remember**: Inspiration is about finding what resonates with you and your project goals. Don't copy—synthesize ideas into something uniquely yours!