Websites
From Figma to a live website: how a website design is made
The steps between an idea and a live website: brief, sitemap, wireframes, the design in Figma, prototype, development and testing, and what you approve at each one.
A good website is designed before a line of code is written. The design file is where you see every page, try the flow on a phone and change your mind cheaply. This is the process we follow from the first brief to a live site, and what you approve at each step.
1. The brief
We start with your goals, your customers and the action you want from a visitor: a call, a form, a WhatsApp message or a purchase. We also collect what already exists: your logo and colours, your content, sites you like and your competitors’ sites.
2. The sitemap
A list of pages and what each one is for. A company site might need a homepage, service pages, work, about, a blog and contact. Each service usually deserves its own page, because each one is a separate search and a separate ad.
3. Wireframes
Grey boxes that show what goes where on each page, on desktop and mobile. Wireframes settle the structure before anyone discusses colours: the order of sections, the headline, the proof and where the buttons sit.
4. The design in Figma
Figma is where the real design happens. We set up a small design system first: colours, type sizes, buttons, cards and form fields as reusable components. Then the pages are designed with those pieces, in Arabic and English when the site is bilingual, so both directions are checked early.
5. The prototype
The pages are linked into a clickable prototype that you can open on your phone. It is the cheapest moment to catch a confusing menu or a missing step, because changing a frame takes minutes and changing built code takes days.
6. Handoff and development
Developers take sizes, spacing, colours and exported assets straight from the Figma file, so the site matches the design. Images are exported in modern formats at the sizes they will be shown, and fonts are loaded only in the weights the design uses.
7. Testing and launch
Before handover we compare the build with the design, test it on real phones, check speed with PageSpeed, and confirm that forms, tracking and analytics work. Then the site goes live on hosting registered in your name.
Figma, Sketch or InVision?
| Tool | What it is good at |
|---|---|
| Figma | Design, components and prototypes in the browser, with the team and the client in one file |
| Sketch | A Mac app for interface design, with a long history and many plugins |
| InVision | Turning static designs into clickable prototypes and collecting comments |
InVision was popular for clickable prototypes, and most of what it did now happens inside Figma. We design in Figma because clients can open the file in a browser, comment on the exact element and see changes the moment they are made, with no software to install.
What you approve, and when
- The sitemap, before any design starts.
- Wireframes for the key pages.
- The homepage design, which sets the style for the rest.
- The full design and prototype, before development.
- The staging site, before launch.
Questions about the design process
Do I get the Figma file?
Yes. The design file is handed over with the site, along with the code and every account in your name.
How long does the design take?
For a company website, design usually takes the first one to two weeks of a project that runs two to four weeks. A landing page is designed and built in five to seven days.
Can you build from a design we already have?
Yes. Send the Figma file, and we review it for mobile layouts and missing states before we quote.
See our website development service, or read how long it takes to build a website.