Website Goldmine

Clear project brief with goals, audience, and success metrics

A well-defined brief ensures the design supports business and user goals from the start.

Sitemap and page hierarchy confirmed

Outline all required pages and how they connect to create a smooth user journey.

Wireframes for each unique page type

Plan layouts and structures before applying visuals to avoid major layout changes later.

Responsive breakpoints defined (Desktop / Tablet / Mobile)

Specify layout changes across screen sizes for consistent mobile responsiveness.

All page designs completed in high fidelity

Ensure final mockups reflect how the live site should look — including fonts, colours, and imagery.

Desktop, tablet, and mobile versions for each page

Show how each design adapts to different devices, not just scaled down versions.

Consistent spacing, padding, margins, and layout grid

Maintain visual harmony across all pages with a consistent layout system.

Global typography styles (H1–H6, body, buttons)

Use standardised font styles for headings, body text, and UI elements across all designs.

Brand colour palette defined and applied

Ensure all colours follow brand guidelines and are accessible (sufficient contrast).

Button states (default, hover, active, disabled)

Provide visual cues for different button interactions to guide development.

Input field styles (focus, error, success)

Design all field states for forms to help users understand input feedback.

Icons and illustrations in SVG or high-res formats

Export all visuals in developer-friendly formats to ensure quality and performance.

Imagery (hero images, banners, backgrounds) optimised for web

Use compressed, high-quality images that won't slow the website down.

Navigation structure and dropdown behaviour defined

Clarify how the menu works — especially on desktop vs mobile — and include active states.

Footer layout and links included

Design and organise footer content (contact info, links, social media, etc.).

Forms designed with success/error states

Provide complete designs for all form interactions and validation messages.

Clear calls-to-action (CTAs) throughout

Buttons and links should guide users toward key actions (contact, purchase, sign up).

Accessibility basics considered (contrast, focus states, alt text)

Design with inclusivity in mind — this improves UX for everyone and supports WCAG standards.

Mobile navigation menu and behaviour defined (hamburger, overlay etc.)

Ensure mobile menu interaction is designed, not assumed.

Scroll behaviours noted (sticky nav, back to top, smooth scroll)

Highlight interactive scroll features that enhance usability and experience.

All placeholder text replaced with final or near-final copy

Use final copy to ensure design decisions (like spacing) won’t be disrupted during development.

 Blog/archive templates include post metadata layout

Show how blog pages handle dates, categories, authors, and featured images.

Image and video aspect ratios consistent

Maintain proportional layout with defined aspect ratios to avoid stretching or cropping issues.

Links and buttons direct to correct URLs (or placeholders noted)

Make sure every CTA or menu item has its intended destination mapped out.

SEO considerations made (meta title/desc placeholders, heading hierarchy)

Use logical heading structure (H1 > H2 > H3) and consider space for SEO metadata.

Privacy, terms, cookie, and policy pages designed if required

Often overlooked, these are legally important and must match the site's style.

UI kit or component library included (e.g. buttons, cards, modals, etc.)

A library of reusable elements makes it easier to build pages consistently in development.

States and variations shown (hover, focus, disabled)

Show all interaction states to reduce guesswork during implementation.

Reusable components (testimonials, pricing tables, FAQ, etc.)

Identify and document modules used in multiple areas of the site.

 Symbols/components properly labelled and grouped

Organise your design files clearly to speed up dev handoff and avoid confusion.

Typography and colour styles applied via design tokens

Ensure text and colour use is consistent and styles are applied using named tokens or global styles.

All files organised and named clearly

Use a clean folder structure and name conventions that make sense to developers.

Design files shared via Figma, Adobe XD, or preferred tool

Provide access and permissions for all design assets in the agreed platform.

Fonts packaged or Google Fonts linked

Share any custom fonts or provide links to Google Fonts for web use.

Image assets optimised and exported in required formats

Export images in multiple resolutions (e.g. @1x, @2x) and compress where needed.

Notes or documentation for developers included

Provide a doc or annotations with design rationale, interactivity guidance, and any known limitations.

Handoff checklist signed off with developer or project manager

Get final approval from the project lead to confirm everything is ready for build.

Design includes support for dark mode

Provide both light and dark UI versions if the website will support theme switching.

Motion/animation references or Lottie files provided

Supply detailed references or exported animations for a polished, interactive experience.

⭐️ If you want the avatar visual itself to be clickable to change, add an indicator on it to show it's editable from that source e.g. a pencil icon

Custom cursor or scroll-triggered effects defined

Highlight unique user interactions that require additional dev logic.

 CMS field structure planned (for WordPress, Webflow, etc.)

Map which sections will be editable in the CMS and how fields should be structured.

Loading states and skeleton screens designed

Show what users will see while content is loading or before interactions happen.

Tone of voice guidelines provided

Helps ensure any additional copy (by developers or clients) matches brand personality.

404 page designed and includes a helpful CTA

Prevents users from hitting a dead-end and adds a branded touch to errors.

Thank-you/success pages for forms or purchases

Guides users after a form submission or checkout and can include CTAs.

Microcopy included (e.g. button text, form hints, empty states)

Clarifies user actions and reduces confusion across the site.

Email sign-up forms designed and styled

Often forgotten — design how your newsletter or lead capture forms should look.

Social sharing preview mockups (OG images)

Show how a shared link will appear on platforms like Facebook, LinkedIn, or Twitter.

Marketing integration points considered (popups, lead magnets, banners)

Make room for elements like exit intent popups, sticky bars, or newsletter prompts.

SEO-friendly URL slugs planned

Suggest clean, human-readable URLs for each key page (e.g. /services/web-design).

 Tap targets large enough (at least 48x48px)

Ensures buttons and links are usable on touch devices.

Device-specific features accounted for (e.g. click-to-call, sticky contact buttons)

Add mobile-only features like floating phone/email buttons or sticky CTAs.

Touch gestures considered (swiping, dragging, carousels)

Clarify how sliders or accordions should behave on touchscreens.

Dev handoff walkthrough scheduled or recorded

Run through the file together or send a Loom to clarify interactions and structure.

Design annotations used within Figma/XD (naming, notes, hover behaviour)

Leave guidance on transitions, spacing, or animations directly in the design file.

Design tokens documented (colour, spacing, typography variables)

Speeds up development by ensuring consistency and reusability in code.

Breakpoints labelled directly in designs

Include px ranges (e.g. "Tablet: 768–1024px") to remove ambiguity.

Web font load strategy considered (subset, fallback fonts defined)

Speeds up site load and avoids Flash of Unstyled Text (FOUT).

Image format recommendations included (e.g. WebP over PNG where possible)

Help developers optimise performance with modern formats.

Hero image and banner compression recommendations

Prevents slow page loads by planning appropriate file sizes from the start.

Lazy loading guidance for images and videos

Improves load time by only loading visual content when needed.

Browser compatibility requirements listed

Note if site needs to support legacy browsers (e.g. IE11) or just modern ones.

Interactive prototypes provided for complex flows

Useful for forms, onboarding sequences, or anything with step-by-step behaviour.

Accessibility audit suggestions or tools linked (e.g. WCAG, Axe)

Encourage best practice with a few basic tools developers can test against.