Process Post #6 – Design

One website that comes to mind when I think about good graphic design is Brilliant. When I first visited the site, I was greeted with a sleek layout and cohesive design that definitely effected my choice to create an account.

Brilliant is a website built around educating people through visual puzzles, games, and frequent small quizzes to test your understanding. They often employ interesting thought experiments and realistic scenarios to make each lesson more applicable outside of the site. Having a recognizable and straightforward design is vital for practical websites like Brilliant, as many people visit this site on a regular basis. 

Besides the interesting and fun educational content, I am also enticed by the thoughtful UX (user experience) design. The designers of Brilliant picked a modern, readable font for the majority of their text while utilizing a bolder all-caps typeface for the name and some titles.

In terms of accessibility, there are dark outlines or shadows when selecting a button, and lightened colours when an option is unable to be clicked on, which all add to the ease of use and clarity. I appreciate that my dark-mode extension works well with Brilliant (as many websites use improper transparency settings) but adding a dark mode into settings would provide a more elegant solution to this issue.

Additionally, they use a light-medium grey for background text, which does a good job at setting a visual hierarchy but could make accessibility a problem as it almost blends into the background.

The courses are organized into broad subjects with different colour palettes, like blue for math and yellow for science (and even both colours in the case of ‘knowledge and uncertainty’ since it stretches across branches). The courses are further sorted by units such as foundational versus applied computer science, as well as courses made in collaboration with third-party authors.

Each course and individual lesson comes with vector illustrations relating to the subject, while still keeping to that limited palette and bringing out some vibrancy and contrast from the simple background. Some of my favourites include a reference to the Monty Hall Problem in Perplexing Probability, directional commands making up a snake for Programming with Python, and a fractal for Complex Numbers.

My favourite lessons are probably the Logic and Electricity and Magnetism units, which I can clearly tell from the bar underneath each course denoting my progress towards completion. Despite my unwillingness to spend money on subscription-based online services, I still visit Brilliant regularly to check out their daily puzzles and look for new courses to try out.

On that note, their daily problems are well-designed, with a link to the relevant course on the sidebar, a read more in case you don’t want to scroll too much to reach the actual question, and even a visual difficulty scale! If I could add one suggestion it would be to make the aforementioned sidebar sticky, since there is already plenty of white space and no clear downsides to letting the calendar and link scroll with the user.

Although I peruse the educational content on sites like KhanAcademy and Codecademy more often, I still prefer the streamlined look of Brilliant over most other websites in this category. The designers clearly put a lot of effort into making a comfortable and responsive website! 

☆.