Phoenix Camelback Corridor Website Design

Your first screen, seen from the far end of a boardroom table

Prospects size up your firm on the first screen, on a phone or a boardroom display. Give that screen your property types, job sizes and one clear way to start.

Here's a moment plenty of principals know. You're mid-pitch, and the prospect's facilities lead puts your site on the wall screen in their boardroom. Six people wait while a full-width slideshow fades from one lobby to the next. Nobody can tell yet what kinds of buildings you work on, so you end up narrating your own home page to fill the quiet.

A lot of portfolio sites we open stumble right here. The first screen is one huge photo with a two-word slogan, and the menu hides behind a tiny icon. On a phone it gets worse, since the answers a prospect wants sit three swipes down. We'd flip that order so the answers show up first and the eye candy follows a beat later.

None of this means stripping out the beauty. Your photos are still the reason people remember you. They just move one scroll lower, under a headline that tells a stranger what you do in their words. Think of the first screen as the handshake and the gallery as the tour.

• The property types you design for, in plain words, such as office suites, restaurants or hotel common areas.
• A size cue, like 'from a single floor up to a whole building,' so smaller jobs don't count themselves out.
• Your role in one line, for example design only, or design through move-in.
• One button whose words match the first step, such as 'Ask about a project.'
• A phone number that dials when tapped, for people who'd rather talk than type.
• One recent project with a real caption, so there's proof before anyone scrolls.

1. Write the headline in a client's words Swap 'Spaces that inspire' for something like 'Interior design for offices, restaurants and hotels.' It reads plainer, and that's the point.
2. Add one supporting line Give the size cue and your role in a single sentence. Keep it under twenty words so it fits a phone screen without wrapping five times.
3. Pick one button Choose the action you'd most like a stranger to take. A second option, like calling, can sit beside it as a plain link.
4. Move the slideshow down Let one strong photo sit under the headline. The rest of the gallery can wait a scroll, where it loads without slowing the first view.

A four-part caption that says who did what

Strong captions carry four facts: the property type, your firm's part in the job, what stage the photo shows and one change you made. Each takes a minute to write.

1. Name the property type Use the words a client would use, such as 'second-floor office suite' or 'hotel lobby.' Skip job codes. Leave out street addresses unless the owner agreed to share them.
2. Say which parts were yours Name the slice of the job your team handled, such as interior design and the furniture plan. Keep it to work you'd gladly be hired for again, so the caption points at the next job you want.
3. Mark the stage Tell people if they're looking at a rendering, work under way, the finished room or the same room a year into use. Clients set budgets from photos, so this line carries more weight than it seems to.
4. Add one change Close with a single concrete result you can stand behind, like 'moved reception to face the elevators.' Leave out any number you couldn't prove if a client asked.

The second version is barely longer. It swaps mood words for facts a stranger can picture. A tenant rep in a similar building reads it and can see your team in their space, which is the whole job of a caption. We usually ask firms to caption their ten strongest projects first and let the rest wait.

Renderings need extra care. A lovely render of a lobby that was never built reads like a finished job if the caption stays quiet about it. Label it plainly. If the design changed during construction, say which version the photo shows. Clients forgive changes, but they remember surprises.

For your favorite jobs, we'd plan a second visit a year after move-in. A lived-in room with coffee cups on the desks shows a prospect how the design holds up, and the stage line makes clear which visit they're looking at. That one caption often starts a better conversation than the glossy launch-day shot.

Open the project lightbox with the mouse unplugged

A keyboard user should be able to open an enlarged photo, step through the set and close it, with focus returning to the thumbnail they pressed.

1. Put the mouse in a drawer and press Tab Start at the top of a project page and press Tab until a thumbnail shows a visible outline. If you can't see where you are, that's the first fix.
2. Press Enter on a thumbnail The enlarged photo should open with focus inside it, usually on the close button. If Tab keeps walking through the page hidden behind it, the lightbox isn't holding focus.
3. Use the arrow keys Left and right should move between photos, and the caption should change with each one. A short line like 'Photo 3 of 12' helps screen reader users keep their place.
4. Press Esc The enlarged view should close, and focus should land back on the thumbnail you opened. If it jumps to the top of the page, a keyboard user has to Tab through everything again.
5. Keep pressing Tab while it's open Focus should circle through the lightbox controls, and Esc or the close button should always get you out. A box you can't leave by keyboard is a trap, plain and simple.

