案例研究 · 2024

Dunfermline District Scouts

A clearer district gateway for Fife Scouting, plus the camp that proved large-scale operations software.

District-level Scout website covering sections, volunteering, camping and youth-shaped programmes — and the original home of ScoutCamp for an 800+ person district event.

项目叙述以英文撰写。

访问线上网站预约类似项目

Web Design · Web Development

Dunfermline District Scouts logo — web design case study by Euan Livingstone

概览

Dunfermline District Scouts supports young people across Fife through Squirrels, Beavers, Cubs, Scouts, Explorers and Network. The district site connects families to sections, volunteering routes, camping (including Nine Acres and Fordell Firs), news and the wider Scouts Scotland ecosystem. It was also the catalyst for ScoutCamp: I originally developed the Scout Camp Management Platform for a Dunfermline District camp, where it was used to run an event of over 800 people — registrations, attendance and on-the-ground operations at district scale.

挑战

District sites must serve parents, young people and adult volunteers at once — with clear routes into joining, leadership and camping — while respecting Scouts Scotland branding guidelines. Separately, running a large district camp exposed how spreadsheets and ad-hoc tools fall short when hundreds of young people and leaders need coordinated registrations, check-in and communications.

方案

Wireframes and UI for the public district site were designed in Figma; district assets were refined in Illustrator and Photoshop. The build organises content around Youth Shaped sections, Camping, Volunteering and District Team/Trustees, using Scout blue as the primary signal colour. In parallel, the first ScoutCamp management platform was built specifically for that district camp — proving the workflow that later became scoutcamp.co.uk.

成果

A clearer district gateway for families and volunteers, plus a battle-tested camp operations system that successfully supported an 800+ person Dunfermline District event and seeded the ScoutCamp product.

设计工具

在 Figma 中设计,品牌与视觉素材在 Adobe Illustrator 与 Adobe Photoshop 中制作。

  • Figma
  • Adobe Illustrator
  • Adobe Photoshop

技术栈

用于交付线上体验的语言与技术。

  • HTML
  • CSS
  • JavaScript
  • PHP
  • jQuery
  • Bootstrap

色彩方案

下方为品牌色板。本页 UI 强调色会在必要时微调,以确保在网站背景上可读。

  • Scout Blue

    #0161CE

  • Bright Blue

    #006EE0

  • White

    #FFFFFF

  • Ink

    #1B1B1B

下一步

需要类似方向的项目吗?

无论你是 Dunfermline 或 Fife 的机构,还是英国远程客户,我都能从最初草图推进到上线网站。可查看 更多作品发一条消息,或 预约交流