Project Overview
Fernscape Interiors is a responsive website concept for an interior plant design company specializing in bringing greenery into homes, workplaces, and community spaces. The project involved planning the site from initial wireframes through final visual design and then translating that design into a functioning website using Bootstrap, HTML, and CSS.
The goal was to create an inviting, nature-focused digital experience that clearly communicated Fernscape’s personality and services while remaining easy to navigate across screen sizes.
The Challenge
Fernscape needed to communicate several different types of information without overwhelming the user. Visitors needed to quickly understand what the company does, learn about its services and story, and have an obvious path toward making contact or scheduling a consultation.
The challenge was to organize that information into a website that felt warm and visually connected to the plant-focused brand while still maintaining clear hierarchy, navigation, and calls to action.
Planning & Wireframing
I began by developing wireframes for the Home, About, Services, and Contact pages. Working at low fidelity allowed me to focus first on structure rather than decoration.
I used the wireframes to establish navigation, content hierarchy, image placement, calls to action, and the relationship between major sections of each page. I also considered how those elements would need to reorganize for smaller screens rather than simply shrinking the desktop layout.
This stage helped create a consistent framework that could carry across the full website while allowing each page to serve a different purpose.
Visual Direction
The visual design uses a restrained green and neutral palette, botanical photography, generous white space, and simple typography to reflect Fernscape’s connection to nature without making the website feel overly decorative.
Large plant-focused imagery establishes the atmosphere of the brand, while repeated navigation, footer elements, service cards, and calls to action create consistency across the site. The design balances the organic subject matter with a structured layout so that the plants remain the visual focus without competing with the information users need.
Responsive Design
The site was designed to function across desktop and mobile environments. Content was prioritized and reorganized for smaller screens, with navigation and page sections adapting to the available space.
Thinking responsively during the wireframing stage helped me consider not only how the website should look at different sizes, but how users would actually move through the information when the layout changed.
From Design to Code
Fernscape became an important turning point in how I understood web design because I also built the site using Bootstrap, HTML, and CSS.
Working directly with the Bootstrap framework helped me understand the relationship between the visual interface and the structure underneath it. Containers, rows, columns, classes, images, and responsive breakpoints stopped feeling like abstract pieces of code and started connecting directly to the layout decisions I was already making visually.
Instead of seeing design and development as two completely separate processes, I began to understand how the structure of the code supports the visual system on the screen. That understanding has influenced how I approach digital design because I can now think more intentionally about how a layout may eventually need to be constructed and adapted.
Outcome
The final website includes responsive Home, About, Services, and Contact experiences supported by a consistent visual system and clear user pathways. The project demonstrates the full progression from early information organization and wireframing through visual design and front-end implementation.
More importantly, Fernscape changed the way I think about designing for the web. Building the interface myself gave me a practical understanding of how visual decisions translate into working page structures. While my focus remains design rather than front-end development, that knowledge allows me to approach digital projects with a stronger understanding of both the experience I am designing and the structure required to make it work.