Why bother, when most visitors use a mouse or a thumb? Some of the people choosing a design firm get around by keyboard every day, whether from a wrist injury or plain habit, and screen reader users do too. The fixes that help them also make the gallery calmer for everyone, because the enlarged view behaves the same way every time.

Sticky headers cause a sneaky version of the problem. Focus returns to the right thumbnail, but a pinned menu bar or a cookie banner sits on top of it, so nobody can see where they are. We test for that as well, tabbing through our gallery templates with the banner still showing and the page scrolled halfway down. If we find it, we fix it before your team ever sees the preview.

Let the lead photo load before the slideshow script does

A portfolio page feels slow when its lead photo waits behind scripts and fonts. Load that photo first, send phones a smaller copy and let lower photos arrive as people scroll.

Why bother, if the photos look fine on your office monitor? That monitor sits on fast office internet, and your prospects often don't. They open your link on shaky hotel wifi or on a phone showing a single bar. A page that snaps open at your desk can crawl there, which is why we test on a slowed-down phone connection before we call a gallery done.

We also look at the order photos arrive in. If the lead image waits behind a font file, a chat widget and a slideshow script, the page feels slow even when the total weight is fine. Trimming what loads before that first photo is often the quickest win we find.

1. Test one photo-heavy page Run a project page through PageSpeed Insights. It shows data from real Chrome visitors when there's enough of it, plus a lab test from one simulated phone load.
2. Find the biggest thing on screen The report points to the largest element in the first view. On a portfolio page, that's nearly always the lead photo.
3. Offer each photo in a few widths Export two or three sizes of every gallery image, saved as WebP or AVIF, and list them in the page code. A phone then fetches the small one while a big monitor gets the large one.
4. Give every image a set size Width and height in the code stop text from jumping as photos arrive. That jump is exactly what the layout shift number counts.
5. Lazy-load below the first screen, never above it Photos lower in the gallery can wait until the visitor scrolls near them. Lazy-loading the lead photo only delays the picture people came to see.

Headlines laid over photos can vanish at noon

White words on a bright project photo often miss the contrast rule. Put a soft dark wash behind the text, or move the words just under the image.

Design firms love this look, and we get it. A calm headline floating over a courtyard at dusk feels like a magazine cover. Then someone swaps in a midday shot of white stucco, and the headline disappears into the wall. A gentle gradient behind the words, or a plain band under the photo, keeps the mood and the message.

Check it the lazy way first. Stand by a window at lunchtime, turn your phone brightness down and read your own home page. If you squint, a client will too. Then we'd confirm it properly with a contrast checker on the exact colors in the file.

We'd rather you catch it yourself between launches than wait for a client to mention it. So we leave your team a short note on which photos are safe for headlines and which ones need the gradient switched on.

• Lay a dark gradient over the bottom third of the photo, where the words sit.
• Choose hero photos with a calm area, like a wall or sky, for the headline to rest on.
• Keep the headline short enough to fit that calm area on a phone.
• Move long text off the photo entirely and let the image stand alone.
• Re-check contrast every time someone swaps the hero photo.

Cut the portfolio down to the work you want more of

Twelve strong, well-captioned projects sell harder than forty loosely labeled ones. Trim anything you wouldn't want to repeat, and archive the rest where past clients can still find it.

Firms tend to keep every project online as a record of effort. Visitors read it another way. An old dental office sitting next to your hotel work tells a hotel owner you'll take anything. That may be true, but it isn't the first message you want to send. We'd rather see a dozen projects that match the calls you want than forty that match the calls you've had.

Pruning also makes the site easier for us to build and for you to keep. Fewer projects means fewer captions to write and fewer photos to squeeze down for phones. The work you keep gets more care, and it shows.

1. Print the project list Pull every project into one sheet with its year, property type and whether you have good photos. Paper works fine for this.
2. Mark the ones you'd happily repeat Ask each principal to star the jobs they'd take again tomorrow. Projects with two stars go straight to the top of the new site.
3. Sort the rest with the table Keep, archive or retire each remaining job. Anything you can't caption in four parts goes in the retire pile for now.
4. Send us the short list We build the portfolio around the starred jobs first. The archive page can follow later without holding up launch.

Keep old project links alive through the rebuild

