Design phase

У клієнта є тільки логотип, який теж потрібно буде покращити. А саме замінити кольора в ньому, на ті які ми оберемо. Ну і в цілому покращення зробити.

Ось логотипи:

Деталі що до сторінок та структури сайту для того, щоб зробити Wireframes (UX), а потім після затвердження зробити UI частину.

Результат це дизайн для всіх цих сторінок в Фігмі.

Ось деталі:

1. Visual & UX Requirements 1.1 General Design Language • Professional, modern, clean aesthetic (inspired by bulletproof.co.uk https://ontraport.com ) • Mobile-first design with long-scroll homepage • Consistent typography, brand colours, iconography • Custom icon and graphic design where needed (especially in services sections)

2 Navigation & Menu • Sticky header navigation on desktop • Mobile menu collapses into hamburger format • Homepage should act as a long-scroll site, with menu links scrolling to relevant sections

Pages that are separate from homepage: – Resources – Events – Blog posts – Contact form

1. Homepage Structure

Section 1 – Hero Header • Video background or explainer video (provided or embedded via YouTube/Vimeo) • Primary statement (problem/solution) • Subheading with supporting value • CTA button: “Book a Discovery Call” (Calendly integration)

Section 2 – Quote Request Section • Short paragraph/value prop text • Lead form connected to ActiveCampaign • CTA: “Request a Quote”

Section 3 – Penetration Testing Services • Brief service description • Supporting icons/illustrations or infographics • CTA: “Learn More”

Section 4 – Information Security Certifications • Grid/box layout featuring certifications: • ISO 27001 • Cyber Essentials Plus • IASME • PCI-DSS • Visual hierarchy with hover effects or click-throughs for more detail

Section 5 – Customer Testimonials

• 3–4 testimonial quotes with client names/logos (where available)
• Carousel or grid layout

*Section 6 – How Can Safe Harbour Help You Become Cyber Resilient?*
• Diagram or icon-based bullet points (e.g. strategy, compliance, employee
training, resilience testing)
• CTA: “Explore Services”
Section 7 – ISO 27001 FAQs
• Expandable FAQ section (accordion style)
• Designed to be keyword-rich for SEO performance

1. **Additional Pages (Outside of Homepage)**
• About – Company background, team, mission, values
• Services – Individual service pages (Pen Testing, ISO Certs, Cyber
Essentials, etc.)
• Resources – Downloadable guides, whitepapers (gated by ActiveCampaign
forms)
• Events – Webinars, training sessions, speaking engagements
• Blog – Regular updates, educational content, news
• Contact – Map, contact form (ActiveCampaign), Calendly scheduler

Референс по дизайну який теж можна брати, але не копіювати – https://www.metacompliance.com/

На всяк випадок прикріпляю документ-оригінал, там є інформація по дизайну.

Website Requirement March 2025.pdf

Брендинг: Потрібно підібрати кольори під цей проект. Клієнт хоче використовувати кольори: – Чорний – Білий – Синій (як ось тут або схожий колір – https://ontraport.com/)

Ось цей сайт я б брав як референс https://www.pentestpartners.com/ по якому можна буде працювати.

Сайт конкурентів – https://www.pentestpartners.com/ Можна взяти тільки для структури, смислів, але ніяк не по дизайну, бо виглядає він жахливо.