How to Design a Team Page: Photo Styles, Bio Length, and Layout Examples

Most “Meet the Team” pages fail for the same three reasons: the photos do not match, the bios are either two words or two paragraphs, and the layout falls apart the moment you hire your seventh person. Team page design is one of those small pages that quietly does a lot of work: it builds trust before a sales call, it answers “who will actually do this work?”, and it is often the second or third most visited page on a service business website after the homepage and pricing.

This guide is not a gallery of pretty screenshots. It is the practical checklist we use at FatCow Web Design when we build About Us sections: photo rules, word counts, grid patterns that survive from a 3-person studio to a 50-person agency, real CSS you can paste, and the cases where the right answer is to skip photos entirely. See onepagelove.com for their take.

The short answer: what a good team page needs

If you only read this section, build these six things:

1. Consistent photos: same crop, same background family, same lighting direction, same aspect ratio.
2. A bio length that matches team size: roughly 60 to 120 words for a small studio, 15 to 40 words once you pass 20 people.
3. A responsive grid built with auto-fit and minmax() so it reflows instead of breaking.
4. Clear roles, written in language clients use, not internal job titles.
5. One human detail per person so the page does not read like an org chart.
6. An accessible interaction model: nothing important hidden behind hover only.

Step 1: Decide what your team page is actually for

Before choosing a layout, pick the primary job. The layout follows the job, not the other way around.

Goal	What to emphasise	Best layout
Win trust before a sales call	Faces, credentials, years of experience, direct contact	Large cards, 2 to 3 per row, longer bios
Recruiting	Culture, personality, candid photos, team rituals	Mixed grid with lifestyle shots and quotes
Credibility for a large firm	Depth of bench, departments, specialisms	Dense grid, filters, short bios, detail pages
SEO and E-E-A-T signals	Author profiles, qualifications, links to published work	Individual profile pages linked from a grid index

A 50-person agency that copies a 4-person studio layout ends up with an endless scroll of identical cards. A 4-person studio that copies an agency directory looks smaller than it is. Match the pattern to the headcount.

Step 2: Photo consistency (the part that makes or breaks the page)

Visitors read inconsistency as sloppiness. One person shot against a window, another cropped from a wedding photo, a third using a 2019 LinkedIn thumbnail: the page instantly feels improvised. Consistency matters more than production budget. A set of well lit phone photos taken in the same spot beats a mix of expensive but mismatched shots.

Headshot framing rules

Write these into a one-page brief and send it to everyone, including remote hires.

Specification	Recommended	Why
Crop	Mid chest to just above the head, eyes on the upper third line	Eye level stays constant across the grid, which is what the brain notices
Aspect ratio	4:5 portrait, or 1:1 square for dense grids	Portrait reads warmer, square packs more people per row
Background	One flat colour, one neutral wall, or one consistent office location	Mixed backgrounds are the number one cause of a messy grid
Lighting	Soft light from one side, no direct flash, no window behind the subject	Prevents the “police mugshot” and “silhouette” effects
Wardrobe	A stated colour range, not a uniform	Keeps cohesion without making people look interchangeable
Export size	1200 px on the long edge, AVIF or WebP, under 120 KB	Sharp on retina screens without wrecking Core Web Vitals

Four photo styles that work

• Clean studio headshots on a flat brand colour. The safest option and the easiest to extend when you hire. Works for professional services, legal, finance, healthcare.
• Cut-out portraits on a coloured block. Background removed, subject placed on a solid or gradient tile. Extremely forgiving because you can normalise photos taken anywhere. Ideal for distributed teams.
• Environmental portraits. Everyone photographed in the same studio, workshop, or office, in the same light. Great for craft businesses and agencies with a real space.
• Duotone or monochrome treatment. Apply the same colour grade to every image and mismatched source photos suddenly look like a set. The cheapest way to rescue a legacy photo library.

Hover states: use them for delight, never for information

Hover is the classic team page flourish. Popular patterns:

1. Serious to silly swap. Two photos of each person, the second one playful, cross-faded on hover. Still the most charming pattern in team page design, and it doubles as a personality signal.
2. Greyscale to colour. Elegant, cheap to implement, and it makes the grid calm at rest.
3. Slide-up detail panel. Role, specialism, and social links slide over the photo.
4. Subtle scale plus shadow. A 1.02 to 1.04 scale on the image inside a fixed frame reads as responsive without being noisy.

The rules: touch devices have no hover, so anything hidden behind it must also be visible or reachable another way. Mirror every :hover with :focus-within so keyboard users get the same experience. Respect prefers-reduced-motion. And if you use two photos per person, you have doubled your image payload, so lazy load the second one.

Step 3: How long should team bios be?

Bio length is a function of team size and of how much the individual matters to the buying decision. A founder-led consultancy sells the founders. A 50-person agency sells capability. Use this as a starting scale:

Team size	Bio length per person	Structure
1 to 3 people	80 to 150 words	Full paragraph, first person, credentials plus personality
4 to 12 people	40 to 80 words	Two or three sentences, third person, one human detail
13 to 30 people	25 to 45 words visible, more behind a click	One sentence on card, expandable panel or modal
30 to 50+ people	10 to 20 words on the card	Name, role, one specialism, link to a profile page

A bio formula that never sounds like a resume

Four beats, in this order:

1. What they do here, in client language. “Runs our paid search accounts” beats “Senior Performance Marketing Specialist II”.
2. Proof. Years in the field, a named specialism, a certification, a sector.
3. A working style detail. What it is like to be in a meeting with this person.
4. One human line. A hobby, a hometown, an opinion about coffee. Keep it to one line, and make it specific.

Example at 55 words: “Marc leads our WordPress builds. Twelve years of front-end work, most of it on sites that have to survive a Black Friday. He is the person who asks whether the animation is worth the 200 KB. Outside work he restores a motorcycle that has never once started on the first try.”

Bio writing mistakes to avoid

• Uneven lengths. If the founder gets 200 words and the designer gets 12, the page reads as a hierarchy statement. Set a word range and enforce it.
• Fun facts with no substance. “Loves tacos and Netflix” tells a prospect nothing. Personality should sit next to competence, not replace it.
• Copy pasted LinkedIn summaries. They are written for recruiters, not for your clients.
• Inside jokes and made up titles. “Chief Happiness Wizard” is fine internally, confusing on a page where someone is deciding whether to spend money with you.

Step 4: Layouts that scale from 3 to 50 people

3 to 6 people: the feature row

Go large. Two or three columns maximum, big portraits, full bios visible without interaction. At this size you can afford asymmetry: alternate image left and image right for each person, or stagger the cards vertically so the row does not look like a passport control queue. Add direct contact details, because at this size the visitor is usually choosing a person, not a company.

7 to 20 people: the grid with a lead row

Use three or four columns. Give leadership a wider card in the first row, then a uniform grid below. Bios shorten to two sentences. This is where consistent photography starts to matter enormously, because the eye now scans the grid as a single texture. Group by department only if the departments are meaningful to a client.

20 to 50+ people: the directory

Now you are designing an index, not a story. Practical patterns:

• Filter or tab by department with real URLs per filter, so the sections are linkable and indexable.
• Sticky section headings as the visitor scrolls through Leadership, Design, Engineering, Client Services.
• Square photos and four to six columns on desktop to keep the page a reasonable length.
• Individual profile pages for anyone who publishes, speaks, or appears on sales calls. This is also where author schema and E-E-A-T value lives.
• A count and a hiring CTA at the top: “52 people across 3 offices. We are hiring 4 roles.”

Avoid alphabetical ordering for a big team unless there is a search field. Nobody scans 50 cards looking for a surname.

CSS patterns for responsive team grids

These are the layout primitives we reach for. They are framework free and work in every current browser. The team at awwwards.com reached a similar conclusion.

1. The self-adjusting grid

One declaration handles phone, tablet and desktop with no media queries at all. The grid adds and removes columns based on available space.

.team-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Small teams: cap the columns so 4 people do not stretch into a thin line */
.team-grid--small {
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
}

Use minmax(220px, 1fr) for mid-size teams and minmax(150px, 1fr) for a 50-person directory with square photos.

2. Locking the photo aspect ratio

This is the single most valuable rule on the page. It forces every image into the same shape, whatever was uploaded, and it reserves space so nothing shifts while images load.

.team-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: #eee; /* placeholder while loading */
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* bias toward the face, not the chest */
  display: block;
}

3. Accessible hover photo swap

.team-card__media { position: relative; }

.team-card__media .alt-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}

.team-card:hover .alt-photo,
.team-card:focus-within .alt-photo {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .team-card__media .alt-photo { transition: none; }
}

@media (hover: none) {
  /* Touch devices: never depend on hover for content */
  .team-card__media .alt-photo { display: none; }
}

4. Highlighting leadership without a second grid

@media (min-width: 900px) {
  .team-card--lead {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.5rem;
    align-items: center;
  }
}

5. Container queries for cards that adapt to their slot

Container queries are the right tool in 2026: the card decides its own layout based on the space it is given, so the same component works in a sidebar, a three column grid, or a full width row. This article covers the same ground in more depth.

.team-card {
  container-type: inline-size;
}

@container (min-width: 380px) {
  .team-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: start;
  }
  .team-card__media { aspect-ratio: 1 / 1; }
}

6. Performance and markup hygiene

• Add loading="lazy" and decoding="async" to every photo below the fold, but not to the first row.
• Always set width and height attributes to prevent layout shift.
• Serve srcset at two or three widths. A 150 px avatar does not need a 1600 px file.
• Mark up the page as a list of people. Wrap each card in an <li>, put the name in a heading, and use alt text that includes the person’s name.
• Add Person structured data for named individuals, linked to your Organization markup.