Old project pages collect links from partners, press and past emails. Send each old address to its replacement with a permanent redirect, and leave those redirects up for at least a year.

1. List every current address Export your sitemap or let us crawl the site. Include PDFs, press pages and any project you quietly hid from the menu.
2. Pair old pages with new ones Match them one to one in a spreadsheet. A project that's gone for good can point to the closest similar project or to the portfolio index.
3. Set permanent redirects on the server Use 301 or 308 redirects. Google treats both as a permanent move and says they don't cost a page its PageRank.
4. Click through the old links after launch Test a sample on a phone. Watch for chains, where one redirect hands off to another before the page finally loads.
5. Fix the links you control Update email signatures, proposal templates and social profiles. Every redirect adds a small wait, so direct links are kinder to visitors.

Why fuss over this? A design magazine that featured your hotel lobby years ago may still send curious owners your way. If that link lands on an error page after the relaunch, the visitor assumes you closed. We'd rather spend an afternoon on a redirect list than lose the one referral a feature story keeps sending.

We keep the redirect list in a shared sheet after launch, too. When your team retires a project a year from now, they add one row, and nobody has to remember how the last rebuild was wired.

Which inquiry fields to keep, delay or drop

Ask only what your team needs before a first call. Everything else can wait until both sides agree the project is a good fit.

Test the form the way a client meets it. Fill it out on your phone with one thumb, submit it, then time how long it takes to reach the right inbox. Check spam too. It happens more than you'd think: a form works perfectly while emailing a former employee for months, and nobody notices until a referral mentions it.

After launch, we'd read the first twenty inquiries with you. If most people pick 'Other' as their property type, the menu needs new options. If nobody fills in the budget range, it can go. The form should keep changing until it matches the calls your team wants.

Reading the scan's fix list when your site is mostly photos

Start with the free scan, then work its fix list on three pages first: your home page, your most-asked-about project and the inquiry form. Most other fixes copy from there.

Our scan's fix list puts each item on a timeline, from this week out to later on, and it flags the ones that need facts only your firm knows. On a portfolio site, expect the same note to turn up on dozens of project pages, like a missing caption or a vague title. When that happens, the cause usually sits in the project template, and fixing the template once clears most of them together.

Pages that sell get read first, so the top of the list tends to hold your home page and service pages. We'd match those notes to the three pages below and leave blog posts for another month, since the scan scores them separately anyway.

1. Your home page Clear its first-screen notes before anything else. Referrals and pitches land here, so every later fix builds on it.
2. The project people ask about by name Apply the four-part caption and the lightbox check to that one page, then copy the pattern to the rest of the portfolio.
3. The inquiry form Work through its notes, then send a test inquiry from your phone. A form that loses messages quietly undoes every other fix.
4. Rescan once those three are done If you bought the audit, spend its included rescan here. Watching the scores move tells your team the new habits are sticking.

Put these questions to any designer, starting with us

A careful web designer answers these without squirming. We've added our own answers, so you can hold us to them later.

Can our office manager add a new project without calling you?

She should be able to. We build a project template with fields for the caption parts and the alt text beside each photo slot, then walk her through adding one live. If a platform makes that painful, we'd say so before you commit to it. You shouldn't need us for routine updates.

How will you test the site on the phones our clients carry?

We check every template on real phones, older ones included, and with large text turned on. We also zoom the browser way in. WCAG's reflow rule expects a page to fit a screen 320 CSS pixels wide without sideways scrolling, which is roughly what heavy zoom looks like.

Can you work from our existing photo archive, or do we need a new shoot?

Usually the archive is enough to start. We'd sort it by project, pick the sharpest shot of each room and flag the gaps, like a job with only renderings or photos taken before the furniture arrived. We'd save a reshoot for the few projects you most want more of. Until then, phone photos from a site walk can hold the spot, as long as the caption names the stage.

How much of our time will this take?

Plan on a kickoff call, a batch of photos with rough captions and one approval round per page template. Captions are the heaviest lift on your side, so we hand over the four-part formula early and can draft the first batch for you to correct. The second batch tends to go quicker once the pattern clicks.

Will Google rank the new site above the old one?

Nobody can promise that. Google indexes the mobile version of your pages, so a lighter, clearer phone layout gives it better material to work with. Rankings still depend on your competition and on how well each page answers what people search.