Website Design - overview

When thinking about websites, it can be helpful to visualise your homepage design in Canva. This lets you see how your expanded brand elements—colours, fonts, imagery, and graphic treatments—play out before building live. This approach is especially useful for marketers who manage multiple areas of a business and may not have a dedicated design agency or developer.

Website Platforms

Websites have come a long way in the past 15 years. Many platforms now allow design without coding skills:

  • Squarespace – Drag-and-drop, complete solution, easy for non-developers. Pros: flexibility for simple sites, easy updates. Cons: limited features for ecommerce, speed issues, restricted hosting.
  • WIX – Similar to Squarespace, good for simple sites, drag-and-drop interface.
  • WordPress + Elementor Pro – Offers full flexibility, robust plugin ecosystem. Requires hosting setup (we recommend SiteGround for speed and security). Ideal for marketers who want design control with some technical setup. ChatGPT can help with small coding tasks.
  • Shopify – Ecommerce-focused platform. Easy for product management, but home page design flexibility is limited unless a developer is involved.

Homepage Updates & Responsiveness

  • Ecommerce websites often need frequent banner updates for promotions or products. These banners are design opportunities to showcase your brand.
  • Responsive design is critical: platforms handle mobile and desktop differently. Example: Shopify allows separate banner uploads for desktop and mobile, while Squarespace requires careful margin and alignment management.
  • Always check image quality and loading times by viewing your site in a browser without cached images.

Resolution & WebP Images

  • Website images must balance quality and load speed. High-resolution images from photographers often need resizing.
  • WebP format (Google-developed) reduces file size while maintaining visual quality:
    • 25–35% smaller than PNG or JPG
    • Supports lossy & lossless compression, transparency, and simple animations
    • Improves page load speed and SEO
  • Squarespace does not currently support WebP uploads. Shopify optimizes images automatically to WebP. WordPress may require manual conversion or an image optimization plugin.

Canva for Website Mockups

We use Canva to visualise homepage concepts before building:

  • Helps clients see colours, fonts, imagery, and graphic devices in context
  • Allows approval before committing to live build
  • Ensures header, footer, and navigation are consistent across pages
  • Makes banner, content blocks, and campaigns easier to plan

Header & Footer

  • Header: logo, navigation, social icons, shopping cart, contact button, and optional announcement bar
  • Footer: fonts, colours, icons, logos, and optional background images for polish
  • Check mobile display to ensure legibility and brand consistency

Website Banners

  • Plan banners in Canva to match campaigns and promotions
  • Design multiple formats at once to save time and ensure consistency
  • Include banners in campaign briefs and your project management system (e.g., Asana)

Content & Brand Consistency

  • Align content blocks, imagery, and graphic devices with your brand guidelines
  • Consider straight vs. curved lines, spacing, and overall style
  • Homepage is the first impression – update header, footer, and banners to refresh your brand visually without a full rebuild

When Using Developers

  • If the website is custom-coded or maintained by an agency, use Canva to create visual briefs and provide brand assets in an organized online folder
  • This ensures designers or developers have everything needed to execute your vision efficiently

Key Takeaways

  • Canva is a powerful tool for planning and visualizing websites
  • Homepage is your brand’s home base – header, footer, banners, and content blocks set the tone
  • Images, responsiveness, and WebP considerations are crucial for user experience and load speed
  • Planning banners, campaigns, and content blocks in advance saves time and ensures brand consistency

Examples & Templates

  • [Screenshots of example websites]
  • [Template of website sections for planning]