Site Gen Theme Design
Site Gen Theme Design
Site Gen Theme Design
Designed a responsive theme for for a site generator that is dedicated for students and professor to utilize as their own personal website.
Project Overview
Project Overview
Project Description:
Design a clean, modern, and responsive theme for the site generator that can be used to create basic personal websites for students and professors.
Design a clean, modern, and responsive theme for the site generator that can be used to create basic personal websites for students and professors.
Design a clean, modern, and responsive theme for the site generator that can be used to create basic personal websites for students and professors.
Timeline
Dec 2024 - Feb 2025
Team Members
Manuela Mensah
Role
UI/UX Designer
User Experience Researcher
Tools
Figma
Project Overview
What was our main focus?
For this assignment I focused on designing a visually appealing and easy-to-use theme to create a professional personal website. For NeverEnding Solutions we wanted the site to be created in a simple and easy to use manner. I was given a list of tasks on what to focus on in regards to developing the website.
For this assignment I focused on designing a visually appealing and easy-to-use theme to create a professional personal website. For NeverEnding Solutions we wanted the site to be created in a simple and easy to use manner. I was given a list of tasks on what to focus on in regards to developing the website.
Achieving Success for NES
Achieving Success for NES
Personal/Professional Site Gen Design
If you'd like to navigate to a specific section, please click one of the boxes below:
If you'd like to navigate to a specific section, please click one of the boxes below:
Research
Research
Main Focus & Criteria
Main Focus & Criteria
We decided to include a hero section with a large header image and a brief bio, an about section with a detailed bio and a professional headshot alongside a contact section that included an email, phone number, and social media links.
We decided to include a hero section with a large header image and a brief bio, an about section with a detailed bio and a professional headshot alongside a contact section that included an email, phone number, and social media links.
We decided to include a hero section with a large header image and a brief bio, an about section with a detailed bio and a professional headshot alongside a contact section that included an email, phone number, and social media links.
Layout:
Hero section — Large header image and a brief bio.
About section — detailed bio with a headshot.
Contact section
Typography:
Clear and readable font for body text.
Use a bold and distinctive font for headings.
Color Palette:
Visually appealing and professional Color Palette
Limited number of colors to maintain a clean and consistent look.
Responsiveness:
Ensure the theme is responsive and looks great on all devices, from desktop to mobile
Layout:
Hero section — Large header image and a brief bio.
About section — detailed bio with a headshot.
Contact section
Typography:
Clear and readable font for body text.
Use a bold and distinctive font for headings.
Color Palette:
Visually appealing and professional Color Palette
Limited number of colors to maintain a clean and consistent look.
Responsiveness:
Ensure the theme is responsive and looks great on all devices, from desktop to mobile
Layout:
Hero section — Large header image and a brief bio.
About section — detailed bio with a headshot.
Contact section
Typography:
Clear and readable font for body text.
Use a bold and distinctive font for headings.
Color Palette:
Visually appealing and professional Color Palette
Limited number of colors to maintain a clean and consistent look.
Responsiveness:
Ensure the theme is responsive and looks great on all devices, from desktop to mobile
Customization Options:
Provide basic customization options, such as color schemes and font choices.
Accessibility:
Design the theme to be accessible to users with disabilities.
Performance:
Optimize the theme for performance to ensure fast loading times.
SEO:
Consider SEO best practices when designing the theme.
Search engine optimization
Customization Options:
Provide basic customization options, such as color schemes and font choices.
Accessibility:
Design the theme to be accessible to users with disabilities.
Performance:
Optimize the theme for performance to ensure fast loading times.
SEO:
Consider SEO best practices when designing the theme.
Search engine optimization
Customization Options:
Provide basic customization options, such as color schemes and font choices.
Accessibility:
Design the theme to be accessible to users with disabilities.
Performance:
Optimize the theme for performance to ensure fast loading times.
SEO:
Consider SEO best practices when designing the theme.
Search engine optimization
Research
With keeping these notes in mind I began researching different design ideas to get a better feel for how the website should look.
Design process
Design process
Grayscale Iterations - I
Grayscale Iterations - I
After researching existing designs and analyzing user preferences, I began creating multiple grayscale iterations, consistently seeking feedback from the team to refine the designs.
With a clear vision in mind from my research, I explored various design possibilities based on what users had previously engaged with. We ultimately decided to focus on a one-page layout, as the free design would offer a more seamless experience for users who prefer all their content in a single, easily accessible space.
Certain iterations weren't chosen because it didn't display enough information when turned into a hi-fidelity design and we wanted the theme design to be simple and efficient for users.
After researching existing designs and analyzing user preferences, I began creating multiple grayscale iterations, consistently seeking feedback from the team to refine the designs.
With a clear vision in mind from my research, I explored various design possibilities based on what users had previously engaged with. We ultimately decided to focus on a one-page layout, as the free design would offer a more seamless experience for users who prefer all their content in a single, easily accessible space.
Certain iterations weren't chosen because it didn't display enough information when turned into a hi-fidelity design and we wanted the theme design to be simple and efficient for users.
After researching existing designs and analyzing user preferences, I began creating multiple grayscale iterations, consistently seeking feedback from the team to refine the designs.
With a clear vision in mind from my research, I explored various design possibilities based on what users had previously engaged with. We ultimately decided to focus on a one-page layout, as the free design would offer a more seamless experience for users who prefer all their content in a single, easily accessible space.
Certain iterations weren't chosen because it didn't display enough information when turned into a hi-fidelity design and we wanted the theme design to be simple and efficient for users.
Design process
Design process
Design process
Finalized Grayscale Iteration
Finalized Grayscale Iteration
The finalized grayscale iterations were created to demonstrate the intended look and feel of the site generator. I focused on ensuring it highlighted key information that would be useful for users navigating their personal sites.
The finalized grayscale iterations were created to demonstrate the intended look and feel of the site generator. I focused on ensuring it highlighted key information that would be useful for users navigating their personal sites.
The finalized grayscale iterations were created to demonstrate the intended look and feel of the site generator. I focused on ensuring it highlighted key information that would be useful for users navigating their personal sites.
Usability Testing
Usability Testing
Usability Testing
Conducting User Testing
Conducting User Testing
To ensure users needs were met I conducted user testing and asked the students various questions around what they would look for in a personal website and if there was anything missing from the one I created.
Before the finalized grayscale iteration the website didn't include a experience and skill section, this was added shortly after iterations of user testing and feedback from the team.
To ensure users needs were met I conducted user testing and asked the students various questions around what they would look for in a personal website and if there was anything missing from the one I created.
Before the finalized grayscale iteration the website didn't include a experience and skill section, this was added shortly after iterations of user testing and feedback from the team.
To ensure users needs were met I conducted user testing and asked the students various questions around what they would look for in a personal website and if there was anything missing from the one I created.
Before the finalized grayscale iteration the website didn't include a experience and skill section, this was added shortly after iterations of user testing and feedback from the team.
Add a section for work experience to showcase their previous experience
The choice of typography goes well and is very simple to use, it's not overwhelming to the user.
The blue boxes make me think I can contact the user will I be able to do so?
Design process
Design process
Hi-Fidelity Designs
Design Process
Design Process
Design Process
Component Designs
Component Designs
Reflection - Key Takeaways
Reflection - Key Takeaways
Reflection - Key Takeaways
Reflection
Reflection
Reflection
When designing this project I was able to learn a lot more about creating responsive designs. I've always been so used to creating different elements and implementing them into a drag-and-drop web application that this project was able to provide me with new skills and knowledge. As of right now I'm still looking to better my design skills and understand the fundamentals when designing websites.
When designing this project I was able to learn a lot more about creating responsive designs. I've always been so used to creating different elements and implementing them into a drag-and-drop web application that this project was able to provide me with new skills and knowledge. As of right now I'm still looking to better my design skills and understand the fundamentals when designing websites.
When designing this project I was able to learn a lot more about creating responsive designs. I've always been so used to creating different elements and implementing them into a drag-and-drop web application that this project was able to provide me with new skills and knowledge. As of right now I'm still looking to better my design skills and understand the fundamentals when designing websites.
Let’s Connect!
Always open to connect & if you like any of these projects, please don't hesitate to reach out!
© 2025 Manuela Mensah
Let’s Connect!
Always open to connect & if you like any of these projects, please don't hesitate to reach out!
© 2025 Manuela Mensah
Let’s Connect!
Always open to connect & if you like any of these projects, please don't hesitate to reach out!
© 2025 Manuela Mensah
Let’s Connect!
Always open to connect & if you like any of these projects, please don't hesitate to reach out!
© 2025 Manuela Mensah