NavBar

Graphic Design

Overview

The way our project is conveyed on our wiki at the end of the year is very important. The page needs to be able to be read and understood by a range of audiences from experienced iGEMers, scientists, and those who are new to iGEM. That is why we spent some of our project time researching how to make an effective and inclusive webpage.

This year, our wiki coding team was beginners. Most of the elements seen on our wiki are built from the template code of w3school.com. This coding learning website was a great help to us as it explained what elements and syntax did in the end.

With this write-up we hope to encourage future teams to think critically about all of their decisions, and to help new webpage coders learn from our findings.

Design Elements

Typography

We chose merriwether and open-sans because it is easy to read in English as well as other languages when translated. We also focused on layering the fonts so the major headings stood out, along with the minor headings to break up our text.

Header 1-open sans bold 2.5em

Header 2-open sans bold 1.75em

Header 3-open sans bold 1em

Header 4-open sans 1em

Button-open sans (variable color)

Paragraph-roboto .8em

List-roboto .8em

Color Schemes

We chose our wiki colors based on the colors of the awareness ribbon for sepsis: red and black¹. We made an extra effort to ensure no two color shades were too similar so that the page remained legible and easy to read. To determine this we used the extension: WAVE ². Which allowed us to break down a webpage and point out areas we should address based on the Web Content Accessibility Guidelines (WCAG).

Base Colors
#e0e0e0	#bb0000	#000000
#ffeaae	#6ebbab	#694f87

Logos

We have kept our team logo from 2020 which incorporates our school’s mascot: buckeyes along with their leaves. We also included a script Ohio which our school’s marching band is famous for forming at the beginning of every football game.

We created a new logo for our project this year to provide an introduction into our project in a simple image. From this logo audiences can understand that we are working with phages that target bacteria.

Accessibility

Synthetic biology is applicable to everyone and we wanted to do our best to ensure our wiki was accessible to more than the majority. We included aspects such as screen adaptability so the webpage can be read on any device and we made sure our color shades were legible.

Navigability

We followed the 3 click rule to allow information to be easily found. We also had our wiki page follow a linear path for those that wanted to make sure they got to enjoy and learn about all aspects of our project.

Graphics

Most of our graphics were hand drawn using Procreate. Due to our limited coding knowledge, we found it easiest to make the home page as a set of continuous images. We also wanted the text to be clear and able to be copied, so we put an overlay of text in the center of each image.

Wiki Coding Tips

As our wiki coding team was new at designing a webpage, we followed the w3schools ³ tutorials and often started our coding elements by changing the code provided in the try-it-yourself function.

Here is an example of how we built our navigation bar. We started with the How to: Dropdown NavBar try-it-yourself tutorial and gradually added in elements such as screen size responsive, animated dropdown button, image logo home button, and colors to fit our color scheme.

Figure 1. Provided template from w3schools.

Figure 2. Changed color, changed all buttons to dropdown menus, and added our sample text

Figure 3. Made the page responsive on small screens, added a logo home button, and animated the dropdown button

Weird Margins

We struggled with getting the margins to fit the page and found the navigation bar naturally had a margin of 20px. Which can be fixed by including .navbar {margin-bottom: 0;} or .content {margin-top: -20px;} to either the navbar template page or the page that has the margin.

CSS Styling Not Working

Use !important in the style sheet like: background-color: #e0e0e0 !important; when you think your styles are being overridden.

Teamwork is essential!

We discovered the MichiganState was also new at wiki design coding so we created a slack channel where we can communicate and ask quick questions to limit the time searching for a solution. During the symposium hosted by Wright State, we also discovered they were new at coding so Wright State, and Virginia teams joined!