Scrappy's - Creative Agency Website Template
Scrappy's - Creative Agency Website Template
Scrappy's - Creative Agency Website Template
This project was undertaken during my internship at Vizually Design, where I worked on a Framer website template for a creative digital agency. The work focused on developing the website's visual direction, layouts, interactions, and responsive experience.
I worked across the website from early visual explorations to the final Framer build, exploring typography, layout systems, navigation, project presentation, interactions, and reusable components.
This project was undertaken during my internship at Vizually Design, where I worked on a Framer website template for a creative digital agency. The work focused on developing the website's visual direction, layouts, interactions, and responsive experience.
I worked across the website from early visual explorations to the final Framer build, exploring typography, layout systems, navigation, project presentation, interactions, and reusable components.
This project was undertaken during my internship at Vizually Design, where I worked on a Framer website template for a creative digital agency. The work focused on developing the website's visual direction, layouts, interactions, and responsive experience.
I worked across the website from early visual explorations to the final Framer build, exploring typography, layout systems, navigation, project presentation, interactions, and reusable components.
ROLE
ROLE
ROLE
Product and Visual Design Intern
Product and Visual Design Intern
TIMELINE
TIMELINE
TIMELINE
June-July 2026
June-July 2026
SCOPE
SCOPE
SCOPE
Web Design · Interaction · Framer · UI
Web Design · Interaction · Framer · UI
TEAM
TEAM
TEAM
Me and Founder
Me and Founder
CONTEXT
CONTEXT
Designing a website for a creative agency
Designing a website for a creative agency
Scrappy’s was developed as a website template for a creative digital agency, with the goal of presenting its work, capabilities, and identity through a strong visual experience. The template needed to feel expressive enough for creative work while remaining flexible across different types of content and pages.
Scrappy’s was developed as a website template for a creative digital agency, with the goal of presenting its work, capabilities, and identity through a strong visual experience. The template needed to feel expressive enough for creative work while remaining flexible across different types of content and pages.
Scrappy’s was developed as a website template for a creative digital agency, with the goal of presenting its work, capabilities, and identity through a strong visual experience. The template needed to feel expressive enough for creative work while remaining flexible across different types of content and pages.
COMPETITOR RESEARCH
COMPETITOR RESEARCH
Understanding how creative agencies structure their websites
Understanding how creative agencies structure their websites
Before exploring the visual direction, I looked at how other creative and digital agencies structure their websites. I focused on their information architecture, service presentation, case studies, work, content, and the way they communicate their capabilities.
I compared these patterns across different agencies to identify what could be useful for Scrappy’s, while also looking at how content, visual hierarchy, and interaction were used to shape the overall experience.
Before exploring the visual direction, I looked at how other creative and digital agencies structure their websites. I focused on their information architecture, service presentation, case studies, work, content, and the way they communicate their capabilities.
I compared these patterns across different agencies to identify what could be useful for Scrappy’s, while also looking at how content, visual hierarchy, and interaction were used to shape the overall experience.
Before exploring the visual direction, I looked at how other creative and digital agencies structure their websites. I focused on their information architecture, service presentation, case studies, work, content, and the way they communicate their capabilities.
I compared these patterns across different agencies to identify what could be useful for Scrappy’s, while also looking at how content, visual hierarchy, and interaction were used to shape the overall experience.
MOODBOARD
MOODBOARD
Exploring visual territories
Exploring visual territories
Based on the competitor research and the content structure, I explored different visual territories for the website. The moodboards helped me compare possible directions across typography, colour, imagery, composition, and overall tone before moving into interface explorations.
The builder experience was centred around creating a proof-backed profile, where profile quality and project evidence formed the core of the journey. However, once the profile was created, the experience became largely passive - builders had little motivation to complete their profiles, limited visibility into what came next, and were essentially waiting to be discovered.
The founder experience focused on creating hiring searches and using the hiring pipeline to discover potential builders. While the necessary functionality existed, the journey lacked a clear and intuitive structure for moving from a hiring need to discovering, evaluating, and progressing with suitable candidates, making the overall workflow feel fragmented.
Based on the competitor research and the content structure, I explored different visual territories for the website. The moodboards helped me compare possible directions across typography, colour, imagery, composition, and overall tone before moving into interface explorations.
Editorial
Minimal
Expresssive
VISUAL DIRECTIONS
VISUAL DIRECTIONS
Exploring the visual language
Exploring the visual language
The different visual territories were translated into website layouts to test typography, colour, imagery, composition, and hierarchy across real content.
The different visual territories were translated into website layouts to test typography, colour, imagery, composition, and hierarchy across real content.
Landing Page
DRAFT COPY
DRAFT COPY
Content and Information Architecture
Content and Information Architecture
Before moving into the final website design, draft copy was developed for each page to establish the messaging, content hierarchy, and purpose of individual sections. This helped define how the agency's services, work, process, team, and insights would be presented across the website and provided a content foundation for the final layouts.
Before moving into the final website design, draft copy was developed for each page to establish the messaging, content hierarchy, and purpose of individual sections. This helped define how the agency's services, work, process, team, and insights would be presented across the website and provided a content foundation for the final layouts.
Work and Case Study Page
Blogs and Grid Page
About and Contact Page
Responsive Design
WEBSITE ITERATIONS
WEBSITE ITERATIONS
Refining layouts across pages and sections
Refining layouts across pages and sections
With the content structure established, iterations focused on refining the layouts across individual sections and pages. This involved exploring composition, content hierarchy, spacing, and visual treatments to create a consistent experience across the website.
With the content structure established, iterations focused on refining the layouts across individual sections and pages. This involved exploring composition, content hierarchy, spacing, and visual treatments to create a consistent experience across the website.
Final Websites
Final Websites
The final design brings the established visual direction and content structure together across seven pages, creating a consistent experience for presenting the agency, its work, services, and ideas.
The final design brings the established visual direction and content structure together across seven pages, creating a consistent experience for presenting the agency, its work, services, and ideas.
Landing Page
Work and Case Study Page
Blogs and Grid Page
About and Contact Page
Prototype
Prototype
Responsive Design
Editorial
Minimal
Expresssive
⭐️
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
⭐️
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Editorial
Minimal
Expresssive
⭐️
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
⭐️
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
⭐️
Connect to Content
Add layers or components to make infinite auto-playing slideshows.