TFG Website
For my master’s program, I participated in the “Tun-Forschen-Gründen” (TFG) course, which offers three tracks: project implementation, research, or innovation. I selected the “Tun” (Doing) track, where my responsibility was to design and build a website for a fellow student’s master’s project. The work included planning the site structure, creating detailed page designs, and implementing the website using a CMS system.
Technologies
Figma · WordPress · Elementor Theme Builder
Project Type
UI/UX Design, Web Design, CMS
Duration
April 2024 – June 2024
(3 months)
Overview & scope
TFG, which stands for “Tun-Forschen-Gründen,” is a master’s course offering three tracks: project implementation, research, or innovation. I selected the “Tun” (Doing) track, where my task was to design and implement a website for a fellow student’s master’s project. The scope of the project encompassed planning the site’s structure, designing layouts for all pages, and developing a fully functional website using a CMS system.
Since the master’s project is still in progress, the website currently uses placeholder text and images, which will be updated upon completion. The project focused on creating a flexible and scalable structure, ensuring that the design and layout could accommodate future content while maintaining a cohesive visual identity. Figma was used to prototype the interface and screen designs, providing a clear blueprint before development.
Key features
- Full-page designs and layouts for all required pages
- Clear information architecture to guide navigation and content hierarchy
- CMS integration via WordPress with Elementor for easy content updates
- Placeholder content implementation, ready for future project material
- Responsive design for desktop, tablet, and mobile devices
- Interactive elements such as buttons, links, and navigation menus
- Consistent visual style and design language throughout the site
More Details
The TFG website project combined design and implementation skills in a practical context. Using Figma, I created detailed screen designs for each page, defining typography, color schemes, and layout grids to ensure a cohesive look and feel. These designs served as a guide during implementation, where WordPress and the Elementor theme builder allowed rapid development and adjustment of the layout.
Placeholder content was used strategically to visualize page flow and interactions while awaiting the final project materials. Emphasis was placed on creating responsive layouts, user-friendly navigation, and modular sections that can easily accommodate new content in the future. The project highlights a complete design-to-deployment workflow, demonstrating both technical and creative competencies.
Mockups & Insights
Learnings
Although I had previous experience with WordPress, this project was my first time working extensively with the Elementor theme builder. Using the free version presented some limitations, which required creative problem-solving to implement the desired layouts and interactive elements while maintaining a consistent design.
This was also my first experience designing a project portfolio website for another student, which involved considering the user perspective, organizing content effectively, and creating a structure that could scale with future updates. Overall, the project enhanced my ability to translate a client’s concept into a functional, visually coherent website, while navigating technical constraints and balancing usability and responsiveness.
Interested in
further information?
vanessahofer41@gmail.com
068181647884