Sevginur Ak Parlak
Mar 18, 2026
13 min read
Custom Website Design for Startups: Marketing Site and Web Platform
Take a typical startup website 2 years after launch: 34 pages, 9 of them designed by 3 different people, and 25 built by whoever was free that week. The marketing pages, the listing pages and the booking flow use 3 button styles and 2 header heights. Nobody decided anything, they only added things.
This is the normal state of a startup website after the launch page. The product grows, the site follows, and 1 day the founders notice the site does not look like 1 company. When we take on custom website design for startups, the job is not 1 page. It is the whole site and the web platform behind it, as 1 system a marketing person and a developer can both extend.
This post covers what that work includes, how a marketing site and a web platform differ and where they share, how we design page templates and CMS ready components, the SEO and performance rules we design inside, how handoff to Webflow or a developer works, and how we run design QA on staging.
What custom website design for startups includes
The scope is fixed on day 1 and it has 7 parts.
1. Page inventory and templates
We list every page, group them, and reduce the groups to templates. A 34 page site is usually 6 to 9 templates: home, feature, pricing, listing, detail, article, legal, and 1 or 2 flows such as signup or booking.
2. CMS ready components
Each template is built from sections that map to CMS fields: hero, feature row, comparison, testimonial, FAQ, call to action. Every section has rules for what is required and what happens when the copy is 3 times longer than the example.
3. Tokens and a small design system
Type scale, colour, spacing and breakpoints as named variables, shared by the marketing site and the web platform, so the booking flow and the home page are visibly 1 product.
4. Responsive breakpoints
Every template at 4 widths, usually 1440, 1024, 768 and 390 pixels, with written rules for what stacks, what hides and how images crop.
5. States, for the platform part
Search with 0 results, a listing with 1 photo and 1 with 40, a calendar with no availability, a validation error on field 4 of 6, a logged in and a logged out header.
6. SEO and performance constraints
Heading structure, image sizes, font loading and layout shift rules, designed in.
7. Handoff and design QA
A walkthrough with whoever builds it, Webflow or a developer, and 2 passes of design QA on staging across 3 browsers and 4 widths.
We wrote about the handoff package itself in Design Handoff to Developers. The same package applies to a website, with the CMS mapping added.
How we design page templates and CMS ready components
A template is only useful if a marketing person can make a new page from it without asking a designer. So we design every section 3 times: shortest realistic content, example content, and the longest content someone will paste in during a launch at 11pm.
Each section gets a short rule set next to it in Figma: required fields, character limits, image ratio and minimum size, what happens with 2 items and with 9 items in a grid, and whether the section can repeat. Those rules become the CMS field settings, so the limits are enforced by the tool, not by a style guide nobody reads.
We keep the number of sections small. A site with 30 section types is a site where every page looks different. A site with 12 sections, each with 2 or 3 variants, looks like 1 company after 100 pages. In the typical case above, 40 section patterns reduce to about 14, and the 25 unowned pages can be rebuilt from those 14 in about 1 week of CMS work.
SEO and performance rules we design inside
A website is a product that has to be found. Some of that is content and links, which we do not do. Some of it is design, and it is faster to decide in Figma than to fix in the build.
We hold to 6 rules. 1 H1 per page and a heading order that reads as an outline without the styling. Hero images at a fixed ratio so there is no layout shift when they load. 2 font families at most, with a system fallback of similar metrics, so text does not jump when the web font arrives. Interactive elements at 44 by 44 pixels or more. Contrast of 4.5 to 1 for body text on every background in the section library. No essential content inside carousels, tabs or accordions that the crawler and the impatient visitor both skip.
And every template has a place for internal links: related articles, listings, features. Sites that rank have those blocks.
How the work runs week by week
A 6 to 9 template site with a small platform takes us 4 to 6 weeks. This is the default rhythm.
Week 1, inventory and foundations
We audit every page, group them into templates, and agree the section list with marketing and the token names with whoever builds. Then we design 2 templates fully, the hardest marketing page and the hardest platform screen. You see them on day 5.
Week 2, the section library and the platform components
We build the 12 to 15 sections and the platform components from the 2 approved templates outward. Marketing reviews them with real copy pasted in.
Week 3 and 4, the remaining templates, states and breakpoints
Every template and platform screen, every state for the flows, and everything at 4 widths with the rules written. Copy is finished by your side and checked by us against the section limits.
Week 5, handoff
Walkthrough with the Webflow builder or the developers, the CMS field mapping delivered as a table, and a shared channel for questions.
Week 6, design QA on staging
Pass 1 across 3 browsers and 4 widths, findings in your tracker with a severity, then pass 2 before the domain switches.
Reviews run on a fixed rhythm: a Loom walkthrough every Friday and comments in Figma by Tuesday, async across timezones.
Handoff to Webflow or a developer, and design QA on staging
The handoff depends on who builds, and we ask on day 1.
For Webflow, we deliver the section library as a class naming plan, the tokens as a variables table, and the CMS collections with every field, type and limit. A good Webflow builder rebuilds a 12 section library in 1 to 2 weeks from that package. We check the 1st 3 built sections before the rest are built, so an error in the base class does not multiply.
For a developer, the package is closer to a product handoff: tokens named to match the code, components with variants, states for the platform flows, and written behaviour rules for search, filters, forms and booking. With a headless CMS, the section rules become the content model, and we review it with the developer before it is fixed, because changing a content model after 100 pages are in it is painful.
Design QA on staging is a defined pass, not an opinion. On a website it covers 3 browsers, 4 widths and every template, and pass 1 takes 1 to 2 days.
The list, in order: spacing and type against the tokens, headline and image behaviour at every width, the longest content case for every section, forms with a validation error and the keyboard open on a phone, every platform state including 0 results and no availability, both headers, focus order through the main flow, contrast on every section background, layout shift on the 5 most visited pages, and copy character by character. Findings go into your tracker with a screenshot, the expected behaviour and a severity.
A 1 hour check you can do yourself
Before you talk to any website UI design services, spend 1 hour on this. It tells you whether you need a full redesign or a section library and a cleanup.
Count your pages and group them into templates. If you get more than 10 templates for under 50 pages, the site has no system.
Open your 5 most visited pages side by side on 1 screen. Count the button styles and header heights.
Paste 3 times more copy into your hero section in the CMS and preview it. If it breaks, every section probably breaks.
Open the site on a 390 wide phone and try to complete the main action: book, sign up, buy. Count the taps and the surprises.
Search for something that does not exist in your platform. Look at the empty result.
Run the 5 pages through a page speed tool and note the layout shift and the largest image.
Ask the person who publishes pages what they cannot do without a designer. That is the real scope.
Mistakes I see in startup website design
Starting with the home page
It is the easiest page and the least representative. We start with the hardest marketing page and the hardest platform screen, because they set the constraints for everything else.
Sections designed with example copy only
Real copy is 3 times longer or 3 times shorter and has a 60 character headline. All of it changes the layout.
1 design system for marketing and 1 for the platform
2 sets of tokens, 2 button styles, and 6 months later 2 companies on 1 domain.
Images without a ratio
Marketing uploads a 3 by 2 photo into a 16 by 9 slot and the page shifts when it loads. The ratio is a design decision and a CMS setting.
No staging QA before the domain switch
The site goes live on Friday and the founder sees the broken pricing page on a phone on Saturday.
Where AI tools help and where they do not
AI tools help in 3 places on a website project: drafting the long and short content variants we test every section against, drafting alt text and meta descriptions from the design copy, and producing the base HTML and CSS for a section from a finished frame.
Where they do not help is the system. Which 14 sections, with which limits, and how the listing page and the home page stay 1 company. A model produces a plausible page in seconds, and 34 plausible pages that do not agree with each other. The section library is the decision, and it is still a person holding the whole site in their head.
FAQ
What does custom website design for startups include?
A page inventory reduced to templates, a library of CMS ready sections with content rules, shared tokens for the marketing site and the web platform, every template at 4 widths, states for the platform flows, SEO and performance rules designed in, and handoff plus design QA on staging.
How long does a startup website design take?
For a site of 6 to 9 templates with a small platform such as search and booking, 4 to 6 weeks of design, with the 2 hardest templates in 5 business days. The build in Webflow or code runs 2 to 4 weeks after that, and we stay through it for QA.
Should we use a template or a custom website design?
A template is fine for a launch page with 3 to 5 pages. Once the site has a platform behind it, a CMS with several editors, or more than 15 pages, a template starts to fight the content. At that point a small custom section library is less work than bending the template.
Do you design for Webflow?
Yes. We deliver the section library as a class naming plan, the tokens as variables, and the CMS collections with fields and limits, and we review the 1st 3 built sections before the rest. We also hand off to developers building with a headless CMS.
What is the difference between web design and web UI design?
Web design usually means the marketing pages: layout, imagery and copy for pages that are read. Web UI design covers the interactive parts: search, filters, forms, booking, account, with states for real data. A startup website with a platform needs both, on 1 set of tokens.
Working with us
We design startup websites as 1 system: marketing site and web platform on shared tokens, templates built from CMS ready sections, every template at 4 widths, states for the flows, and handoff to Webflow or your developers with 2 passes of design QA on staging. A 6 to 9 template site takes 4 to 6 weeks, with the 2 hardest templates in 5 business days.
If your site has stopped looking like 1 company, book a free 15 minute intro call and send us the URL before it. We will tell you how many templates it really has.
