Effective communication is the key to successful representation of one's work to other people. In particular, graphic design is crucial for clear communication and is a powerful tool to increase the usability of the website for people with diverse abilities. Hence, suitable visualisation approaches are vital for explaining complex concepts and methodologies, since it is easier for the reader to grasp main ideas.

We were inspired by bold, experimental and almost minimalistic websites in which every detail is intentional and functional. Our main priority was navigability, legibility and good user experience without losing the joy of experimenting with the web design for the Wiki page.

To establish the project's personality, immerse users in the experience and make it more memorable, we outlined key points that we wanted to communicate with our project. In addition, it is easier to define and execute a cohesive visual identity, in turn, users are more likely to remember the project.

The text represents around 90% of all the information on the web. Typography is crucial to amplify the language, it’s like the clothing for words as it changes how the user interprets and comprehends written information.

To establish our project identity and clearly communicate scientific concepts, we chose a combination of sans serif fonts - Montserrat and Lato.

To reflect our project’s brand style and apply colour to the Wiki page in a meaningful way, we carefully designed our colour palette for light and dark themes (Fig. 1). Also, we applied the same colour scheme for our software “onFlow” and human practices dedicated “The 6th SynBio Sense” websites.

Figure 1. Our team's brand colour palette and it's light & dark themes

As colour can communicate tone and critical information, we chose black and white as background colours to convey sophistication and simplicity. For the primary colour, we picked two shades of blue, which indicates the water theme. From the psychological aspect, people associated blue with reliability and serenity. Yellow was chosen as the accent shade, which represents one of the main subjects of the project - yellow Flavobacteria. Also, the yellow colour is attention grabbing, optimistic and evokes creativity—ideal combination for our project identity.

Logo is the foundation of the brand identity and sets the tone for the story you are trying to tell with your project (Fig. 2). We paid a lot of attention to details while creating the logo. For example, we made it responsive to different screen sizes and created positive as well as negative versions of the logo for the printing, scanning purposes and guarantees its visibility on any background (Fig. 3). In addition, the logo was designed with the Golden Ratio principle to achieve harmonious and balanced feel(Fig. 4)1.

Figure 2. The meaning behind the three main parts of the logo

Figure 3. Responsiveness of the logo for different screen sizes as well as positive and negative versions of the logo

Figure 4. Scheme of using the Golden Ratio to design fish visualisation for our logo

We paid great attention to creating informative animations, which illustrate the main ideas of our project. In fact, motion graphics maintain the reader's focus, it provides deeper meaning and depicts more accurate information with coherent transitions and dynamic elements (Fig. 5). The animations were created by using Adobe Illustrator and After Effects software.

Figure 5. An example of animation, created for the Design page of our Wiki

To enhance the usability of our Wiki page and make it more enjoyable to a wider range of audience, we realized that colour could be a good starting point for creating a more accessible web as it ensures text legibility and distinguishes important elements in the design.

According to the Web Content Accessibility Guidelines (WCAG)2, sufficient colour contrast helps users to see and interact with the right elements of the web. WCAG 2.0 level AA require contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Fig. 6)

Figure 6. Evaluations of WCAG 2.0 level AA contrast ratio requirements for different text color schemes

We also took into consideration how to accurately convey information for colourblind people. Colour Universal Design (CUD) system, which was developed for thoughtful use of colour to ensure that colourblind people are not at the disadvantage, while using the web (Fig. 7). This is also known as the “colour barrier-free” approach3.

Figure 7. A comparison of the vision between colourblind people who have deuteranopia and people with common-type vision

Therefore, we soft-proofed our colour scheme and saw that, indeed, blue and yellow shades were a good choice for Wiki page design and other websites (Fig. 8).

Figure 8. A – original colour palette. Two types of colorblindness: B – protanopia, C – deuteranopia.

Navigation is the cornerstone of web usability. Having good navigability allows users to better orient themselves on the website and quickly find information. Understanding psychology behind how humans interact with products or services helps to create an efficient website.

For our design, we applied Hick’s law, which states that the more choices one has, the longer it takes to make a decision. Also, Hick’s law effectiveness was proven in the design of the software menu, control display and content layout 4. Limiting options for the users help them efficiently navigate throughout the page.

We put into practices this law by breaking up information into separate graphic components, content containers with only essential information (Fig. 9). It includes creating sub-navigation or in other words index with clear categorization (Fig. 10).

Figure 9. Main Wiki navigation divided into two components to separate large chunks of information

Figure 10. Pages with complex structure have either a special index for quickly finding information or call-to-action buttons which filter information

To improve the transparency of what is going on in the page and predictability of the quantity of the information, we incorporated visual cues to indicate the progress while scrolling throughout the Wiki page (Fig. 11). Also, we noticed that with some graphic elements, people did not interact, thus, we included arrows with text cues.

Figure 11. Visual cues improves discoverability of the unusual features in the web and informs the user about their progress

Lastly, we added navigation options in the footer of the Wiki page to find the content’s structure and contact information.

An increasing number of people use mobile devices to surf the web, thus, it is important to design a website, which is responsive or in other words expands or contracts to fit the user's screen. The responsive design adjusts the content, navigation and graphic components, in return, it makes the experience much more smooth and it is easier to navigate through the Wiki page without scrolling horizontally or pinching the screen to see written information on smaller screens for example.

Keeping in mind desktop, tablet, mobile device and other screen sizes in between, we optimized the hierarchy of the pages, making sure that the content would resize properly and key navigation buttons were easily accessible (Fig. 12).

Figure 12. Responsive team page design