In advance: Yes, this page is very simple. I wanted to keep it that way to show that I can make a simple and clean website. I can make it more complex if needed as I described on the application Google Doc.
I reviewed the 2023 iGEM wiki for DNHS San Diego. What I liked most about this wiki was its clean and modern design. The color scheme and text was consistent throughout, which gave it a professional look. Our team can implement similar ideas by maintaining a consistent color palette and using engaging visuals. However, I feel that the website wasn't very user friendly, but some people might disagree with that. The reason I say this is because having the nav bar on the side means that every time the viewer scrolls down, they are forced away from the nav bar which makes them have to scroll back up to navigate to a different page. I think that having the nav bar at the top of the page would be more user friendly, or having a small sticky nav bar that follows the user as they scroll on the page.
Some more improvements that could be made include the use of animations to make the page more interactive and engaging. For example, fade-in effects can be applied to elements as they come into view, creating a smooth and dynamic browsing experience. Additionally, the use of hover effects on links and buttons can provide visual feedback to users, making the site more intuitive to navigate.
I don't know if this fits in with the iGEM competition ideal, but having maybe small games or quizzes that are related to the team's project could be a fun and interactive way to engage visitors. This could also help educate them about the team's work and the broader field of synthetic biology.
One idea that I had was that having a small section on the homepage that shows the team's progress in the competition would be a nice touch. This could include a progress bar or a timeline of milestones achieved, giving visitors a quick overview of the team's journey.
To tailor the design to our team, we can use our colors (102c61, 204f31, 9fa376) and fonts (Becka Script Plain and Collegiate Inside). I got these colors and fonts all from Del Norte's official website. Below is an example of HTML, JavaScript, and CSS for a page designed with these elements. I found this tool recently while doing web design and absolutely loved it. Coolors is a great tool for finding color palettes that work well together. I think that this tool could be very useful for our team when designing the wiki.
Welcome to our iGEM project page. Here you will find all the information about our project and team.
We are a team of dedicated students from Del Norte High School, San Diego, participating in the iGEM competition.
Our project focuses on innovative solutions in synthetic biology to address real-world problems.
Where Innovation Meets Creativity
Team formation and initial brainstorming sessions.
Project proposal finalized and submitted.
Lab work begins with great results.
Final iGEM competition review.
Team Leader
Lab Specialist
Web Developer
Data Analyst