web design

web design

web design

Nexus bookstore

web design

brand design

brand design

This portfolio project serves as the culmination of my career work and a definitive showcase of my web design and branding capabilities. Frustrated by generic templates that failed to capture my unique creative style, I set out to build a bold, clean digital platform completely from scratch to stand out among peers and industry competitors.


Because standard website builders lacked the precise customizability I needed, I mapped out the core architecture and user experience using low-fidelity prototypes in Figma. From there, I translated those layouts into fully responsive, production-ready versions using Framer, resulting in an extensive and immersive exploration of modern portfolio design.

Digital portfolio

Digital portfolio

This portfolio project serves as the culmination of my career work and a definitive showcase of my web design and branding capabilities. Frustrated by generic templates that failed to capture my unique creative style, I set out to build a bold, clean digital platform completely from scratch to stand out among peers and industry competitors.


Because standard website builders lacked the precise customizability I needed, I mapped out the core architecture and user experience using low-fidelity prototypes in Figma. From there, I translated those layouts into fully responsive, production-ready versions using Framer, resulting in an extensive and immersive exploration of modern portfolio design.

This portfolio project serves as the culmination of my career work and a definitive showcase of my web design and branding capabilities. Frustrated by generic templates that failed to capture my unique creative style, I set out to build a bold, clean digital platform completely from scratch to stand out among peers and industry competitors.


Because standard website builders lacked the precise customizability I needed, I mapped out the core architecture and user experience using low-fidelity prototypes in Figma. From there, I translated those layouts into fully responsive, production-ready versions using Framer, resulting in an extensive and immersive exploration of modern portfolio design.

Copyright © 2025 Collin Stange

All rights reserved.

Location

Pittsburgh, PA

contact

stange.collin@gmail.com

Monday - Friday

Socials

@collinstange

@visionairclothingco.

@visionaircollective

@novuslumina

Research

To establish a strong foundation, I analyzed existing portfolio templates, top-tier graphic design portfolios, and cutting-edge design agency websites to identify common design patterns and areas for innovation. A significant portion of this phase was dedicated to mastering Framer's no-code environment, allowing me to fully leverage its advanced layout capabilities and custom interactions to build a truly unique user experience. This deep dive into platform mechanics and competitive benchmarking ensured the final architecture successfully bridged creative vision with modern web standards.

Deliverables

The primary deliverables include a fully functioning, responsive live digital portfolio site and comprehensive low-fidelity Figma prototypes mapping out the core user pathways and structure. The project also encompasses custom personal branding, integrated logo animation, and meticulously curated case study displays designed to showcase my creative work with professional polish. Additionally, it features optimized breakpoints ensuring a seamless viewing experience across desktop, tablet, and mobile devices.

Impact

Building this portfolio deepened my expertise in web design and advanced Framer development, sharpening my technical troubleshooting skills across complex responsive layouts. The final product successfully established a robust, professional platform to showcase my career's work, bridging unique creative vision with polished user interfaces for every device.

Research

To establish a strong foundation, I analyzed existing portfolio templates, top-tier graphic design portfolios, and cutting-edge design agency websites to identify common design patterns and areas for innovation. A significant portion of this phase was dedicated to mastering Framer's no-code environment, allowing me to fully leverage its advanced layout capabilities and custom interactions to build a truly unique user experience. This deep dive into platform mechanics and competitive benchmarking ensured the final architecture successfully bridged creative vision with modern web standards.

Deliverables

The primary deliverables include a fully functioning, responsive live digital portfolio site and comprehensive low-fidelity Figma prototypes mapping out the core user pathways and structure. The project also encompasses custom personal branding, integrated logo animation, and meticulously curated case study displays designed to showcase my creative work with professional polish. Additionally, it features optimized breakpoints ensuring a seamless viewing experience across desktop, tablet, and mobile devices.

Impact

Building this portfolio deepened my expertise in web design and advanced Framer development, sharpening my technical troubleshooting skills across complex responsive layouts. The final product successfully established a robust, professional platform to showcase my career's work, bridging unique creative vision with polished user interfaces for every device.

research

This project began with qualitative research to understand how creatives, artists, and designers discover and purchase books. I conducted targeted user interviews and participant profiling to uncover core pain points with existing online and in-person bookstores. From this data, I synthesized a primary user persona and mapped out comprehensive user journeys. This research phase established the strategic foundation for the platform's sitemap and information architecture, ensuring the site catered directly to a creative audience seeking both technical mastery and philosophical growth.

deliverables

The project produced a fully realized e-commerce digital platform prototype designed entirely in Figma. Deliverables included a structured sitemap, low-fidelity wireframes used to test and eliminate navigation dead zones, low-fidelity branding and custom iconography, and a polished high-fidelity prototype. To ensure cross-platform accessibility for busy creatives on the go, the design package also included complete mobile adaptations, establishing smooth user pathways from initial browsing through checkout.

impact

By grounding the design in direct user feedback and iterative wireframing, the resulting platform transforms a traditionally clunky e-commerce experience into a sacred, intuitive space for creative discovery. The final Figma prototype successfully eliminates user friction, optimizes content discovery, and bridges the gap between art theory and practical guidance, delivering an engaging digital home where every page turns toward a creator's evolution.

Before building out the live site, I started by mapping out the core user journey through low-fidelity wireframes and structural prototypes in Figma. This phase was crucial for testing initial user pathways, optimizing information architecture, and evaluating overall user flow to ensure seamless navigation. By iterating through these early UI/UX layouts, I could validate core functionality and user touchpoints before committing to any high-fidelity visual design or development.

Before building out the live site, I started by mapping out the core user journey through low-fidelity wireframes and structural prototypes in Figma. This phase was crucial for testing initial user pathways, optimizing information architecture, and evaluating overall user flow to ensure seamless navigation. By iterating through these early UI/UX layouts, I could validate core functionality and user touchpoints before committing to any high-fidelity visual design or development.

Bringing this vision to life required navigating several technical milestones, including mastering the Framer interface and learning how to engineer fully responsive web layouts from scratch. Countless rounds of rigorous user testing and iterative refinement went into polishing the final design, ensuring smooth transitions across all viewports. The result is a high-fidelity digital experience that balances striking visual aesthetics with a seamless, intuitive user journey.

Bringing this vision to life required navigating several technical milestones, including mastering the Framer interface and learning how to engineer fully responsive web layouts from scratch. Countless rounds of rigorous user testing and iterative refinement went into polishing the final design, ensuring smooth transitions across all viewports. The result is a high-fidelity digital experience that balances striking visual aesthetics with a seamless, intuitive user journey.

Copyright © 2025 Collin Stange Design

All rights reserved.

Location

Pittsburgh, PA

contact

CSDesign@gmail.com

Monday - Friday

Socials

@collinstange

@visionairclothingco.

@visionaircollective

@novuslumina

Copyright © 2025 Collin Stange Design

All rights reserved.

Location

Pittsburgh, PA

contact

CSDesign@gmail.com

Monday - Friday

Socials

@collinstange

@visionairclothingco.

@visionaircollective

@novuslumina

Copyright © 2025 Collin Stange

All rights reserved.

Location

Pittsburgh, PA

contact

CSDesign@gmail.com

Monday - Friday

Socials

@collinstange

@visionairclothingco.

@visionaircollective

@novuslumina

Copyright © 2025 Collin Stange

All rights reserved.

Location

Pittsburgh, PA

contact

CSDesign@gmail.com

Monday - Friday

Socials

@collinstange

@visionairclothingco.

@visionaircollective

@novuslumina