Design Choices
In designing the website, I focused on simplicity and clarity. The beige background color was chosen to ensure the best possible contrast, based on contrast comparison websites. I applied Gestalt principles like proximity and similarity to group related content and ensure that the website is visually cohesive. The header and footer are consistently styled as well.
The layout uses Flexbox and CSS Grid to ensure responsiveness. Flexbox was particularly helpful for the header and image container, while CSS Grid allowed for an efficient and flexible layout in the main content section. The use of media queries ensured the design adapts well to different screen sizes, from mobile phones to larger desktop screens.
Technology Choices
I chose to use flexbox technology due to its simplicity and the amount of customization and control it provided. It also provides more flexibility.
Challenges Faced
The main challenge I experienced was coming up with places to apply the techniques we learned in class within this website and its subject matter.
Reflection on User Experience (UX)
The design prioritizes easy navigation and clear visual hierarchy. The use of Flexbox ensures the layout adjusts to different screen sizes, while the use of consistent colors and typography makes it easy for users to focus on the content. The images are used to break up text and make the page visually appealing without overwhelming the user. Overall, I believe the user experience is smooth, especially with the responsive design that adapts well to both desktop and mobile users.
Future Improvements
One area for improvement would be to add more interactivity, such as a lightbox gallery for images or a smooth scrolling effect when navigating between sections. Additionally, I could add more dynamic elements.
Conclusion
In conclusion, I’m happy with how the design turned out and how the website functions across various devices. The use of Flexbox and CSS Grid for the layout was helpful, allowing for flexibility while keeping the design clean and easy to use. While there were challenges, particularly with responsiveness, I was able to find solutions that improved the overall experience. I look forward to further improving the design in future iterations by adding more dynamic elements and enhancing accessibility.