UI Creative’s Best Website Design Examples
Looking for web page design ideas? Below are 35 of the best website designs from the UI Creative template library, grouped by type: business, agency, portfolio, e-commerce, SaaS and local services. Each one is an editable design file you can use as a starting point. We also cover the modern web design principles and trends behind them, and which pages each type of site needs.
Every website design on this page:
- An editable UI design file (Figma, Adobe XD, Photoshop or Sketch, see each item), not a coded theme
- Layered and organized, so text, colors and images are easy to change
- Preview photos are not included in the download.
Contents
- What makes a good website design?
- Modern web design principles and trends
- Which pages does each type of website need?
- Business and corporate website designs
- Agency and marketing website designs
- Portfolio and architecture website designs
- E-commerce website designs
- SaaS, app and online learning website designs
- Local business and service website designs
- How to choose a website template
- FAQ
What makes a good website design?
A good website design makes it obvious what the site offers, who it is for and what to do next, within a few seconds, on any screen. Looks matter, but the best designed websites are also easy to read, quick to load and simple to navigate.
Web page design is the layout of a single page (sections, grid, type, images, buttons). Website design covers the whole site: how the pages link together, the navigation and the consistent style across them. The examples below show both: a strong homepage plus the inner pages that go with it.
Modern web design principles and trends
- One clear hero. A headline, a short line of detail and one main button at the top.
- Generous white space. Fewer elements per section, more room around them. It reads as premium and is easier to scan.
- Large, confident type. Big headlines and simple sans serifs or modern serifs. Our best fonts for websites list has options.
- Mobile first. Most visits are on phones, so stack sections cleanly and keep buttons thumb-sized. Many designs here show the mobile view next to desktop.
- Bold accent colors and gradients. One or two bright colors on a calm base, like the purple, orange and teal designs below.
- 3D shapes, illustrations and cut-out photos. They add depth without heavy imagery (see MarketHive and Fortune).
- Dark mode layouts. Dark backgrounds for portfolios, tech and luxury products.
- Card-based sections. Services, products and blog posts as cards that reflow neatly on small screens.
- Proof near the top. Client logos, numbers and testimonials build trust before the visitor scrolls far.
Which pages does each type of website need?
| Website type | Must-have pages | Key sections |
|---|---|---|
| Business / corporate | Home, About, Services, Contact | Hero, services, proof (numbers, clients), team, contact form |
| Agency | Home, Work or Portfolio, Services, About, Contact | Case studies, process, testimonials, pricing or quote form |
| Portfolio | Home, Projects, About, Contact | Big project images, short bio, skills, contact |
| E-commerce | Home, Category, Product, Cart, Checkout | Banners, product grid, filters, reviews, trust badges |
| SaaS / app | Home or landing page, Pricing, Sign up, Login | Product screenshots, features, pricing table, FAQ |
| Local service | Home, Services or Menu, Booking, Contact | Prices, schedule, photos, map, booking button |
Business and corporate website designs
Corporate sites need to look trustworthy at a glance: a confident hero photo, a clear list of services, proof (numbers, clients, team) and an easy way to get in touch.
1. Corpora Business
A bright blue hero with a smiling businesswoman cut out on a yellow circle and the headline “Awesome IT Services For Your Business”, shown on desktop and phone. Bold and friendly for IT and service companies.
Editable in Figma, Adobe XD and Photoshop · organized layers
2. Corbus Business
A clean white layout with “Changing The Way To Do Business”, blue and yellow buttons and an office photo framed in a yellow shape, on desktop and mobile. A calm, modern corporate homepage.
Editable in Figma, Adobe XD and Photoshop · organized layers
3. Consultancy Firm
“Unlock Your Online Growth Potential” on white, with a consultant photo on a soft violet shape and a small stats card. Shown on desktop and phone.
Editable in Figma, Adobe XD and Photoshop · organized layers
4. Business Marketing
A navy and blue multi-page site with a smiling businessman in the hero (“Entrust Your Business to Us”), service icons, an about page and a blog. A classic, safe corporate look.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
5. IT Services
A blue and orange IT company site with a “solve shared problems” hero, team photos, service tiles and blog and contact pages. Strong color blocks guide the eye down the page.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
6. Construction Management
A red and grey construction site with an engineer in a hard hat, project cards with photos, a capabilities section, a blog and contact pages. Industrial and direct.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
Agency and marketing website designs
Agency sites sell creativity, so they can be bolder: bright accent colors, playful shapes and a portfolio or case studies near the top.
7. Antara Digital Agency
A white page with a red “Digital Agency” headline and a portrait of a smiling man in a grey circle, on desktop and phone. Minimal, with one strong accent color.
Editable in Figma, Adobe XD and Photoshop · organized layers
8. Digital Agency Service
“Get Your Website Ready With Our Technology” beside a photo of a team at a laptop framed in yellow, shown on desktop and phone. Warm and approachable.
Editable in Figma, Adobe XD and Photoshop · organized layers
9. MarketHive Digital Marketing
A dark purple design with glossy pink 3D shapes and the headline “Boost Your Brand Visibility”, plus about, services and feature sections and mobile screens. On-trend 3D for marketing agencies.
Editable in Figma · organized layers
10. Fortune Agency
Purple and orange gradients with flat illustrations, an “Effective Agency & Solutions” hero, service icons, a blog and a pricing section. Colorful and illustrated.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
11. Digital Project Consultant
A magenta hero (“Your Website Is Ready For Launch”) with blue and purple inner pages: services, about with a timeline, blog and contact. Each page gets its own color.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
Portfolio and architecture website designs
Portfolio sites let the work do the talking: big images, dark or neutral backgrounds and very little text.
12. Personal Portfolio
A dark purple portfolio with “We Are Creative UI/UX And Web Designer”, a cut-out photo of the designer, skill stats and project sections, with mobile screens. Built for designers and freelancers.
Editable in Figma · organized layers
13. Archblue Architect
A dark layout with orange and blue accents, “Architect Require a Unique Design Approach”, an about section, services and a project grid of building photos, plus mobile screens.
Editable in Figma · organized layers
14. Archi Architecture
A full-width photo of a modern building with “Work With The Best Shape Makers For Your Home” and a green button, shown on desktop and phone. A photo-led homepage for architects and builders.
Editable in Figma, Adobe XD and Photoshop · organized layers
E-commerce website designs
Online stores need more pages than any other type: home, category, product, cart and checkout. These designs include the shop pages, not just a homepage.
15. Prisgem Jewelry
A bright orange presentation with a white shop: a diamond bracelet hero, a collections grid, product filters and a “Why Choose Our Brand” section. Elegant product photography on white.
12 Figma files · Bootstrap-compatible design · Google Fonts
16. Avanora Skincare
A fresh green design with serum bottles and “Let Your Skin Shine From Within”, an about block with a model photo, product categories and promotions.
11 Figma files · Bootstrap-compatible design · Google Fonts
17. Meow Meals Cat Food
Cartoon cat banners, a 10 percent discount tile, rounded category cards and a best-seller grid of cat food bags. Playful and cute for pet shops.
10 Figma files · Bootstrap-compatible design · Google Fonts
18. Pharmind Pharmacy
An orange hero with a smiling pharmacist (“Caring For You Every Step Of The Way”), brand logos, mega sale banners and a product page with filters.
10 Figma files · Bootstrap-compatible design · Google Fonts
19. Zoyeshop Fashion
Peach and pastel tones, an “Explore Your Fashions Tuning” hero, stat tiles, category cards with models and a red 50 percent sale banner.
10 Figma files · Bootstrap-compatible design · Google Fonts
20. Qommarket Electronics
Discount, Black Friday and Cyber Monday banners above flash deals of headphones and phones, plus a product page and category filters. A busy, deal-driven marketplace.
13 Figma files · Bootstrap-compatible design · Google Fonts
21. Well Shoes
A black and white editorial look with “Your Dream Shoes Are Here” in tall type, white sneakers and a product page with a $100 price, sizes and description.
10 Figma files · Bootstrap-compatible design · Google Fonts
22. Harley Motorbike Gear
A dark store for helmets, jackets and gloves with a motorcycle hero, a 50 percent off banner, product grids and product detail pages.
Home, product, cart, checkout and blog pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
23. Furniture Store
A light blue and white furniture shop with a sofa hero, a deal of the week strip, product grids of chairs and a contact page with a map.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
24. Pastry Store
Warm cream and orange pages for a bakery: a “Make Your Baking Better Tasting” hero, a shop grid of cakes, an about page and a contact page with a map.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
SaaS, app and online learning website designs
Software sites show the product itself: dashboard screenshots, feature lists and a clear sign-up button. Dashboards and app screens are often part of the kit.
25. Copilot.io AI Generator
A soft lavender AI tool with a robot mascot, a dashboard with chat, documents and an image and code generator, plus the marketing pages. 30 screens per the preview.
Editable in Figma · organized layers
26. Npoint CRM
A CRM website and dashboard with an income breakdown donut chart, order graphs, latest sales and upcoming events. 51 screens per the preview.
Editable in Figma · organized layers
27. Takszen Task Management
A black and white landing page (“Transform How You Work With Easy Task Management”) with partner logos, feature cards and mobile screens. Sharp and minimal for productivity tools.
Editable in Figma · organized layers
28. Ontrack LMS
A bright blue learning platform with a course dashboard, progress stats, a tutor profile card and course cards. 18 screens per the preview.
Editable in Figma · organized layers
29. Online Course
An orange and white course site with tutoring programs, course listings, top learners, a team section and a blog. Friendly photos of students and teachers.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
Local business and service website designs
Salons, studios, rentals and gyms need a simple site that answers three things fast: what you offer, what it costs and how to book.
30. Care Skin Beauty
Soft pink pages with “Elevate Your Skincare Routine to Brilliance”, portrait photos, service cards and mobile screens. Gentle and feminine.
Editable in Figma · organized layers
31. Beauty Salon
“Exclusive Beauty Salon, Spa & Care” in pink serif type with two model portraits on a pink shape, on desktop and phone.
Editable in Figma, Adobe XD and Photoshop · organized layers
32. Yoga Classes
Deep pink and white pages with yoga class photos, a class schedule, testimonials and pricing cards. Covers what a studio needs to sell classes.
Home, About, Services, Blog and Contact pages · 1920 px wide, 1140 px grid · Adobe XD, Photoshop and Sketch
33. Car Rental
A teal wave hero with a white SUV and “Looking to Save More on Your Rental Car?”, shown on desktop and phone. Clean and simple for rental and dealer sites.
Editable in Figma, Adobe XD and Photoshop · organized layers
34. Creaspace Coworking
“Your Ideal Place To Works” with a photo of people at a shared table and a purple button, on desktop and phone. Light and airy for coworking spaces.
Editable in Figma, Adobe XD and Photoshop · organized layers
35. Energize Society
Two engineers in hard hats on an orange shape with “Energize Society By Reliable Energy” and a green button, on desktop and phone. For energy and utility companies.
Editable in Figma, Adobe XD and Photoshop · organized layers
How to choose a website template
- Start from your type of site, not the colors. A shop needs product and cart pages; a consultant needs services and contact.
- Check the design software. Use the spec line under each item: some designs are Figma only, others come for Adobe XD, Photoshop or Sketch.
- Count the pages. Multi-page kits save the most time. Landing page kits suit one-page sites and product launches.
- Look at the mobile screens. If a design shows a phone view, the layout is already worked out for small screens.
- Plan your own photos. Preview photos are not included, so pick a design whose photo style you can match.
- Hand off cleanly. These are design files; a developer or a site builder turns them into a live website.
For single-page designs see our landing page inspiration, and for SaaS and product sites see our pricing table design templates.
Frequently asked questions
What is the best website design?
The best website design is the one that makes it obvious what you offer and what to do next, on every screen. In practice that means a clear hero, plenty of white space, readable type, fast pages and a layout built for mobile.
What is web page design?
Web page design is the layout and visual style of a single page: its sections, grid, typography, colors, images and buttons. Website design also covers navigation and how the pages work together.
What are the current web design trends?
Large type, generous white space, bold accent colors and gradients, 3D shapes and illustrations, dark layouts, card-based sections and mobile-first layouts. The examples above show each of them.
Are these website designs coded templates?
No. They are UI design files for Figma, Adobe XD, Photoshop or Sketch (the spec line under each item says which). Use them to design and present the site, then build it in code or a site builder.
Which pages should a business website have?
At least Home, About, Services and Contact. Add a portfolio or case studies for agencies, product, cart and checkout pages for shops, and pricing and sign-up pages for SaaS products.
Need a complete website design?
Browse the full collection of website templates.