In 2012, designing a blog meant drawing in Photoshop and converting a PSD into a theme. By 2026 the workflow is totally different: the Block Editor, Figma kits, and AI-generated themes.
Original post (2012, translated):
Want a blog design that’s yours? Easy — you just need some Photoshop skills and imagination.
In the video below I redesigned a blog I’d seen before, with my own tweaks. WordPress design doesn’t need any extra plugins; Photoshop has everything. You can even draw the social icons yourself if you have time.
The mini design is a small personal blog. The PSD and PNG files are attached below.
2026 Workflow — From Photoshop to Figma + Block Editor
A typical 2026 flow for designing a personal WordPress blog:
- Moodboard: 10-15 references from Pinterest + Dribbble.
- Wireframe: rough layout in Figma. Mobile-first.
- Hi-fi design: colors, typography, micro-interactions — all in Figma.
- Theme choice: Kadence, Astra, GeneratePress, Blocksy — Block Editor / FSE compatible, performance-focused.
- Customization: tweak block-by-block in the Site Editor. No code required anymore.
- Performance: WP Rocket, Cloudflare, next-gen images.
2012 vs 2026 — Side by Side
| Step | 2012 | 2026 |
|---|---|---|
| Design | Photoshop PSD | Figma |
| HTML/CSS | Handwritten | Block Editor + custom CSS |
| Theme | PSD-from-scratch | Astra/Kadence + child theme |
| Icons | Hand-drawn in PS | Lucide / Heroicons / Phosphor |
| Mobile | Bolted on later | Mobile-first mandatory |
| Speed | 3-5s load normal | <1s LCP, Core Web Vitals |
2026 note: AI theme generators arrived in 2024: Divi AI, Hostinger AI Builder, Wix ADI — type a sentence, get a full blog theme. But for serious personal sites, Figma + Astra/Kadence + manual CSS is still the safest route.
Recommended 2026 Stack
- Theme: Kadence (free version is enough) or GeneratePress.
- Page editor: built-in Block Editor (Gutenberg). Elementor / Bricks optional.
- SEO: Rank Math (free) or SEOPress.
- Performance: WP Rocket + Cloudflare.
- Images: ShortPixel or Imagify for WebP/AVIF conversion.