When to skip photos entirely

Not every team page needs faces. Sometimes photos actively hurt. Consider skipping them when:

• Privacy or safety is a factor. Security consultancies, some legal and healthcare practices, investigators, staff who deal with hostile parties, and anyone at risk of impersonation.
• Turnover is high. A page full of people who left six months ago is worse than no page at all. If you cannot maintain it quarterly, do not build it.
• The team is distributed and photo quality is wildly uneven, and you have no budget to normalise it. Mismatched photos read as unprofessional, no photos read as deliberate.
• Your team is very small and you are competing on capability rather than personal relationship. A two-person shop can look thin with two big portraits and confident with a capability-led About page.
• Only part of the team can be shown. Half faces and half placeholders is the worst of both worlds.

Photo-free alternatives that still feel human

1. Typographic list. Large names, roles in a lighter weight, generous spacing. Confident and fast to load.
2. Monogram or initial tiles in rotating brand colours. Keeps grid structure without faces.
3. Illustrated avatars drawn in one consistent style. Charming for product companies, but budget for new illustrations with every hire.
4. One group photo plus a text roster. Gives a human signal at a fraction of the maintenance cost.
5. Work-first cards. Instead of a portrait, show a snippet of what each person made: a screenshot, a chart, a line of code, a photograph they shot.
6. Short video introductions. Fifteen seconds per person outperforms any still photo for trust, if you can actually produce them.

Team page design checklist

1. One photo brief, applied to every person, including remote and new hires.
2. Same aspect ratio, same eye line, same background family, same colour grade.
3. Bio word range defined and applied to everyone equally.
4. Roles written in client language.
5. Grid built with auto-fit and minmax(), tested at 320 px, 768 px, 1280 px and 1920 px.
6. Nothing critical hidden behind hover; :focus-within mirrors every hover state.
7. Images compressed to AVIF or WebP, lazy loaded below the fold, dimensions set.
8. Alt text includes each person’s name.
9. A CTA at the bottom: book a call, see open roles, or read case studies.
10. A calendar reminder to review the page every quarter and remove leavers.

Common team page mistakes

• Stock photos of fake people. Reverse image search takes four seconds and destroys trust permanently.
• Ghost employees. Listing contractors or former staff to look bigger is a legal and reputational risk.
• No contact route. If the page builds trust and then offers no next step, it wasted the trust.
• Autoplaying carousels. People cannot read a bio that moves.
• A 12 MB page. Fifty uncompressed portraits will tank your Largest Contentful Paint and your mobile rankings.
• Titles that mean nothing externally. “P3 Associate” tells a client nothing about who to ask for.

FAQ

What is a team page?

A team page, often called a “Meet the Team” or “Our People” page, is the section of a website that introduces the individuals behind the business, typically with a photo, a name, a role, and a short bio. It usually sits inside or next to the About Us section and is used to build trust, support recruitment, and show depth of expertise.

What should I put on a Meet the Team page?

At minimum: a consistent photo, full name, a role written in plain language, and one to three sentences of bio. Then add, where relevant, a specialism, a credential or years of experience, a LinkedIn or portfolio link, a direct email for client-facing staff, and one personal detail. Finish the page with a clear call to action.

How long should a team bio be?

Between 80 and 150 words for a team of three or fewer, 40 to 80 words for a small studio, and 10 to 40 words per person once you pass twenty people, with longer detail moved to individual profile pages. The critical rule is that everyone gets roughly the same length.

How many columns should a team grid have?

Two to three columns for teams under seven people, three to four for seven to twenty, and four to six for larger directories using square photos. On mobile, one column below roughly 480 px and two columns for compact avatar grids.

Do team page photos need to be professional headshots?

No. They need to be consistent. A set of photos taken on a modern phone against the same wall with the same soft lighting will look better than a mix of professional shots taken at different studios in different years. If you do hire a photographer, book a repeatable setup so new hires can be matched later.

Does a team page help SEO?

Indirectly, yes. It supports experience and trust signals, it is a natural place for Person structured data linked to your organisation, and profile pages give authors a credible home to link to from articles. It also ranks for branded and name-based searches when someone checks you out before a meeting.

What are the 5 C’s of a team?

In team management the five C’s are usually listed as communication, coordination, cooperation, commitment and cohesion. They are a management model rather than a design one, but they are a useful editorial filter: a good team page should make communication, cooperation and cohesion visible rather than just listing job titles.

Need help building it?

A team page looks simple until you have to make forty photos match, write forty bios of equal length, and keep the grid fast on mobile. At FatCow Web Design we design and build About Us and team sections that stay consistent as you grow, with reusable card components, art-directed photo specs, and layouts that hold up from three people to fifty. Get in touch and tell us how many faces we are working with.