Website Features & UI Ideas
A visual library of UI components including buttons, cards, navs, forms, animations and more. Every colour, font and layout is customisable. Don't see what you need?
Get In TouchText & Content Animations
How words, headings, and sections can come to life on your site.
Text types itself out character by character, with a blinking cursor.
Each letter drops in with a satisfying bounce, great for hero headings.
Content fades in from below as the user scrolls to it. Clean and modern.
Your heading fades up beautifully.
Each word appears in sequence, drawing the reader through your message.
Text or sections slide in from the side, adding depth and direction.
A digital glitch flicker effect, perfect for tech or creative brands.
HB Dev
A coloured bar sweeps across text to reveal it, like a marker highlight.
Web Design in Kent
Numbers animate up to their value. Great for stats and achievements.
Letters or words scale up from nothing and snap into place with a springy bounce.
Pop!
Each letter ripples up and down in sequence, playful and eye-catching for short words.
Wave
Card Styles
Containers for content each with a distinct personality. Hover over each one.
Basic Styles
Basic Card
Clean minimal card with subtle border and hover lift.
Branded Card
Brand-coloured border and tinted background for emphasis.
Glass Card
Frosted glass effect with backdrop blur for modern UI.
Gradient Card
Subtle gradient background to add depth and colour.
Hayley B.
Web Developer · Kent
Interactive Styles
Flip Card
Hover to reveal the back
Back Side!
Perfect for services, team members, or feature reveals.
Tilt Card
Move your mouse over this card to see the 3D tilt and light reflection effect.
Neon Card
Hover to activate the spinning electric border. Ideal for hero features and CTAs.
"Hayley built our site from scratch it's fast, beautiful, and exactly what we needed."
Layout Variants
Custom HTML Build
Hand-coded from scratch for maximum speed and security.
Design Mockups
See your site before a single line of code is written.
SEO Optimised
Built to rank local Kent SEO included as standard.
New enquiry received
Someone submitted your contact form.
Your site is live!
Deployment completed successfully.
SEO report ready
Your monthly rankings report is available.
Scroll Stack
Discovery
We start by understanding your business, goals, and target audience to plan the perfect site.
Design
A full visual mockup of your site is created before a single line of code is written.
Build
Hand-coded HTML, CSS and JS. Lightning fast, fully custom, and built to last.
Launch
Deployed, tested and live. SEO baked in from day one so you rank right away.
Reveal Animations
Content that animates into view as you scroll. Six different entrance styles, all triggerable on any card, text, or element.
Zoom In
Scales up from a smaller size. Eye-catching for pricing cards and CTAs.
Flip In
Flips down from a tilted angle. Adds drama to testimonials and feature highlights.
Blur In
Sharpens from a soft blur. Feels premium and modern for image-heavy layouts.
Badges & Tags
Status indicators, labels, counters, and tag chips.
Form Styles
Four full contact form styles Basic, Fun, Professional, and Premium plus individual form elements below.
Full Form Styles
Text Input States
Every input field can be styled to match your brand: colour, border radius, focus glow, icon placement, and validation states are all fully customisable.
Progress & Loading
Bars, spinners, dot loaders, and skeleton screens.
Alerts & Notifications
Banner alerts, toast messages, and notification panels.
Tooltips
Hover over the buttons below.
Accordion / FAQ
Expandable content panels click to open.
Custom HTML is hand-coded markup built from scratch no templates, no bloat. Faster, more secure, and fully tailored to your brand.
A basic site typically takes 2–4 weeks. More complex builds take 6–12 weeks depending on features and content availability.
Yes! Every package includes at least 3 rounds of revisions. Enterprise packages include unlimited revisions until you're happy.
Also used for FAQ sections, feature breakdowns, pricing detail panels, and any content that benefits from progressive disclosure.
Accordion Use CasesSliders & Carousels
Different ways to display sliding and scrolling content.
The Plumber's Fix
100 PageSpeed, mobile-first, live in 2 weeks.
Kent Candle Co.
WooCommerce with custom checkout and email automation.
Page 1 in 60 Days
From page 4 to position 2 with on-page and local schema.
Infinite Marquee Slider
Modals & Overlays
Click the button to see a live modal demo.
Timeline
Project steps, processes, and histories laid out vertically.
Discovery & Planning
Goals, audience, and design brief confirmed.
Wireframes & Mockups
Visual mockups reviewed and signed off.
Development
Hand-coded build with ongoing client previews.
Testing & Launch
Cross-browser testing, performance audit, and go live.
Timelines work great for project roadmaps, process explanations, company history sections, and step-by-step how-it-works guides.
Use CasesPricing Cards
Different layouts for presenting your pricing.
Classic Tiered
- Up to 5 pages
- Responsive design
- Contact form
- Basic SEO
- 30-day support
- Up to 10 pages
- Advanced animations
- Multiple forms
- Full SEO package
- Performance audit
- Up to 50 pages
- Custom interactions
- Advanced SEO strategy
- Unlimited revisions
- Priority support
Horizontal Cards
Comparison Table
| Feature | Starter | Professional | Enterprise |
|---|---|---|---|
| Pages | 5 | 10 | 50 |
| Responsive Design | ✓ | ✓ | ✓ |
| Animations | — | ✓ | ✓ |
| SEO Package | Basic | Full | Advanced |
| Performance Audit | — | ✓ | ✓ |
| Revisions | 3 | 5 | Unlimited |
| Support | 30 days | 60 days | Priority |
Spotlight Card
Professional
Everything you need to get found, look great, and convert visitors into customers.
- Up to 10 hand-coded pages
- Advanced scroll animations
- Multiple contact forms
- Full SEO package
- Google PageSpeed audit
- 60-day post-launch support
Avatars & User Groups
Profile pictures, groups, cards, and status indicators.
Code Block Style
Syntax-highlighted code snippets for dev-focused pages or tutorials.
UK Web Design Services
Custom Websites Built Across the UK
Whether you're based in Ashford, Canterbury, Folkestone, Hythe, Maidstone or further afield in London, Manchester, Birmingham, Leeds or Bristol, HB Web Development designs and builds hand-coded websites tailored to your brand. No templates, no page builders, just clean custom code.
Custom HTML Websites
Hand coded from scratch for speed, security and full creative control. No WordPress, no drag and drop.
Learn More →Package Deals
Bundled web design packages to suit different budgets and business sizes across the UK.
View Packages →SEO Services
Get found on Google. Local and national SEO built into every project from day one.
Learn More →See Something You Like?
Any of these components can be designed into your site tailored to your brand, colours, and content.
Start Your Project