case studies

Elden Ring MultiplayerFlannel web designlemongrass redesign

projects

jingwei deng web designNEIA HCDLinda Sormin website

contact

emaillinkedininstagram

contents

overviewchallengesgoalswireframesaccessibilityweb developmentFinished websitereflection

Flannel Agency Web design

A design agency website that reflects Flannel’s passion for creating beautiful, meaningful work through branding and storytelling.

Project overview

I collaborated with the head of Flannel Design to redesign and modernize their agency website, transforming static layouts into a fully realized digital experience. My role spanned the entire development process, from building wireframes and optimizing assets to implementing custom code, animations, and interactions that elevated the site’s usability and brand presence. Alongside technical development, I also integrated SEO best practices and accessibility improvements, ensuring the final product was both discoverable and inclusive.

tools

Figma
Webflow
Rive

role

Web Developer
Animator

Timeline

2 Months

Team

Layout Design: John Turner
Web Design & Development: Nicholas Tamas

view Site

challenges

  • Balancing design vision with functionality – ensuring the creative static layouts translated well into an interactive and usable site.
  • Responsive layout & Cross Browser consistency– making sure every element scaled and adapted correctly across multiple screen sizes and devices. maintaining a uniform experience despite differences in how browsers handle styling, animations, and layout.
  • Performance vs. quality trade-offs – optimizing high-resolution publishing photos for speed without sacrificing visual impact.
  • Custom code / Webflow limitations – working around Webflow’s native constraints to implement advanced features only achievable through custom JavaScript.
  • Animation performance – creating engaging animations and interactions that enhanced the user experience without slowing down the site.
  • SEO integration – implementing best practices without disrupting the design flow or content hierarchy.
  • Accessibility compliance – ensuring visual, interactive, and coded elements met accessibility standards while still feeling polished.

Goals

  • Translate static layouts into a functional, responsive website
  • Optimize site performance without sacrificing visual quality
  • Extend site functionality through custom Code Development
  • Build for discoverability and accessibility by all users

A design agency website that reflects Flannel’s passion for creating beautiful, meaningful work through branding and storytelling.

wireframes

Sitemap

I developed a comprehensive sitemap before building wireframes to map out all necessary pages and their relationships. This provided a clear blueprint for the site’s structure, ensuring smooth navigation and logical flow throughout the user experience.

Figma Wireframes

I transformed the initial static design concepts provided to me by John Turner into interactive wireframes that clearly mapped out structure, flow, and functionality. This step provided clarity on how his designs would translate to the web, as well as room for iteration and improvement before committing to fully developing the site in code.

accessibility & seo

asset optimization

I was provided with high-quality publishing photos that needed to be adapted for web use. By carefully compressing and optimizing these assets, I ensured they loaded quickly and efficiently without losing visual impact, while also boosting the site’s overall SEO score.

sEO

I applied SEO best practices, including metadata optimization, structured headings, and clean semantic markup. These adjustments improved search visibility and positioned the agency for stronger digital reach. Within a few days of launching the site, it climbed to the top of search engine results.

accessibility & optimization

I integrated accessibility standards such as alt text, ARIA labels, WCAG colors, and keyboard navigation support. This work ensured the site was inclusive and usable by a wider range of visitors, reflecting thoughtful design principles.

web development

animations

I designed and developed bespoke animations and micro-interactions to bring the brand’s personality to life through Webflow interactions, custom JavaScript, and Rive App. These subtle yet dynamic touches improved user engagement and created a memorable browsing experience.

this is one of the innteractive rive animations. Click it to watch it play

responsive design

I designed and developed the site to be fully responsive, adapting seamlessly to desktops, tablets, and mobile devices. This ensured a consistent and enjoyable viewing experience for all users, regardless of screen size or platform.

finished website

reflection

Looking back on this project, one of the biggest challenges I faced was balancing design changes with the realities of development. While I successfully navigated performance optimization, responsive design, accessibility standards, and custom code limitations, I realized that a longer project timeline would have allowed for more robust testing earlier in the process. Specifically, incorporating A/B testing during the wireframe stage could have identified design adjustments before development began, saving time and streamlining revisions later. Despite these challenges, the project pushed me to problem-solve in real time and reinforced the importance of building flexibility into both design and development workflows.

back to homepage

@2025 Nicholas Tamas. Facsimile Design.
Built With Webflow Using All Original Assets

linkedin
instagram
about
contact
steam
playstation
//button changing background color on nested divs//