Design Isms

Design -isms

49개 디자인 ism을 한 번에 훑어보는 시각 레퍼런스 보드입니다. 각 스타일은 AI mockup 이미지, 역사/맥락, 컬러 팔레트, 실제 사이트 예시, 이미지 생성 프롬프트, 관련 ISM, 그리고 팝업 하단의 개발 가이드까지 함께 제공합니다.

별도 페이지 `effects.html`에서는 모바일과 데스크탑 프런트엔드 UI 후보군을 이름을 몰라도 찾아볼 수 있게 정리합니다. 카드별 미니 데모, 상세 모달, 접근성 체크, 성능 체크, 94개 전체 ima2 guide 이미지와 WebP preview, 그리고 효과별 배경/히스토리/사용 시점 문서를 포함합니다.

Catalog 드롭다운으로 이어지는 네 개의 자매 카탈로그가 백과사전을 완성합니다: `color.html`(역할 기반 팔레트 25종 — light/dark 변형과 WCAG AA 대비 검사), `typography.html`(폰트 페어링 20종 — 라이브 웹폰트 스페시멘과 타입 스케일), `layout.html`(반응형 섹션 패턴 25종 — 데스크탑/태블릿/모바일 3단 와이어프레임 비교와 코드 스니펫), `motion.html`(모션 레시피 20종 — easing 곡선 시각화, 라이브 데모, reduced-motion 대응). ISM 모달의 "관련 카탈로그" 섹션과 각 카탈로그 모달의 관련 ISM/Effects 링크가 서로를 잇습니다.

[Live Site](https://lidge-jun.github.io/design-isms/) · [Repository](https://github.com/lidge-jun/design-isms)

What It Shows

• 49 design -isms from Minimalism to the AI Slop anti-pattern diagnosis
• 147 AI-generated ISM mockup images
• 147 lightweight ISM WebP thumbnails for fast card/modal loading
• Original PNG lightbox only when the user clicks an image
• 10 real website examples per ism, initially collapsed to 3
• Modal detail view with history, prompts, palette, keywords, related ISMs
• Development guide per ism: fitting components, build method, verification points
• Korean/English UI toggle
• Frontend UI Candidates page with 46 mobile, desktop, and shared patterns
• 46 dedicated live demo animation types for the candidate cards and modals
• 94 guide images under assets/images/effects/
• 94 guide WebP previews under assets/images/thumbs/effects/
• Long-form effect documentation in assets/data/effects-docs.json
• 8 newly added ima2-generated ISM styles: Editorial Typography, Variable Typography, Monospace / Terminal UI, Pixel Art UI, De Stijl, Constructivism, Isometric 3D UI, and Pop Art
• Grok research prompts and ima2 prompt manifests for the ISM/effects expansion batch

Implementation Principles

Catalog source-of-truth counts: 49